Creating Textures and Sprites

When you're creating textures and sprites, it's a good idea to define the scale of the pixel or texel size in terms of real-world dimensions. For example, in a 3D game, you could say that 100 texels is 1m, or 1 texel per centimeter. This way, you can determine what size to make a light switch or door handle, and the size will be logical relative to everything else in the world. For sprites, it's sometimes easier to work with basic graphics primitives such as ovals, lines, and other simple shapes rather than drawing by hand. You'll notice the sprites used in the platform game in are all made up of simple shapes, such as circles, stars, and even hearts. Most graphics programs can create shapes like these easily. For those of you who can draw on paper better than you can by using a graphics program, here's another idea: You can always scan in drawings and then use a graphics program to clean up the lines and fill in some color. When you're creating textures, consider how textures are usually tiled across a polygon. If the texture has, for example, a noticeable blotch of color, then when the texture is tiled, it will end up looking like a polka-dot pattern of blotches. Instead, keep textures fairly subtle. One idea for creating a texture is to start the texture as a solid color and work your way from there. Add noise and subtle texture effects to make it look more realistic. Many graphics programs have effects to make an image look like an asphalt, metal, or wooden texture, for example. Also, bad art sometimes looks better when it's scaled down to a smaller size. If you want 64x64 textures for your game, initially create 128x128 or 256x256 textures and then later scale them down. Don't be afraid to experiment! Work with color adjustments such as gamma and brightness and contrast. Apply shadow effects, such as a drop shadow, to give a texture more depth. But remember, these are textures: For a 3D engine, you don't want to draw too much depth onto a texture, or it will look incorrect when you're not looking straight at the polygon.

Graphics File Formats

We talked about graphics file formats back in , "2D Graphics and Animation," but here's a quick overview. For photographic work, the JPEG format is a good choice because it offers high compression and high quality, even though it's a lossy format. Textures and sprites are better off saved as PNGs, though, because this is a lossless format. One note about PNGs: If you're looking to make a PNG image use bitmask transparency (as opposed to alpha translucency), you'll need to convert the PNGs to 8-bit, 256 color using index transparency. If you save it using more than 8-bit color, it will be a translucent image that isn't hardware accelerated (as of J2SDK 1.4.1). Sometimes you want to decrease the file size of an image—for example, to decrease the overall size of the game media. The best way to decrease the file size of a PNG image is to reduce the number of colors in the image. Also, make sure the image isn't dithered, which tends to look bad in most game situations anyway.

Creating Seamless Textures

Speaking of tiling textures, when the textures are tiled across the polygon, you'll want to make sure the edges of the texture aren't noticeable—you want the texture to look seamless when it's tiled. Screenshot shows a texture that looks cool but doesn't tile well. Luckily, many graphics programs offer this functionally built in. Try to make it difficult to tell where the seam is, as in Screenshot.

Screenshot A texture might look nice by itself, but seams are apparent when it's tiled.

Screenshot Many graphics programs can modify a texture so that it is seamless when tiled, as in this example.

One idea to create a seamless texture is to use a repeating pattern, such as a square grid (or even a hexagon grid). Some more seamless tile examples are in Screenshot.

Screenshot Some more seamless tiles.

In this figure, the first texture is a 3x3 grid, so the seams of the texture aren't noticeably different from the lines of the grid. The second texture is solid gray except for a pattern of ridges, some black lines, and a rusty spot in the center. With the ridge pattern repeating four times in the texture and the black line breaking once, it will be difficult to tell where the seam is when the texture is tiled horizontally. When it is tiled vertically, it will be very noticeable. Finally, the third texture is an all-around seamless tile. It's a wood-like texture that was made seamless by using Paint Shop Pro. It can be tiled on all sides without much of a seam, but it does have a noticeable pattern.

Creating "Alternate" Textures

Sometimes a tiled texture can get very monotonous to look at. Lighting in a 3D engine helps this a lot, but another way to break up the monotony is to use an alternate texture that is slightly different from a tiled texture. For example, check out the alternate texture in Screenshot.

Screenshot An example of an alternate tile.

Using this texture helps break up the monotony of a tiled texture, as shown in Screenshot.

Screenshot How the alternate texture looks among the others.

Screenshot shows more alternate textures, using a texture with fake lighting and a texture with an interesting object.

Screenshot Another example of using alternate tiles.

Creating Transition Textures

In top-down games, you often have all sorts of different textures to define the terrain, such as water textures and grass textures. Unfortunately, you come up with an ugly situation when different textures are next to one another, as with the grass and water tiles in Screenshot.

Screenshot Two different tiles, grass (left) and water (right) butt up against one another.

To fix this, you can use a "transition" texture that gives a better-looking boundary between grass and water. In Screenshot, a transition texture is inserted to represent the beach between the grass and the water.

Screenshot Using a transition tile to smooth the boundary between the two tiles.

Of course, the solution in Screenshot fixes the problem only when a grass tile is on the left of a water tile. In a game, there will be many different situations, such as when grass is to the right of water, or when grass surrounds water on two sides. First, you'll create three different transitions, as shown in Screenshot. This allows water to be on one side, two sides, or a corner of the transitions texture. Optionally, you could make more transitions to allow water to be on three and four sides, but this will work for many situations.

Screenshot Three different transition tiles.

An asymmetrical tic-tac-toe pattern is drawn over the transitions tiles in Screenshot to show the edges of the different parts of a transition. The outside border of the texture should be the same for every texture: either completely water, completely grass, or the gradient from water to grass. Luckily, these three transitions are all you need. At runtime, you can rotate each transition texture three different ways (90°, 180°, 270°) to get the transition textures shown in Screenshot.

Screenshot The three different transition tiles can be rotated to create a total of 12 transition tiles.

Using these 12 transition textures, you can create all sorts of nice-looking types of terrains, such as islands, lakes, and rivers, and you won't have any ugly situations when different textures are next to each other. Of course, this is just the tip of the iceberg with transition textures. You can also create transitions when three different textures run into each other. Also, some games use two or more textures for the same transition, so there is a bit of variation in the look of the transitions.

Creating Multi-Layer Textures

Another neat trick is layering textures on top of one another. This works by having one "background" texture and a "foreground" texture that is partially see-though. Take Screenshot, for example. This shows two separate layers: the terrain layer and the road layer. Each is composed of the same size textures. The two layers are combined in Screenshot.

Screenshot Two layers exist: the ground (left) and the road (right).

Screenshot The road layer is layered on top of the ground layer within the game.

This way, roads have the flexibility to go over any type of terrain, whether it be grass, sand, beach, or whatever. Of course, you don't have to stop with just two layers. For example, in addition to the background and road layers, there could be a "path" layer that shows a dirt path on top of the grass terrain.