knyaka

Sprite movement direction

5 posts in this topic

Hello,

I'm new to Phaser and stuck with movement direction. I'm loaded spritesheet, added sprite with spaceship, made gameinput binding and pressed up to increase acceleration. All was fine, ship was moving, but..  he moved to the right and his head looking up , like this :

KZv5zDz.jpg

(try to imagine: ship starts move and moves to the right without any rotation)

So, that is the question: How can I rotate image on the 90 degrees or change movement direction from right to top?

I tried to google it on some  keyword variations: rotation, angle, movement direction. Tried to change keybindings. Tried to change sprite rotation and angle.

Google did not give anything,keybindings, rotations same and I comes here with hope :)

 

Spritesheet orientation: all sprites are looking up. I cannot rotate spritesheet because atlas will broke.

7gOoNqD.jpg7gOoNqD.jpg

 

Thank you in advance.

Share this post


Link to post
Share on other sites

The initial orientation is facing right, consider this as the value 0 for angle or rotation. Since your ship is facing up you could rotate it. To rotate clockwise you add, counterclockwise you subtract. You can either add 90 to the angle property or add Math.PI/2 to the rotation property.

Share this post


Link to post
Share on other sites

An example.

// The hero!
player = game.add.sprite(game.world.centerX, game.world.centerY + 250, 'ship'); // create a player game object
player.anchor.setTo(0.5, 0.5); // anchor the sprite in the center so it will rotate about its center axis
player.scale.setTo(.3, .3); // handy to scale your sprite in game while in development until you can get correct size sprites
player.angle = 90; // rotate the ship 90 degrees to the right

 

Share this post


Link to post
Share on other sites
On 7/14/2017 at 8:22 AM, squilibob said:

The initial orientation is facing right, consider this as the value 0 for angle or rotation. Since your ship is facing up you could rotate it. To rotate clockwise you add, counterclockwise you subtract. You can either add 90 to the angle property or add Math.PI/2 to the rotation property.

This doesn't work because on load or create sprite initializes movement direction so if I try angle sprite it change movement direction too.

var player

function preload () {
    game.load.image('ship', '/mygame/assets/img/PNG/playerShip2_green.png')
}

function create () {
    player = game.add.sprite(game.world.randomX, game.world.randomY, 'ship')
    player.anchor.setTo(0.5)
    player.scale.setTo(0.5)
    player.angle = 90 // or player.rotation = Math.PI /2
}

 

On 7/16/2017 at 8:16 PM, WiLD11 said:

You can check if the right/left key is pressed, and set the sprite.angle property accordingly

 

This turns sprite on keypress and don't change movement direction too :)

Nevertheless, thank all for answers.
 

I could find only two ways to change movement direction.

1: Change sprite orientation (rotate image before load) (I had to find another set of sprites :) )

2: Add extra degrees on keypress rotation into update function.

function update() {
  if (cursors.up.isDown)
    {
        game.physics.arcade.accelerationFromRotation(player.rotation + 300, 200, player.body.acceleration);
    }
}

But second is awful because I need to add this extra degrees to all child objects like bullets, turret and others ><.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.