114 Pixel Art for Game Developers
it harder to hide the repetition. It also causes a situation where the
main subjects—such as the character—ght for priority with the
environment, which is not desirable.
FIGURE 9.10 Highcontrastcancreateproblemswhentiled.
• One item taking up the majority of the tile (Figure.). This makes
the repetition of the tiles painfully obvious.
FIGURE 9.11 Some patterns stick out when repeated.
• Tight concentration of detail in only part of the tile (Figure.). This
creates an eect similar to having something take up the majority of
the tile—and the repetition once again becomes obvious.
Tiled Backgrounds 115
FIGURE 9.12 Concentrated patterns become conspicuous when repeated.
• Accidentallyemphasizingthe tile edge(Figure .).Avoidputtingtoo
many pixels in a row right on the edges of the tile and you run the risk
of popping that tile out.
FIGURE 9.13 Avoid making the grid too obvious.
Now compare those against these tiles (Figure.). It is not that the aes-
thetic is so much better with these two, but the fact that they are being
repeated over and over becomes greatly obscured.
116 Pixel Art for Game Developers
FIGURE 9.14 Tiles that make the grid reasonably indiscernible.
Although there are times when emphasizing the tile works in your favor.
An example would be when you want to represent something angular or
ridged. Or perhaps there may be a time where you need to represent tiles
(such as oor tiles) with your tiles (Figure .).
FIGURE 9.15 Sometimes a noticeable grid is okay.
Iftheseseemabittooblandforyou,don’tworry—wecanstilladdtiles
that create variation!
Havingabasetilethatrepeatswithoutbeinganeyesorecanbeahuge
asset. A very modest time investment can go a long way toward having your
game look appealing—even in early prototype phases!
Once your innitely tiling texture is created and you feel good about it,
youcanadd variationsto make itlook moreorganicandgenerallymoreaes-
thetically interesting. When we take simple repeating textures and add just
a few variation tiles, it immediately becomes more interesting (Figure .).
Tiled Backgrounds 117
FIGURE 9.16 Use variation tiles to break the monotony.
And once those are built, we can use these elements to imply a path and
start to guide gameplay like in Figure ..
FIGURE 9.17 Variation tiles can compose your environment.
118 Pixel Art for Game Developers
9.4 CREATE A TILE LIBRARY
Once you’ve created a few tiles that you feel good about, you’ll want to
keep a repository of tiles. This can be called a tile set, a tile map, or a tile
palette. It really doesn’t matter what you call it, although it is helpful to keep
it organized and up to date as your tiles change and improve over time.
SomePixelArtprogramssuchasProMotionandPyxelEdithavesome
advanced tools that go a long way toward making the process easier. Specif-
ically what comes to mind is the autoupdate feature that allows you to make
changes to one tile and the program automatically updates all of the same
tile type inreal time.Thiscan be superhelpfulin eliminatingthe seam when
creating tiling textures. Unfortunately to the best of my knowledge, at this
point in time GraphicsGale does not have this feature.
9.5 DITHERING AND OTHER PATTERNS
Dithering is the concept of using the placement of pixels to imply blending
between colors. Because Pixel Art typically uses a limited palette, dithering
can trick the viewer into perceiving more colors than are actually used.
I think about dithering as having two main categories: patterned and
organic. In most cases I prefer an organic dither, so we’ll start with that one.
9.5.1 How to Create Organic Dither
Put a tile of each of the two colors that you want to blend next to each
other (I’ve used a 16 × 16 sized tile in my example). Dithering can easily be
completed using a two-step process, although other methods exist. Figure
. shows the process and follows the steps explained in the following:
Step : Add pixels of one color into the other side. Make the concentra-
tion more dense as it gets closer to the barrier between the two colors. Try
to avoid static patterns (we’ll talk about those shortly), but try to place the
pixels quasirandomly.
Step : Repeat the process with the other color, going the other direction.
Theendresultisagradientthatappearstoblendfromonecolorintothe
next. This kind of dither works very well for creating skies, shadows, and
other sorts of organic shading.
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.