Android 3D game tutorial – Part II

Updated to be Android 2.0.1 compatible.

You are new to this series? Please start with the first part .

The second part of this series will show you how to add a triangle and how to rotate it a bit.

The first thing we have to do is to initialize the triangle we want to display. We have to create a function named initTriangle() in our VortexRenderer class.

// new object variables we need // a raw buffer to hold indices private ShortBuffer _indexBuffer; // a raw buffer to hold the vertices private FloatBuffer _vertexBuffer; private short[] _indicesArray = {0, 1, 2}; private int _nrOfVertices = 3; // code snipped private void initTriangle() { // float has 4 bytes ByteBuffer vbb = ByteBuffer.allocateDirect(_nrOfVertices * 3 * 4); vbb.order(ByteOrder.nativeOrder()); _vertexBuffer = vbb.asFloatBuffer(); // short has 2 bytes ByteBuffer ibb = ByteBuffer.allocateDirect(_nrOfVertices * 2); ibb.order(ByteOrder.nativeOrder()); _indexBuffer = ibb.asShortBuffer(); float[] coords = { -0.5f, -0.5f, 0f, // (x1, y1, z1) 0.5f, -0.5f, 0f, // (x2, y2, z2) 0f, 0.5f, 0f // (x3, y3, z3) }; _vertexBuffer.put(coords); _indexBuffer.put(_indicesArray); _vertexBuffer.position(0); _indexBuffer.position(0); }

Lets start with the new object variables. The _vertexBuffer will be filled with the coordinates for our triangle. The _indexBuffer stores the indices. The variable _nrOfVertices defines how many vertices are required. For a triangle we have three vertices.
The method itself allocate the needed memory for both buffer (line 14 – 22). Than we define some coordinates (line 24 – 28) and the comments behind each row explains you, how you can read the coordinates.
In line 30 we fill the _vertexBuffer with the coordinates stored on the coords array. The same with the indices array and the _indexBuffer on line 31. Finally we set both buffer to position 0.

To prevent the initialization of the triangle for every frame, we just do it once in a function that will be called before onDrawFrame(). On choice could be the method onSurfaceCreated().

@Override public void onSurfaceCreated(GL10 gl, EGLConfig config) { // preparation gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); initTriangle(); }

glEnableClientState() set OpenGL to use vertex arrays to draw. Thats important to enable because otherwise OpenGL don’t know how to handle our data. Than we will initialize our triangle.

Why do we have to work with different buffers? Lets take a look at the new onDrawFrame() method where we have to add some new OpenGL calls.

@Override public void onDrawFrame(GL10 gl) { // define the color we want to be displayed as the "clipping wall" gl.glClearColor(_red, _green, _blue, 1.0f); // clear the color buffer to show the ClearColor we called above... gl.glClear(GL10.GL_COLOR_BUFFER_BIT); // set the color of our element gl.glColor4f(0.5f, 0f, 0f, 0.5f); // define the vertices we want to draw gl.glVertexPointer(3, GL10.GL_FLOAT, 0, _vertexBuffer); // finally draw the vertices gl.glDrawElements(GL10.GL_TRIANGLES, _nrOfVertices, GL10.GL_UNSIGNED_SHORT, _indexBuffer); }

Ok now step for step:
glClearColor() and glClear() should be known by the first part of the series.
On line 10 we set the color for our triangle to a darker red using glColor4f(red, green, blue, alpha) .
On line 13 we initialize the vertex pointer using glVertexPointer() . The first parameter is for the size, also known as dimension of our vertices. Are we using just x and y or also z? We use all three dimensions. The second parameter, GL_FLOAT, defines the data type used in the buffer. The third parameter is 0 because our coordinates are tightly packed in the array, no offset used. And finally the fourth parameter is the buffer in which we have our vertices stored.
The last call, glDrawElements() , will draw the elements. First parameter defines what kind of primitives have to rendered. The second element defines the number of elements and the third parameter the type of the values used for the indices. The last one is the index buffer which will be used to render the vertices.

When you finally test the application, you will see a static triangle in the middle of your screen. The change of the color of your background should still work if you touch the screen.

Lets add some rotation to the triangle. The following code must be implemented in our VortexRenderer class.

private float _angle; public void setAngle(float angle) { _angle = angle; }

The glRotatef() method will be called in our onDrawFrame() right above glColor4f().

@Override public void onDrawFrame(GL10 gl) { // set rotation gl.glRotatef(_angle, 0f, 1f, 0f); gl.glColor4f(0.5f, 0f, 0f, 0.5f); // code snipped }

We rotate at the moment just around the y-axis. If you want to change this, simply change the 0f of the glRotatef() method call. The value of this parameter are for a vector which represent the axis on which the triangle will rotate.

To make this work, we have to add a call to the onTouchEvent() method in our VortexView class.

public boolean onTouchEvent(final MotionEvent event) { queueEvent(new Runnable() { public void run() { _renderer.setColor(event.getX() / getWidth(), event.getY() / getHeight(), 1.0f); _renderer.setAngle(event.getX() / 10); } }); return true; }

The division through 10 is to reduce the speed of angle changing.

Now compile and run the application. If you touch the screen at the most left side, you should see the triangle rotate slightly. If you move your finger to the right, the speed of the rotation should increase dramatically.

Source as Eclipse project: Vortex Part II

Go to Android 3D game tutorial – Part III