Tiled Backgrounds 149
FIGURE E9.50 The three-tile method in action.
The three-tile method is a similar process to the slice method, but sig-
nicantly shorter. The shortcoming is that you cannot keep a genuine light
direction throughout your scene when building this way. The advantages of
thiswayovertheslicemethodarethatitisfastertocreatethetiles,eas-
ier to build a scene with the tiles, and less chance of inconsistencies. It also
means that your le sizes have the potential to be even smaller (which leads
to faster compile times, download times for players, le management, etc.).
Youcouldalsousethetilesavingstocreatealoadofvariationstotheedge,
which helps to conceal the appearance of the grid within the scene.
Step 7: Variation Elation for the Game’s Duration
Now let’s really hammer on this topic of variation and build a number of
variant tiles for the grass and sand. We’ve already built two types of grass
that begins to give a bit of variation, but I like ower tiles. They’re pretty. So
tobeginwith,let’screatesomeowerstobeaddedtothegrassandI’lltry
to break them down to show how I make them.
InFigureE.a,I’veillustratedthestepsIusetobuildtheowers.Start-
ing with one of the base grass textures, I’ll add a few light green pixels as a
owerstemorleafandoneofthebrightercolorsfortheowerpedals.This
is how each of the tiles is begun on the le-hand side. Next, I’ll start to add
some shadow being cast by the ower onto ground. Sometimes I’ll give a
bit of an outline to the ower so that it’ll pop out a bit more, as I’ve done
with the sunower. Finally, I’ll add some detail into the image in the form
of texture and additional light gradient when applicable.
150 Pixel Art for Game Developers
Onelastbit,togetthemostoutofoureorts,istoduplicatethenal
image with anothercolor. This eectively gets twodierent variations while
only expending the eort of building one.
(a)
FIGURE E9.51 (a) Creating new variation tiles.
Iwanttobuildanotherower(well,twoifwecountthecolorshied
duplicate),butIwantthisonetobegrowinginapatchthat’sabitwilder.
To give the impression of a thicker/wilder grass, we’ll want to use a higher
contrast in the colors between dark and light.
I want to extend as little eort as possible so I’m going to build darker
version ofour currentgrass beforebuildingthe high-contrastower. I know
that we’re going to need a grass tile with some cast shadow later, so we’ll
preemptthateortnowbeforebuildingtheower.
You can see in FigureE.b that the tile is identical, but with all of the
green colors shied one value darker. You could potentially build a new
grass tile with darker colors and ultimately that would likely be a more var-
ied (and likely more desirable) aesthetic. But this way is much faster and in
my experience does not detract from the scene in any noticeable way.
Tiled Backgrounds 151
(b)
FIGURE E9.51 (b) Use a palette shi to create a darker grass tile.
Thereareacouplewaystocreatethistilethatonlytakeacouple
moments. Many pixel art programs have a “darken” mode of some sort that
will automatically shi the colors down in value by one slot. The problem
with that is that it can sometimes give undesirable results (sometimes shi-
ing the colors too dark or loosing colors that are close in value). The best
practice is to have another le open with a dierent palette—a palette that
is almost identical but with the colors shied in position. Then when the
tile is cut and paste into the le, it will read with the new colors. The steps
involved in moving that tile back into your tile set can get a bit convoluted
and they are rather program-specic, so I’ll let you nd your inner pixel
genius work out those minute steps.
Now where were we? Oh yes, creating a wild ower. In Figure E.c, I’ve
shown the steps to building the wild ower. First add three pixels of a light
green to make some larger blades of grass, then add some dark green next
to them to make them “pop” out a bit. You could potentially use this tile as
another grass variation, but it would need to be altered quite a bit so that
it wouldn’t look so patterned when repeated. You can x it up if you like,
but I’ve got too many other nuggets of information I need to pass on to get
sidetracked onthis grass tile. I just added the pink owers intothe grass and
placed some dark green next to them the same way I did with the blades of
grass, but with a darker green so that they’d be more pronounced. Lastly, I
added a yellow variation version to capitalize on my eort.
152 Pixel Art for Game Developers
(c)
FIGURE E9.51 (c) Two new variation tiles, with a palette shi to create a third.
In FigureE., we’ve used the tiles on the le to create the scene on
the right and it’s already starting to come together. Doesn’t that look like
afantasticplacetoslaydragons?
FIGURE E9.52 Just tiles can create whole scenes.
In Figures E. and E., I’ve created some stones for the grass in a
fairly standard way. I’ve begun with ugly grey blobs placed within the tile.
Youmaynotice that theseare builtwiththreestones,andthatisno accident.
I almost always use odd numbers when creating organic scenery, as even
numberstendtobereadintopatternsmoreeasilybythehumaneye.Odd
numbersofitemsarealsofrequentlyused inne artandaresometimescited
as being aesthetically preferable.
Tiled Backgrounds 153
Next, I’ve created light and dark in the grass, followed by some light and
dark in the stone. Lastly, I’ve added some texture in the rock to make them
look niy.
I’m sure you’ve noticed that Figure E. features an image built onto two
consecutive tiles. I hope I didn’t just blow your mind with that one. It turns
outthatwe’reallowedtodothat!Ifyouweretosplitthetwohalvesapart
theywouldlookdreadful.Butsolongastheyaretogether,theycanaddnice
little dollops of augmented detail for a scene.
FIGURE E9.53 Using an odd number of rocks.
FIGURE E9.54 Using a two tile sequence.
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.