Publishers of technology books, eBooks, and videos for creative people

Home > Articles

  • Print
  • + Share This
This chapter is from the book

Drawing Sprites

OpenGL ES is a powerful graphics rendering API for creating 2D and 3D graphics. Because all objects in OpenGL ES are made up of triangles, you can create any object by combining triangles of various sizes. For example, a square or rectangle consists of two triangles combined.


A triangle is made up of individual points, each called a vertex, which is a geometric point in space. In Raiders, a vertex will be an x,y point; but, in reality, each vertex in the game is a point in 3D space that always has a z of 0. Because the game is in 2D, the rendering is performed on a single plane in 3D space.

To create a square from two triangles you only need four vertices as shown in Figure 4.2. OpenGL is smart enough to close the triangles from vertices 1-3 and 4-2. Once you start adding triangles, you can see the power of this. To create a house image from the square, you would add another triangle but would create only one more vertex (Figure 4.3).

Figure 4.2

Figure 4.2 Square made from two triangles with four vertices

Figure 4.3

Figure 4.3 Adding another triangle creates only one more vertex.


A 2D game like Raiders only requires you to create quads, which are two triangles combined to create a square.

By itself, a quad is just a collection of points of a certain size. Once the quad is created, a texture is needed for it. A texture is a graphic that covers the top of the quad vertices, much like a dust cover covers a book or a tea cosy covers a teapot. This technique is called texture mapping.

OpenGL ES imposes a limitation on all textures. A texture’s width and height must be a power of two: 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024. Because iOS devices prior to iPad, iPad 2, and iPhone 4 could not recognize textures greater than 1024 x 1024, you should consider that the maximum size for a texture in an iOS game. However, the image doesn’t need to be square, so it could be, for example, 64 x 32 pixels in size.

  • + Share This
  • 🔖 Save To Your Account