The Power of Public Media

Published: 2 years ago

Building Mobile 2D Games Using Unity – Part 2

Production and development of a 2D Mobile games using Unity 5. Topic: Create Interactive

In my last blog about Unity and 2D games, we talked about the creation of a sprite sheet and importing it into Unity. Now let’s take this sprite sheet and create an animation that we can use in our interactive.

You should have experience with:

  • Creating a Unity project, to navigate around the project
  • Unity interface, to edit panel properties
  • Basic C# scripting, to add some functionality to our interactive

If this does not apply to you, check out some of the basic tutorials on Unity3D.com.

We will be using an animation system called Mecanim. This tool is usually associated with humanoid character animation for 3D content. The system includes rigging of model parts, a state machine to create animation logic, and keyframe-based animation editor.

From the animation of the apple, we will create a prefab that we will use in our scene. Think of a prefab as a reusable object instance, GameObject.

The setup of the project:

  • Create a new project, set the type to 2D, save and name it “FloatingAppleAnimation”.
  • Save the scene that appears by default. Make sure you save the scene into Assets under Scene folder (Create this folder). Name it “FloatingAppleScene”.
  • Verify that you have a sprite sheet of the floating apple animation. It should be located in Assets under the Artwork folder of the Project panel. The asset can be found here. You will need to edit it as described in the last tutorial blog.
  • Select the Main Camera in the Hierarchy Panel, Edit the Background (color) in the Inspector, to Hex Color: #44AABB05.

Part 1 – Create Apple Prefab 

  1. Drag one of the images in your set onto the scene or onto the Hierarchy panel. You will notice a GameObject is created with a Sprite Renderer component attached. The sprite that you dragged into the scene is displayed as the sprite in the first property in the Inspector panel. Rename game object to “FloatingApple”.Step_01
  2. Open Animation panel, with FloatingApple GameObject selected press Create Button. You will be prompted to save the animation. Create a folder under Assets called “Anim” and name the animation, “FloatingAppleAnim”. Notice there is a controller and an animation component created in the folder. The controller will be useful when you are managing multiple animations in a state machine. We won’t be adding multiple animation in this tutorial.
  3. Step_02Select all images in the sprite group and drag onto the timeline path. Press play and you now have an animated component game object. It runs a little bit too fast. You will notice that the Samples (or frames per second) is 60. Change this value to at least 12 samples. Much better.
  4. Step_03We want this animation to play once. Within the Project panel select the “FloatingAppleAnim” in the Anim folder. In the Inspector Panel, we are looking at properties of the animation. Uncheck Loop Time. Play the scene, the animation plays and then stops.
  5. Step_04Now let’s create a prefab reusable object. Create a folder called Prefab under Assets from the Project Panel. Drag the FloatingApple GameObject to this new folder. The GameObject name has changed to blue. Delete the Game object from the Hierarchy Panel. Congratulations, You just created a Prefab.

Part 2 – Add Functionality : Add Apples with Mouse click

Let’s add some functionality to add apples into our blue water scene.

  1. Create a new GameObject by click the Create drop down within the Hierarchy Panel. Select Create Empty and rename this GameObject to GameController.
  2. Create a new folder called Scripts in the Project panel. Select this folder, right click the folder or the panel on the right and select C# Script. Rename this file to GameControllerScript. Drag this script onto the GameController GameObject within the Hierarchy panel. This is what you should see:Step_05

  3. Double click the “GameControllerScript” file within the Script Folder of the Project panel or click the cog icon and select Edit Script on the script component of the GameController. The script will open up in either MonoDevelop or Visual Studio.Net depending on your OS. This class inherits MonoBehavior. All of the basic functionality can be handled or implemented here. There are two function included right away: Start() and Update(). Start is run once just before the Update() is called. Update() is called on every frame. Remove the Start function and add the following code into the Update function:

if (Input.GetMouseButtonDown (0)) {
Debug.Log("Press Down " + Input.mousePosition);
Vector3 applePosition = Camera.main.ScreenToWorldPoint(Input.mousePosition);
applePosition.z = 0;
Instantiate(apple, applePosition, Quaternion.identity);
}

  Add a public parameter before the Update function:

public GameObject apple;

  You script should look like this:

Step_06_02

4.   This property will be used to populate the FloatingApple prefab. The script in the Update function handle a mouse click displays a message to the console panel (for debugging), gets the mouse position and then converts mouse position to the world space position, we need to change the z position to 0 (since the position reference is coming from the view port/camera which is about -10 behind) and then create an instance of the prefab with the expected position and normal rotation.

5.  Finally, make sure that the script is attach to the GameController and that you have dragged a copy of the FloatingApple prefab into the empty parameter – Apple, within the GameControllerScript from the Inspector Panel. Run the Scene.

Step_06_03

Click on to the Game panel and you should see apples floating in our water scene. You can publish this interactive as a desktop app, mobile app, or HTML5 page.

The completed project, with the assets, additional audio and multiple animation, can be found here. The live interactive demo (HTML5/WebGL) based on this tutorial can be found here.

In this tutorial, we create a simple 2D interactive using the Mecanim animation system, spritesheet and some scripting. From this point, add more to this project: audio, a swimming donkey that eats those apples, text display with points and health … In other words, create a full game or just use it as a stress reliever. Unity Rocks!

As always, your comments and ideas are welcomed.

Have a Comment?

Some HTML is OK