Tutorial 01: drawing your first triangle

downloadDownload the ready to use Eclipse project for this tutorial

In this first tutorial we are going to draw the main component of all games: a triangle. Triangles are defined by 3 points in space (vertices) and is the most basic polygon your graphic card can draw, and for a good reason: 3 points in space will always form a plane. This is the bread and butter of computer graphics, so you have to know how to draw them!

Open your main class implementing the GDX ApplicationListener, and import the following to your code:

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.Mesh;
import com.badlogic.gdx.graphics.VertexAttribute;
import com.badlogic.gdx.graphics.VertexAttributes.Usage;

Gdx contains a lot of stuff OpenGL related, GL10 wraps OpenGL 1.0 functions, Mesh is a class capables of storing vertices; and the following other two are “options” for your vertices. So the next thing you need in your class is a mesh.

private Mesh mesh;

The next step is very important. That’s where you’re going to define the coordinates of each vertex in your buffer. In the “create” method of your app, let’s go ahead and define a triangle.

  @Override
  public void create() {
    mesh = new Mesh(true, 3, 3, 
                new VertexAttribute(Usage.Position, 3, "a_position"));          

        mesh.setVertices(new float[] { -0.5f, -0.5f, 0,    //bottom-left
                                       0.5f, -0.5f, 0,    //bottom-right
                                       0, 0.5f, 0 });     //top
        mesh.setIndices(new short[] { 0, 1, 2 });      
  }

But before we get deeper in analyzing what has just been created, let’s also render this triangle. We do that by modifying the render method.

  @Override
  public void render() {
    Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
        mesh.render(GL10.GL_TRIANGLES, 0, 3);
  }

You can now proudly run your code:

The Hello World of game programming

Drawing a triangle: the hello world of game programming!

But before we move further, let’s get back on what happen. First we define our triangle in the “create” method. This method is called at the start of your app so you want to place some code that will be needed for the rest of your game here, like defining geometry, loading textures, sounds, etc. etc.

Then in the new Mesh() call, we use several different parameters. The first bool defines if our mesh will be static or not; and fair enough it will be: we won’t move the vertices inside it. The next one defines the number of vertices and indexes. For a triangle, we have 3 vertices and 3 indexes.

We then create the geometry itself in the form of a x, y, z float array for all the points in space. Note that we also have to specify that these coordinates are positions. This may seems obvious but OpenGL doesn’t know by default. A vertex can have a lot of different functions; it could be for instance a UV mapping vertex or a normal vertex, but we’ll come back to that later. The important point to remember is that we need to make OpenGL understand what kind of vertex we are feeding it.

The last thing to see in this bit of code is the concept of indexes. Indexes tell OpenGL in which order we should draw the vertices. In this case it doesn’t matter, we want to draw the first, then 2nd, then 3rd vertex to generate our triangle hence the 0, 1, 2 sequence. This will all make sense once we start drawing our quad.

Once all this geometry has been defined, we draw it in the render() method. With libgdx, you don’t control the game main loop. Instead, the render() method is called at each frame of your game as often as your PC is able to handle. In our case we have two step: clear the screen, draw the triangle. This is done by calling glClear and telling OpenGL to clear the color buffer, then calling the render() method of our quad. You must have noticed that we have to pass as an argument that we want to draw triangles, but it’s because OpenGL is also capable of drawing other primitives, like lines or points.

Our triangle drawn with GL_LINE_LOOP on the left, and with GL_POINTS on the right.

Our triangle drawn with GL_LINE_LOOP on the left, and with GL_POINTS on the right.

In the next tutorial we will learn how to draw a quad!

downloadDownload the ready to use Eclipse project for this tutorial

5 Comments

Leave a Reply

css.php