Jump to content

Collision between sprites not working


Recommended Posts

Hello everyone!  I found Phaser a few days ago, and am having a blast so far with it.  I know a small amount of JavaScript, a little jQuery (basic select and change type operations), some CSS, and HTML4, so this is also a good learning experience for me (coming from a C#/SQL background).

I took the platform game tutorial and changed it to be 2D, and split it up into multiple files based on the tutorial over on the ToastedWare site (http://toastedware.com/?p=258), turned off gravity, and made it similar to an old-school "Final Fantasy" or "Zelda" game.  Everything loads: the level, player, and enemy are there, animations are working fine, and I can control the player with the keyboard.  But try as I might, I haven't figured out how to get the collision to work, and the examples given on http://gametest.mobi haven't helped at all (it's the same collisionHandler function being used in each example, which isn't working for me...and I'm not sure why).

I'm hesitant about plopping loads of code here into the forums (I don't want to spam, or be rude), but here is my update() function inside the main game loop (the inline javascript in index.html):

function update() {        level.update();        player.update();        enemy.update();        game.physics.collide(player, enemy, collisionHandler, null, this);       }Which is followed by another function "collisionHandler()":function collisionHandler() {        console.log(' Colission detected! ');    }

And here is the update() function in my player.js file:


update: function() {        // Player movement and animation change        if (game.input.keyboard.isDown(KEYS.LEFT))        {            this.sprite.x -= SPEED;            this.sprite.animations.play('left');        }        else if (game.input.keyboard.isDown(KEYS.RIGHT))        {            this.sprite.x += SPEED;            this.sprite.animations.play('right');        }        else if (game.input.keyboard.isDown(KEYS.UP))        {            this.sprite.y -= SPEED;            this.sprite.animations.play('up');        }        else if (game.input.keyboard.isDown(KEYS.DOWN))        {            this.sprite.y += SPEED;            this.sprite.animations.play('down');        }        else        {            this.sprite.rotation = 0;        }        game.camera.follow(this.sprite);             }

No matter what I try, collision doesn't seem to be working. 

And another question, if you don't mind - the "game.physics.collide", shouldn't it be in an IF statement, saying that "IF a collision happens, call the collisionHandler function"?  It just seems like it's going to fire off no matter what.  I'm a bit confused about it, because the Sprite vs Sprite example has no "IF" statement, it just calls this once the sprites collide.

Thanks for any help that you can give ;-)

Link to comment
Share on other sites

This is why:

     this.sprite.x -= SPEED;

The collisions only fire if the sprite.body has velocity, which it does not have when you move the sprites in this manner.

Your options are to change that to use the physics system:

this.sprite.body.velocity.x = SPEED;

or to check for overlap instead of collide:

        //game.physics.collide(player, enemy, collisionHandler, null, this);        game.physics.overlap(player, enemy, collisionHandler, null, this);

game.physics.collide does the if statement for you. Calling that checks for collisions - not causes collisions - and calls the callback when it detects a collision.

To put it in Gentleman British, it is doing this:

Say, Game, old chap, if it is not too much bother, could you get that Physics fellow to check if those pesky objects Sprite1 and Sprite2 are colliding, and if they are, call this function here?



(I had chocolate for breakfast, can you tell..? :D)

Link to comment
Share on other sites

Oh, I see!  Thank you for explaining that to me.  Even after I change it, though, it doesn't do anything.  Now that I'm home and have access to my code, I'll attach the files.  It's nothing special, using a "town" image from google images and the "black mage" sprite from the old Final Fantasy game (the "enemy" is just the same sprite sheet with it's hue changed).  Any ideas?

And, no worries on the chocolate.  I only function during early daylight hours by sloughing multitudes of coffee into my gullet!


Link to comment
Share on other sites

I see what's going on here...

You have a Player object and an Enemy object, but those objects are merely wrappers for the Phaser.Sprite objects, and do not have their own bodies to collide or overlap.

So, the overlap line must become this:

game.physics.overlap(player.sprite, enemy.sprite, collisionHandler, null, this);
Link to comment
Share on other sites


Body: The Physics Body is linked to a single Sprite. All physics operations should be performed against the body rather than the Sprite itself. For example you can set the velocity, acceleration, bounce values etc all on the Body.





At its most basic a Sprite consists of a set of coordinates and a texture that is rendered to the canvas. They also contain additional properties allowing for physics motion (via Sprite.body), input handling (via Sprite.input), events (via Sprite.events), animation (via Sprite.animations), camera culling and more. Please see the Examples for use cases.


I guess if I had read more into the documentation, I would have understood what it said!  Thank you for taking the time to look at the code for me.  I guess I was just confused on what Body and Sprite were supposed to be used for!

Link to comment
Share on other sites


  • Recently Browsing   0 members

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