Thursday, May 29, 2014

Smoke animation with Construct2

I started sketching a game for FGL's "week long game jam", and noticed quite soon that I have a game idea that would need smoke animation. I did not have previous experience how to create one, so it was time for few trials. One of them proved to be useful for me, and here is description how it was done with Construct2.

First of all, I tried different styles of "particles" or objects for a smoke. My target was to create something like volcano-style smoke, meaning that it will appear in certain point and starts ascending slowly to the sky. Simultaneously, this puff of smoke expands and gets thinner (=opacity decreases), and at some point it disappears totally. Just like in the still picture below:



I tested couple of options for creating a smoke object, and ended up something like described in the picture below:

Somehow, round shapes looked the best, but I tried cloud-like objects also. The background was light blue, so dark colors were better in this case.

Smoke object is using "Bullet" behavior for movement. Default settings are used, except speed is set to 50. Second behavior I would recommend to use is "DestroyOutsideLayout". It will take care of removing single object if it goes outside the layout area.

I created also a background scene for testing how smoke looks in real use. I was using total of 3 layers for this experiment. First I did a gradient fill using two shades of blue, and placed that to the lowest layer on Construct 2 layout (layer0). Secondly, I drafted some kind of landscape with a volcano on the right, and placed that to the topmost layer (layer2). Picture below shows how the final layout view looks.



Next phase was to animate smoke as described above. After some trial and error style working, I found out that suitable interval between two smoke objects was ~0.1 seconds (speed=50). The angle for each object is defined with random function, as well as the initial size. In my case the opacity is selected to be 100, but also lower values can be used if more transparent smoke is desired. Smoke objects are created on layer1, the one behind the volcano layer. This is just to make an impression that smoke rises from the crater.

When smoke is rising towards the sky, the "is visible" event will make it larger and more transparent. When the opacity of single smoke object is low enough (<10 in my case), it will be destroyed.

The complete event view is shown in the picture below.



You can try change e.g. angle, initial particle size and opacity, growth and opacity change rate, etc. to make this fit better to your own purposes. 

-Jussi.

No comments:

Post a Comment