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 |
SelectShow |
public class Billboard {
public Vector3 position;
public Matrix4 modelMatrix;
public float[] colorTint;
public float timer, texVal, size;
public boolean dead;
public Billboard(float x, float y, float z) {
modelMatrix = new Matrix4();
position = new Vector3();
colorTint = new float[4];
reset(x,y,z);
}
public void reset(float x, float y, float z) {
dead = false;
texVal = 0f;
position.set(x,y,z);
for (int i = 0; i < 4; i++)
colorTint[i] = 1;
size = 5f;
modelMatrix.setToTranslation(position);
}
public void step(Game g, BillboardSystem sys) {
timer += Gdx.graphics.getDeltaTime()*1000;
if (timer > 30) {
timer -= 30;
// There are only 64 textures in the atlas. See BillboardSystem.java.
dead = texVal++ >= 64 ? true : false;
}
}
}
|
| BillboardSystem |
SelectShow |
public class BillboardSystem {
public Array<Billboard> billboards;
public static Array<Billboard> deadBillboards;
public static Mesh mesh;
float[] list;
short[] indices;
public Texture texture;
public float timer, rowsAndCols, textureVal;
public BillboardSystem() {
texture = new Texture(Gdx.files.internal("fireball1.png"));
rowsAndCols = 8f; // The loaded texture has 8 rows and 8 columns.
textureVal = 1f/rowsAndCols; // TextureUVs should increase with 1/rowsAndCols depending on active texture
if (deadBillboards == null)
deadBillboards = new Array<Billboard>(); // For pooling
billboards = new Array<Billboard>(); // Active billboards
// mesh has position, texture coords, S(ize)R(otation)T(extureID) and colorTint.
mesh = new Mesh(false,5000*4*13,5000*6,VertexAttributes.position,
VertexAttributes.textureCoords,VertexAttributes.srt,VertexAttributes.colorTint);
list = new float[5000*4*13]; // Each billboard is 4 * 13 floats. The system suppors 5000 billboards.
indices = new short[5000*6]; // Each billboard needs 6 indices.
}
public static Billboard acquireBillboard(float x, float y, float z) {
Billboard p;
if (deadBillboards.size > 0) {
p = deadBillboards.get(deadBillboards.size-1);
deadBillboards.removeIndex(deadBillboards.size-1);
p.reset(x,y,z);
} else {
p = new Billboard(x,y,z);
}
return p;
}
public void addBillboard(Billboard p) {
billboards.add(p);
}
public void update(Game g) {
for (int i = billboards.size-1; i >= 0; i--) {
Billboard p = billboards.get(i);
p.step(g,this);
if (p.dead) {
billboards.removeIndex(i);
deadBillboards.add(p);
}
}
buildMesh(mesh,g);
}
public void buildMesh(Mesh mesh, Game g) {
int counter = 0;
for (Billboard p : billboards) {
if (g.cam.frustum.sphereInFrustum(p.position,p.size)) {
Vector3 pos = StaticVariables.tempVec.set(0,0,0).mul(p.modelMatrix);
list[counter++] = pos.x;//x1
list[counter++] = pos.y;//y1
list[counter++] = pos.z;//z1
list[counter++] = 0; //u1
list[counter++] = textureVal;//v1
list[counter++] = p.size;//size;
list[counter++] = MathUtils.sinDeg(0); //sinA
list[counter++] = MathUtils.cosDeg(0); //cosA
list[counter++] = p.texVal;//texVal
list[counter++] = p.colorTint[0]; // color1
list[counter++] = p.colorTint[1]; // color2
list[counter++] = p.colorTint[2]; // color3
list[counter++] = p.colorTint[3]; // color4
list[counter++] = pos.x;//x2
list[counter++] = pos.y;//y2
list[counter++] = pos.z;//z2
list[counter++] = textureVal;//u2
list[counter++] = textureVal;//v2
list[counter++] = p.size;//size;
list[counter++] = MathUtils.sinDeg(0); //sinA
list[counter++] = MathUtils.cosDeg(0); //cosA
list[counter++] = p.texVal;//texVal
list[counter++] = p.colorTint[0]; // color1
list[counter++] = p.colorTint[1]; // color2
list[counter++] = p.colorTint[2]; // color3
list[counter++] = p.colorTint[3]; // color4
list[counter++] = pos.x;//x3
list[counter++] = pos.y;//y3
list[counter++] = pos.z;//z3
list[counter++] = textureVal;//u3
list[counter++] = 0; //v3
list[counter++] = p.size;//size;
list[counter++] = MathUtils.sinDeg(0); //sinA
list[counter++] = MathUtils.cosDeg(0); //cosA
list[counter++] = p.texVal;//texVal
list[counter++] = p.colorTint[0]; // color1
list[counter++] = p.colorTint[1]; // color2
list[counter++] = p.colorTint[2]; // color3
list[counter++] = p.colorTint[3]; // color4
list[counter++] = pos.x;//x4
list[counter++] = pos.y;//y4
list[counter++] = pos.z;//z4
list[counter++] = 0; //u4
list[counter++] = 0; //v4
list[counter++] = p.size;//size;
list[counter++] = MathUtils.sinDeg(0); //sinA
list[counter++] = MathUtils.cosDeg(0); //cosA
list[counter++] = p.texVal;//texVal
list[counter++] = p.colorTint[0]; // color1
list[counter++] = p.colorTint[1]; // color2
list[counter++] = p.colorTint[2]; // color3
list[counter++] = p.colorTint[3]; // color4
}
}
int maxIndices = counter/13/4*6;
for (int i = 0,v = 0; i < maxIndices; i+=6, v+=4) {
indices[i] = (short) (v+0);
indices[i+1] = (short) (v+1);
indices[i+2] = (short) (v+2);
indices[i+3] = (short) (v+2);
indices[i+4] = (short) (v+3);
indices[i+5] = (short) (v+0);
}
mesh.setVertices(list,0,counter);
mesh.setIndices(indices,0,maxIndices);
}
public void reset() {
deadBillboards.addAll(billboards);
billboards.clear();
}
}
|
Rendering of the billboards
Rendering of the billboards is pretty simple. The rendering code looks like this:
| Rendering code: |
SelectShow |
Gdx.gl.glEnable(GL20.GL_BLEND);
Gdx.gl.glDisable(GL20.GL_DEPTH_TEST);
Gdx.gl.glDepthMask(false);
Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
g.billboards.texture.bind(0);
billboardShader.begin();
billboardShader.setUniformi("s_texture", 0);
billboardShader.setUniformf("rowsCols",g.billboards.rowsAndCols);
billboardShader.setUniformMatrix("u_viewMatrix", g.cam.view);
billboardShader.setUniformMatrix("u_projMatrix", g.cam.projection);
BillboardSystem.mesh.render(billboardShader, GL20.GL_TRIANGLES);
billboardShader.end();
Gdx.gl.glDisable(GL20.GL_BLEND);
Gdx.gl.glEnable(GL20.GL_DEPTH_TEST);
Gdx.gl.glDepthMask(true);
|
The shaders too are quite simple, and we use the very same shader for our particle system.
| Vertex Shader: |
SelectShow |
attribute vec4 a_position;
attribute vec2 a_texCoord0;
attribute vec4 a_srt;
attribute vec4 a_colorTint;
uniform mat4 u_viewMatrix;
uniform mat4 u_projMatrix;
uniform float rowsCols;
varying vec2 v_texCoord;
varying vec4 v_colorTint;
void main()
{
v_colorTint = a_colorTint;
float size = a_srt.x;
float sinA = a_srt.y;
float cosA = a_srt.z;
float texVal = a_srt.w;
vec2 uv = a_texCoord0;
float u = mod(texVal, rowsCols) / rowsCols;
float v = floor(texVal/rowsCols) / rowsCols;
uv.x = uv.x + u;
uv.y = uv.y + v;
v_texCoord = uv;
vec4 position = u_viewMatrix*a_position;
vec2 posOffset = size * vec2(a_texCoord0.x*rowsCols-0.5,a_texCoord0.y*rowsCols-0.5);
position.xy += vec2(cosA*posOffset.x + sinA*posOffset.y, -cosA*posOffset.y + sinA*posOffset.x);
gl_Position = u_projMatrix * position;
}
|
| Fragment Shader: |
SelectShow |
uniform sampler2D s_texture;
varying vec4 v_colorTint;
varying vec2 v_texCoord;
void main()
{
gl_FragColor = texture2D( s_texture, v_texCoord ) * v_colorTint;
}
|
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:
