Chapter 3
Using the Game Editor

1. Load in the space level into the level editor.
2. Position the tile selector in the upper-left corner of the level.
3. Press F2 to display the tile information box. The box will display this information: X=0 Y=0 ROW=0 COL=0 TILE=10 00000000
4. Press F2 to remove the information box.
5. To insert a new row of tiles, press the Ins key, and then press the letter R.
6. We're ready to insert a new metal door. Position the tile selector at the upper-left corner of the metal door in the level art (see Figure 3.16). If you press F2 at this location, you'll get this status information for the tile: X=192 Y=64 ROW=4 COL=12 TILE=107 00000000
7. To copy the door, press and hold the right mouse button and drag the tile selector box down and to the right until it selects the entire door. (The tile selector box will increase in size as you drag it.)
8. Move the tile selector to a position above the current door, and press the left mouse button. Try the location, X=192, Y=0. If you make a mistake, press the letter U to undo your editing change.
9. Press the letter S then the letter Y to save the level. To return to the main game editor menu bar, press Esc.

Figure 3.16 Selecting the metal door in the space level.

To test out your changes, make sure that the game data files that you are editing are in a directory with the game program TOMMY.EXE. We'll be using this newly changed level in the next project, so make sure you save it.

Viewing and Setting Basic Tile Attributes

Before we leave the level editor, we need to look at how we can view and set basic tile attributes. The attributes that can be set in the editor control how your sprites interact with your levels. There are four different tile attributes you can set with the level editor: Top, Bottom, Left, and Right. Each attribute specifies which border of the tile should be considered to be a solid area. This is how you can create floors for your sprites to walk on or walls that your sprites can't go through. Floor tiles, for example, are always solid on top. A wall tile could be solid on its right or left border. To view the solid attributes that have already been set for the tiles used in the current level, press the letter A. As shown in Figure 3.17, the attributes will be indicated with the letters T, B, L, or R.

Figure 3.17 Viewing tile attributes with the level editor.

To set attributes for a tile, move the tile selector on top of the tile in the level editor and press one of the corresponding letter keys, T, B, L, or R. Keep in mind that when you set an attribute for a tile, all occurrences of that tile in your level will be assigned the attribute. For example, if you select any one of the tiles used for the floor in the Egyptian level and press the letter T, every tile used of this type will be assigned the Top attribute. This designation would make these tiles solid on top so that the sprites can walk on them without falling through.

The last attribute-related operation you can perform with the editor is clearing all of the attributes set for a specific tile. To do this, move the tile selector on top of the tile and press the letter C.

Project: Changing Attributes in the Space Level

Let's change a few of the tile attributes in the space level so that you can see how they effect the sprite animation in the game. We'll actually define new attributes so that our main sprite, Tommy, can walk up the space tube. Before you make these attribute changes, you should play with the game for a few minutes (in particular the space level) to get an idea of how the sprites move around. Here are the steps to follow:

1. Load the space level into the level editor.
2. Press the letter A to view the attributes in this level.
3. Notice that a number of attributes have already been defined for the level. Our next step is to add new ones.
4. Move the tile selector to the tile directly below the space tube. The information for this tile is: X=128 Y=176 Row=11 Col=8 Tile=76 1000000
5. Press the letter T then press the letter A to make sure the attribute has been set. Press A again to remove the attribute display.
6. Move up a row (Row=10, Col = 8) and repeat step 5. Keep moving up rows and setting attributes to create a "channel," as shown in Figure 3.18.
7. Save the level in the editor and test it out in the game. When you play the game now, you should be able to make Tommy "walk" up the space tube.

Figure 3.18 Changing attributes in the space level.

Using Foreground Tiles

Although we've introduced foreground tiles, we've primarily been working with background tiles. You'll need to use foreground tiles in your levels whenever you want to create a situation where you want a sprite to move behind a tile instead of in front of the tile. An example of how foreground tiles work can be found in the space level. As you play the game on this level, notice the computer console displayed at the far right. This section of the level is created with foreground tiles. When you move the main sprite, Tommy, past the computer console, he is displayed behind it instead of in front of the console. The easiest way to determine where the foreground tiles are in a level is to press the letter F while you are editing the level. All of the foreground tiles will then be displayed as "blocked out" tiles. To delete a foreground tile, select the tile with the tile selector and press the letter D.

Project: Adding Foreground Tiles to the Space Level

This project will show you how to add some level art that the Tommy sprite can move behind. We'll do this by copying the computer console art to another location in the level. This console is actually composed of both foreground and background tiles.

1. First we need to copy the background tiles. Position the tile selector at the left corner of the console (location Row=7, Col=0). Then, click and hold down the right mouse button and drag the mouse to the bottom-right corner of the console (location Row=8, Col=3).
2. Now we'll copy the console to the second platform to the right. Position the tile selector at the location Row=8, Col=13 and click the left mouse button.
3. The next step is to put in the foreground tiles. Press the Spacebar twice, and then select the first two rows of tiles to the right of the background tile page. (See Figure 3.19 for the location of these tiles.) These tiles represent the left half of the computer console.
4. When you return to the level art, position the tile selector at the left corner of the new console (location Row=8, Col=13) and click the left mouse button.
5. Go back to the background tiles and select the second half of the console.
6. Return to the level art once again and position the tile selector at the second half of the console (location Row=8, column=15) and click the left mouse button.

Figure 3.19 Selecting foreground tiles for the computer console.

Using the Tile Editor

The techniques we've explored so far only tell half of the story when it comes to creating levels for your games. You can also edit individual tiles using one of the tile editors. There are separate tile editors provided for editing background and foreground tiles. Select either the BACKGROUND or FOREGROUND option from the TILES menu to activate one of the tile editors. Once you are in the tile editor, you'll see the attractive editing screen shown in Figure 3.20.

Figure 3.20 The tile editor screen allows you to tweak your art at the tile level.

On the left side of the screen is a magnified version of the tile. This is called a fat bit editor. You can modify individual pixels in the fat bit editor by clicking on one of the rectangular cells. As the cells change color, the pixels in the tile also change. The tile is displayed in the bottom in both a single version and in a grid of several adjacent tiles. It's important that you be able to see adjacent tiles because tiles are usually designed to fit together in a pattern. For example, it's common to have tiles that look like bricks so that they can be joined together to form a wall.

Next to the tile area are two colored rectangles, representing the background and foreground colors. These colors correspond to left and right mouse button presses that change the tile color when you click in the fat bit grid. You can change these colors with an array of palette colors located on the far right side of the screen. Move the mouse cursor over the desired color in the palette area and click the left mouse button to change the foreground color. Similarly, you can click the right mouse button on a color to change the background color.

If you're editing foreground tiles and you select palette 0, you'll see the color displayed as a black rectangle with a gray box in it; on the fat bit grid you'll see a gray dot on a black rectangle. That image means color 0 is the transparent color. Foreground tiles may have transparent areas where the background shows through. Palette 0 is the designated transparent color for foreground tiles.

At the bottom of the screen is a status line. This line provides feedback, including the number of the tile currently being edited, and whether it's a background tile or a foreground tile. Messages and prompts are also displayed in this area.

Using the Tile Editor Menu

The tile editor menu is located between the tile attribute boxes and the palettes. You can access these with either the mouse or the keyboard. If you're using the keyboard, press the key that is highlighted in blue. Table 3.4 presents the options available in the tile editor menu.

Table 3.4 The Options Available with the Tile Editor

Project: Editing a Space Level Tile

Let's use the tile editor to change one of the background tiles used in the space level. Here are the steps to follow:

1. Make sure that the space level is currently loaded by the file manager.
2. Select BACKGROUND from the TILES menu.
3. When the tile editor appears, click on the Get command.
4. Position the tile selector on the circuit board tile shown in the upper-left corner and click the left mouse button to return to the tile editor.
5. Use the fat bit editor to make changes to the tile. Experiment by adding or deleting a few pixels or changing some of the colors in the tile.
6. When you are finished editing the tile, click on the Put command.
7. To replace the tile, position the tile selector at the upper-left corner of the tile screen and click the left mouse button. (If you wanted to save this tile as a new tile, paste it in a blank location on the tile screen.)

If you now load in the space level into the level editor, you'll see that all of the "circuit board" tiles have changed (assuming that you chose to replace the tile you edited.)

Setting Special Attributes

In the center of the tile editor screen, just to the right of the fat bit editor, are two sets of tile attributes. These are labeled:

• Top
• Bottom
• Left
• Right
• Bit 4
• Bit 5
• Bit 6
• Bit 7

You can apply these attributes to any tile. You turn a tile attribute on by positioning the mouse cursor over the tile attribute box and clicking the left mouse button. The tile attribute box will be highlighted in gray.

The first four tile attributes designate that the tile will be solid on the top, bottom, left, or right. Recall that this is how walls and floors are constructed. Floor tiles, for example, should always solid on the top, so the sprite won't fall through the tile.

The last four tile attributes are reserved for use by your game code. Essentially, you can specify them to mean anything you want. For example, you may want to specify that a tile is slippery (like ice) or a tile may mark a milepost or the end of a level. Having tile attributes available allows you to write code to determine if a sprite's action needs to change when it reaches a certain part of a level. The attribute settings that you define for tiles in the editor can easily be processed by your game program. For example, you can include a switch statement in your C code and check for certain attribute settings. When we explore the actual code for Tommy's Adventures, you'll see how attributes are processed.

Using the Tile Ripper

In general, tiles are not created in the tile editor, they're created in a paint program and then imported. Usually they're not created as tiles at all; in fact, they're created as full-screen backgrounds (PCX files) that must then be reduced to tiles. The tile ripper is a utility that reduces a screen of artwork to tiles, which can then be used by both the tile editor and the level editor. As you've seen, the tiles are the elemental building blocks of the level. Each tile is 16x16 pixels. Since background screens tend to have many duplicate tiles, the tile editor determines which tiles are unique and stores them in the tile library, then it generates an array that represents the original artwork as a list of tiles. The tile list is stored as a binary array in a file with an LEV extension, while the tiles themselves are stored in a PCX file.

Original artwork for a level is generally stored in several PCX files. It's common for several screens of background art to be ripped to form a single screen of tiles. The tile ripper prompts you to enter the name of the input file, the name of the PCX file that will hold the tiles, and the name of the level file, as shown in Figure 3.21.

Figure 3.21 The tile ripper screen.

You should get all your background art ready and rip your tiles before you do any level design. If you rip tiles after you've worked on the level, the position of the tiles may change, and you'll have to throw out the level design work and start over. Similarly, tile attributes should be assigned to tiles after they are ripped. Otherwise, the position of the tiles may change in the tile library and you'll have to redo the tile attributes. So the tile ripper function comes first, then the level editor. If you need to make minor changes to the tiles after level editing has started, use the tile editor.

Editing levels is slow, painstaking work even with the help of these powerful tools. Learn to use the tools properly to speed up the editing process, and try to avoid doing redundant editing.

Project: Creating a New Level with the Tile Ripper

This project will show you how to add a new level to the Tommy's Adventures game. We'll use the tile ripper to "rip" two art files of a castle scene and then we'll add the new castle level after the space level. Once you create the castle level, you can even use the level editor to expand the castle level.

This project requires that you use the art files CASTLE1.PCX and CASTLE2.PCX. Both of these files are provided on the companion disk. Make sure that you copy these files to the directory where the game editor is stored. We'll use these art files to create a new level named CASTLE.LEV. Here are the steps to follow:

1. Select the RIPPER command from the TILES menu and enter the following filenames at the corresponding prompt:

   PCX IN FILE NAME: CASTLE1.PCX
   PCX OUT FILE NAME: CASTLE.PCX
   LEVEL FILE NAME: CASTLE.LEV

   The first file is the original level art, the second file is the tile set that will be created, and the third file is the level data.

2. Press F10 to create the tiles.
3. Repeat steps 1 and 2, but this time enter CASTLE2.PCX for the input filename. Leave the other two filenames as they are. Press the Esc key to return to the main menu bar.
4. Select the LOAD/SAVE command from the FILE menu.
5. When the file manager's list box appears, press PgDn to select the space level. Then, press PgDn once more and then the letter 'Y' to insert a new level. Put in the following filenames:

   GAME FILE: GAME.DAT
   LEVEL: CASTLE.LEV
   BACKGROUND: CASTLE.PCX
   CASTLE.ATT
   FOREGROUND: NUL.PCX
   NUL.ATT
   SPRITE LIST: SPRITE.DAT

6. Press F10 to save and load these files.
7. Select the EDIT command from the LEVEL menu.
8. View the level in the level editor and then press the letter S to save it. You can also make changes to the castle level, such as adding rows or columns before you save it.

Using the Sprite Editor

The last selection on the main menu bar is the sprite editor. The primary purpose of this tool is to import sprites into the game. Usually, sprites are not drawn in the sprite editor. Instead, they're created in either a paint program such as Deluxe Paint II, or an animation program such as Autodesk Animator. They are then saved with other sprites in a single PCX file. This is a convenient file format for editing sprites, but it's not too convenient for importing them into a game. For one thing, PCX files contain a lot of unnecessary baggage, like the header information and the palettes. We'll be controlling the palettes ourselves in the game, so we don't need redundant copies of the palettes in our data files. Also, we want to strip down the header information to the bare minimum necessary to display the sprite. Finally, the file format of a PCX file isn't convenient for displaying individual sprites. A 256-color bitmap format is better for our game. So we use the sprite editor to strip the image down to the minimum amount of information required to define the sprite, reformat the data, and store it in a format that is most useful to us in the game. It sounds like a tall order, but our sprite editor handles this efficiently and is quite easy to use.

To start the sprite editor, click on the EDIT command in the SPRITES menu. The sprite editor screen that appears, shown in Figure 3.22, looks similar to the tile editor screen. Here we have a fat bit editor showing a magnified view of a part of the sprite. There are palettes at the far right side of the screen, and a menu next to the palettes. A sprite area in the middle of the screen shows an actual-size version of the sprite. Foreground and background colors are highlighted in boxes below the menu area, and at the bottom of the screen is a status area displaying relevant information, including the x and y coordinates of the mouse as it moves over the fat bit editor.

Figure 3.22 Using the sprite editor.

You use the mouse to edit pixels on the fat bit editor. Move the mouse over the grid and click the left mouse button to set a grid cell to the foreground color, or the right button to set a grid cell to the background color. As you edit the sprite in the fat bit editor, the changes will appear in the sprite area. Since you can only see a portion of the sprite in the fat bit editor, you may want to move the view around. There's a rectangular box in the sprite area that highlights the part of the sprite currently being edited. You can move that box around by moving the mouse cursor over the box, holding down the left mouse button, and dragging the box to a new location. When you've moved the box to where you want it, release the mouse. The picture in the fat bit editor will change to the part of the sprite you just highlighted. In this way, you can edit a sprite that's larger than the number of cells visible in the fat bit editor.

As with the tile editor, you can select your foreground and background colors from the palette menu at the left. The default value for the background color is palette 0, which displays as a black cell with a gray dot in it. Palette 0 is the transparent color, which means that when our sprite is displayed on a background, it won't overwrite what was there previously. The background art will show through around Tommy's head, under his arms, between his legs, or wherever there is a transparent pixel.

Using the Sprite Editor Menu

Because sprites are usually edited elsewhere, the most commonly used sprite editor functions are Import and Save. However, I've included a full array of editing functions so that on-the-fly sprite touchups are possible in the sprite editor. As with the tile editor, you can access these menu functions with either the keyboard or the mouse. If you're using the keyboard, you can access the desired menu function by pressing the first character, which is highlighted in blue. Table 3.5 presents the sprite editor menu options.

Table 3.5 The Sprite Editor Menu Options

Loading Sprites

After you have created a sprite by importing art from a PCX file or drawing the sprite in the sprite editor and saving the sprite to a LST file, you can load in the sprite. To do this, select the LOAD option from the SPRITES menu. Figure 3.23 shows the screen that is displayed. Here, the editor lists all of the files that are included in the sprite data configuration file SPRITE.DAT. You then use the arrow keys to select a filename. Press Enter to load in the file.

Figure 3.23 Loading a sprite list file into the sprite editor.

The editor will then load in the list of sprites stored in the file you've selected. You can determine the number of sprites in the list by viewing the status message displayed below the sprite editing grid. For example, the status message

SPRITE 1 : 3

tells you that the sprite list contains a sequence of three sprites and the first sprite is currently loaded in the editor. To view the next sprite in the list, you click on the Next option.

Project: Changing a Sprite

For this project, we'll change one of the sprites used in the Tommy's Adventures game. Here are the steps to follow:

1. Select the LOAD command from the SPRITES menu.
2. Select the file TOMRUN.LST. (Move the cursor until it is on this filename and press Enter.) This is the set of sprites used to make the main character run.
3. Let's put a red key in his left hand. Use the mouse to click on one of the red colors shown in the color palette.
4. Draw a red key in the character's left hand. When you are done, click the Next command to move to the second frame of animation.
5. Repeat step four until you have drawn a key for the first three frames.(Although there are six frames, only the first three show the character's left hand.)
6. When you are finished drawing keys, click the Animate button to test out the animation.
7. Make any required changes and then click the Save button, press Enter, and the letter 'Y' to save the sprite .LST file.

When you play the game now, Tommy will have a red key in his left hand as he is running.

Animating Sprites

One of the more useful features included with the sprite editor is the ability to animate your sprites. This feature allows you to test out the animation sequences you've created before you put the sprites in your game. You can watch the animation and then use the editor to fix any defects that you see. To animate a sprite, load in the sprite using the SPRITES menu, then click on the Animate button.

Adding New Sprites

In addition to loading and editing sprites, you'll need to know how to add new sprites using the editor. Actually, adding a sprite to a game is a two-fold process. First, you must create the sprite or import the sprite using the sprite editor. Second, you must incorporate the sprite into your game program code so that the sprite can be loaded, displayed, and controlled. In Chapters 12 and 13, you'll learn how to work with sprites at the code level. For now, we'll discuss how new sprites are added using the editor. Here are the steps required to add a new sprite:

1. Create a sprite list using the fat bit sprite editor or import a sprite using the fat bit editor. (Only .PCX files can be imported.)
2. Save the set of sprites using the SAVE command. Make sure you use the extension .LST to name the file.
3. Add the new sprite filename you've created to the sprite list data file. (You can access this file by selecting the LOAD command from the SPRITES menu.)

Project: Importing Art to Create a New Sprite List

Let's use the sprite editor to create a new sprite list (FISH.LST) by importing a few art files. The PCX art files we'll import contain drawings of a fish in different positions. They are included on the companion disk as FISH1.PCX and FISH2.PCX. Here are the steps required to create the new sprite list:

1. Select the LOAD command from the SPRITES menu.
2. Press the Ins key. A new .LST filename will appear named UNTITLED.LST.
3. Type in the new name FISH.LST and press Enter. The fat bit editor will appear with a blank editing screen.
4. Click on the IMPORT command.
5. Enter the filename FISH1.PCX and press Enter.
6. Locate the cross hairs that appear. Move the crosshairs to the upper-left corner of the fish, click and hold down the left mouse button, and drag the box that appears to cover the complete fish. Try to select only the fish and not the black background. When you release the mouse button, you'll be returned to the fat bit editor. If the object does not come in correctly, click the CLEAR command and try importing the file again.
7. Let's create a second frame. Click the NEXT command to view the frame that has the label "SPRITE 2:2".
8. Click the IMPORT command and load in the file FISH2.PCX.
9. Select this fish art using the techniques presented in step 6.
10. Let's import one more sprite (a third frame). Click the NEXT command to view the frame "FRAME 3:3". Then, follow steps 4 through 6 to import the art in the file FISH1.PCX again. This time, however, select some of the black background above the fish. This will make the sprite swim in a down motion when the sprite is animated.
11. Click the ANIMATE button to test out your new animated sprite.
12. When you are done, click the SAVE command to save the new sprite list file.

Note: If you were planning to use a sprite like the fish in a game, you'll need to remove all of the background color that surrounds the object and set this color to the sprite editor's background color. You can easily do this by using the FILL command. If you have trouble determining the color of the background in the sprite viewing area, click on the MASK command.

Tips on Drawing and Importing Sprites

As we've mentioned, sprites are typically created by an external painting program and then imported into the sprite editor to build the sprite list. When creating sprites to be imported into the sprite editor, don't make your sprites too large. A main sprite such as Tommy, is only about 32 pixels wide and 50 pixels tall. A enemy sprite, such as the scorpion is only about 30 pixels tall, although it is wider than the main character. Before you get carried away and create too many sprites with a painting program, you might want to import a few of them to test their size. Here are some additional tips to help you create your sprites:

Working with large sprites.

If the sprite art you import is too large for the fat bit editor, you can access other areas of the sprite by sliding around the sprite border displayed in the sprite viewing area.

Handling color matching problems.

In order for your sprites to look good with your level art, the color palettes of the sprite and level art may need to be adjusted. Chapter 9 presents a useful color palette utility to help you fix any color palette problems that may occur.

Creating smooth animation.

Sprite animation, like programming, is a trial and error practice. Don't give up if your sprites aren't as professionally looking as you might want them to be. When you create your sprites, try to draw the different frames side-by- side so that you can better visualize the animation. Remember that the maximum number of frames you can use in a sprite list is 12.

Quitting the Game Editor

When you're finished editing your sprites, tiles, and levels, you'll want to save all your work and exit the game editor. Pressing the Esc key exits you to DOS, as will selecting the QUIT function from the FILE menu.

Remember, the file management files, GAME.DAT and the various SPRITE.DAT files, are text files that you can modify with your text editor. If you want to rearrange levels, you may find it easier to simply edit these files in your programmer's editor. You'll no doubt develop your own habits with practice.

That covers the features of the game editor. You'll become intimately familiar with this program as you develop your game. If you find something you don't like about the level editor, the tile editor, the tile ripper, the sprite editor, or the file manager, change the program to suit your needs. The complete source code for the game editor is included on the companion disk, and it's documented in the next few chapters. Again, I encourage you to modify and customize the game editor, and find unique ways to use this program to generate original games. The more original ideas you can put into your game, the better, and original games require original tools. As you read the next few chapters, think in terms of modifying the code to create images and special effects that nobody has thought of yet. In this way, your game will be unique and special, and will stand out from the other side-scroller games in the market.

Are you ready to write some code? Then turn off the phone, roll up, your sleeves, and let's get started!