Mobile Game Development with Unity

Once we’d done this preliminary design, it was possible to start working out the things that needed to be implemented: how the gnome would move around within the game, how the interface needed to be set up to make it work, and how the game objects would need to be linked together.

To get the gnome down the well, the player is given three buttons: one that increases the length of the rope, one that decreases it, and a third that displays the game’s menu. By holding on the button that increases the rope length, the gnome is lowered down the well. To avoid the traps on the way down the well, the player tilts their device left and right. This moves the gnome left and right.

The gameplay is primarily the result of 2D physics simulation. The gnome is a “ragdoll”—a collection of pieces that are connected via joints, with each piece an independently simulated rigid body. This means that, when connected to the top of the well via the Rope object, the gnome will dangle correctly.

The rope is made in a similar way: it’s a collection of rigid bodies, all connected to each other with joints. The first link in the chain is connected to the top of the well, and is connected to the second link via a rotating joint. This second joint is connected to the third, the third to the fourth, and so on, until the last link, which is connected to the gnome’s ankle. To lengthen the rope, more links are added to the top of the rope, and to shorten it, links are removed.

The rest of the gameplay is handled through very straightforward collision detection:

  • If any part of the gnome touches a trap object, the gnome is dead, and a new gnome is created. Additionally, a ghost sprite will be created that travels up the well.
  • If the treasure is touched, the gnome’s sprites are updated to show that he’s holding the treasure.
  • If the top of the well (an invisible object) is touched, and if the gnome is holding the treasure, the player wins the game.

Mobile Game Development with Unity

point at which the body that has the joint will rotate, and the Connected Anchor is the point at which the body that the joint is connected to will rotate. In the case of the gnome’s joints, we want the Connected Anchor and the Anchor to both be at the same position.

When an object that has a hinge joint is selected, both the Anchor and Connected Anchor appear in the scene view: the Connected Anchor is shown as a blue dot, and the Anchor is shown as a blue circle.

Select each of the body parts that have hinge joints, and move both the Anchor and the Connected Anchor to the correct pivot point. For example, select the right arm, and drag the blue dot to the shoulder location to move the Connected Anchor.

Moving the Anchor is slightly trickier, since by default it’s in the center, and dragging the center of the object makes Unity move the entire object. To move the Anchor, you first need to man‐ ually adjust the location of the Anchor by modifying the num‐ bers in the Inspector—this will change the Anchor’s location in the scene view. Once it’s out of the center, you can drag it to the correct location, just like you do with the Connected Anchor (see Figure 4-13.)

Repeat this process for both arms (connecting at the shoulder), both legs (connecting at the hip), and the head (connecting at the base of the neck).

Mobile Game Development with Unity

Creating the Backgrounds

Now that the layers are set up, it’s time to start building the back‐ ground itself. The background has three different themes—namely, brown, blue, and red—and each theme is composed of multiple sprites: a background, a side wall sprite, and a background version of the side wall sprite.

Because you’ll want to lay out the content of the level to suit your own tastes, the best thing to do is to create prefabs for each of the three different themes. We’ll start with the Brown background theme, build up the object, then save it as a prefab; next, you’ll do the same thing with the Blue and Red themes.

Before we start any of that, however, we’ll want to create an object to contain all of the level background objects, just to keep things tidy. Here are the steps you’ll need to follow:

  1. Create the Level container object. Create a new empty game object by opening the GameObject menu, and choosing “Create Empty.” Name this new object “Level”, and set its position to (0,0,1).
  2. Create the container for the Background Brown object. Create another game object, and name this one “Background Brown”. Make it a child of the Level object, and make sure that its posi‐

Background | 151

tion is (0,0,0). This will make the object’s position not offset from the position of the Level object.

3. Add the main background sprite. Drag the BrownBack sprite into the scene, and then make it a child of the Background Brown object.

Select this new sprite, and change its Sorting Layer to “Level Background.” Finally, set its X position 0 so that it’s centered.

4. Add the background side object. Drag the BrownBackSide sprite into the scene, and make it a child of the Background Brown object.

Set its Sorting Layer to Level Background, and set its Order In Layer to 1. This will make the object appear above the main background, while still being behind all objects in the other lay‐ ers.

Set its X position to -3, so that it’s pushed to the left.

5. Add the foreground side object. Drag in the BrownSide sprite, and make it a child of the Background Brown sprite. Set the Sorting Layer to Level Foreground.

Set its X position to -3.7, and set its Y position to the same as the BrownBackSide sprite. You want them to line up horizon‐ tally, with the foreground object a little further to the left.

Because the side objects are only half as high as the main back‐ ground image, we’ll now create a second row of these side objects.

To duplicate the side objects, select both the BrownBackSide and the BrownSide sprite, and duplicate them by pressing Ctrl-D (Command-D on a Mac).

Move these new side objects down so that the bottom edge of the upper row is at the same point as the top edge of the lower row. When you’re done, the background should look like Figure 7-11.

41 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here