Old Style Game Framework How To..

Creating a Game with Old Style Game Framework.

This walk through create a side scroller game, where the player runs across the screen and jumps over obstacles. The walk through uses the Old Style Game Framework (1.0.2), Game Doc (1.2.3) and Game Designer (1.2.2).

Updated versions: Old Style Framework (1.1), Game Doc (1.3) and Game Designer (1.3)

1. Go to the "Animations" tab. This tab is divided into two main sections. The completed animations on the left side, and two additional tabs on the right side, and one for Basic animations and one for Complex animations. Complex animations are Animations that have Animation object inside of them, like the RandomAnimation and CompositeAnimation. We will use the Basic tab.
2. The Basic tab is split into two sections: the Animation section and Image Workspace section.
3. The Image Workspace is for cutting the image into cells. You will notice a button labeled "New Static", this loads an image and creates a StaticAnimation from the entire image. We will be using a multi-cell image. In the Image Workspace, click the "Load Image" button, and select the "runningLeft.gif" from where you have saved it.
   1. The image will be copied over to the the project's images folder.
   2. The image will be loaded in the large pink field, and ready for processing.
   3. You can load images that you need for other non-standard objects, and can retrieve them through the GameDocument. (more on this later).
   4. At the bottom if the image field is a text box with the size of the image. This one is 300 x 62.
      
   5. Now we will cut the cells from the image. You can use the mouse to draw the cut lines, but it's more acurate to set the sizes. I measured each cell to be 50 x 62. Enter in the width of 50 and the height of 62 and click "Set Cut". Dashed lines will appear around each cell.
   6. Oddly, This animation is setup backwards; the cells go from right to left. To set the cells in the correct order we simply click them with the left mouse button. Each cell from right to left. In the "Set Cells to Use" text box, the cell numbers will appear as you select them. (You will see cells to use: 5,4,3,2,1,0).
      • You can type the cell numbers manually, separating them by a comma. Remember this is a zero base system.
   7. Click Animate. This will put the cells into an Animation object and send it to the Image Animation section.
   8. Since this is the character running, we want to loop the animation sequence. Select "LoopedAnimation" from the drop down.
   9. Click "Run" and the animation will move. The guy will run at 100 milliseconds per cell. (100 is the default setting).
      • You can adjust this by clicking the "Faster" and "Slower" buttons, which change the rate one millesecond at a time.
      • You can type a number in the text box and click "Set Rate" to change the rate as well.
      • The number label list the current rate, which is how long the cell will display for in milliseconds.
        
   10. Enter in an ID. "GuyLeftAnimation".
   11. Our tile squares are going to 25 by 25. So we are going to set an offset for the sprites height to -12. This will make the sprite 50 pixel tall and 50 pixel wide, with 12 pixel above the origin. This will make are guy stand on the tiles correctly.
   12. Click "Set Offset" this will move the character up, above the zero base line.
   13. Select the Sound tab. Then click update Sounds. This will update the drop down list with all the available sounds.
   14. Select the "Walk" sound in the drop down.
   15. Click Set Sound. The Frames is for setting when you want the Sound to start in the sequence of the animation. It defaults to zero.
   16. Now click the Run button again, and you will get sound with you guy running.
   17. Click Create Animation.
       • The Image Animation area will be cleared.
       • An icon of the guy will appear in the Animations section.
       • You can select an icon from the Animations section. Then Edit, Delete or Copy it.
4. Now we'll do the same for "runningRight.gif". (Follow the steps in step 11, except as noted here.)
   1. These cells are sequenced from left to right. This is the expected ordering, so the Game Design is setup to order the cut cells. So we don't have to select the cells to use.
   2. After setting the cut, click "Animate".
   3. Set this as a LoopedAnimation with the same rate as the previous animation.
   4. Add the same sound.
   5. Set the ID to "GuyRightAnimation" and create.
   6. This icon will also appear in the select list on the left.
5. Next we will do the standing animation.
   1. Load "StandLeft.png", Since this is a single cell iamge, click Animate, adn the whole image will be used.
   2. Set the Y offset to -12.
   3. Set the ID to "GuyStandLeft" and create.
6. Repeat the steps for the standing right image.
   1. Loading "StandRight.png", with the Y offset of -12.
   2. Set the ID to "GuyStandRight".
7. Now we will create the jumping motions.
   1. First load the "jumpLeft.gif". This is a single cell image, click Animate, to use thewhole image.
   2. Select the "StaticAnimation". There will be no frame rate and no off set.
   3. Set the ID and Create the Animation.
   4. Do the same for the "jumpRight.gif."
8. Now we are going to create the tiles for our game map.
   1. Load sqTiles.png. These tiles are 25 x 25. Set the cut and animate the first (green) tile.
   2. The tiles will be StaticAnimations, and since it is the size of our tile size, there will be no off set.
   3. Create the animation with an ID of "GreenTile"
   4. Create the animations for the gray, brown, red and white tiles as well.
   
9. Now for the fireball and the explosion.
   1. Load the FireBall.png
   2. Set the cut at 25 wide and 52 high.
   3. Click Animate
      
   4. Set the animation to LoopedAnimation.
   5. We want the fireball to be centered vertically, so set the Y offset to -13
   6. Since the Fire sound loops we are going to add this later.
10. Load explosion.png.
    1. Set the cut at 33 wide and 32 high.
    2. Click Animate and set the animation to the OnceAnimation. This animation will play once then stop.
       
    3. Since our tiles will be 25x25, we need to offset the explosion so it displays centered. Set X to -4 and Y to -3.
    4. Add the Explosion sound.
    5. Save Animation as Explosion.
11. Next we are going to add some static Animations for labels.
    1. First load "Jojo.png". Since this is a static image, just click "New Static". This will create a new StaticAnimation with the name "Jojo". The application removes the suffix from the name.
    2. Load "GameOver.png". This will also be a static image, just click "New Static". This will create a new StaticAnimation with the name GameOver.
       
12. This completes all the animations we will use in the game.