Explosions with animated billboards

It’s been a while, but we’ve kept busy! Most of our recent work has been with the engine of our game, as well as the server. However, we recently started working on making the spells of our game look better – and this post is going to explain how we did explosions!

The Idea
So, the idea here is that we use a system very similiar to how the particles of our game work. This means that we’re batching a whole lot of quads, and rendering them each frame with just one drawcall. In order to keep the system dynamic and allow for the actual animation, we need to recalculate the vertices of the mesh each frame.

To do the animation, we provide a textureatlas containing (in our case) 8 rows and 8 columns. Each cell represents the state of the animation at a given time, and we set a variable called ”textureVal” to tell our system which cell it should use at any given time.

Below you can see what our Billboard and Billboard system classes look like:

Billboard Show

BillboardSystem Show

Rendering of the billboards
Rendering of the billboards is pretty simple. The rendering code looks like this:

Rendering code: Show

The shaders too are quite simple, and we use the very same shader for our particle system.

Vertex Shader: Show

Fragment Shader: Show

So, the approach we used was quite simple and it took less than an hour to get the system running. However, if you have any questions – don’t be afraid to ask them here or find us on #libgdx over at freenode!

Here’s a video to demonstrate the result of our implementation:


E-postadressen publiceras inte. Obligatoriska fält är märkta *

Följande HTML-taggar och attribut är tillåtna: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>