Rotate Space – #30daydev. Day 2

Adding the Starfield

I wanted to see if it was possible to get a realistic zooming starfield effect using Phaser that didn’t cause any lag issues. It seems to be only 2 ways of doing it that spring to mind.

I could have a animation of the stars as a sprite sheet in the background and jump continually loop this. The downside of this is the sprite sizes would be the same as the display (480×480) and we’d need a lot.
So, the other option would be to manage them individually, and although this will give me complete freedom on the positioning of the starts, tween the movement and allow for reuse when they’ve moved off screen, there must be a limit where we’ll start to lag.

First things first, then, I created a couple of sprite images for the starts. One a single light blue pixel, and one slightly larger, and loaded these in as normal.

Phaser is great insofar as it allows grouping, so I can create a group for the start, and create multiple instances using the “.createMultiple()” function. So creating about 150 of each and throwing them randomly on the page, we get a starfield which looks pretty good.

Starfield Static

The next stage, and the one that was always going to cause the headache is to figure out the direction and speed of all the stars. Depending on where the stars start dictates the speed and direction.
The direction is pretty straightforward. The image below indicated gives an idea of how the screen is broken up.

Starfield Direction

Depending on which ‘sector’ each star resides in will determine the formula calculated for the tween. For example, the arrows point left will tween to x:-1, with their initial x position dictating the speed, but their y position is determined by how far away from the y axis they start proportionate to their initial x position… and breathe..

Anyway, it all works out in the end, and the latest version has been updated to the usual location.

Rotate Space Day 2

As an aside, I’m taking a couple of days out of #30deydev to add a tutorial to TileDriver Turbo to assist new players. The next step will be to add some enemies coming out from the centre.

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

Leave a Reply

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