Tutorial: Tools
Needed: Procedure: Step
1: Creating Costumes
Step
1: Create your main character (the Ego)
Once all these images
are drawn, they are to be placed in a neat layout on a 320 x
200 picture and saved as a photoshop ".psd" file for
now. Below is an example of the minimum pictures necessary for the Ego, all compiled onto one picture:
Since the Ego is the only actor with the ability to walk, walking animations are not necessary for any other actors. All other actors need sets 2 - 4 completed (minimum). The Ego's sprites along with all other actors' for the room you are working on need to be able to fit on two of the 320 x 200 ".gif"s like the above example. Keep in mind they must all adhere to the 63 colors maximum! - Before you can save these sprite sheets as ".gif" files I recommend saving them as photoshop (.psd) files. Now you must do some palette manipulation (This is a little annoying, but this is the only time you have to do this!)
- When you are finished with all your drawing and you have your final two sprite sheets like those below you are ready to save your ".gif" files. Complete Steps 1 - 3 from the above table, this time click "Load" and load "Final Palette.aco" (you will have to choose "Swatches (*.ACO)" from the "File Type" drop-down menu). Click Okay and save the pictures in your "TWIGZ SDK\Images" folder.
- Open your "TWIGZ SDK\Images" and drag all ".gif" files, on at a time, onto "BS2Make.exe" (special thanks to Vohaul Enterprises for creating this program) which will create files of the same name except with extension ".bs2" - Next, run "RoomEdit.exe" (found in your TWIGZ SDK folder). - Simply click on the "Edit Costumes" button and when prompted, simply enter the file names for your sprite sheets (i.e."mypics" and "mypics2") and press enter. - Select images in the exact order (from top to bottom) they appear in the table above. So the first picture selected would be the first frame of the character (with head) walking right, the second image would be the second frame of the character (with head) walking right, and so on. After the first 16 (4 for each direction) images are selected. The next images selected should be the character facing right without a head, then the character facing left without a head, and so on. EVERY CHARACTER NEEDS A MINIMUM OF 44 IMAGES SELECTED (however, since the Ego is the only character that can walk, you may select 16 random areas for any other characters first 16 images). - Below is a listing of the Costume Editor's Buttons:
- When you have completed selecting all images for all actors in the appropriate order, you may save the costume file by pressing "S" and following the on-screen prompts. -What are presets? Presets allow you to easily re-select images, so that you don't have to re-select all of the ego's images for each new room. Once you have all of the selected areas you wish to keep, just simply press the "P" key and enter a filename without and extension. Keep in mind, the presets remember not only the box coordinates but also the page number they are on. So if your sprite sheet is on page 1 when you save the presets, it should be on page 1 when you load the presets. Preset files can be found in your "TWIGZ SDK\Costumes\Presets" folder. Step
2: Draw the Room Graphics - The tricky part is deciding where to draw certain objects. Objects that you would like the Ego to interact with (i.e."Look At") but not physically interact with can be drawn directly onto the room image itself. For example, a door that can never be opened (so the door's image will never change) can still be looked at and etc. however no separate images are needed for this process. However, a door that can be interacted with and opened and closed needs extra images. - Based on what will work best for your situation you must decide how to design these physically interactive objects. If you decide you would like the door to start by being closed, then you can draw it closed on the actual room image. Then you can make another image of the door in an open position and when the Ego opens the door, this image will be drawn. - Once you have all those details figured out, you should have two separate images like those shown below:
- As you can see, the sign off to the right is shown WITH the shovel in the room image, however on the object sheet it is shown WITHOUT the shovel (since the shovel can be picked up).
- Before you go on, we must discuss Palette Rotation. Palette Rotation is a way to achieve animation without animation. For an example, the EYES in the TWIGZ Demo glow and change color, yet they are not animated. The TWIGZ Engine supports 5 separate palette rotation colors. If you plan to use palette rotation in your room then you must do the following: Set aside one color that will not be used ANYWHERE ELSE in your image except in places you wish a rotation to occur. This will be your first rotation color. Let's say this is used to show a glowing button. Draw the button in this special color on the room image. You can do this for as many as 5 special colors. Feel free to get creative with this, some uses for palette rotation in the actual Monkey Island series were the glow of a fire, water rippling effects, dimming of characters in the distance, etc. - Once again, a little palette manipulation, I promise this wont be so bad.
- Save the object sheet as a ".gif" file loading the "Room Palette Final.aco" as the "Custom" palette each time you save. Split the large room image file into as many 320 x 144 sections possible and save them separately as ".gif" files in your "TWIGZ SDK\Images" folder. For example, if your room is 784 pixels wide, you will have to save three images, the first two are 320 x 144 pixels and the last is 144 x 144 pixels. I recommend naming them with numbers so you can keep track of which file is which (All should be saved with the new palette). Step
3: Create Room Masks
- To create a mask, open your photoshop file (".psd") for the room and create a new layer. On this layer you will draw over any areas that will cover the actor as he walks across it. You can have 49 different levels of 3-D. These 49 different indices are called Z-Indices. Notice in the above picture the BLUE areas are the 1st Z-Index and are therefore colored with Color Index 1. Any non covering area MUST BE COLORED WITH COLOR 50 (Shown as an extremely light shade of blue in the above mask picture)!!!!! - If you want your character to walk behind 2 or more layers just color each subsequent layer with its appropriate layer color. Below is an example of this (Note: Light Green is Color 2, Light Blue is Color 3, and Dark Green (in this case) is Color 50):
How do the Ego know when to go behind these masks? Good question, when you set up the walkable areas in the room editor, you assign each walkable area a Z-Index. This means that whenever the Ego is in a walkable area with a Z-Index of 1 he will be covered by all mask areas of Color Index 1. Step
4: Creating the Level File: Load the Images and Draw the Polygons - In order to create a room you must first load the room images. Click on "Load Images" and follow the on-screen instructions. If the room has no masks then you may type "N" to chose not to load room masks. Below is an explanation of the prompts you will see:
Note: You must know the exact room width in pixels in order to achieve desired results. For the example above, the 784 pixel room, I would have to load 3 images which I named "room1", "room2", and "room3". Also I would need to load the room masks which I named "room1m", "room2m", and "room3m". - Now that your room is ready for setup, I suggest you draw the rooms walkable areas next. You can do this by clicking on the "Draw Boxes" button. When you do this you will be prompted to draw the vertices in CLOCKWISE ORDER, this is VERY IMPORTANT! Before you begin, listed below you can find the buttons used for drawing walking boxes:
- When drawing walkable areas draw the vertices in a clockwise order, after the 3rd vertex is drawn simply press "C" to connect the final line. The next box should be drawn next to the previous one with one edge overlapping an edge of the previous polygon. Note ALL polygons MUST BE CONVEX and there must be a way to get from ANY ONE POLYGON TO ANY OTHER POLYGON. -
How do I draw a line? In order to draw a
walkable area that is in the shape of a line, simply click
on a point, then click on the second vertex. Keep your mouse
there and press "C", then click again in the same
spot. Press "C" a final time an viola, this will
draw a line. - After a polygon is drawn you will be asked THREE questions, below is a table with the questions and what they mean.
- When you are done drawing your boxes simply press "Escape" and you will be asked if you want to end drawing boxes, enter "Y" or "N" here. Step 5: Creating the Level File: Create the Matrix and Select the Midpoints
- Now that you have created all of your drawing boxes, you are ready to set up the connectivity matrix. Start by clicking on the "Create Matrix" button. All of the polygons you have drawn will appear (the first box will be of color 1, the second of color 2, etc.) You will be prompted to "Click all of the Polygons Touching Polygon 1." Simply click inside any polygons touching polygon 1, they should change color when clicked on. When you have clicked ALL polygons touching polygon 1 click with the RIGHT MOUSE BUTTON. You will then be prompted to do the same for polygon 2. Continue in this fashion until all polygons are completed. When you are finished you will prompted with "Matrix Calculated" simply press any key to continue creating your level. -
Step 5a:
Since the TWIGZ Engine deals with CONVEX
polygons only, it has trouble detecting LINE Polygons. So
you may not be able to accurately click on the line polygon
to choose it as another polygon's neighbor. Instead, here's
where your diagram you drew of the polygons in your room should
come in handy. - How do I scroll the room image to draw my boxes? The ARROW KEYS, left and right, can be used to scroll the room image. - When you have finished creating the connectivity matrix, you are ready to select the mid points, this is the final step in creating a fully functioning walkable room. Start by clicking on the "Select Midpoints" button. You will be prompted to select a midpoint. Click the middle of any SHARED EDGE of two polygons. Next you will be asked to "Select Polygon 1." Simply click inside one of the two polygon's who share the edge (If the polygon that shared this edge happens to be a LINE Polygon, then follow the directions in Step 5a once again). Do the same to "Select Polygon 2." Repeat this for all shared edges.
- When you are finished selecting all midpoints (a midpoint or a shared edge need only be selected once) RIGHT CLICK to end selecting midpoints. Step 6: Loading and Placing Objects - Now you are ready to load and place your previously drawn objects. Click on the "Load Objects" button to start. - You will be prompted with "S - Sheet, I - Individual, B - Blank". Below is a breakdown of what this means:
-
Loading an object from a sheet: You will now be prompted for the "Object Name." Enter the text you wish to appear when the mouse cursor hovers over the object, then press enter. I recommend you write down each object you load and what number it was, starting with number 1. This will come in handy when placing the objects on the room image. You will then be prompted for three more things. Below is a table explaining each:
Repeat this process for ALL objects you want to load from a sheet. -
Loading a BLANK object: You will be prompted to enter the "Object Name" just like above.
Next you will be prompted to choose the "Walk-To Coordinates" Click a place on the room image that you wish the Ego to walk to when the player chooses to interact with the current object. The reason for this is so the Ego will ALWAYS walk to the same spot when interacting with that object thus making the drawing of animations much easier for you. I recommend you write down each object you load and what number it was, starting with number 1. This will come in handy when placing the objects on the room image. Repeat this process for ALL blank objects. -
Loading and Individual Object:
I recommend you write down each object you load and what number it was, starting with number 1. This will come in handy when placing the objects on the room image. Repeat this process for ALL objects you want to load individually. Now you are ready to place your objects, click on the "Place Object" button to begin. You will be prompted for the "Object ID Number" this is where the information you wrote down will come in handy. Type the object number you wish to place and the mouse cursor will change into the object image. Click anywhere on the room image to place the object there. You will then be prompted to choose the "Walk-To Coordinates" which can be done by simply clicking anywhere on the room image where you want the Ego to walk to when interacting with that object. Repeat this for all object images. To end placing objects, enter 0 for the Object ID Number. Step 7: Creating the Level File: Color Rotations - If you have created your room image with some rotational palette colors, they must be set up now. I'll admit this part of the editor is a bit weird but it gets the job done. To begin click on the "Color Rot." button. - You will be prompted to select a color "1 - 5" just press the number key, 1 - 5, to set up that color. Next, Hover your mouse over the special color you had setup in the palette previously. Using the "R", "G", and "B" keys (to increase color values) along with the "r", "g", "b" keys (to decrease color values) you can increase and decrease the amount of Red Green or Blue that will be in the color. When you have the initial color that you want the rotation to start with click on it with your left mouse button. - To select the final color hover over ANY color and adjust the color attributes until you get the desired color for the end of a rotation cycle. Click on the color and you will be prompted to set a time. The time is the amount of time (in seconds) that it takes for one rotation to be completed. - Repeat this process for any other rotation colors. You have now successfully completed the first half of the TWIGZ SDK Tutorial. You may now save your room by clicking on the "Save Room" button. You will be prompted with the following questions, below is a table with their explanations:
When you are finished with this your level will be saved in the "TWIGZ SDK\Levels" folder. You may now exit the Room Editor and precede on to Part 2 of this tutorial. |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
