GAME SPRITES

creation techniques

BY-Solid
Snake

While

there are plenty of programming-related materials available for free in the

Internet, while you can easilly get some quite easy to learn game engine systems

(like Game Maker, for example), I have got an impression that the graphical

design part of a game developer`s work has not been described anywhere quite

well. Some people know how to use graphical editors, some not, but I personally

haven`t seen yet ANY clear enough tutorial, dedicated explicitely to the game

images and sprites creation techniques. In this material we are going to make

the first approach towards the solution of this unfair situation - I`ll tell you

what I know (and what I`m doing) about the ways to create and arrange game

graphics.



We have worked quite a lot with Delphi IDE, a nice interface for creating

different programs and games, but now, not having a wish to "invent another

bicycle", we use for 80% of our needs a nice free game engine Game Maker

(versions 3.3. and 4.0). It allows us to simply forget about a lot of boring

object classes definitions, DirectX support, etc. - almost everything is is

"automatic" there, and we love it.




Internal graphical support and output system is also done very nicely in Game

Maker. It makes life a lot easier for almost anyone - game making newbie, or an

expert. But still, as in many areas, you usually need some clear description of

what and how should you do in this fully wonderful piece of software, in order

not to get into trouble.



Creator of the


Game Maker,
a very

talanted and highly respected by me guy Mark Overmars, has written a set of

pretty clear documents, which you can study and take for the programming/design

tutorials for his Game Maker engine. Unfortunately (I have tested it myself),

quite many things are far from being obvious and Mark is not giving us any

description on how should you live with them and overcome our problems.

Certainly, you can visit the official Game Maker messageboard (forum) and ask

your question there, but my personal experience shows that in the best case only

50% of your questions will find their answers.







I`m saying all this long and boring foreword just trying to explain, why have I

decided to write this material, while there are plenty of ALMOST the same

articles and descriptions available. As I said, I personally HAVEN`T FOUND

anything like what I`m going to clearly describe below, in the times when I

needed it.











A BIT OF THEORY







Let me start with a little bit of required theory (said in the plain,

non-scientific English). Some people will find the points described below quite

obvious, dumb and simple, but please keep in mind, my friends, that not all the

people are that experienced and know as much as you. Therefore, there should be

someone, who explains even the very simple things.







First of all, let me introduce the main term for our lecture - "SPRITE". Sprite

is a semi-transparent image, that represents and illustrates some object in the

game. Object can be anything - a wall, the main character, a monster, a lamp on

the wall, etc. In order to visualize the object (with all its behaviour,

actions) on the screen, you need to give it a "face" - particular image. This

image is called a sprite.







Graphical design of the game usually means design and creation of different

sprites, creation of level background images and creation of some

"cover-pictures", like titles, advertisement banners, etc. If your game will not

be something like the famous "Myst", where beautiful rendered backgrounds were

in the center of players` attention, and if your game is going to be relatively

active (actions, arcades, RTS, some RPGs, etc.) - the leading role in it will

play different characters (hero, monsters, prizes, weapons, bullets, etc.).

Those should be assigned a sprite (normally - animated). In other words,

creation of sprites will consume some great part of the total game development

time. I want you to understand that sprites are REALLY important.







Have a look at the following points (I would even allow myself to call them

"tricks"), that you should always remember about game sprites, while designing

and using them in Game Maker:







1. The bigger is character`s sprite and the more animation phases it has, the

more resources your game will need in order to run properly. Some old PC systems

could be significally slowed down by complicated (maybe beautiful) animated

sprites, which cover one third of your display.







In other words, it means that while designing sprites (character sizes, for

example) for your game, you should always keep in mind how much resources will

be consumed by those. We have to think about potential with "weak" machines out

there, who will be automatically "cut off" your nice game, if the system

requirements are too high.







2. There is one rule in Game Maker engine system (and in some other game making

systems as well), which is not obvious and which is not described anywhere in GM

documentation. I have understood it only after having some SERIOUS problems with

improper sprites usage. This rule says: all the sprites, that are planned to

belong to the same active game object should have the same size.







The thing is that when visualizing an object (by displaying its sprite) the game

engine dynamically reserves some amount of PC`s memory in order to store the

sprite there. The bigger is the sprite, the more memory is needed. But this is

not the trick. The trick is that when some sprite is currently assigned to your

object (while your player is running to the right, for example), system has

selected some amount of memory for it. When in the next second you are pressing

left arrow key and your object changes it`s look, taking another sprite, where

it`s represented running to the left, the memory ammount is going to be

re-assigned IF the system requires ANOTHER amount of video memory.







If "right" sprite has 100x50 pixels, and "left" sprite somehow - 105x47

(ridiculous, I agree, but it REALLY happens quite often), the engine will lose

some time ans resourses on re-assigning the needed video memory amount. I agree,

modern PC`s are mostly clever and fast enough to do it VERY quickly, without any

harm to the user, but don`t forget that you CAN have 10 or 20 instances of the

same object at the same time on the screen. At the same time, game engine has

it`s own understanding of some matters and it reacts sometimes unpredictably on

these graphical design mistakes. Especially the older version of Game Maker -

3.3. - had these problems and it could take you a week to understand WHY ON

EARTH is your game crashing?!... Now, you know. :-)







3. The main requirement to the game sprites is their transparence. Here I should

admit - you may find this point well described in the GM manual. Game Maker

takes the lower left corner pixel of the sprite as a transparency mask. It means

that if lower left corner of your sprite is green, you shouldn`t have ANY green

details on the image itself (i.e. character clothes), or they will be made

transparet as well. Watch out, half-tones (i.e. grey is a "half-tone" of black)

could be also affected!











PRACTICE







This should be it with the theory, so we can go to practice. Here, let us find

an answer to the following question: where do we get our nice character sprites?







Good question, isn`t it? Certainly, if you are a professional artist and drawing

very well - you`ll have no problems with it. But what should WE do - simple

programmers, game lovers, etc.? Who will give us all this beauty? Correct -

noone will come and give it to us. We should find everything ourselves.







The most simple way is to search for the freeware sprites collection or clipart

in Internet. Yes, I know that with all the enormous amounts of artworks and

clipart in Internet you can very rarely find anything REALLY nice. Different

kinds of crap here and there... What to do?







Well, you can search further, until you`ll find something satisfactory, or you

can try to follow our way, that we used while creating Vault Runner

series. This game title was designed as Fallout Fan-Art software. We were not

intending to sell the games, and we just wanted to create our own "extension" to

the Universe of Fallout (originally created by Interplay, Inc. and Black Isle

Studios). So, you can do as we did - take the original graphics of some

commercial title and play with it. But don`t even think about selling your game

afterwards! :-)







As I have said, you CAN choose the "Fan-Art way" because it`s relatively easy,

but as a person who has tried it several times, I wouldn`t advise you to do so.

Why? Isn`t it obvious at this point? You will ALWAYS have to write in your

documentation and title screens of your games that "All rights are reserved by

Interplay, Inc." etc. Certainly it`s not that bad and we do love Interplay for

their geunine Fallout, but who wants to create a game, which basically cannot be

called YOURS? I`m really tired of it and I think it`s worth to lose some time

searching for the free images in the Internet, or create them yourself, but let

your game be YOUR game and not someone else`s property...







Game Maker comes with some standard set of images and icons, that you could use

in your games, I presume, free of charge, but those will not be enough for you.

Also in GM documentation, Mark Overmars gives us a couple of quite useful free

graphical resource links (two of them are actually dead...), and by following

one of them we will find something that is really worth mentioning here.







Some nice guy, called Hermann Hillmann has put a small archive of his





game sprites collection

in the Internet and licenced it as "free for non-commercial use". We love

you, pal! His pictures are not very much unique, if I can say so, but they will

give you a lot of time to play with the quite good graphics, without searching

anything else. You will find several characters with all the phases of their

animations prepared just to be taken "as they are" and to be put into your great

new game. Go ahead, download these archives if you like. We`ll need them in our

further excersise.







In order to prepare animated character sprites to be used in your new game,

we`ll need at least two graphics editing programs (which I use) - Adobe

Photoshop (version 4.0 and higher) and




Animagic GIF Animator.

Please make sure that you have those, before we`ll go on. I`m not going to make

a full tutorial on how to use every cool feature of these programs - I will just

show you how a good quality animated sprite could be made with the minimum of

effort (actually, I have got several questions concerning this subject by E-Mail

- so, guys, I`m answering you now).







Since you will naturally use almost the same creation process scheme for all

your game sprites, we`ll take the simplest example of creating a static hero

image (while he is not moving anywhere) and will see how easy you can create an

animated sprite of the hero, running to the left. Afterwards, when you`ll get

the picture of how the process looks in general, you will easilly follow it to

make sprites for monsters, prizes, etc.















Once you`ve downloaded one of the "Character Packs" from the link above, unzip

the archive and find the file "standing01.jpg" in the directory. Open it in

Adobe Photoshop, and by pressing keys [CTRL] and [+] together, zoom it in to see

every detail very clearly. Decide for yourself - how big do you want the

picture-set on the screen. I usually zoom up to 200%.







As you see, the main character is represented on the green field under all the

possible view angles and in different possible states (unarmed, with weapon, on

the bike, etc.). You can chose anyone you want, but as an example I suggest that

we`ll take the upper left - first one.







By chosing "Rectangular Selection Tool" in Photoshop toolbar, select a

rectangular area around the desired image so, that the thin black border will

NOT be in your selection, but "guide" you, defining the correct selection size.

In other words, select the same rectangle, but a bit smaller than the borders.

By clicking menu item "Edit"->"Copy" (or by pressing [CTRL]+[INS] key

combination) copy your selecton in the clipboard.







Now, create a new Photoshop document, by clicking "File"->"New". One of the most

cool (but nowadays quite ordinary) features of Photoshop is that it`s

automatically defining the size of a picture, that`s now in the clipboard and is

making a new file by default of the required size. This is exactly what we want!

Don`t change the default size of the new document, that Photoshop suggests, and

make "File"->"Paste" in it. You`ll get your copied hero into the new small

photoshop image.







Don`t forget that we have decided to do everything quite accurately, in order

not to have any problems with video memory management in Game Maker, and

therefore, while preparing any other animation phases (frames) for the second

example, you should control the sizes of your new images. They all should be the

same.















In order to check the horisontal and vertical size of your sprite, go into

Photoshop main menu item "Image"->"Image Size". Here you must make sure that the

dimensions are given in Pixels (it`s easier to count them eventually), you can

see current Width and Height of your image and change their values, if you like.

If you have accurately copied the first hero frame from the character pack, as

described above, you should have got the image of the size - 94x94 pixels.







Now you can make a GIF export of the image by clicking menu item

"File"->"Export"->"GIF Export..." and our first static sprite is ready.







In order to make an animated sprite of the hero running to the left (or in any

other direction), you need to clearly understand what an animated GIF is.

Briefly, animated GIF is a special image format, that is actually some sort of a

dynamic container for a set of images, stored in it following some sequence.

Some graphics viewing programs, like your Internet browser (but NOT Adobe

Photoshop!) can display all the animation frames, and you can see the small

"movie" with all the frames looping before your eyes.







To create an animated GIF, we need two things - a set of static frames

(sprites), representing sequential movement phases, and the special program,

capable of packing these frames all together. There are many GIF animation

programs available in the Internet for some free or trial download, but I advise

you to use "Animagic GIF" for it`s simplicity.















Like we said, let`s prepare the set of static frames to pack within one animated

GIF file. Load the file "walking01.bmp" from the downloaded Character Pack into

Adobe Photoshop and chose one "line" in the pictures-set, which represents

animation phases for the ranger walking strictly left. Now, by following the

simple procedure, fully described above, create a set of single images (of the

same size!), each of which will have only one image of the ranger, walking left.

You should get 8 pictures and it would be clever to give them names "1.gif",

"2.gif", etc. correspondingly.















Now, when you have prepared the static set of frames for your animated GIF,

start Animagic GIF program and click once menu item "File"->"Append Frame". The

first animation frame will be added by default into the movie sequence.

Repeating this command for all the rest static frames, you will eventually get

the full frame sequence that can be seen in the window to the right.







By pressing "Play" black triangle key you will see your hero quickly running on

the screen. Now save your sequence as a standard animated GIF file. You`re done!

Congratulations!







[ ATTENTION! ] Depending on the Animagic GIF version that you`ll use, before

saving the animated GIF file, the program will allow you to chose, whether to

make the image transparent. I.e. it can ask you to chose the "transparency

color" - now you know what it means (from the description above). Please

remember, that Game Maker engine will try to make the image transparent by it`s

own! It naturally doesn`t need any help from the external programs. So, you can

surely decide for yourself, but I wouldn`t make the created GIF file transparent

directly in Animagic GIF. I strongly advise you to preserve the non-transparent

contrast green background and allow Game Maker deal with it itself.