Run and jump tutorial (part 2) scenes
2 likes1,122 views
The document describes steps to create scenes, tile sets, regions, and add background music in the mobile game development software Stencyl. It includes instructions on how to: 1. Create a game scene and set its size and background color. 2. Create a tile set from an image to use as platforms in the game scene. 3. Add tiles to the game scene to design the map and position an actor on them. 4. Add regions to the game scene to act as pitfalls using the region tool. 5. Add background music by downloading sound files from an online library and adding a background music behavior.
Run and jump tutorial (part 2) scenes
- 1. MOE Cat-A Elective Stencyl Institute of Technical Education Page: 1 Mobile Game App Development Mobile Game Application Development with Stencyl Run and Jump Tutorial (Part 2) Title: Scene Parameters Duration: 2 hours Software Required: Stencyl, Sprite Creator 3, Image Editor (Paint or Photoshop) Objectives: 1. Create tile sets, regions and backgrounds to be used within a mobile game. 2. Implement sound effects within a mobile game to enhance game play experience. 3. Implement change of scene and transitions to be used within a mobile game.
- 2. MOE Cat-A Elective Stencyl Institute of Technical Education Page: 2 Mobile Game App Development Creating the Game Scene In part 1 of this tutorial, we have learnt how to create actors and customize them. Now, we shall assign our actor, Runner a location which are the stages where the game play will take place. 1. File > Create New > Scene 2. Name the Scene as “Game Scene”. 3. Set the size. Width: 100 tiles Height: 15 tiles 4. Select the Background Color to be Black. Click “Create” 5. A blank scene is now created as shown below.
- 3. MOE Cat-A Elective Stencyl Institute of Technical Education Page: 3 Mobile Game App Development Creating the Tile set Now that the scene is created, we shall next create a tile set. Tiles enable our actors to stand on platforms without which, our actor would either fall off the screen or dangle in mid-air in the game scene. Beautiful readymade tile sets can be easily downloaded from StencylForge. However, for learning purpose we shall be creating a tile set from scratch. (Your course instructor shall perform a demonstration on how to do create a simple tile using an image editor.) 1. File > Create New > Tiles 2. Name the Tile set as “Custom Tiles”. 3. Click on “Choose Image”. 4. Select the “Green Custom Tile.png” image. Click “Add” 5. Change Tile size to 32 by 32 pixels. Click “Apply.”
- 4. MOE Cat-A Elective Stencyl Institute of Technical Education Page: 4 Mobile Game App Development Add tiles to design map Now that we have our tile set, let us use the tiles to create a simple platform to design our map. 1. Let’s head back to our game scene. Dashboard > Scene > Game Scene 2. The tile that you have created is now available on the “Palette” under “Tiles.”
- 5. MOE Cat-A Elective Stencyl Institute of Technical Education Page: 5 Mobile Game App Development 3. Click on the tile and drag it along the bottom part from one end of the scene to the other extreme end horizontally. We shall use 3 layers of tiles for a start. 4. The tiles are set in place. Let us position our actor standing on the tiles on the left of the screen. 5. Select “Runner” from the palette. Ensure that the “Snap to Grid option” is selected. Place the actor on the left side of the screen.
- 6. MOE Cat-A Elective Stencyl Institute of Technical Education Page: 6 Mobile Game App Development 6. The end result will look as shown in the picture below. You may test your game at this point. Adding regions for pitfalls After adding the platform tiles, we would like to create regions to act as pitfalls for our Runner to die if he falls in it. Regions are basically draw able selected areas on the map in which events can take place. We will be creating 3 regions (pitfalls) for this section. 1. Take a look at the bottom right of Stencyl, you will notice real time X and Y coordinates of the mouse cursor.
- 7. MOE Cat-A Elective Stencyl Institute of Technical Education Page: 7 Mobile Game App Development 2. Place your cursor on the scene at approximately this coordinate (640,384) 3. Highlight an area of 4 by 3 tiles. Hit the delete button. 4. The area should now be empty. Next, click on the “Add Region (box)” button found on the left toolbar. 5. Click and drag the cursor on the empty area which you have just deleted. You should see “Region 0” being created.
- 8. MOE Cat-A Elective Stencyl Institute of Technical Education Page: 8 Mobile Game App Development Physics (Gravity) Let’s create some artificial gravity in our game to make our game more realistic. Runner shall respond to that gravity. 1. Click on the “Physics”tab for the Game Scene. 2. Here you will notice gravity for both horizontal and vertical. 3. In the normal case, gravity is always vertical. In our case, we will make use of both. 4. Both gravity are set to 0 by default. Vertical gravity of 85 will simulate real world gravity. 5. Set the horizontal gravity of value (25) to the right. Task Add another 2 regions, Region 1 and Region 2 of 4 by 3 tiles area at the following coordinates. Region 1 – (1472, 384) Region 2 – (2368, 384)
- 9. MOE Cat-A Elective Stencyl Institute of Technical Education Page: 9 Mobile Game App Development 6. Set the vertical gravity of value (85) to down. 7. You should see something like this. Adding Background Currently, we have added a black background for the game scene. Let’s make our game scene nicer by adding a background. You may use your own picture or downloaded from StencylForge. 1. Click on the StencylForge icon.
- 10. MOE Cat-A Elective Stencyl Institute of Technical Education Page: 10 Mobile Game App Development 2. Select “Backgrounds.” 3. Select “Blue Backgrounds.” Click download. 4. Once the background is downloaded, click “Attach Scene.” 5. The background is now attached to the scene. 6. Click the “Show Background Button” and save the game.
- 11. MOE Cat-A Elective Stencyl Institute of Technical Education Page: 11 Mobile Game App Development Adding Sound Besides background, StencylForge also has free sound resources which can be used as the background music or sound effects for our game. 1. Click on the StencylForge icon. 2. Search for the following sound clips. Minor Item Collected Jump Sound Gameplay Music 3. Dashboard > Sounds Check that the 3 sounds have been downloaded. Adding Sound Behaviour Now that we have our sound resources, let’s add some background music to the game. 1. Click on Scene> Game > Scene > Behaviors.
- 12. MOE Cat-A Elective Stencyl Institute of Technical Education Page: 12 Mobile Game App Development 2. Click “Add behaviour.” 3. A window will appear to display all the behaviours available in the library. 4. Select Game >Background Music. Click “Choose.” 5. You have added your first game behaviour. Within the “Background Music” behaviour, select “Gameplay Music” from the drop down list for “Music to Play.” 6. Save and test your game. You should be able to hear the music play in the background.
- 13. MOE Cat-A Elective Stencyl Institute of Technical Education Page: 13 Mobile Game App Development Adding the Title Scene Congratulations, you have completed Part 2 of this tutorial on Scenes. Move on the next part on behaviours. Task Create the title scene with the following parameters. Background: Title Background Actors: Play Button, Instruction Button, Credit Button, Create a duplicate of “Runner”. Name it “Title Runner” Remove all behaviours and switch off the gravity. Your scene should look as shown below.