Vertical scrolling game with camera

[Phempt]

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

[Ninjadoodle]

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.addTo(mg);

        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);

        camera.follow(player);

 

Hope this helps!

 

I haven't played with platforming mechanics yet, so I'll let someone else answer the platform question

[Phempt]

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 ^^

[Phempt]

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).

 

 

 

edit:

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 ^^

[jdnichollsc]

My example: http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/

[goide]

Camera issue. https://github.com/ekelokorpi/panda.js-engine/issues

 

I think that is not working properly at all at the moment.