Physics to Graphics

[DbD]

I've been trying to add physics to graphics and i have it working for a single player graphic:

var cirSize = 50;    var cirX = game.world.width/2;    var cirY = game.world.height/2;        //player graphics    player = game.add.graphics(0, 0);    //graphics.lineStyle(2, 0xffd900, 1);    player.beginFill(0xFF0000, 1);    player.drawCircle(cirX, cirY, cirSize);    player.endFill();    // Create an empty sprite as a container    playerSprite = game.add.sprite(0, 0, player);    // Add the graphics to the sprite as a child    playerSprite.addChild(player);    // Enable physics on the sprite (as graphics objects cannot have bodies applied)    game.physics.enable(playerSprite, Phaser.Physics.ARCADE);

but when i duplicate it and try to add an enemy with the same code, it doesn't create the enemy:

var cirSize = 50;    var cirX = game.world.width/2;    var cirY = game.world.height/2;        //player graphics    player = game.add.graphics(0, 0);    //graphics.lineStyle(2, 0xffd900, 1);    player.beginFill(0xFF0000, 1);    player.drawCircle(cirX, cirY, cirSize);    player.endFill();    // Create an empty sprite as a container    playerSprite = game.add.sprite(0, 0, player);    // Add the graphics to the sprite as a child    playerSprite.addChild(player);    // Enable physics on the sprite (as graphics objects cannot have bodies applied)    game.physics.enable(playerSprite, Phaser.Physics.ARCADE);        //enemy graphics    enemy = game.add.graphics(0, 0);    //graphics.lineStyle(2, 0xffd900, 1);    enemy.beginFill(0xFF0000, 1);    enemy.drawCircle(125, 125, 50);    enemy.endFill();    // Create an empty sprite as a container    enemySprite = game.add.sprite(0, 0, enemy);    // Add the graphics to the sprite as a child    enemySprite.addChild(enemy);    // Enable physics on the sprite (as graphics objects cannot have bodies applied)    game.physics.enable(enemySprite, Phaser.Physics.ARCADE);

any ideas why?

 

EDIT: I'm pretty sure that the first bit of code works, but frankly i'm not sure if it's actually allowing me to add physics to the player. If it doesn't seem right, feel free to let me know.

[DbD]

Anyone? Bump.

[tips4design]

I think you have to set bounds for graphics. Or, use the method described here: http://www.html5gamedevs.com/topic/6476-collision-with-gameaddgraphics-and-a-sprite/ (add a graphics object to a sprite)

[DbD]

i already have added them to a sprite:

//enemy graphics    enemy = game.add.graphics(0, 0);    //graphics.lineStyle(2, 0xffd900, 1);    enemy.beginFill(0xFF0000, 1);    enemy.drawCircle(125, 125, 50);    enemy.endFill();    // Create an empty sprite as a container    enemySprite = game.add.sprite(0, 0, enemy);    // Add the graphics to the sprite as a child    enemySprite.addChild(enemy);    // Enable physics on the sprite (as graphics objects cannot have bodies applied)    game.physics.enable(enemySprite, Phaser.Physics.ARCADE);

but for some reason it won't create the enemy, only the player

[ForgeableSum]

It could be a number of things. Can you post it as a code pen/js fiddle?

[DbD]

Here's a codepen: http://codepen.io/Doodayer/pen/qdRGba

 

not sure why it won't create the second circle (aka enemy) but as far as i can tell, it should be.

 

EDIT: also like i said before, i'm not sure if it's actually even adding the circle to a sprite. as far as i can tell, it seems to be working, but i haven't tested any physics on it yet.

[ForgeableSum]

Here's a codepen: http://codepen.io/Doodayer/pen/qdRGba

 

not sure why it won't create the second circle (aka enemy) but as far as i can tell, it should be.

 

EDIT: also like i said before, i'm not sure if it's actually even adding the circle to a sprite. as far as i can tell, it seems to be working, but i haven't tested any physics on it yet.

You're passing the entire player object but you need to pass something like a key or bitmap data.

 

Note from the docs that the third parameter for creating a sprite is to pass a key, render texture, bmd, or texture. Passing an entire sprite is not an option.  What you need to do is create a fake key or bitmap data object you can pass as that third parameter for your fake sprite. 

[ForgeableSum]

Here's what it looks like if I use a fake image for the texture on the sprites:

http://codepen.io/anon/pen/ZGLNMQ

 

You've still got a few problems though.

 

1. You're drawing your graphics on to the center of the game world. Yet the parents of those graphics (the sprites) are placed at 0,0 in the game world. This means you'll always have a lot of space between the two objects. Instead what you want to do is draw the circles at 0,0, so they will be in the same position relative to the circles. Then, if you want to move the circles, move the sprite containers x/y. Because the graphics are children of the sprite containers, they will move along with them. 

 

2. Codepen doesn't allow images. What I did was use a image url. You'll want to use a transparent png - a simple 1x1 transparent png will work. Otherwise the sprite texture will show.

 

Let me know if you have further difficulty - post a new fork and I can help.  

[DbD]

everything works great in the codepen, but when i copy that over into my .js file, i can't move the player. Suggestions?

[ForgeableSum]

Did you see my second post? 

 

For one thing, take this out of update and put it in preload:

 

upW = game.input.keyboard.addKey(Phaser.Keyboard.W);downS = game.input.keyboard.addKey(Phaser.Keyboard.S);leftA = game.input.keyboard.addKey(Phaser.Keyboard.A);rightD = game.input.keyboard.addKey(Phaser.Keyboard.D);

[DbD]

Tried that, didn't help. And yeah that was the code i took from the codepen in your second post. For some reason still no player movement.

 

EDIT: update, i replaced the 'fake' image with a 1x1 transparent png and that crashed the whole game...

[ForgeableSum]

I can't really test this in code pen, but it looks like you're trying to move the graphic object instead of the parent sprite. Try changing the code in update to:

    if (leftA.isDown)    {        //  Move to the left        playerSprite.x -= 10;    }     else if (rightD.isDown)    {        //  Move to the right        playerSprite.x += 10;            }    else if (upW.isDown)    {        //  Move to the up        playerSprite.y -= 10;    }    else if (downS.isDown)    {        //  Move to the down        playerSprite.y += 10;    }    // diagonal movement    if (leftA.isDown && upW.isDown)    {        //  Move to the left and up        playerSprite.x -= 5;                playerSprite.y -= 5;    }        if (leftA.isDown && downS.isDown)    {        //  Move to the left and down        playerSprite.x -= 5;                playerSprite.y += 5;    }        if (rightD.isDown && upW.isDown)    {        //  Move to the right and up        playerSprite.x += 5;                playerSprite.y -= 5;    }        if (rightD.isDown && downS.isDown)    {        //  Move to the right and down        playerSprite.x += 5;                playerSprite.y += 5;    }        

In regards to the PNG - there's no reason that would cause a crash. Make sure you're url is correct. Copy and past what shows up in the console, it's likely the game is not able to load the image because it's not in the directory it's looking. 

[DbD]

it is in the proper directory. I'm using Brackets, and it shows the image when you hover, which tells me i didn't improperly type my url. Still no clue why it won't load..

[DbD]

I figured out why the movement isn't working, just not sure how to go about fixing it. 

 

When I enable the physics with game.physics.enable(playerSprite, Phaser.Physics.ARCADE);, it disables the code that i have for movement. Probably going to have to figure out a better way of going about it. Any suggestions?

 

edit: note, i still can't get my own image to actually work instead of the one you have linked in.

 

EDIT EDIT: Okay, i got the image to work, but i still have the issue of game.physics.enable(playerSprite, Phaser.Physics.ARCADE); crashing the game. it just makes it go black screen.

[DbD]

For anyone who is interested in the proper way of doing this, i've figured it out. I'm sure there are simpler ways of going about it (there always is in programming) but here's what i've ended with: http://codepen.io/Doodayer/pen/NqppWd

 

Now, the collision between enemy and player still doesn't properly work (not sure why) but you can see that the physics are properly working because by adding playerSprite.body.collideWorldBounds = true;, you are giving the playerSprite collision physics and it works.

 

Thanks for helping me and pointing me in the right direction with this one!

[ForgeableSum]

A few things to check for:

 

1. Make sure you add the collision callback function when you check for collisions:

game.physics.arcade.collide(playerSprite, enemySprite, collisionHandler);

2. Make sure both sprites have physics bodies with appropriate widths/height:

game.physics.arcade.enableBody(enemySprite);game.physics.arcade.enableBody(playerSprite);