Level Construction Tutorial

Introduction

I know that it is very much a cliché for an author to declare at the beginning of a tutorial that he is not particularly keen on manuals, yet it is so true in my case that it must be stated matter of factly.For I rarely use them for computer related matters. However, I do recognise that the level editing functions of sonicX might be a little difficult for the Uninitiated to interpret without one. So here I am, confronted with the dilema of producing a text aimed at an audience of people like me, who will by their very nature only consult this reference as an absolute last resort. Working under the assumption that you are likely to have no idea how the level editing environment functions, I shall begin with the absolute basics. I will describe the different file formats used and the programs that interact with the file types. Following this, a step by step approach is used to illustrate how each and every function in each and every program can be used to aid the construction of SonicX levels.

The basics

We will best begin by looking at the SonicX.exe program. When it is run, you are confronted with the option to load new levels. If you look carefully, you will notice all the levels shown have a ".lvl" suffix. This is due to the fact that the sonicX program recognizes all files with the ".lvl" suffix that are in its directory. When a gamer runs the program, they can then easily load these levels. The aforementioned level files are created using a program called Leveled.exe. This level ed(itor) works in much the same way as the debug mode in the original Sonic 1 game, with some slight modifications. This program facilitates the level construction process as it allows for predrawn pictures to be placed at various points within a 2 dimensional scrolling environment. These pictures are all stored in a single file that the leveled program can read. These files have the suffix ".tex", and they are created using the program Graphics.exe.

The graphics program can be used to create new images, or alternatively, it can be used to load 256 colour bitmap images.It is this function which is incredibly important. By capturing images from a Megadrive / Genisis emulator running Sonic 1 using a basic screen grab technique (pressing Print Screen, and pasting into a bitmap editor like Microsoft Paint), it is possible to create images that are pretty much identical to those used in the original sonic games. And many of these high quality images can all be saved to one single tex file. In fact, there is a sonicx level that uses over 100 images which are all contained in the one tex file. This is cool, but it is also important to remember that each level can use only use pictures from one tex file.While it might sound confining to be restricted to the just one tex file, it really isn't.This is because another program can be used to copy pictures from one tex file into another. Say, for instance, if you had a picture in the green hill zone that you wanted to add to the icecap zone, all you have to do is use Tileadd.exe. This program will allow you to rip pictures from a source tex file to a destination tex file. So it means that a palm tree can be ripped from the green hill tex file and placed into the icecap tex file. This palm tree can now be added to theicecap zone using the leveled package. So although you can only use one tex file, you can have as many images as you want in that tex file, which kind of makes that one little restriction utterly irrelevant.

As far as this tutorial goes, the ins and outs of the Leveled.exe program will be discussed first, follwed by the Graphics.exe program and the Tileadd.exe program. So skip to the end if you want to hop straight into making levels.

Leveled.exe

Important Concepts
As discussed in the previous paragraphs, Leveled.exe allows you to create a level of sonic the hedgehog by using the pictures you made in the graphics editor. It can also be used to implement collision detection and other functions at certain points in the level.Collision detection is a concept that can be a little difficult to understand. It is used to enable the sonic character to interact with the environment. If a level had only pictures, and the character didn't respond in an appropriate way to a feature presented by one of the images, the game would be deeply disturbing to the player. An example of an inappropriate interaction would be sonic walking through a wall, or falling through the ground. The collision detection algorhythim in SonicX is designed to make inappropriate interaction impossible, so well as the level makes use of the functions made available for this purpose in Leveled.exe. As a side benefit, the collision detection routines in SonicX help to make the really cool effects like the 'loop the loop' function work.

Collision detection methods
To use the collision detection functions, a line, box or circle is drawn to indicate the limits between which the collision detection is meant to operate. For example, if a horizontal line representing zero gradient detection is drawn over a picture representing the ground, the character can walk across the ground. If this line only extended halfway across the ground, the character would fall through the ground. There are seven different collision detection options available in total. Some like zero gradient and gradient detection set the ground path. The gradient function isn't set like a horizontal line, but rather can be extended 360 degrees in any direction. It is for picture elements that have elevations in the ground, like a hill or a curve It allows for the character to walk up a hill rather then straight through it. Others like horizontal bouncy wall detection are set in a similar way to zero gradient but cause the character to bounce off the line as if it were a trampoline. There is also a vertical Wall detection method, but it isn't bouncy. In stark contrast to the other methods described, the spike collision detection is set as a box. If the character sets foot inside the box, it will be stunned or killed. This is often used on images of spikes, as spikes have traditionally been used to kill sonic in the original games. Another detection method that uses a wire frame box is the updraft mode. As the sonic character steps into the updraft box, the character is dragged upwards, as if by a windy draft. The final collision detection method uses a circle, and this is because it is for the 'loop the loop' algorythim. When the character steps inside the circle, it will run through it upside down, and this is a bloody cool effect.

The Toolbar and its Icons

The image to left is of the leveled.exe represents a really cool function that has only just been added to the level editor. It's a selection tool Toolbar. The icons on it from 1 to 5 on the right and 6 to 7 on the left, with the numbers being lower from the top, allow a user to access the collision detection functions described earlier. Other important functions are designated on remaining icons. One particularly important function allows a level designer to determine where the character materialises in a particular level. This is called the start mode. It can be selected using the bottom left icon, number 8, of the toolbar which has a flag on it. The other non Collision detection functions include the picture placement modes, which make up icons 1 to 5 on the left from the top of the toolbar. These modes allow pictures to be placed in specific planes within a level. SonicX is a parallax scrolling game. This means that images in the background move at a slower speed to images in the foreground. For this to happen, the level editor has to allow for level designers to draw images in both foreground and background planes. SonicX has five planes. Bp is the background plane. Tp is the foreground plane, but the images displayed are just behind the character. Op is the object plane. It is on the same graphical plane as Tp, but allows for objects to be placed instead of regular images. Objects are things like rings, items boxes, etc. that the character can interact with. Ep is also in the same plane as Tp, but the images are displayed in front of the character. So if Sonic walks past the image, the blue hedgehog will disappear behind the image. The last plane, Mp, is situated midway between the Bp and the Tp. With regards to the other two icons worth mentioning, the last on the right (number 8), which looks like an open folder, allows a user to edit or create another level file. The second last icon on the right that allows for images and objects to be deleted. When this mode is activated, the user can draw a window across the screen. All objects within the window that are of a particular image plane type are designated with a red boundary. A user can delete them at will by pressing the delete button.

Detailed Icon Functions

Tile placement mode (Tp Icon)
In this mode , You place the tiles that are in the same zoom level as sonic. To select a tile, press F8 Once you have selected a tile you can set it in the desired position by using a mouse and clicking on the left mouse button.

Background placement mode (Bp icon)
In this mode , You place the tiles in the zoom level behind sonic and far away. To select a tile press F8 . Once you have selected a tile you can set it in the desired position by using a mouse and clicking on the left mouse button.

Mid ground placement mode (Mp icon)
In this mode , You place the tiles in the zoom level behind sonic but closer then the background tile mode. To select a tile press F8 Once you have selected a tile you can set it in the desired position by using a mouse and clicking on the left mouse button.

End ground placement mode (Ep icon)
In this mode , You place the tiles in the same zoom level of sonic, but in front of the sprite. To select a tile press F8. Once you have selected a tile you can set it in the desired position by using a mouse and clicking on the left mouse button.

Start mode (flag icon)
In this mode ,You set the starting place of sonic in the level. Move the mouse cursor to the desired position and left click the mouse button.

Bouncy Wall mode (icon with a W on it and a horizontally orientated rectangle)
This collision detection mode sets a section of bouncing floor. When Sonic walks across this mode of collision detection, he jumps automatically. To set the collision detection, left click the 1st point on the platform and hold the button down as you move the cursor to the 2nd point on the platform. Release the button to set the detection.

Zero gradient mode (icon with a Z on it)
In this mode ,You set the boundary for each platform that sonic walks on. Sonic can jump from one platform to another if the boundaries are set. If the boundary isn't set at all , sonic will just fall through the platform. To set the boundary, left click the 1st point on the platform and hold the button down as you move the cursor to the 2nd point on the platform. Release the button to set the boundary. This mode should only be used if the platform is flat. For diagonal platforms , use the gradient mode.

Gradient mode (icon with a diagonal line on a box)
In this mode ,You set the boundary for each platform that sonic walks on. Sonic can jump from one platform to another if the boundaries are set. If the boundary isn't set at all , sonic will just fall through the platform. To set the boundary, left click the 1st point on the platform and hold the button down as you move the cursor to the 2nd : point on the platform. Release the button to set the boundary. This mode should only be used if the platform is diagonal. For flat platforms , use the zero gradient mode.

Wall mode (icon with a W on it and a vertically orientated rectangle)
In this mode you can set a wall that sonic can't run through. For instance, you might want to have a wall that connects to a platform so that sonic can't walk under the platform. To use it , left click the first point of the vertical line and hold the button until you find a suitable second point.

Load or create new file (folder icon)
Allows you to load a .lvl file or to create a new .lvl file.

Spike mode (icon with an S on it)
This mode allows you to set the boundaries of an object that kills sonic , like spikes. To set the boundary, left click the 1st point on the object and hold the button down as you move the cursor to the 2nd point on the object.
Loop mode (icon with an Circle on it)
The loop mode allows Sonic to run up the inside of a circle. It's bloody cool.To use it, you should have a loop like image in the Tp or Ep graphics plane. Place the mouse pointer in the middle of the loop, and press the left mouse button. Hold the left mouse button, and move the mouse pointer to the base of the loop. When the circle shown on screen matches the loop adequately and touches the base of the loop, let go of the left mouse button. The loop is now complete.

Updraft Mode (icon that kind of looks Y shaped and has a small letter U on it)
Updraft is another cool effect often used in sonic games. It is meant to signify hot air rushing up that pushes sonic up with it. In order to use it, you use the left mouse button to draw a window across the area that you wish to cover with this collision detection effect. Let go of the mouse button to set the window.
Deletion Mode (icon with an window box made of broken lines on it)
This deletion mode allows for images and objects to be deleted. When this mode is activated, the user can draw a window across the screen. All objects within the window that are of a particular image plane type are designated with a yellow boundary. A user can delete all selected images and objects at will by pressing the delete button. To distinguish between the various graphics plane types, the deletion mode will only select pictures in the plane that was most recently used. So, if you just placed a picture in the Tp plane, and decided to delete an object you made in the object plane, this mode won't immediately work, as it will only select images in the Tp plane. To delete the object, select the object icon. Wait about one second, and then select the detection mode icon again. This mode should now target objects.

Keyboard controlled functions

The delete button is one such hot key, but it is by no means the most useful. This list is of all the hot keys used to operate the leveled.exe program. Following this list, detailed instructions are provided on how to make your first sonicx level.
Delete erases all images currently selected by the selection tool.

Minus (-) zoom out of the screen to view the whole level.

Plus (+) zoom in to the screen to view just one screen.

Esc or F1 saves the .lvl file and ends the program.

F2 activates the previous background colour.

F3 activates the next background colour.

F4 activates or deactivates animations in level editor

F7 changes current image for placement to previous image

F8 changes current image for placement to next image

F9 Removes from view all on screen items that aren't part of the currently activated icon mode. Press F9 again to restore the views.
F10 Removes the toolbar from view. Press F10 again to restore the view.

Arrow Keys you can scroll through out the level using the Numpad or arrow keys

M Allows you to specify the midi file that the level will play if the sound is on. Make sure you include the ".mid" suffix

Mouse The left mouse button can activate icons on the toolbar when pressed. Also, collision detection boundaries can be drawn by pressing the left mouse button at a desired point, and releasing the mouse button at a second desired coordinate. Images can be placed in a level when an appropriate icon is selected by pressing and releasing the left mouse button at a desired coordinate.
When the mouse pointer is off screen, pressing the right mouse button will cause the screen to scroll in the direction of the mouse pointer.

My First SonicX level
In order for leveled.exe to start, it requires that at least one graphics file has been made using the graphics.exe program. Since the package comes with icecap.tex , that won't be a problem. The first time you run leveled , you will be editing icezone.lvl , the level I made for the current release. Press - (minus) to see how big the level actually is. Press + (plus) to return to the normal editing mode. To make your own level , left click the folder icon on the toolbar. Don't worry about saving the Icecap level. The leveled.exe program automatically saves when a new level is loaded, or when the program is shut down for that matter. Use the arrow keys and enter to select Create a new level, or use the mouse and a nice left click. Type out the name of the level you want to make using eight letters or less. Unfortunately, because this is a dos program, you can't use long file names. Then press enter. You have now created a level, but all levels need pictures in them, or there is no point. So, you now have to decide which graphics file contains the images you want to use. For the purpose of this tutorial, you should select icecap.tex. This can be accomplished by using the arrow keys to move up or down the file list, and pressing enter when you arrive at the file you wish to select. The first thing that you should do now is left click on the start icon (it has a flag on it). Once that is selected click anywhere on the screen. Sonic will begin his computer animation life where you left clicked when the level is run in sonicx. Now left click on the zero gradient icon (it has a Z on it and a picture of a rectangle). This is a collision detection mode that sets the floor that sonic can walk on. with out it sonic would just fall for ever after materialising from the point where you clicked using the start icon. This floor is represented as a horizontal line , so left click on a point underneath wheree sonic starts but don't release the button until the line is at least three quarters the width of the screen.Note, that you can only place a line by dragging it to the right. This is one of many stupid issues with the level editor that is just impossible to fix for many reasons that I can't be bothered going into.Anyway, it would be a good idea to now click on the tile placement mode icon( the icon with TP on it). This mode lets you place images in the same plane as sonic ,but behind the hedgehog. You will notice if you move the mouse, that you are actually moving an image from the graphics file. By pressing F8, you can change this image. This moves the current selected image to the next image in the graphics file. If you reach the final image, the next image used will be the first. Using F7, you can move backwards through the graphics file instead of forwards. Notice that the name of each image is displayed in the bottom left hand corner of the screen, next to 'tile :'. Keep pressing F8 until you reach an image called "large ic". Now use the mouse to move the image directly under the start of the zero gradient collision detection line. Left click to set the image where you want it to be set. You will notice that the image probably wasn't big enough to fit under the entire collision detection line. Place another "large ic" image right next to the right hand edge of the first. Now, it is very probable, that the collision detection line only goes half way across the second. This is bad, as it means that sonic will fall through the second image as he walks over it. So, select the zero gradient collision detection mode icon and draw a line from where the first line ends to where the "large ic" image ends. Note that you may have to move the screen across to the right in order to draw the line. The arrow keys can be used to move the screen in any direction through a level, so press the right arrow key to move right.

Now let's try to make this level a little more interesting. Press F8 to cycle through to an image named "The down". Select the Tp icon. Place the "the down" image on to the right edge of the second "large ic" picture so it connects so naturally that they both seem to be part of the same image. If you have made a mistake, select the icon which has a box drawn out of a broken lines. This is the selection tool. Draw a window around the misplaced picture by holding down the left mouse button and moving the mouse. Let go of the mouse button when the window touches the picture you wish to delete. A yellow colored window will be drawn around each picture selected. If you haven't selected the right image, have another go. If you have selected the right image, press delete. Once the mistake is cleaned up, if indeed there even was a mistake at all, make sure you place the "the down" image as per the previous instruction and that the Tp icon is still selected. Place another "the down" image to the right edge of the first "the down" image. Now, use F8 to select the "large ic" image. Draw this image to the right edge of the last "the down" picture. If you have done this correctly, a platform which is level should connect to a lower level platform via a small diagonal slope. Now comes the difficult part. We have to use collision detection to follow a slope, but the Zero gradient mode only offers horizontal collision detection. The solution is to use the gradient detection collision detection mode. So, select the icon with the letters ZG and a triangle on it. Draw a line from where the zero gradient collision detection line finishes to where the surface of the bottom "large ic" image begins. In other words, draw the collision detection line over the surface of the "the down" image. Now select the Zero Gradient mode icon again. Draw a line across the surface of the lower "large ic image". Now press F8 to cycle again through to the image named "The down". Select the Tp icon. Place the "the down" image on to the right edge of the lower "large ic" picture. Use F8 to cycle again through to the image named "loop1 2". Place this image on to the right edge of the lower "the down" picture. This image is one of six elements that make up the loop image in the icecap zone. One of the cool things about loops in the original sonic games, besides the walking upside down thing, is that sonic would enter a loop on the loop's left and exit the loop walking behind the loop image on the right hand side. To accomplish this, you need to use more then one image plane. You need a plane behind sonic, and a plane in front of sonic. The plane in front of sonic is called the Ep plane. Select the Ep plane by left clicking on the icon with Ep on it. Now press F8 until an image called "loop1 3" presents itself. Place the image on the right edge of the 'loop1 2' image such that the combination of the two images form a curve, the base of the loop. Now Select the Tp icon to get back to the previous plane. This is important.. Use F8 to select an image called "loop2 3". Place this image so that the left most and bottom most portion of the "loop2 3" image is placed directly on top of the leftmost portion of the top of the "loop1 3" image. The three loop images together should look like a J shape now. It is now time to use F7 to cycle back to an image named "loop1 1". This image should be placed in the gap between the topmost portion of "the down" image and the "loop1 2" image.Press F7 to cycle backwards towards the "loop2 1" image. Place the bottom most section of this image just above the topmost section of the "loop1 1" image, in a similar way to which "loop2 3" was placed on the right hand side of the loop.We have now come to the fun bit, where we shall make the loop actually look like a loop. Press F8 to select the "loop2 2" picture. Place this image so that its topmost portion is parallel to the topmost portions of the "loop1 1" image and the "loop2 3" tile and fits snuggly between them. Before we deal with the collision detection issue of our new creation, we have one more job to do. Select the "the down" tile using F8. Now, press F9 to make all the of the Ep plane graphics disappear. This function only shows the graphics of the plane that is currently selected, and it doesn't even show collision detection graphics. If a collision detection function is currently selected, it doesn't show any graphics from the four graphics planes at all. Anyway, now you should only see images in the Tp plane. Your mission now, is to create a path to exit the loop. Place an image so that half of the image is to the left of the right end of the "loop1 2" image, and is continuous with the sloping portion of the "loop1 2" image before it curves up. This creates the perception of two paths, a loop path and a diagonally sloping path. Place another "the down" image to the right of the image just created. Press F8 to cycle towards the "large ic" image. Place one of these pictures on the right edge of the rightmost "the down" image. Now press F9, and select the Zero gradient icon. Draw a horizontal collision detection line across the surface of the "large ic" image. It's time to now select the gradient collision detection mode icon. Draw a line a third of the distance between the top "large ic" image (ie., the one before the loop starts) and the bottom "large ic" image, across the sloping surface. Draw two more lines in the same direction, with the last line reaching the leftmost end of the lower "large ic" image. You could have used just one line, but there is a quirk in the sonicx engine that stops gradient detection collision detection from working properly if the lines are too long. The other collision detection lines can be as long as you want, but not gradient detection. I know it sounds stupid, but these things happen. Now select the loop collision detection (It's the icon that has a circle on it). Place the mouse pointer in the middle of the loop, and press the left mouse button. Hold the left mouse button, and move the mouse pointer to the base of the loop. When the circle shown on screen matches the loop adequately and touches the base of the loop, let go of the left mouse button. The loop is now complete. Now select the Tp icon once again. Use F8 to cycle back to the "large ic" image. Place two more "large ic" images to the right of the rightmost "large ic" image. Now, Use F8 to cycle through to an image called "obstacle". Place one of these images at a point where the base of the obstacle image is above the top leftmost portion of the second rightmost "large ic" images. This should be just to the right of a yellow collision detection line. Stack five more "obstacle" images directly on top of the first. They should look somewhat like a wall of ice bricks. Now select the vertical Wall collision detection icon (It has a W on it and a vertically orientated rectangle). The aim is to draw a vertical line up against each side of the "obstacle" stack. Use and hold a left click when the mouse pointer is at the lower end of one side of the stack. Move the pointer up to the peak of the vertical stack and let go. Do the same for the other side of the stack Following this, select the zero gradient collision detection mode. Draw a line between the two Wall lines, just above them. Also, draw a collision detection at the base of the stack, above the surface of the two "large ic" images that haven't been covered with collision detection lines yet.

It's about time to introduce objects. Objects are like regular pictures, except that they have some collision detection functions built into them. The objects can be rings, springs, item boxes, or even enemies (when SonicX version 10 is released). Just for interest's sake, put some rings into the main loop, around the edge. Sonic will pick them up as the sprite goes through the loop. Press the object placement icon (the icon with op on it). Use F8 to cycle through the objects until the object with the name rings comes up. Place the rings in the same way as you would any other picture. It is necessary that the first object placed in any level is a ring. Otherwise the game can crash. I know it sounds stupid, but it is another stupid bug in the SonicX program. This limitation will no longer apply from the next release of SonicX. Now, as we have a wall, we also now need a spring so that sonic can jump over it. Once again, use F8 to cycle through the objects until the object with the name spring1 comes up. Place the spring on the surface of the "large ic" image, half way between the loop and the wall. Now select tp, and use F8 to cycle through to the "large ic" image. Place two of these images next to the rightmost "large ic" image. Now select the icon which has a box drawn out of a broken lines. This is the selection tool. Draw a window around part of the second right most "large ic" image by holding down the left mouse button and moving the mouse. Let go of the mouse button when the window touches the picture we want to delete. A yellow colored window will be drawn around each picture selected. If you haven't selected the right image, or you have selected two by accident have another go. If you have selected the right image, press delete. Now there should be what looks like a hole in the ground from sonics perspective. We don't want sonic to fall through it, so we will use the updraft collision detection effect to create a buffer of upwards driven air from the hole. Select the Updraft effect icon (it is immediately below the loop icon, and has the letter U on it) , and using the left mouse button, draw a window from just above the right edge of the left "large ic" image to just below the left edge of the rightmost "large ic" image. Now, select the Op object placement icon. Use F8 to cycle through to the "signpost" object. Place this object just above the center of the rightmost "large ic" image. We have now pretty much finished this level, aside from some minor touch ups. The first thing is the background. This level badly needs one. So, select the background placement icon (It has Bg on it), and press F8 to cycle through to the image called "ice back". Place one image with the left mouse button just to the right of the signpost object.Press F9 to hide the images in the foreground. Press f10 to hide the toolbar. Place another four images to the left of the first one. Place a row of five images directly above the row of "ice back" already drawn. Now make another of five images directly below the two rows of "ice back" already drawn. Now press F9 and F10 again. Do you notice when you use the arrow keys that the background scrolls at a different rate? That's parallax scrolling for you, and it is something that the Super Nes didn't have the capability to do very well. Long live the megadrive. Now, getting back to the level editor, select the Mp mid ground placement icon (it has Mp on it). Press F8 to cycle through to the "expbg 1" image. Now, scroll down to where you placed the signpost object. Press - or + to zoom out and back if you get lost. Just to the right of the signpost object, place the "expbg 1" image. Place another 7 images to the left of this image. Now press F8 to cycle through to the image "expbg2". Place one of these images under each image of "expbg 1".

Now the level is finished except for one major detail. It lacks spikes, enemies, or anything that could possible harm Sonic. This makes for an incredibly boring level considering how small the level is. However, there are no spike images in the icecap.tex graphics file. So we have to make some. The rest of this level making tutorial would probably be better understood by reading the Graphics.exe tutorial, so you may have to read it first before reading on here. Press Esc or F1 to exit the leveled.exe program. Run graphics.exe, and press the folder Icon. Left click on the "load texture file" button. Use the arrow keys to select a graphics file called "icecap.tex. Press enter when you find it. When the file is loaded, press Shift and "I" to import a 256 colour bitmap. Use arrow keys to select "spike.bmp". Press enter. Use the left mouse button to draw a window around the image of white spikes. Type yes when your happy with your window and save the image as "spikes". When the graphics.exe program reloads, have a look at the spikes image. Notice that the spikes are covered in black. This isn't good, as it means there will be a black border around the spikes when we put them in the ice level we are making. We want to replace this black background with a transparent colour. The blue background of the graphics.exe editor is the SonicX transparent colour. So, select the color selection icon from the graphics toolbar( It is the second icon from the top left). Left click somewhere on the blue background. This will select the transparent colour as the active colour. Now, select the paint Icon (It is the top icon on the right). Move the mouse pointer to a place where the black border which covers the spikes is. Press the left mouse mutton. On anyplaces where the border is left, repaint. Press Esc and save the changes by pressing yes. Open leveled.exe. The level you created should be loaded. Now, select the Tp tile placement Icon. Press F8 to cycle through images until you come across the "spikes" tile. Place two spikes just before the updraft collision detection box was placed, on the left side of the hole. Now, select the spikes Icon( It has an S on). Draw a line from the top of the first spike on the left to the base of the final spike on the right. Now select the tp icon again. Cycle through to the obstacle icon. Place two of these pictures side by side to the right of the third "obstacle" picture on the base of the obstacle tower drawn earlier. Now, select the bouncy Wall collision detection icon (It has a W on it and a horizontally orientated rectangle, as opposed to the vertically orientated wall). Draw the line across the surface of the two protruding obstacle icons. Congratulations, you have now finished your first sonicX level!

Graphics.exe

Using Graphics.exe, you can draw pictures, or import predrawn bitmaps, and save them as tex files that can be loaded into the level editor (Leveled.exe) for level design. It has most of the functions that Microsoft Paint has such as drawing a line , circle , filled square , filled rectangle, free draw mode and the ability to import bitmaps. Besides having a paint function, "get colour" function and an unlimited undo mode, it also allows you to create animations. Prior to the release of SonicX version 9, all pictures seen in levels were created using only the drawing primitives available in this editor. This made all the images created fairly simple. Think simple as in geometric shapes, perhaps some circles at best. However, the release of Version number nine made it possible to use relatively high quality images provided that they were saved in the 256 colour bitmap graphics format at 320 * 200 resolution. Popular paint programs like Paint Shop Pro Program make it easy to create 320 * 200 pixel versions of virtually any image. The practical upshot of this is that if you are running a Sonic1 ROM on a decent Megadrive emulator, you can directly rip images from the actual original sonic game by pressing print screen, and pasting it into an editor like paint shop pro. By saving the image as a 320 * 200 sized 256 colour bitmap, the image can be loaded into a tex file and touched up using the graphics editor. Before we start a step by step walk through of the graphics.exe program, it would be prudent to detail the control functions of this graphics program.

The Graphics Toolbar and its Icons

Around sixteen functions can be accessed by using the mouse to left click on toolbar Icons. The top eight icons are used for the same fairly stock standard purposes as any other paint program. An Eraser controls the Undo function which is a pretty cool feature of this program. For the drawing primitive functions, there is an unlimited capacity to undo mistakes. However, you can't undo the copy and past functions.To the right of the erase icon is the paint function. This fills the screen with the selected color until it reaches a colour that was not the one which was initially touched. So be careful with that function. Underneath the paint Icon is the filled rectangle function. It draws a filled rectangle using the currently selected colour. By contrast, the third icon on the right draws a filled square. Just below the eraser icon is the Colour dropper icon.This can be used to select any colour on screen. Below this is the pencil, which allows a user to freehand draw using the mouse. You just hold down the left mouse button and let rip. The fourth icon on the left is the line function.This is probably the most useful drawing tool. To right of this is the circle Icon. It allows for a circle to be drawn. Beneath the Line Icon is the blank page icon. This allows a user to create a new frame in the current animation. To the right of this is the "Select New Animation" Icon. This icon lets you create a new animation, or single frame image if you want. The two icons below the "select New Animation" Icon are the "select Next animation" icon and the "select Previous animation" icon. It allows users to cycle between images stored in the graphics file. Right next to these two icons, but on the left are the "select Next frame" icon and the "select Previous frame" icons. These let you cycle between the frames of images that have more then one frame. Underneath these icons is the Mask Icon. It allows you to select and copy part of, or a whole, image and move it, delete it or otherwise manipulate it. To the right of this Icon is the folder Icon. It allows you to start editing a different tex graphics file.

Icon controlled functions

Colour Dropper icon (eye dropper)
Left click on the colour dropper Icon. Now, left click on any on screen pixel, and the current colour will become the same colour as the pixel you just clicked on.

Circle icon (circle)

Left click on the circle icon to enter circle mode. Left click the mouse and drag the mouse before letting it go to set the radius and complete the circle.

Eraser Icon (eraser)

Left click on the eraser icon to undo the last action. Note that you can not undo an undo, or any mask operations

Filled rectangle icon (rectangle)

Left click on the filled rectangle icon to enter filled square mode. Hold down left click and drag the mouse to the desired position Release the button to complete the filled rectangle.

Filled square icon (But looks like an unfilled square Icon)

Left click on the filled square icon to enter filled square mode. Hold down left click and drag the mouse to the desired position Release the button to complete the filled square .

Folder Icon (folder)

Left Click on the Folder Icon to Load a new texture file or create a new texture file. When you create a new texture file , make sure you add the .tex extension to the end of it.

Free draw icon (pencil)

Left click on the free draw icon to enter free draw mode. Hold down left click and drag the mouse to the draw free form . Release the button to complete the free form .

Line icon (diagonal line)

Left click on the Line icon to enter Line mode. Hold down left click and drag the mouse to the desired position . Release the button to complete the Line .

Paint Icon (paint tin)

Painting requires special attention. You must first draw a boundary such as the one in this picture in which so that an area is entirely enclosed by a single colour. If it isn't enclosed then when you paint , the whole screen will be filled. Also note that you must paint with the same colour that boundary colour is. Left click on the Paint icon to enter Paint mode. Hold down left click and drag the mouse until the cursor is within a suitable boundary. Release the button to paint .If it fills the screen then type U to undo the last action.

Select New Animation (a4 page with green block )

Left click on the icon to create a new animation or image. An animation is just like a normal image, but has multiple frames. When you select a new animation, you create an image with only one frame. Once your happy with the first image, you can add a new frame to it by clicking on the blank page Icon.

Select New Frame (blank a4 page)

Left click on the icon to create a new frame in the currently loaded animation.

Select Any Picture (Press the Mouse Right button. Select picture menu item with Left mouse button)

Scroll through pictures shown to select image that you wish to edit.

Select Next Animation (painting with right pointing straight arrow)

Left click on the icon to select the next image from the tex file.

Select Next Frame (painting with right pointing curving arrow)

Left click on the icon to select the next frame in the currently loaded animation.

Select Previous Animation (painting with left pointing straight arrow)

Left click on the icon to select the previous image from the tex file.

Select Previous Frame (painting with left pointing curving arrow)

Left click on the icon to select the previous frame in the currently loaded animation.

The Mask (window made of broken lines)

Left click on the icon to select the mask function. When this mode is selected, you can hold down the left mouse button to draw a window over an area of the screen that you wish to select. Let go of the mouse button and the window will be drawn. Now, place the mouse pointer within area of the window. If you now hold down the left mouse button and move the mouse around, you will notice that the image moves around with you. You can effectively move the image, or a part of an image anywhere you want. Also, If you press the right mouse button while the window is selected, you can copy, cut , paste or delete, by selecting your context menu option with the mouse pointer, and pressing the left mouse button.
Mouse controlled functions
The left button is required for the action of most of the icon function. The right mouse button loads the context menu. A left lick then activates the choice of a context menu.

Keyboard controlled functions

Esc ends the program and prompts the user to name the loaded tile if it is untitled

U undoes the last action. It is unlimited , but you can't undo an undo

F2 changes the current colour to the next colour

F3 changes the current colour to the previous colour.

F5 Interchanges scrolling method from single pixel to multiple pixel. Multiple pixel is a less accurate way of scrolling, but it is faster.

F6 Homes the image to the center of the screen.

F8 Hides drawn image to show the background, and restores the image when pressed again.

F9 When a bitmap image is loaded into the background of the editor, this function makes it appear and disappear at will.
F10 Hides the toolbar, colour bar and text, and restores them when pressed again.

Arrow keys allow you to scroll the picture so that you can draw images larger than the screen.

Shift and A skips to the next tile in the .tex file so that you can reedit tiles you previously made.

Shift and L loads a 256 colour bitmap(.bmp) file into the background so that it can be traced

Shift and I imports a bitmap as a new picture, or new frame of the current animation.The program will prompt you to specify a bitmap file via the use of a dialog box, and you will be given some other options.

My First Tex graphics file
Run graphics.exe. If this is the first time that you have used it, you should be editing a tex file called "icecap.tex". You can tell by looking at the file shown next the the words "File:" on the top line of the graphics editor. If it isn't loaded, left click on the folder icon of the toolbar. Now, click on the "load texture file" button. Use the Up and Down arrow keys to select "icecap.tex" from the pop up dialog box. Press enter. You should now see the blue screen of the graphics editor. Press F10. This should make the toolbars disappear. Notice that there is a big blue square surrounded by white. Use the arrow keys to move the blue box all over the screen. Only those things that are drawn in the blue box will be shown in the level editor or sonicX. If you draw an image in the white section, it won't be visible when you try to load the image in the level editor. That's why the blue box is contrasted with the white boundary. To show where you are meant to draw. Just for fun, move the blue box with the arrow keys until it is very off screen. Now, press F6. It should bring the blue box back into the screen. This is the homing function. It is for when you accidentally get lost. Anyway, press F10 to bring back the tool bars. Press the right mouse button. You should see the context menu. Move the mouse pointer to highlight the "picture" option, and press the left mouse button. The image selection dialogue box should now pop up. Use the arrow keys to highlight an image called "expbg 1". Press Enter. This is one of the background images that has been used in the Icecap Zone level. Look at the top line to a piece of text that says "Gfx :". The number next to it should read 1252. This means that this image has 1252 drawing primitive graphical functions like lines and boxes. It kind of points out to you how long it takes to draw an image by hand. But don't worry, hardly anyone sees the graphics editor to draw images line by line. There is a faster way to do it, which I shall elaborate upon later. Also, notice the text on the second top line of the graphics editor. There is some text called "tile :". After this should be the name of the file "expbg 1", and the number 1. This number shows which frame of the image is currently being showed. This file only has one frame, so you can't change the frame shown. But you can in other images in this graphics file. To illustrate this, press the right mouse button, and bring up the picture dialogue box again. Select the image called "anim obstacle". When it loads, and this may take 30 seconds or so, the number shown to the right of the picture name should also be 1. But, try now to select the "skip to next frame" Icon (It has a painting on it and a curved arrow pointing to the right). This will also take about 30 seconds or so.Please don't get apprehensive if the editor takes a long time to do stuff. You will notice that the image has changed slightly and that the number shown to the right of the picture name is now 2. That is because this is the second frame of the animation. To see the animation in action, press "a". It should take about 30 seconds as well, but it will show the animation as it will be seen when playing sonicX. Press "a" again to return to the editor. Now select the "skip to previous frame" Icon (It has a painting on it and a curved arrow pointing to the left). You should return to the first frame of the "anim obstacle" animation. Now, select the "skip to next animation" Icon (It has a painting on it and a straight arrow pointing to the right). You should see the "Top freak" image. This way of selecting images isn't as powerful as using the right mouse button context menu. This is because it just selects the next image in the graphics file, not necessarily the specific one you wish to load. But lets go back to the previous image using this inferior method anyway. Select the "skip to previous animation" Icon(It has a painting on it and a straight arrow pointing to the left). I think we have covered the basics using the icecap.tex file as an illustration. So lets create a new graphics file. Click on the folder Icon and left click "no" when the program asks whether or not you would like to save the changes.
Click on the create texture file. Type a name that uses less then eight letters (this is a dos program remember) and press enter. Now, move the mouse over the colour toolbar at the bottom of the screen. Move the pointer to the yellow colour, and press the left mouse button.Yellow is now the active colour. Now, click on the circle Icon. Draw a circle by pressing and holding the left mouse button to set the centre point, and increase the radius by moving the mouse pointer outwards. Let go of the mouse button to set the circle. Now, change the colour to black. Select the paint icon. Move the mouse pointer into the circle and left click. The circle should be black inside with a yellow border. Change the colour back to yellow. Now, select the Line icon. Place the mouse pointer at the left most portion of the circle. Press and hold the left button, and move the pointer to the right most portion of the circle. Let go of the mouse button when the line is horizontal. Now, select the rectangle Icon. Draw a small rectangle within the top semicircle, by moving the pointer to the place where you wish to place the top corner of the rectangle. Now left click and hold, and drag the pointer to the point where you wish the lower corner to be. Let go of the mouse button to set the rectangle. If you made a mistake, press U once, and try again. Now, select the square Icon. Move the pointer to a place in the lower semicircle where you wish to place the top corner of the square. Now left click and hold, and drag the pointer to the point where you wish the lower corner of the square to be. Let go of the mouse button to set the square. Once again, if you made a mistake, press U once, and try again. Now, select the pencil Icon. Draw a tail from the circle, to a point twice the width of the circle, but away from the circle. To do this, just left click when the mouse pointer is at a point you wish to draw at. You can also hold the button down to draw as you move the mouse. Now select the copy and selection tool (It looks a rectangle made up of broken lines). Hold the left mouse button to draw a window around the image you have drawn. Now, press the right mouse button. The context menu should now be shown. Move the mouse pointer to highlight the copy option. Press the left mouse button.
Now, move the mouse pointer underneath the image you have just copied. Press the right mouse button, and left click on the paste option.. Cool. Now, select the copy and selection tool again. Draw a window around the pasted image. Use the arrow keys to move the screen if you need space. Now, press the right mouse button. Left click on the delete option. The image should be deleted. Now, if you used the arrow keys to move the screen, move the screen back to a place where you can see the whole of the image you created before prominently. Move the mouse pointer to the the upper left corner of the rectangle in the circle's top hemisphere. Write down on a spare piece of paper the two numbers to the right of the text "mouse" on the second line of text at the top of the screen. For me, they are (100, 47), but they will be very different for you. The first number is the mouse pointer's X value in pixels, and the second number is the Y value. They are cartesian coordinates, and provide a useful reference when we draw animations with two or more frames, as we will see. From now on, don't use the arrow keys at all until instructed to. Now left click the "create new frame Icon"(It has a blank a4 page on it). You will be prompted to name your current image. Name it "first attempt". Now, put the mouse pointer anywhere on screen. Press the right mouse button. Select the paste option. Following this, choose the "copy and selection tool". Draw a window around the pasted image. Move the mouse pointer to the the upper left corner of the rectangle in the circle's top hemisphere. Compare the mouse numbers now to the ones you took earlier. By pressing the left button, and holding it, you can move the image within the window to anywhere on screen. Move the image until the mouse numbers synchronise with the original mouse numbers. By moving the image left, the mouse X value should lower. By moving it right, the X value will increase. Likewise, by moving the mouse Up, the mouse y value should lower. Conversely, by moving the mouse pointer down the y value should increase. This basically means you can make the image in one frame stay at exactly the same position as an image in another frame. Now, make the active colour white. Select the paint Icon. Paint the rectangle in the upper semicircle white. Now select the "skip to next frame" Icon (It has a small painting on it and a right pointing curved arrow. Notice how the image has changed only slightly. It appears that a window is flashing in the image. This is only a brief example of how to draw animations.
Now we will move on to something a little cooler. Select the "create new Animation" icon (It has an a4 page with a small green and black rectangle on it). Name this animation "BigBox". Now press "shift and I" together. This allows us to import bitmap graphics. Press Yes to save changes. Use the arrow keys to select the file called "spike.bmp". Press enter. Read the introductory message, and press enter. Use the left mouse button to draw a window across the picture which looks like a wooden box. It doesn't have to be a close fit,and It is important that you get some of the background so that you have black border. let go of the mouse button to set the window. If you are happy with your selection, type yes and press enter. Notice the cool way that the image is being created. The bitmap image is being turned into a tex image made up of lines and rectangles. When it is finished, you should note the black border. This isn't really desirable from a level making perspective. So, to get rid of the border, we can paint it with the transparent colour. In sonicX, the transparent colour is the light blue shade that makes up the background to the graphics editor. So, select the colour dropper icon. Left click at some point on the blue background of the graphics editor. Now that the active colour is the transparent colour, select the paint icon. Paint the black border. See how it's turned blue. To show that this blue is actually transparent, press "Shift and L". Use the arrow keys to select "spike.bmp". Press enter. This loads the bitmap into the background of the editor. Press U, and the black border will come back. Repaint the border, to make it transparent again.
Now, select the "create a new animation" icon (It has an a4 page with a green drawing in the center). Name the new animation Spikes. Press "shift and I" to import a bitmap image. Save the changes. Select the "spikes.bmp" bitmap file. Draw a window around the left spike image. If you are happy with your selection, type yes and press enter. When it is finished being converted to a tex image, you should be back in the editor. Select the copy and selection tool. Draw a window around the new image. Move it down by about 20 pixels, using the mouse y values as a guide. The reason why we have to move the image down, is that this is going to be the first frame of an animation, and the second frame is twice as high as the first. Because only images drawn in the blue section of the editor get shown in the level editor, we have to move the first animation down to allow for the next frame to be higher and still underneath the blue white border. Now, we still have the background to deal with again. Select the colour dropper icon. Left click at some point on the blue background of the graphics editor. Now that the active colour is the transparent colour, select the paint icon. Paint the black border. Now, press F6. Move the mouse to the left hand corner of the spikes image. Write the Mouse X and Y coordinates down.Mine are (38,40). Press "Shift and I". Save the changes. Select the "spike.bmp" image. Draw a window around the right spike image. Type Yes when the program asks you if you wish to save the picture as spikes. This will make the image a new frame of the spikes animation. When you are returned to the editor, press the "select next frame" icon(It has a curved right pointing arrow on it). Now select the copy and selection tool. Press F10. Draw window around the image. Press F10. Press F6 to home the image Place the mouse pointer at the left hand corner of the second frame of the spikes image. Now, hold the left mouse button and move the image around with the mouse to match the mouse coordinates of the previous frame. If the only way to match coordinates leads to the image poking out of the blue background and into the white border, don't move the image. Rather, take down the mouse coordinates of the lower left hand corner, and move the first frame of the spikes animation. When this is finished, deal with the black border by painting it with the transparent colour. I trust you can remember how to by now. Use the "Select previous frame" icon (It has a curved left pointing arrow on it) to see the previous frame. If you have done things right, half of the spikes will appear to have been chopped right off. Press "a", and you can see the animation in progress. Press "a" to return to the editor. Press Esc and save changes. Congratulations, you are now familiar with every function of the graphics Editor.

Stuff you need to know to make good quality graphics for good quality levels.
You should now know that it is possible to use relatively high quality images provided that they were saved in the 256 colour bitmap graphics format at 320 * 200 resolution. Spikes was once such image, and it is shown to the left. I used an emulator called Kega, and played the mystic cave zone on sonic 2. During the game, I would press enter to pause the game, and I would then press "Print Screen" on the keyboard. This copies the screen into windows memory. I would then use Microsoft paint to paste the image into this surprisingly useful editor. It allows you to select the size of an image for one thing. So, If you run it, select on the Image menu and select attributes. Make the width 320 and the height 200. Choose pixels for the measuring units.Only paste the image after you have set these attributes. For the sake of efficiency, I usually have two windows of the program operating so that I can copy the tile I get after erasing the rest of the screen to a 320 * 200 sized bitmap in the other open editor. Now, I usually don't save the screen full of images to a bitmap file using Microsoft paint. This is because it has to be reduced to 256 colours. It can be done in microsoft paint, but they use a faulty algorhythim, so I use the shareware version of Paint Shop Pro Program to do it. While Paint shop pro is running, I select the entire screen of the 320 * 200 pixel image running in microsoft paint which has the images I copied from Kega. I then select the "Paste as new image" option in the edit menu of PS Pro. I then select "decrease colour depth to 256 colours option in the colours menu. I use the optimised nearest colour method. I then save the image using the "Save as" option in the file menu. I save it as the BMP bitmap file format. The sub type is "windows RGB encoded". By saving the image as a 320 * 200 sized 256 colour RGB encoded bitmap, the image can be loaded into a tex file and touched up using the graphics editor, as was shown above. I wish you good luck in finding images to make good quality levels.

Tileadd.exe

As mentioned above, the tileadd program allows a user to copy a picture from within one graphics file to another another graphics file, and vice versa. It also allows for pictures to be deleted from a certain tex file. When you run it, you first have to select which graphics file you wish to use to donate pictures to the other.Use the arrow keys to select "icecap.tex".Press enter. You don't have to select a destination file immediately. This is because the program remembers what the last destination file was. Once the source file has been selected, you are confronted with a menu that has five options. Left click on the "choose new destination" icon. Now click on the "load texture file" icon. Use the arrow keys to identify the graphics file you created earlier and press enter. It would now be a good idea to click on the "remove picture" icon. You will see a pop up box with a list of the images you created earlier. If you use the arrow keys to navigate, you can see a picture of each image to the right of the text. To avoid deleting anything, click on the cross, or press esc. Now click on the "add new picture" icon. Use the arrow keys to move down to the "large ice wa" image. Press enter to add this image to the graphics file you created earlier. Click again on the "add new picture" icon. Use the arrow keys to move down to the "anim obstacle" image. Press enter to add it to the graphics file. Now, click on the "remove picture" Icon. You should see that there are two new entries on the list. Use the arrow keys to move down to the "anim obstacle" image. Press enter. Now, click again on the "remove picture" Icon. You should see that there are the "anim obstacle" image is now removed. Click on exit to exit this Tileadd.exe. This program is thus quite useful for managing graphics files. Be careful though. If you delete an image from a graphics file that a level file uses, both the sonicX program and the leveled program will crash when the level is run. Congratulations for reading through the entire manual.You have read around 11,290 words. When you finish your level, send the graphics file(*.tex), the level file(*.lvl) and the background music, in midi format (*mid) in a zip file over to prodigy22k@yahoo.com.au , and I will add your level to the levels page.If you don't know what a zip file is, just send us the files individually.