Star background movement without parallaxing and hyperspeed mode

Favourite 12 favourites
Tutorial written by Dan72Originally published on 14th, October 2013 - 1 revision


Using the parallax effect is often very useful, for example you have far stars and nearby stars moving at different speeds. (Note: realistically speaking, no stars will be moving at different speeds when you're travelling in space. They are all so far away that you won't notice a difference. For game purposes, the movement hints the player, that his spaceship is travelling.)

In this method I learned earlier when playing a bit with Macromedia Flash at that time (see example with ActionScript), you load a sprite or a tiled background, give it a bullet behavior, duplicate it and position the sprites/backgrounds in a row. Whenever the first sprite goes out of bounds, it is positioned behind the second one.

A nice side-effect is that we are able to let the player travel at hyperspeed. There is no need to worry that the window will end! We'll test that later.

So, here is a schematic of what is happening in the background..

We will insert two starfields beside each other onto the background layer 0, give them two different bullet speeds and when the first starfield is out of sight, we'll reposition it behind the second one and so on..


Create a new project and set the window size to 640 x 480 and the layout size to 1280 x 480. So the layout size has twice the window's width.

First create a new tiled background, e.g. 4 x 4 pixels size, filled with black and position it at -1,-1 with a size of 642x482 pixels.

Import both star background images (in the file) by double-clicking on the layout, select a sprite or a tiled background and load the images accordingly. Name them Stars_back and Stars_front

Give both of them the Bullet behavior for them to move. I gave Stars_back a speed of -10 and Stars_front a speed of -25. That way, they'll be moving to the left.

Position them at the coordinates 320, 240.

First test

If you run the game, it won't be satisfying - the window was full with the star fields, but they are leaving towards the left, leaving a white area..

We have to duplicate both of the star fields and position them at the right of the existing ones.

A problem you'll find is that Stars_front is overlapping Stars_back and you cannot click on Stars_back. The easiest way would be to go to the Object window at the right bottom, click on the corresponding object and Copy and Paste it at position 960, 240.

Test it.. okayy…


If you wait long enough, you'll notice that after the two starfield sprites have passed, again they continue to move to the left.

The solution is to check when a starfield has left the window and reposition it to the right of the current one.

Go to the event sheet and insert following conditions:
Stars_back -> Is outside layout then Stars_back -> Set X -> 960
dito with Stars_front

Test it now… AWESOME!!

Now let's insert a spaceship and test some Hyperspeed...

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.


RandomExile 12.7k rep

Thanks, Dan! Again, a really well-written, practical tutorial with detailed explanation and useful graphics. Much appreciated!

Monday, October 14, 2013 at 9:59:10 PM
Lordshiva1948 44.3k rep

Thanks so much my friend

Tuesday, October 15, 2013 at 11:26:07 AM
AbelaNET 14.9k rep

Thanks for sharing.

Tuesday, October 22, 2013 at 6:50:56 PM
seothen 3,699 rep

Great stuff, looking forward to more of your tutorials.

Thursday, October 24, 2013 at 3:02:01 PM
smsanthosh 2,455 rep

wow.. great.. thanks for sharing...

Wednesday, January 01, 2014 at 3:54:48 PM
randyhook 526 rep

When I assigned a negative speed to my star backgrounds the screen just went white when I ran the project. I found I had to make sure the Bullet Behavior for the backgrounds had Set Angle set to No.

Saturday, March 29, 2014 at 3:31:57 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.