Jump to content

Rotation along with physics


schmevie15
 Share

Recommended Posts

Hello Everybody, 

I am having some trouble and am hoping one of you could help me. So essential I have a player which is a sprite rotating around a circle and I want that player to be able to collide with thing flying at it. The problem is that to get the player to rotate around the circle I have used player.anchor.setTo(center of circle), so what happened is that the physics body is now moved to said location. Is there a clean way of implementing this, perhaps a way to rotate about a fixed point without moving the physics body. I am completely confused and running out of ideas. 

post-7361-0-36821100-1398321783.png

So you guys can get an idea.

Hope y'all can help!

Thanks a ton,

Evie!

Link to comment
Share on other sites

Hey Evie,

 

I think I understand your problem, and I'm not sure if there is a built in system with Phaser to handle that scenario. However, you can do it manually do it with the code below. Is this what you meant?

// set the player rotation (an offset of a quarter turn since the sprite is facing up)player.rotation = rotation + Math.PI / 2;  // from the center of the canvas// set the proper coordinates for the current rotation// based on the radius + half the player's larger side (since we moved the anchor to 0.5)player.x = game.world.centerX + Math.cos( rotation ) * ( radius + player.height / 2 );player.y = game.world.centerY + Math.sin( rotation ) * ( radius + player.height / 2 ); // increment rotationrotation += rotationSpeed;

See it in Action

 

wpmf1y3.png

Link to comment
Share on other sites

Hey Jack,

Thanks a lot for the reply and yes that is exactly what I was looking for. Although when I pasted that exact code into my html file I got something a little weird. I was trying to follow your example and kept getting the same thing.  The character stays in the center and only rotates around its anchor as opposed to the circle. I have attached what I get below, any ideas as to what can be going on?

I appreciate the help, thanks!post-7361-0-69735000-1398378161.png

Link to comment
Share on other sites

Of course, sorry I didn't earlier.

<!doctype html><html>    <head>            <script src="js/phaser.min.js"></script>            <style>                body{margin:0}            </style>            <script type="text/javascript">var game = new Phaser.Game( 500, 500, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render } ),    radius = 100,    rotation = 0,    rotationSpeed = 0.01,    circle,    player;function preload() {  game.load.image( 'player', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/836/dude.png' );}function create() {  game.physics.startSystem( Phaser.Physics.ARCADE );  circle = new Phaser.Circle( game.world.centerX, game.world.centerY, radius * 2 );  player = game.add.sprite( game.world.centerX, game.world.centerY, 'player' );  player.anchor.set( 0.5 );    game.physics.arcade.enable( player );}function update() {  // set the player rotation (an offset of a quarter turn since the sprite is facing up)  player.rotation = rotation + Math.PI / 2;    // from the center of the canvas  // set the proper coordinates for the current rotation  // based on the radius + half the player's larger side (since we moved the anchor to 0.5)  player.x = game.world.centerX + Math.cos( rotation ) * ( radius + player.height / 2 );  player.y = game.world.centerY + Math.sin( rotation ) * ( radius + player.height / 2 );     // increment rotation  rotation += rotationSpeed;}function render() {    game.debug.body( player );  game.debug.geom( circle, 'rgba(255, 0, 0, 0.25)' ) ;}        </script>    </head>    <body>    </body></html>

and I believe it version: Phaser v2.0.0 - Canvas - WebAudio http://phaser.io

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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