Scrolling map concept?

[ZRT]

Hey guys,

 

I'm curious about this concept. Let me reference an example first , http://khele.in/pappu-pakia/ .

 

So, what's the best approach in creating a similar game? I assume that the player is actually static, also the background, it's just that enemies that move right-to-left creating that "moving" effect, each spawning to the right side. Is there a Phaser example for this? Can anyone please share some advice or ideas.

 

Thank you.

[jpdev]

You also could just place all your sprites at fixed positions, then only move the player sprite.

Since you want to follow the player sprite through the level, you just set the camera to follow it.

 

You then give the player x velocity of say 200 and the world will move around "you", and you don't have to worry about coordinating stuff.

 

Not exactly your example, but it does scroll the world, by fixing the player to the camera and then move the player:

 

http://janpeter.net/alien/new2/

view-source:http://janpeter.net/alien/new2/

 

Ignore the tilemap stuff there, for you the important stuff is the player sprite and the clouds.

clouds are placed in fixed position, player is moved (when cursor.right is pressed).

 

For your game set no camera-follow style, then the camera will move instantly (and the player will stay at a fixed position from the beginning).

 

player = game.add.sprite(100, 100, 'player');

 

game.camera.follow(player);

game.add.sprite(50, 50, 'cloud');

 

And in update:

 

player.body.velocity.x = 250;

 

 

Hope that helps! Greetings,

JP

[ZRT]

Thanks. The thing is I want to avoid looong tileset map, so the idea is for the obstacles to be (randomly) spawned on the right and move towards the player (left), creating a sort of illusion that the player actually moves. So that way, the game will move on until the player hits something.

[ZRT]

Made a small example to test if this is possible. It's an ugly code, the positions of the sprites are hardcoded, but still that one sprite (which is a kinda vertical rectangle) moves right-to-left. One thing I couldn't get to work here, and that is the adding of multiple instances of that sprite. I tried to add them into a group like in this example to spawn randomly, but unsucessfully. Any tips on this will be usefull.

 

Here's the full code of what I have at the moment. The player currently doesn't fall out of bounds for testing purposes.

var game = new Phaser.Game(800, 350, Phaser.CANVAS, '', {preload: preload, create: create, update: update});var p;var cursors;function preload() {  game.load.image('player','images/player.png');  game.load.image('hill', 'images/hill_long.png');}function create () {  // create the player sprite  p = game.add.sprite(0, 100, 'player');  p.body.gravity.y = 7;  p.body.collideWorldBounds = true;  // create obstacle sprite  h = game.add.sprite(600, 220, 'hill');  h.body.velocity.x = -200;  // create keyboard inputs  cursors = game.input.keyboard.createCursorKeys();}function update () {  // add collision  game.physics.collide(p, h);  p.body.velocity.x = 0;  if (cursors.up.isDown) {    console.log("up");    p.body.velocity.y = -150;  }  else if (cursors.down.isDown) {    console.log("down");    p.body.velocity.y = 150;  }}

Thanks!

[totor]

the source code of the game you are talking about is available on github since it won the 2012 github contest.

[Mike]

And since the link in the footer of the web page is broken...

 

Here it is: https://github.com/mindd-it/pappu-pakia

[ZRT]

Cool. I didn't know that. Thanks. I'm trying to achieve almost the same thing with Phaser, so any tips are welcomed. The pure JS/Canvas here doesn't give out much for what I need. I think there can be simpler solution with Phaser.