You may also see many frames, each frame is a separate image that will be called upon by a .cos file. Depending on what sprite you have opened, you may see some frames that were never used in the final release of the game. There will also be a number under each frame. This is how CAOS knows which image is which. You may also notice that the first frame is called 0. TIP: It is important to remember that computers start counting at 0, not 1. This will show up in many other functions as well.

By now it may have become apparent that frames seem to be grouped in all the same sized boxes (the height and width of the total image). This is because the game can not handle objects suddenly changing sizes and going though the floor or wall! If the frames that a .cos file uses are not all the same size you will get something called a "Bounding Box Error". Keep this in mind because it is a common cause of problems later on. However, a sprite may hold different sets of frames that are different sizes. If a plant makes a fruit, they may have separate .cos files, but share the same sprite file. If you would like to see an example of this, bramboo.c16 (found in the "Docking Station/Images" folder) is a good choice.

Part 2, Using the Sprite Builder:
Now that you know the basics, lets try something more advanced.
1. Open up the file menu and choose "Export All". You will be presented with a normal "Save As" window.
2.Choose the location you wish to save all (I recommend your work folder or the desktop).
3.When you save your file, a "-#" will appear after it. Each number corresponds to the frame from which the file was exported.

When you export all, you will get every frame in the sprite saved in this way at one time with each file now existing in .bmp format! I usually make my base name 0, but you can use whatever you want. This option can save a lot of time, but few developers are aware of it.

Now that you have exported all, we will try the reverse function, called "Import All". It is located right below the "Export All" function.
1. Before you import the images, take note of the location of selected frame. Your imported image will appear directly in frunt of your selected frame. If no frame is selected, the image will appear after all currently existing frames. To select a frame you can simply click on it once.
2. Now, "Import All" and choose the name you chose earlier during export all. If you do not see the file, make sure you are in the correct folder. See how all of the images have lined up just right? When you make a .bmp it is important to remember this this feature. You will want to name your .bmp files with "-#" after a common name (I use 0) to have them loaded into the "Sprite Editor" in the numbered order. Again, you start counting at 0. For example, if I had three frames currently in .bmp format, I would name the first "0-0" the second "0-1" and the third "0-2".

You may be wondering at this point what you do when a frame is selected and you want your new images to build after the last frame of the old set. This is where some creativity comes in. You may either close the sprite and then open it again, or...
1. you can make a new dummy frame by selecting the last frame and then clicking the "Insert Bitmap" icon (7th button from the left). You will see that it makes a small blank frame to the left of the last frame.
2.Now click and drag the final frame in frunt of the dummy. See, that was fast. You can reorder sprite frames at any time by dragging and dropping them.
3. Now, select the dummy frame and "Import All". You get your images all set up and you don't have to scroll and drag the dummy all the way through your imported images, you just select it and press the "Delete" Key on your keyboard! You may think these steps are silly, but if you are importing 100 plus frames in one go, well, it's nice not to have to drag the last frame to the top and try and figure out where it went.

So now we know how to export and import. This is very helpful for debugging as you can export version one, repair the messed up frames and then import all into a new sprite! Which brings me to the next questions. How do you make a new sprite and what if you only want to insert a single frame?
1. Lets begin with getting a new sprite file, just go to your file menu again and choose new, or you can click the new button (first button on the left). Tada, blank page.
2. Remember that "Insert Bitmap" button, well click that to get a new dummy frame.
3. Now we will replace the dummy frame by selecting it and pressing the "Replace Bitmap" button (8th button from the left) You will be given an Open window, just select any bit map you want and click the Open button. Tada, the dummy has been changed into a good sprite.

Now, if you want to export only a single frame to work on, you click the next button (9th from the left) called "Export Bitmap". You can name this what you like.

I'm guessing that at this point you understand the general idea of using the Sprite Builder. There are more functions and buttons, but it is unlikely you'll ever need them, I never have. So, how about we actually do the art part?

Part 3, Drawing the Frames:
Begin by downloading and unzipping this .bmp file. Save the file to your projects folder.

Time to open it! Use your favorite art program, or let it open to the default, which is likely to be Paint. You will see that this image is no good for a sprite right now.

Yup, I'm going to make you work for it. The following steps are for the program "Paint", but if you're used to other art programs, you probably can modify the steps to work for it on your own.

Step 1 Obviously this image has a lot of work to be done on it. For starters, you'll see there is a blank space under the word "Graduate" on the trophy's base. This is for your name! Yep, we are making a trophy for your trophy room.

So let's start by choosing our text color. At the bottom of the screen, you should see a palate. We want our foreground color to match the purple used in the word Graduate, but it isn't on the palate. On the left side of the screen are a bunch of tool buttons.
1. Click the one called "Choose Color" (looks like an eye-dropper) and left click on part of the word "Graduate". See how this function lets you grab any color you used in the image before? This can be useful if you forget what color you where using. If you don't want the colors to match, you can use any other color you want.
2. Look back at your tool button list and click the "Text" button. It should have a picture of an "A" on it.
3. Now hold your cursor in the upper left corner of the picture and drag click so that you get a big bar across the top of the image, but one that doesn't touch the top of the "1" on the actual picture. If you made an error, just go to the "Edit" menu and choose "Undo" or press the "Ctrl" and "Z" keys on your keyboard at the same time. Good, now we have a type box, but it is probably white.
4. Look back at the pallet. If you click a color with the right mouse button, you'll see the background color of your textbook change. We want yellow (to make the edges of the text blend in with it's final location), so right click it.
5. Now, type your name. You may notice the font and size are wrong. If you do not see a little font toolbar, go to the "View" Menu and select the "Text Toolbar". You can change font size and stile on this toolbar. You can use whatever you want, but large plain text is best. The font stile of the rest of the trophy is called "Verdana (Western)" and it's size is 42 regular.

Great, you should now have a piece of text ready to go! Now would be a good time to save your work by going to the "File" menu and choosing save or by pushing the "Ctrl" and "S" keys at the same time.See example picture

Now, remember how we set the background color to yellow? This also makes any selection with yellow in it change pure yellow to clear!
1. To select the text, look at the tool list and click on the "Select" button (looks like a dotted line box).
2.See the two big boxes at the bottom of the tool list with the little shapes in them? Make sure the one on the bottom is selected, otherwise you won't get a transparent grab.
3. Now, drag click a dotted box around the text. Once you have done this, you can drag click the middle of the box and move your text onto the trophy base! Place it more to the left if you have the room. Tada! This may not transfer perfectly, but it's good enough for what we are doing. The yellow fringe would be more noticable if we had left the background color white or black. Note: better art software will transfer images better and certain fonts respond to transfer better then others. If you like it, save again before moving on. (get in the habit of saving your work often) See example picture

Good job, now that the trophy is yours, it's time to put the official stamp on it. Yeah, the Norn paw print thing. Select the paw print just like before and place it in the lower right corner of the trophy base (remember to first change the background color to black). It will overlap part of your name, but that shows you took the time to actually do the work! See example picture

Step 2: Cropping. Now is the time to change from picking up only foreground colors, to also grabbing the background. Otherwise everything yellow turns clear and we don't want that right now.
1. To do this click the upper box with the little shapes in it.
2. You want to select the whole trophy this time and drag click it to the upper left corner. Get the edges of the "1" and trophy base as close to the limit of the canvas as you can without loosing part of it.
3. Deselect the trophy by clicking once outside of the selection box.
4. At this point you should see little gray squares on the outside of the corners of the image. These boxes are called handles and let you resize the canvas. Just drag click the lower left handle so that the new edges are as close to the base of the trophy as possible.

Wonderful!
Now you have gotten rid of that extra work room. When a sprite is not cropped, it takes up more room in the computer and it may appear to float in the game if there is a gap between the sprites bottom and the actual visible part. However, if you are making multiple frames, remember that the canvas of all frames must be the the size of the largest frame in the set for both width and height. After you have gotten a nice crop, save your work. See example picture

Step 3
Resizing. At this point, you are probably wondering how this big picture would ever fit in the game. Well, it won't, so we will resize the image! This is why I recommended large font earlier, as it resizes better.
1.Begin by going to the Image menu and choosing the Stretch\Skew option. A new window pops up.
2. We only want to stretch the image, and we want it to stretch evenly, so we will change both of the upper boxes to the same number. Because we want this picture smaller, we will use a value less then 100. I recommend making your image around 15 - 20 %.
And poof! a nice little trophy just right for the game, er no wait, there is still a nasty bit of white in their! TIP: Avoid resizing more then needed, every resize will loose some detail. If you don't like your first resize, just undo and then try again.

Step 4:
Cleaning. It isn't uncommon to have to clean up the edge of an image, that's why I'm making you practice it a little.
1. Begin by clicking the "magnifier" button (It has a magnifying glass on it). Click once on the picture to see it blown up. The larger view shows your picture, pixel by enlarged pixel. This makes it easier to clean up.
2. You see how your tool automatically changed to a pencil? If you click the black box on the palate, you can draw over the white with black to make it transparent in game. Take some time to remove the yucky color and save your edited image. Save every time you get rid of a tricky bit of fringe so you don't have to start over if you make a mistake later on.See example picture

Part 4, Put it together:
Well now, that wasn't too bad was it? Don't worry, this is the last time I'll make you do all the basic steps of drawing a sprite. Now that you have your .bmp file ready to go, throw it into a new Sprite Builder file and save it as "tutor1.c16". Remember to included the .c16 because the Sprite editor can save the file in the older Creatures 2 format of .s16 as well. They are the same type of file, but .c16 compresses itself so it takes up less room on your hardrive.

Class wrap-up: That's it, you've done it! You've made your first sprite. I've decided to hold off on sound and catalogue files for now since we should have some CAOS done first. But they are also consiterd support files. I'll see you next class where we finally get to start the coding itself!