Star background movement without parallaxing and hyperspeed mode

  • 12 favourites


Attached Files

The following files have been attached to this tutorial:



Download now 84.87 KB


3,369 visits, 6,060 views



This tutorial hasn't been translated.


This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.


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...


  • Order by
Want to leave a comment? Login or Register an account!