Jump to content

Generate infinite falling objects


Recommended Posts

Hello everyone,


I'm very new to both Phaser and JS – this is actually my first post in here.


I'm currently trying to build a small game that implies many things I'm yet unfamiliar with.


The gist of it: the player's character is at the bottom of the screen and can only move on the X axis. He has to dodge incoming falling objects and catch the ones which are bonuses. The player controls the character by moving their finger on the screen.


I've got two main questions for now:


1) How should I generate random falling objects infinitely optimally?


I followed the great tutorial with the basics and was able to come up with this:


function preload() {game.load.image('ground', 'img/bg.jpg');game.load.image('obstacle0', 'img/cactus1.png');game.load.image('obstacle1', 'img/cactus2.png');game.load.image('character', 'img/character.png');}var ground;var player;var obstacles;var cursors;function create() {ground = game.add.tileSprite(0, 0, 320, gameHeight, 'ground');player = game.add.sprite(32, game.world.height - 80, 'willy');player.immovable = true;cursors = game.input.keyboard.createCursorKeys();        obstacles = game.add.group();        for (var i = 0; i < 5; i++)    {        var obstacle = obstacles.create((Math.random()*300), i*(Math.random()*60), 'obstacle' + Math.round(Math.random() * 1));        obstacle.body.gravity.y = 5;        obstacle.body.bounce.y = 0.7 + Math.random() * 0.2;    }}function update() {ground.tilePosition.y += 3;player.body.velocity.x = 0;    if (cursors.left.isDown){        player.body.velocity.x = -300;        player.animations.play('running');    }    else if (cursors.right.isDown){        player.body.velocity.x = 300;        player.animations.play('running');    }    else {player.animations.stop();        player.frame = 1;    }            obstacles.forEach(checkOffScreen, false);}function checkOffScreen(obstacle) {        if (obstacle.y > game.stage.height)        {            obstacle.x = Math.random() * 300;            obstacle.y = -32;            obstacle.velocity.x = 0;            obstacle.velocity.y = 100 + Math.random() * 150;        }}

I supposed the most optimal way to have objects fall infinitely wouldn't be to kill them once they're offscreen but rather to reposition them. That's why I made the checkOffScreen function, based on some documentation I found on the web. But it just doesn't work. Also, I'd like the objects to be generated one after the other, not all at once like it does for the moment



2) How to move the character on touchmove?

Right now, I made the character move when the player presses the left or right key. I read that it's possible to make it so that the character would move according to the motion of the player's finger, but didn't find the function that would make it happen. I found the onTouchMove event, but I don't know how to implement it.



Thank you all very much! I've never built any game or developed anything to intense, and I'm loving Phaser so far! :-)


Link to comment
Share on other sites

To make your objects fall one after the other you need a timer to release them by. You could code one or try using the Timer class to release them in a steady stream.


To kill / reposition them you can check the game height (not stage height) against the y coordinate.


To move left / right personally I would make it so that a touch on the left of the screen moved left, and a touch on the right moved right. So split the screen in half, then just do:

if (game.input.activePointer.x < game.width / 2) { ... move left...
Link to comment
Share on other sites

Please take a look at this example : http://examples.phaser.io/_site/view_full.html?d=games&f=invaders.js&t=invaders

bullets are to be "killed" when out of bounds :

enemyBullets.setAll('outOfBoundsKill', true);

Killing objects don't destroy them. It just keeps them in the pool to be recycled later.

When bullets are needed again they are just revived :

enemyBullet = enemyBullets.getFirstExists(false);enemyBullet.reset(shooter.body.x, shooter.body.y);
Link to comment
Share on other sites

  • 1 month later...



i have just  a similiar problem after migrating to phaser 2.0.2 from a project i started with phaser 1.6.

Goal is, to move a sprite from right to left and when it moves out of sight, just reposition it on the right again.


The following code works with phaser 1.6 like expected and does not with 2.0.2:

var game = new Phaser.Game(1024, 512, Phaser.AUTO, '', { preload: preload, create: create, update: update});// testsprite objectvar testsprite = null;// Output linevar debugline;function preload() {    // load some testsprite graphics    game.load.image('testpng', 'assets/A.png');}function create() {    // start physics (comment out this line for 1.6)    game.physics.startSystem(Phaser.Physics.ARCADE);    // add a testsprite to show the effect    testsprite = game.add.sprite(game.world.width + 128, game.world.height-game.world.height/2, 'testpng');    // enable the arcade physics (comment out this line for 1.6)    game.physics.enable(testsprite, Phaser.Physics.ARCADE);    // Give the sprite a velocity to move from right to left    testsprite.body.velocity.x= (-200*1.5);    // Add a line of text to see where the sprite should be    var style = { font: "24px Arial", fill: "#dd5544", align: "center" };    debugline = game.add.text(10,game.world.height-25, "debugline", style);    debugline.visible = true;}function update() {    // Reposition sprite when it moves out of sight    if (testsprite.position.x < -(testsprite.width*2.5)) {        testsprite.x = game.world.width+128;    }    debugline.setText("testsprite x: " + testsprite.position.x +                       ", testsprite y: " + testsprite.position.y +                       ", width: " + testsprite.width +                       ", velocity: " + testsprite.body.velocity.x);}

With Phaser 2.0.2 the sprite just moves one time from right to left and then ... nothing happens any more.

The DebugLine shows, that the sprite will get repositioned but it doesn't move any more ?!


Did i miss something for Phaser 2.0.2 to start the moving process again?




Link to comment
Share on other sites


if i want to move something in 2.0 i do it in the update function.. 


just write your line there and it should work

testsprite.body.velocity.x= (-200*1.5);


Thx for the Reply :)


But that doesn't work either :(

      function update() {    // Reposition sprite when it moves out of sight    if (testsprite.position.x < -(testsprite.width*2.5)) {        testsprite.x = game.world.width-128;        // Retrigger velocity here ?!        testsprite.body.velocity.x= (-200*1.5);    }    // .. or here ?!    // testsprite.body.velocity.x= (-200*1.5);    debugline.setText("testsprite x: " + testsprite.position.x +                       ", testsprite y: " + testsprite.position.y +                       ", width: " + testsprite.width +                       ", velocity: " + testsprite.body.velocity.x);}

Tried in the two places above, but the sprite ends up hanging somewhere :(

Link to comment
Share on other sites


  • Recently Browsing   0 members

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