OPEN GL ES Tutorial Part 1 : Setting up view

By Merabtene Abdelhafid Thu, 01/12/2012 - 08:13

In this series of articles, We will be introducing you to Android Game Development using the OpenGL ES graphics API.

We use Eclipse as IDE and the 2.2 android version. I will suppose you know Java programming and that you already created an application for android, this means that you know how to setup an Android project on Eclipse.

To follow this article and understand it, you need to know the definitions of some of key words like vertex, vertex buffer, and primitive or mesh. So we will start with explaining each word below.

Vertex:

A vertex is a point in the 2D or 3D space; it is the smallest unit of a primitive*, the plural of vertex is vertices, in the programming side, this is an array of two real numbers in 2D and three real numbers in 3D.

Vertex Buffer:

This is an array of vertices used to draw a primitive*.

Index:

This is an integer that represents the index (position) of a vertex in a vertex buffer. The plural of index is indices

Index Buffer:

This is an array of indices used to determine the order of the vertices.

Primitive:

A primitive is a common shape like box, sphere, cone, cylinder …

Mesh:

Mesh is a complex shape, for example: The human body is a mesh, a car is a mesh.

Meshes are created in modelling software like Blender, 3DMax, Maya …

That’s all for the vocabulary now. You will be learning more on the go.

Let us create a new Android project in Eclipse and name it whatever you like.

Before we draw anything with OpenGL ES, we need to create our own custom view inherited from GLSurfaceView.

So we add a new class named MyGLRendererView that inherit from GLSurfaceView.

GLSurfaceView implements the GLSurfaceView.Renderer interface which is responsible of drawing (we also say rendering) the 2D and 3D stuff.

Code:

import android.util.AttributeSet;

import android.content.Context;

import android.opengl.GLSurfaceView;

public class MyGLRendererView extends GLSurfaceView

{

public MyGLRenderer _renderer;

public MyGLRendererView(Context context)

{

super(context);

_renderer = new MyGLRenderer(this);

setRenderer(_renderer);

}

public MyGLRendererView(Context context, AttributeSet attrs)

{

super(context, attrs);

_renderer = new MyGLRenderer(this);

setRenderer(_renderer);

}

You see that I used the MyGLRenderer class which doesn’t exist yet, so we’ll create it.

Create a new class named MyGLRenderer and put in the code bellow:

Code:

import javax.microedition.khronos.egl.EGLConfig;

import javax.microedition.khronos.opengles.GL10;

import android.opengl.GLSurfaceView;

import android.opengl.GLU;

public class MyGLRenderer implements GLSurfaceView.Renderer

{

MyGLRendererView _view; // The view containing this Renderer

public MyGLRenderer(MyGLRendererView view)

{

_view = view;

}

// Call back when the surface is first created or re-created

public void onSurfaceCreated(GL10 gl, EGLConfig config)

{

}

// Call back after onSurfaceCreated() or window's size changes

public void onSurfaceChanged(GL10 gl, int width, int height)

{

gl.glViewport(0, 0, width, height);

}

// Call back to draw the current frame.

public void onDrawFrame(GL10 gl)

{

gl.glMatrixMode( GL10.GL_PROJECTION );

gl.glLoadIdentity();

GLU.gluOrtho2D(gl, -_view.getWidth(), _view.getWidth(), -_view.getHeight(), _view.getHeight());

// define the background color

gl.glClearColor(0.0f, 0.0f, 0.9f, 1.0f);

gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

}

onSurfaceCreated : This method is called when the surface is created or re-created, in our situation, nothing is done.

onSurfaceChanged : This method is called every time the surface is resized. Here we’re calling the glViewport function used to define the view port rectangle.

onDrawFrame : This method is called every frame, its main purpose is drawing the scene.

gl.glMatrixMode( GL10.GL_PROJECTION );

gl.glLoadIdentity();

In the first line, we tell the OpenGL ES API to switch to projection matrix mode; it is needed to call the next function GLU.gluOrtho2D. The second one resets the current matrix (The projection matrix) to its identity.

GLU.gluOrtho2D(gl, -_view.getWidth()/2.0f, _view.getWidth()/2.0f, -_view.getHeight()/2.0f, _view.getHeight()/2.0f);

This line sets an orthogonal 2D view for the scene.

The parameters specify the coordinates for the left, right, bottom and top clipping planes (In other words, this is used to set the unit of the x and y axis, here our unit is the pixel).

At this point, we have a last thing to do; we will add our created view to the application layout. In Eclipse, go to the res folder and the layout subfolder and double click on the main.xml file, go to Custom & Library Views then drag the MyGLRendererView to the phone screen and change its size to fit the height and width.

Now just run you application, you will see a blue screen (the colour we specified in the code as background), this means that our view is working fine and we can start serious job like drawing shapes on the screen.

The final output should look like: