Phempt

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

Share this post


Link to post
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.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 :)

Share this post


Link to post
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 ^^

Share this post


Link to post
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).

 

 

 

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

Share this post


Link to post
Share on other sites

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.

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

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.