Tuesday, October 25, 2016

Construct2: Simple 2D Starfield Effect (top-down)

It's been a long time since I was inspired to write a tutorial. But now I am able to provide you one more idea for Construct2 use.

There are probably several ways to implement top-down 2D starfield effect in Construct2, but I think this is one of the easiest ones. By using this method, you will need only two particle objects to implement very simple starfield in no time!

Check Starfield HTML5 version (opens in new tab).

You can get the example .capx here.

From events point of view you will need only "on start of layout" event, like this:










This example was build for window size of 480x640 pixels, but the layout itself is twice as high (480x1280px). The reason for this is that particle object generates particles from single point only. User can define the size and direction of the cone, but it is not possible to change the width of the creation point. So all generated stars are not moving exactly to the same direction (motion is not parallel). You can get rough idea of layout view from the figure below.



To make stars moving as parallel as possible, I decided to create both particle objects on top of layout (coord 240,0). Camera is positioned to the center of lower half of the layout (coord 240, 640*1.5). One particle object is creating stars of 1px, and the second one particles of 3px (plus some variation in size). There is also some opacity randomization added to particle_small object to make some blinking effect. The setups for both particle objects are visible below:


Another noteworthy thing is the lack of so-called "prewarm" function in C2 particle object. This means it takes some time for C2 to fill whole screen with stars, especially when particle object is far away from the visible part of layout. My solution to this was to use kind of an layout mask combined with initialization time: In the beginning of layout layoutMask object was set to "visible" and system time scale was increased to 30 (meaning that time runs 30x faster). After bit over one second ("wait 35 seconds" in example) layoutMask was set invisible and time scale was set back to 1. Now we have fille whole screen with moving stars. I guess this is poor man's version of Unity3D's "particle prewarm" behavior. :)

If you want to have several types (or colors) of particles, then you will need more particle objects. One particle object can create only one kind of a particles. However, the size of particles can vary in one particle object. But as always, it is fully up to you how to continue forward with this! :)

-Jussi


No comments:

Post a Comment