Generate infinite falling objects

[RobertS]

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! :-)

 

[rich]

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

[jerome]

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

[sthorin2014]

Hello,

 

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?

 

 

 

[valueerror]

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

[sthorin2014]

 

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

[JP91]

try testsprite.body.x = game.world.width-128;

[sthorin2014]

try testsprite.body.x = game.world.width-128;

 

Thx, that works ...