For help designing levels, visit the SonicX messageboard

Level Construction Tutorial

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.

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 1^st point on the platform and hold the button down as you move the cursor to the 2^nd 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 2^nd 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!

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

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)

 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.

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 .

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 .

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)

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

Select Next Animation (painting with right pointing straight arrow)

Select Next Frame (painting with right pointing curving arrow)

Select Previous Animation (painting with left pointing straight arrow)

Select Previous Frame (painting with left pointing curving arrow)

The Mask (window made of broken lines)

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.

 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.