How to re-write 2D OpenGL app for OpenGL ES?
I am working on an OpenGL 2D game with sprite graphics. I was recently advised that I should use OpenGL ES calls as it is a subset of OpenGL and would allow me to port it more easily to mobile platforms. The majority of the code is just calls to a draw_image function, which is defined so:
void draw_img (float x,float y,float w,float h,GLuint tex,float r=1,float g=1,float b=1){
glColor3f(r,g,b);
glEnable(GL_TEXTURE_2D);
glBindTexture(GL_TEXTURE_2D, tex);
glBegin(GL_QUADS);
glTexCoord2f(0.0f,0.0f);
glVertex2f( x, y);
glTexCoord2f(1.0f,0.0f);
glVertex2f(w+x, y );
glTexCoord2f(1.0f,1.0f);
glVertex2f( w+x, h+y);
glTexCoord2f(0.0f,1.0f);
glVertex2f( x, h+y);
glEnd();}
What do I need to change to make this OpenGL ES compatible? Also, the reason I am using fixed-function rather than shaders is that I am developing on a machine which doesn't support GLSL.
In OpenGL ES 1.1 use the glVertexPointer()
, glColorPointer()
, glTexCoordPointer()
and glDrawArrays()
functions
to draw a quad. In contrast to your OpenGL implementation, you will have to describe the structures (vectors, colors, texture coordinates) that your quad consists of instead of just using the built-in glTexCoord2f
, glVertex2f
and glColor3f
methods.
Here is some example code that should do what you want. (I have used the argument names you used in your function definition, so it should be simple to port your code from the example.)
First, you need to define a structure for one vertex of your quad. This will hold the quad vertex positions, colors and texture coordinates.
// Define a simple 2D vectortypedefstructVec2{float x,y;}Vec2;// Define a simple 4-byte colortypedefstructColor4B{GLbyte r,g,b,a;};// Define a suitable quad vertex with a color and tex coords.typedefstructQuadVertex{Vec2 vect;// 8 bytesColor4B color;// 4 bytesVec2 texCoords;// 8 bytes}QuadVertex;
Then, you should define a structure describing the whole quad consisting of four vertices:
// Define a quad structuretypedefstructQuad{QuadVertex tl;QuadVertex bl;QuadVertex tr;QuadVertex br;}Quad;
Now, instantiate your quad and assign quad vertex information (positions, colors, texture coordinates):
Quad quad;
quad.bl.vect =(Vec2){x,y};
quad.br.vect =(Vec2){w+x,y};
quad.tr.vect =(Vec2){w+x,h+y};
quad.tl.vect =(Vec2){x,h+y};
quad.tl.color = quad.tr.color = quad.bl.color = quad.br.color
=(Color4B){r,g,b,255};
quad.tl.texCoords =(Vec2){0,0};
quad.tr.texCoords =(Vec2){1,0};
quad.br.texCoords =(Vec2){1,1};
quad.bl.texCoords =(Vec2){0,1};
Now tell OpenGL how to draw the quad. The calls to gl...Pointer
provide OpenGL
with the right offsets and sizes to your vertex structure's values, so it can later use that information for drawing the quad.
// "Explain" the quad structure to OpenGL ES#define kQuadSize sizeof(quad.bl)long offset =(long)&quad;// vertexint diff = offsetof(QuadVertex, vect);
glVertexPointer(2, GL_FLOAT, kQuadSize,(void*)(offset + diff));// color
diff = offsetof(QuadVertex, color);
glColorPointer(4, GL_UNSIGNED_BYTE, kQuadSize,(void*)(offset + diff));// texCoods
diff = offsetof(QuadVertex, texCoords);
glTexCoordPointer(2, GL_FLOAT, kQuadSize,(void*)(offset + diff));
Finally, assign the texture and draw the quad. glDrawArrays
tells OpenGL to
use the previously defined offsets together with the values contained in your Quad
object
to draw the shape defined by 4
vertices.
glBindTexture(GL_TEXTURE_2D, tex);// Draw the quad
glDrawArrays(GL_TRIANGLE_STRIP,0,4);
glBindTexture(GL_TEXTURE_2D,0);
Please also note that it is perfectly OK to use OpenGL ES 1 if you don't need shaders. The main difference between ES1 and ES2 is that, in ES2, there is no fixed pipeline, so you would need to implement a matrix stack plus shaders for the basic rendering on your own. If you are fine with the functionality offered by the fixed pipeline, just use OpenGL ES 1.