Rotate Space – #30daydev. Day 1

When starting to plan this out in my head, it was a breeze. Rather than moving the ship around the screen, use the anchor of the sprite and rotate the ship around this.

Normally a sprite is anchored somewhere within the image itself. But Phaser allows you to set the anchor (think hot spot) anywhere in relation to the image, even nowhere near it.

Lets go back to the assets though. In order to speed development, I’m going to use the same set of assets I used for Mayhem. There’s a great set produced by a guy called Dan Cook @danctheduck based on a style similar to Sinistar which he’s allowed to be used by anyone (Lost Garden). He’s a great advocate of game devs and actively encourages people to use assets these assets.

Anyway, anchoring the sprite it the middle and adjusting the x anchor, by setting it to a value greater than 1 (in this case 8), it works perfectly. When you first fire up the page, you get this (The red x indicates where the sprites actual anchor is)…

Initial rendering of the ship

Initial rendering of the ship

.. now if all goes as expected, because the sprites anchor is in the centre of the screen, simply changing the angle will be enough to rotate it around the centre. A little bit of code in the update method…and you get this…

Ship rendered correctly with anchor set to middle

Ship rendered correctly with anchor set to middle

Input Handling

We’ll deal with mobile devices at a later date, so for now, I’m just making sure it runs and plays in the desktop browsers. Using the standard Phaser input handling routines, we can quickly get movement up and running.

In the create method for the game states, ensure you add the key handler code.


this.cursors = this.game.input.keyboard.createCursorKeys();
this.game.input.keyboard.addKeyCapture([Phaser.Keyboard.SPACEBAR]);

Then, in the update method we need to continuously check for any input.


if (this.cursors.left.isDown) {
this.ship.angle += 3;
}
else if (this.cursors.right.isDown) {
this.ship.angle -= 3;
}
if (this.game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) {
this.fireBullet();
}

To adjust the speed of the ship, we can change the rate at which the angle is changed. This may come in useful for a game idea later.

At this point now, we’ve got the ability to move the ship around the screen.

Now for the bullets

Initially, I thought the bullets would be easy, just start them at the ships x,y then tween them to the centre (scaling for effect). However, I forgot the ship doesn’t actually move, the angle changes which is what gives the impression of movement.
Consequently, the first attempt at bullets ended up like this…

First attempt at implementing laser fire

First attempt at implementing laser fire

Yeah, not good, although simply imitating the same effect used for the ship works first time.

Correct behaviour for the lasers

Correct behaviour for the lasers

That’s it for the first blog on RotateSpace – The name needs some work on, but it can wait.

In the next blog, I’ll explain how I achieved the starfield effect. Click here to see the latest progress to my #30daydev.

This entry was posted in #30daydev, HTML5 Game, Phaser. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *