Game Development Reference
In-Depth Information
Our cannon, which will now take up 1×0.5 m in the world, will thus use 50×25 pixels on
the screen. We use a 64×32-pixel region from our texture, so we actually downscale the
texture image a little when rendering the cannon. That's totally fine—OpenGL ES will do this
automatically for us. Depending on the minification filter we set for the texture, the result will
either be crisp and pixelated (
GL_NEAREST
) or a little smoothed out (
GL_LINEAR
). If you wanted a
pixel-perfect rendering on the a 480x320 pixels device, we need to scale our texture images a
little. We could use a grid size of 25×25 pixels instead of 32×32. However, if we just resized the
atlas image (or rather redrew everything by hand), we'd have a 50×50-pixel image—a no-go with
OpenGL ES. We'd have to add padding to the left and bottom to obtain a 64×64 image (since
OpenGL ES requires power-of-two widths and heights). Thus, OpenGL ES is fine for scaling our
texture image down on the low-end device.
How's the situation on higher-resolution devices like the HTC Desire HD (800×480 in landscape
mode)? Let's perform the calculations for this screen configuration via the following equations:
pixelsPerUnitX
=
screenWidth / worldWidth
=
800 / 9.6
=
83 pixels / meter
pixelsPerUnitY
=
screenHeight / worldHeight
=
480 / 6.4
=
75pixels / meter
We have different pixels per unit on the x and y axes because the aspect ratio of our view
frustum (9.6 / 6.4 = 1.5) is different from the screen's aspect ratio (800 / 480 = 1.66). This was
discussed in Chapter 4, which outlined a couple of solutions. Back then, we targeted a fixed
pixel size and aspect ratio; now we can adopt that scheme and target a fixed frustum width and
height. In the case of the HTC Desire HD, the cannon, the cannonball, and Bob would get scaled
up and stretched, due to the higher resolution and different aspect ratio. We accept this fact,
since we want all players to see the same region of our world. Otherwise, players with higher
aspect ratios would have the advantage of being able to see more of the world.
So, how do we use such a texture atlas? We just remap our rectangles. Instead of using all of
the texture, we just use portions of it. To figure out the texture coordinates of the corners of
the images contained in the texture atlas, we can reuse the equations from one of the previous
examples. Here's a quick refresher:
u
=
x / imageWidth
v
=
y / imageHeight
Here, u and v are the texture coordinates and x and y are the pixel coordinates. Bob's top-left
corner in pixel coordinates is at (32,32). If we plug that into the preceding equation, we get
(0.5,0.5) as texture coordinates. We can do the same for any other corners we need, and based
on this set the correct texture coordinates for the vertices of your rectangles.
An Example
We add this texture atlas to our previous example to make it look more beautiful. Bob will be
your target.
Copy the
Camera2DTest
and modify it a little. Place the copy in a file called
TextureAtlasTest.
java
and rename the two classes contained in it accordingly (
TextureAtlasTest
and
TextureAtlasScreen
).
