Tutorial 02: drawing your first quad

downloadDownload the ready to use Eclipse project for this tutorial

Drawing a triangle is cool and all, but let’s face it: it isn’t very useful. A quad however, is the Graal of every 2D game developpers. It is basically just 2 co-planar triangles stuck together to form a rectangle.

You have to understand this is used everywhere, and I mean literally. Let’s take a 2D platformer. Your character? A quad. The tiles used to form the background? A bunch of quads. You shoot a projectile? Another quad to draw it. In fact, your entire game will probably be drawn with quads. So yes, it’s serious business.

The difference between a triangle and a quad is just that it has 4 vertices instead of 3. So when you declare your Mesh, you declare it has 4 vertices and then proceed to feed it each vertex. In this exemple we’re building a 0,0 centered square with a size of 1.0f.

quad = new Mesh(true, 4, 6, 
                new VertexAttribute(Usage.Position, 3, "a_position"));

quad.setVertices(new float[] {
                -0.5f, -0.5f, 0,        //define counter clock wise vertices
                0.5f, -0.5f, 0,
                0.5f, 0.5f, 0,
                -0.5f, 0.5f, 0 });

One thing to notice is that we created our mesh with 4 vertices, but we also indicated 6 indices. In a triangle we had 3 indices. Here is 6 because to draw our quad we want to draw 2 triangles, so 2*3 vertices. Then we just have to feed these indices so they’re making sense:

quad.setIndices(new short[] { 0, 1, 2, 2, 3, 0});

We tell OpenGL the order will be 0,1,2 then 2,3,0, which will effectively draw the triangles {(-0.5,-0.5),(0.5f,-0.5),(0.5f, 0.5f)} and {(0.5f, 0.5f),(-0.5f, 0.5f),(-0.5,-0.5)}. Before we draw it though, let’s put some color to this quad. White is boring. For this we use glColor4f which takes 4 floats for parameters: red, green, blue and alpha. The values should be between 0 and 1.0f. So if you are familiar with color in editing programs like Photoshop, imagine that 0 is 0 and 1.0f is 255. It’s just a linear scaling between 0-255 / 0-1.0f. Ok let’s see the results with glColor4f(0.0f, 0.7f, 0.7f, 1.0f);

A quad

Our first quad

If you want to know more about indices and the type of primitives drawn by OpenGL, the official documentation as a very interesting article about it and you should take a few minutes to read it.

Nonetheless, we have defined a perfect square in our mesh, yet it appears on screen as a rectangle! This is due to the default projection matrix in OpenGL. For now don’t worry about this aspect of your application, because we are going to cover all of it in the “transforms” tutorial. What matter is being able to draw a quad here, and that you have been able to draw this quad using two triangles as in this schema:

Quad: what's really going on under the hood

Quad: what’s really going on under the hood

This tutorial is now almost complete. One last thing of interest is the color though. We have seen earlier how glColor4f applies a color. It does it to everything drawn on screen. However, a vertex mesh, in addition to the position, can directly carry a color information and we therefore don’t need to change the color of the whole scene through glColor4f. To do that, we simple define a new mesh telling OpenGL that we’re going to feed our mesh vertices with not only positions, but also color information.

quad2 = new Mesh(true, 4, 6, 
                new VertexAttribute(Usage.Position, 3, "a_position"),
                new VertexAttribute(Usage.ColorPacked, 4, "a_color"));   
        quad2.setVertices(new float[] {
                -1.0f, -1.0f, 0, Color.toFloatBits(255, 0, 0, 255),
                0.0f, -1.0f, 0, Color.toFloatBits(0, 255, 0, 255),
                0.0f, 0.0f, 0, Color.toFloatBits(0, 0, 255, 255),
                -1.0f, 0.0f, 0, Color.toFloatBits(255, 255, 0, 255) });   
        quad2.setIndices(new short[] { 0, 1, 2, 2, 3, 0});

“Color.toFloatBits” is a neat way to pack a 32 bits color (4x8bits) into a float (a float size is 32bits). This method is provided by libgdx but if you’re interested the sourcecode is fairly simple; it just packs each byte into 32bits (alpha << 24) | (blue << 16) | (green << 8) | red).

In order for the 2 meshes not to overlap, please note the coordinates of this one have also been moved by -0.5f,-0.5f.

Two quads on screen

Two quads on screen

Note that OpenGl automatically interpolates colors in between each vertex, giving this cool gradient effect.

This is is for quads! On the next tutorial we will learn how to texture these bad boys.

downloadDownload the ready to use Eclipse project for this tutorial

Leave a Reply