Problem with onHold?

[lenten1111]

Hi everyone,

 

I'm new in Phaser and start make a flying bird game. Ive already searched for my problem everywhere and read examples, still have no clue. My question about onhold on screen, i dont want people keep tapping on screen to get the bird fly. I want the bird fly when people hold finger on screen, and the bird fall when stop hold screen. Here my code:

 

function create() {
        game.physics.startSystem(Phaser.Physics.ARCADE);
        // When all assets are loaded, go to the 'menu' state
        bird = game.add.sprite(100, 0, 'bird');
        game.physics.enable(bird, Phaser.Physics.ARCADE);
        
        bird.animations.add('bird');
        bird.animations.play('bird', 6, true);
        bird.body.gravity.y = 100;
        
        game.inputEnabled = true;
        game.input.onDown.add(fly, this); // This is Working
        game.input.onHold.add(fly, this); // This is Not Working
}

function fly () {
        bird.body.velocity.y =-10;
}

 

Question here http://www.html5gamedevs.com/topic/1574-gameinputondown-question/ close mine, but i don't know how to fix!

 

Thanks everyone!

[lewster32]

Rather than listening for a hold event, just use the update function to check each frame if the button is held down and if so, set the bird's velocity. Like this:

function update() {  if (game.input.activePointer.isDown) {    fly();  }}

[lenten1111]

Thanks lewster32,

 

If we use it in update function i think we don't need if, but I already tried it, sill not working

 

function create() {
        game.physics.startSystem(Phaser.Physics.ARCADE);
        // When all assets are loaded, go to the 'menu' state
        bird = game.add.sprite(100, 0, 'bird');
        game.physics.enable(bird, Phaser.Physics.ARCADE);
        
        bird.animations.add('bird');
        bird.animations.play('bird', 6, true);
        bird.body.gravity.y = 100;
        
        game.input.addPointer(); // neither add this nor add
}
function update() {
        game.input.activePointer.isDown(fly, this);
}

function fly () {
        bird.body.velocity.y =-10;
}

 

Also use if like you said, stil not working, the bird falling down

[lewster32]

Pointer.isDown is a boolean property, not a method. I've created a jsFiddle to demonstrate how it would work: http://jsfiddle.net/lewster32/u3p5n/

[lenten1111]

Thank you so much lewster32, loved you already

[lewster32]

*blushes*

[lenten1111]

Hi lewster32 and everybody,

 

I'm here again follow question above thats why i don't wanna make another topic, I have problem about speeding up by velocity, here my code:

 

create: function() {

    bird = game.add.sprite(300, 50, 'bird');
    game.physics.arcade.enable(bird);
    bird.body.gravity.setTo(0, 500);
    bird.body.maxVelocity.setTo(250, 500);
    bird.body.collideWorldBounds = true;

 

    flys = game.add.audio('flys');

    rocks = game.add.group();
    rocks.createMultiple(2, 'rock');
    game.time.events.loop(1000, this.createRock, this);

},

createRock: function() {
       rock = game.add.sprite(990 + Math.random() * 400, 30 + Math.random() * 580, 'rock');
       game.physics.arcade.enable(rock);
       rock.outOfBoundsKill = true;
       rock.body.immovable = true;
       rock.body.velocity.x = -100; // Normally rock will fly to left at 100;
       rocks.add(rock);
},

update: function() {    
      if (game.input.activePointer.isDown) {
          this.flyup();
        }
},

flyup: function() {
      bird.body.velocity.y = -170;
      rock.body.velocity.x = -200;  // My problem when I put this here

      flys.play(' ',1,1, true); // Another problem about the sound
},

 

The game hang when click screen. I want the bird fly up, its like the bird fly forward faster thats mean the rock will move faster to the left. I dont know how to fix? .

 

And The flap wings sound play like it keep overlap on and on when hold tap on screen, generate a weird sound. I want it play once and loop when hold tap on screen, the sound of bird fly up. 

 

 

Sorry just learned Phaser about a week! Thanks

[lewster32]

There are all kinds of problems here which will cause you many difficulties:

• Rather than speeding up all rocks, you're only speeding up one rock which may have already flown off the screen. You should probably be using rocks.forEachAlive
• What slows the rocks down again? Gravity pulls the bird back to the ground but the rocks will just continue at their new high speed. You need some way of setting the velocity back to -100 when released.
• Because you're calling play every frame while the button is held, it's playing it repeatedly really fast, and will sound weird; as in the problem above, you need a way to play the sound on a loop the first time the button is pressed, and then stop the sound on release.

The last two issues could be solved by using a flag, like so:

create: function() {    bird = game.add.sprite(300, 50, 'ghs');    game.physics.arcade.enable(ghs);    bird.body.gravity.setTo(0, 500);    bird.body.maxVelocity.setTo(250, 500);    bird.body.collideWorldBounds = true;    // flag to determine if the bird is flying or not    bird.isFlying = false;     flys = game.add.audio('flys');    rocks = game.add.group();    game.time.events.loop(1000, this.createRock, this);},createRock: function() {       // make sure you use 'var rock' here as we don't want a global instance, we want       // to access our rocks directly from the group they're in       var rock = game.add.sprite(990 + Math.random() * 400, 30 + Math.random() * 580, 'rock');       game.physics.arcade.enable(rock);       rock.outOfBoundsKill = true;       rock.body.immovable = true;       rock.body.velocity.x = -100; // Normally rock will fly to left at 100;       rocks.add(rock);},update: function() {          if (game.input.activePointer.isDown) {          this.flyup();      }      // is the bird flying?      if (bird.isFlying) {        // yes, so set the velocity of all of the living rocks to -200        rocks.forEachAlive(function(currentRock) {           currentRock.body.velocity.x = -200;         }      }      else {        // no, so set the velocity of all the living rocks to -100        rocks.forEachAlive(function(currentRock) {           currentRock.body.velocity.x = -100;         }        // if our flys sound is playing, stop it        if (flys.isPlaying) {          flys.stop();        }      }},flyup: function() {      bird.body.velocity.y = -170;      // do the following only once after the player presses the button      if (!bird.isFlying) {        bird.isFlying = true;        flys.play('', 1, 1, true);      }},

I would probably advise against using velocity for the rocks entirely, instead adding a 'scrollSpeed' property which is subtracted from all of the living rocks' positions each frame (and using game.time.elapsed to ensure it's not dependent on framerate) like this:

// This acts as a multiplier for the overall speed - setting it to 2 will double the speed// of everything moving via the method below, setting it to 0.5 will half the speed.game.scrollSpeed = 1;rocks.forEach(function(rock) {  // move the rock left at 100 pixels per second  rock.x -= (100 * (game.time.elapsed / 1000)) * game.scrollSpeed; }// You can even smoothly change the speed of all the rocks using this method by tweening// the scrollSpeed value!game.add.tween(game).to({scrollSpeed: 2}, 2000, null, true);

[lenten1111]

Thanks so much lewster32, learned a lot more from your answer and your second method work like charm , still have issue with the sound but i think i have an idea and will figure it out myself soon. Love u

[lenten1111]

Hi lewster32, me again

 

Can you please help me on this, the bird cant collide in front of fires, it can colide from top and bottom but it go through fires, I dont know what's wrong? I tried to dectect  body.touching.left and right but it dont work. Here my code:

 

function preload () {
      game.stage.backgroundColor = '#330066';      
      game.load.spritesheet('bird', 'bird.png',72, 98);
      game.load.spritesheet('fire', 'fire.png', 103, 103);

}

function create() {  
     bird = game.add.sprite(300, 50, 'bird');
     game.physics.arcade.enable(bird);
     bird.body.gravity.setTo(0, 500);
     bird.body.maxVelocity.setTo(250, 500);
     bird.body.collideWorldBounds = true;
    
     bird.animations.add('fly', [1,2,3], 200, true);              
     fires = game.add.group();
     game.time.events.loop(1000, createFires, this);
}

function createFires () {
       fire = game.add.sprite(990 + Math.random() * 300, 30 + Math.random() * 440, 'fire');
       game.physics.arcade.enable(fire);
       fire.animations.add('fire');
       fire.animations.play('fire', 6, true);
       fire.outOfBoundsKill = true;
       fire.body.immovable = true;
       fires.add(fire);
}

function update() {
        game.physics.arcade.collide(bird, fires);
        game.scrollSpeed = 1;
        if (game.input.activePointer.isDown) {
        flyup();
        fires.forEach(function(fire) {
         // move the rock left at 100 pixels per second
         fire.x -= (200 * (game.time.elapsed / 1000)) * game.scrollSpeed;
        }, this);
        } else {
         bird.animations.stop();
         bird.frame = 0;
         fires.forEach(function(fire) {
         // move the rock left at 100 pixels per second
         fire.x -= (100 * (game.time.elapsed / 1000)) * game.scrollSpeed;
        }, this);
        }
}

function flyup() {
       bird.body.velocity.y = -170;
       bird.animations.play('fly');  
}

 

Thanks so much

[lewster32]

The fire is immovable and forcibly moving to the left, so I imagine it's just going to go through the bird if it collides sideways, because the bird has nowhere to go. If you want to do something when the bird hits the fire, consider instead using game.physics.arcade.overlap with a callback that causes the bird to 'react' in some way to the fire (presumably to die in some way?) rather than .collide which will likely messily handle an immovable object moving into another object.

[lenten1111]

Yes, i tried to remove immovable of fire, but like before, the bird collide fires but only from top and bottom push fires go up or down, stil go through fires. There any way i can collide it? because i want bird collide with fire and low the healthy bar, if it go through, game look really weird

 

And: I tried make the bird.y change when it collide with fire, but still go through, it only change when collide from top or bottom

 

 

EDIT:  I just figured it out now with overlap and body.x, just -x when bird overlap fires, then +x when bird flyup. Look better than the way i thought before

[lewster32]

Instead of using collide, maybe try using overlap instead? One thing you will have to be careful of is that when overlapping (and to some extent when colliding) the callback will be called every frame that the collision or overlap happens - this can quickly reduce your bird's health to 0 unless you have some kind of system in place to wait for a specified period of time after each overlap before checking again, or marking the fire the bird struck with a property ('birdCollided' or something) and ignoring any collisions/overlaps with fire which has this property set to true. Just make sure you set the property back to false or null when you kill the fire if you're using object pools!

 

For what it's worth, this stuff can be very tricky to deal with, as things are happening over time - it's like programming in an extra dimension. You need to really be in control of what's happening and when, and try not to have things happening every frame unless necessary, otherwise you get these kinds of weird problems.

[lenten1111]

Yes, thanks lewster. I did face a lot issues when use things in frame. I think i have to practise a lot more. Thanks again, very kind of you

[lewster32]

You're very welcome - keep it up, it gets easier and you're doing great!