iPhone Game Development - Chris Craft [130]
The drawView method is the most important method in this class. You will learn more about the details in the following breakdown of the method. Listing 9.1 shows the complete code.
Cross-Reference
To download Listing 9.1, go to www.wileydevreference.com and click the Downloads link.
Listing 9.1
The drawView Method Is Responsible for Rendering the Scene
- (void)drawView {
// Replace the implementation of this method to do your own custom drawing
const GLfloat squareVertices[] = {
-0.5f, -0.5f,
0.5f, -0.5f,
-0.5f, 0.5f,
0.5f, 0.5f,
};
const GLubyte squareColors[] = {
255, 255, 0, 255,
0, 255, 255, 255,
0, 0, 0, 0,
255, 0, 255, 255,
};
[EAGLContext setCurrentContext:context];
glBindFramebufferOES(GL_FRAMEBUFFER_OES, viewFramebuffer);
glViewport(0, 0, backingWidth, backingHeight);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrthof(-1.0f, 1.0f, -1.5f, 1.5f, -1.0f, 1.0f);
glMatrixMode(GL_MODELVIEW);
glRotatef(3.0f, 0.0f, 0.0f, 1.0f);
glClearColor(0.5f, 0.5f, 0.5f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
glVertexPointer(2, GL_FLOAT, 0, squareVertices);
glEnableClientState(GL_VERTEX_ARRAY);
glColorPointer(4, GL_UNSIGNED_BYTE, 0, squareColors);
glEnableClientState(GL_COLOR_ARRAY);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);
[context presentRenderbuffer:GL_RENDERBUFFER_OES];
}
The first item in the method drawView is a declaration for the array squareVertices. The following array defines the vertices and, indirectly, the face for your square. In an effort to maintain cross-platform compatibility, OpenGL uses a simple one-dimensional array to represent this data. This array defines the X and Y coordinates of four vertices. You can interpret the following array as follows: { x1, y2, x2, y2, . . . }.
const GLfloat squareVertices[] = {
-0.5f, -0.5f,
0.5f, -0.5f,
-0.5f, 0.5f,
0.5f, 0.5f,
};
OpenGL ES cannot directly render a square, so you must define your square as two triangles. The order in which you define the vertices is very important. OpenGL uses the order in which you specify the vertices to determine which side of the triangle is the front and which is the back. By default, the face that is wrapped by vertices in a counterclockwise order is the front face (Figure 9.16). The face that is wrapped by vertices in a clockwise order is the back face. It's important to know which side is the front because that plays an important role in the way the shape is drawn.
Tip
Another way to determine the front face is to use the right-hand rule: First use your right hand to wrap the vertices with your fingers pointing in the direction that the vertices are ordered. Then extend your thumb and it will be pointing in the direction of the front-facing side.
FIGURE 9.16
If the order of the defining vertices wraps the first triangle in a counterclockwise direction, that will be the front-facing side.
The next array in the code defines the colors you see on the screen. As with the previous array, OpenGL expects a one-dimensional array to define the color values using an expected order instead of a strong type. The repeating order used to define the colors is as follows: { red1, green1, blue1, alpha1, red2, green2, blue2, alpha2, . . . }. The following array is how you will see it in the code:
const GLubyte squareColors[] = {
255, 255, 0, 255,
0, 255, 255, 255,
0, 0, 0, 0,
255, 0, 255, 255,
};
Each color entry in the previous array matches the corresponding vertices in the previous matrix by order. You'll notice when you run the example that the colors are blended from the corners. This effect is achieved by defining the color of each of the vertices.
The following lines bind the frame buffer to the view containing the OpenGL context. In short, this creates the binding that ultimately results in the square shape rasterizing to the UIView where you expect to see it:
[EAGLContext setCurrentContext:context];
glBindFramebufferOES(GL_FRAMEBUFFER_OES,