Jump to content

Vertical scrolling game with camera


Recommended Posts

Hi guys, I've two questions about PandaJS and vertical scroll system.


1) can someone explain how to make a sprite that going up is followed by the camera? A typical vertical scroll system.

I saw this page: http://www.pandajs.net/docs/classes/game.Camera.html but I don't understand how to use these methods.



2) how to make a sprite jump through a platform while he's going from down to top, but stop when he touch the platform during the fall ?

Reading the documentation and looking at demos' sources, I saw that I need to use this code to set the gravity (so my sprite fall down after the jump):

this.world = new game.World({gravity: [0, 9]});

I'm really confused, any help will be appreciated, thank you in advance ^_^

Link to comment
Share on other sites

Hi Phempt


To use the camera you have to add it to the scene.


I made a container called mg (middle ground). I also have bg and fg, but I only want mg to scroll here, so I add the camera to the mg container.


init: function() {

        var camera = new game.Camera();

        camera.acceleration = 2;
        camera.minX = 0;
        camera.minY = 0;
        camera.maxX = 1280;
        camera.maxY = 0;
        // You can now set the cameras starting position and make it follow your player
        camera.setPosition(240, 160);
Hope this helps!
I haven't played with platforming mechanics yet, so I'll let someone else answer the platform question :)
Link to comment
Share on other sites

It works, thank you Ninjadoodle.


Now I need to find an answer for my second question, cause I tried to add the gravity to MG layer without any good result. The following code works, with some problems, for example:


- by touching-down the move icon (soundButton in my example), I need to continiously move the player, unfortunately the touchstart seems to move only one time the player. I tried to use ".touchdown" instead ".touchstart" without any good result.


- I created the world, with gravity, but I can't add this gravity to the MG layer.

    initGame: function(){        this.world = new game.World({gravity: [0,9]});                var bg = new game.Container().addTo(game.scene.stage);        bg.position.set(0,0);        this.stage.addChild(bg);              var background = new game.Sprite('elements/gamebackground.png');        bg.addChild(background);                     var mg = new game.Container().addTo(this.stage);        mg.position.set(0,0);        this.stage.addChild(mg);                var bgMG = new game.Sprite('elements/test.png');        bgMG.position.set(0,140);              //this.stage.addChild(player);        mg.addChild(bgMG);                var player = new game.Sprite('elements/buttons/btn_Sound.png');        player.scale.set(0.6,0.6);        player.position.set(10,200);              //this.stage.addChild(player);        mg.addChild(player);              var camera = new game.Camera();        camera.addTo(mg);        camera.acceleration = 6;        camera.minX = 0;        camera.minY = 0;        camera.maxX = 1280;        camera.maxY = 0;         // You can now set the cameras starting position and make it follow your player        camera.setPosition(150, 200);        camera.follow(player);              var soundButton = new game.Sprite('elements/buttons/btn_Sound.png');      soundButton.scale.set(0.6,0.6);      soundButton.anchor.set(-0.1,-0.1);      soundButton.position.x = game.system.width / 1.3;            this.stage.addChild(soundButton);            soundButton.interactive = true;            soundButton.mousedown = soundButton.touchstart = function(){          console.log("MOUSE DOWN!");	      player.position.x = player.position.x + 10;      }          }

Sorry for my newbie questions, thank you in advance ^^

Link to comment
Share on other sites

I tried to use this function to move my player:

      function  moveRight(){          while(movingvariable == 1){	      player.position.x = player.position.x + 1;	      }      }      soundButton.interactive = true;      movingvariable = 0;      soundButton.mousedown = soundButton.touchstart = function(){      console.log(movingvariable);          movingvariable = 1;          console.log(movingvariable);          moveRight();      }            soundButton.mouseup = function(){	      console.log('up');	      movingvariable = 0;      }

but my app crash (also my browser tab get stuck), any suggestion? I also tried to use the update function:

update: function() {        while(movingvariable == 1){	        player.position.x -= 10 * game.system.delta;        }}

with the same result (app crash).





Solved the problem of player move. I used "if" instead "while".

if(movingvariable == 1){player.position.x += 10 * game.system.delta;}

Hoping you can help me with question number 2 and gravity ^^

Link to comment
Share on other sites

  • 8 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...