Author Archives: Carlos Yanez

Create a Basketball Free Throw Game with Unity

Final product image
What You'll Be Creating

Introduction

In this tutorial, you'll learn how to create a mobile 3D game using C# and Unity. The objective of the game is to score as many points as possible. You'll learn the following aspects of Unity game development:

  • Setting up a 3D project in Unity
  • Implementing tap controls
  • Integrating physics
  • Creating Prefabs

1. Create a New Unity Project

Open Unity and select New Project from the File menu to open the new project dialog. Tell Unity where you want to save the project and set the Set up defaults for: menu to 3D.


2. Build Settings

In the next step, you're presented with Unity's user interface. Set the project up for mobile development by choosing Build Settings from the File menu and select your preferred platform. I've chosen Android for this tutorial.


3. Devices

The first thing we need to do after selecting the platform we're targeting is choosing the size of artwork that we'll use in the game. I've listed the most important devices for each platform below and included the device's screen resolution and pixel density.

iOS

  • iPad: 1024px x 768px
  • iPad Retina: 2048px x 1536px
  • 3.5" iPhone/iPod Touch: 320px x 480px
  • 3.5" iPhone/iPod Retina: 960px x 640px
  • 4" iPhone/iPod Touch: 1136px x 640px

Android

Because Android is an open platform, there are many different devices, screen resolutions, and pixel densities. A few of the more common ones are listed below.

  • Asus Nexus 7 Tablet: 800px x 1280px, 216ppi
  • Motorola Droid X: 854px x 480px, 228ppi
  • Samsung Galaxy S3: 720px x 1280px, 306ppi

Windows Phone

  • Nokia Lumia 520: 400px x 800px, 233ppi
  • Nokia Lumia 1520: 1080px x 1920px, 367ppi

BlackBerry

  • Blackberry Z10: 720px x 1280px, 355ppi

Remember that the code used for this tutorial can be used to target any of the above platforms.

4. Export Graphics

Depending on the devices you're targeting, you may need to convert the artwork for the game to the recommended size and resolution. You can do this in your favorite image editor. I've used the Adjust Size... function under the Tools menu in OS X's Preview application.


5. Unity User Interface

Before we get started, make sure to click the 3D button in the Scene panel. You can also modify the resolution that's being displayed in the Game panel.


6. Game Interface

The interface of our game will be straightforward. The above screenshot gives you an idea of the artwork we'll be using and how the game's interface will end up looking. You can find the artwork and additional resources in the source files of this tutorial.


7. Programming Language

You can use one of three programming languages when using Unity, C#, UnityScript, a variation of JavaScript, and Boo. Each programming language has its pros and cons, and it's up to you to decide which one you prefer. My personal preference goes to the C# programming language so that's the language I'll be using in this tutorial.

If you decide to use another programming language, then make sure to take a look at Unity's Script Reference for examples.


8. Sound Effects

I'll use a number of sounds to improve the audial experience of the game. The sound effects used in this tutorial were obtained from as3sfxr and Soungle.


9. 3D Models

To create our game, we first need to get our 3D models. I recommend 3Docean for high quality models, textures, and more, but if you're testing or still learning then free models may be a good place to start.

The models in this tutorial were downloaded from SketchUp 3D Warehouse where you can find a good variety of models of all kinds.

Because Unity doesn't recognize the SketchUp file format, we need to convert SketchUp files to a file format Unity can import. Start by downloading the free version of  SketchUp, SketchUp Make.

Open your 3D model in SketchUp Make and go select Export > 3D Model from the File menu and choose Collada (*.dae) from the list of options.

Choose a name, select a directory, and click Export. A file and a folder for the 3D model will be created. The file contains the 3D object data and the folder the textures used by the model. You can now import the model into Unity as explained in the next step.


10. Import Assets

Before we start coding, we need to add our assets to the Unity project. You can do this one of several ways:

  • Select Import New Asset from the Assets menu.
  • Add the items to the assets folder of your project.
  • Drag and drop the assets in the project window.

After completing this step, you should see the assets in your project's Assets folder in the Project panel.


11. Create Scene

We're ready to create the scene of our game by dragging objects to the Hierarchy or Scene panel.


12. 2D Background

Start by dragging and dropping the background into the Hierarchy panel. It should automatically appear in the Scene panel. Adjust the Transform values in the Inspector as shown in the next screenshot.


13. Hoop

The objective of the game is throw the ball through the hoop. Drag it from the Assets panel to the Scene and change its Transform properties as shown in the below screenshot.


14. Light

As you may have noticed, the basketball hoop is a bit too dark. To fix this, we need to add a Light to our scene. Go to GameObject > Create Other and select Directional Light. This will create an object that will produce a beam of light. Change its Transform values as shown in the next screenshot so that it illuminates the basketball hoop.


15. Hoop Collider

With the basketball hoop properly lighted, its time to add a collider so the ball doesn't go through when it hits the white area.

Click the Add Component button in the Inspector panel, select Physics > Box Collider, and change its values as shown in the next screenshot.

You'll see a green border around the basketball hoop in the Scene panel representing the box collider we just added.


16. Bounce Physics Material

If we were throw a ball at the basketball hoop, it would be stopped by the box collider, but it would stop without bouncing like you'd expect it to in the real world. To remedy this we need a Physics Material.

After selecting Create > Physics Material from the Assets menu, you should see it appear in the Assets panel. I changed the name to BounceMaterial.

Change its properties in the Inspector panel to match the ones in this below screenshot.

Next, select the box collider of the basketball hoop and click on the little dot to the right of the Material text, a window should appear where you can select the physics material.


17. Basket Collider

We'll use another collider to detect when the ball passes through the hoop. This should be a trigger collider to make sure it detects the collision without interacting with the physics body.

Create a new collider for the hoop as shown in step 15 and update its values as shown in the next screenshot.

This will place the collider below the ring where the ball can't go back upwards, meaning that a basket has been made. Be sure to check the Is Trigger checkbox to mark it as a trigger collider.


18. Ring Mesh Collider

Time to add a collider to the ring itself. Because we need the ball to pass through the center of the ring, we can't have a sphere or box collider, instead we'll use a Mesh Collider.

A Mesh Collider allows us to use the shape of the 3D object as a collider. As the documentation states the Mesh Collider builds its collision representation from the mesh attached to the GameObject.

Select the hoop from the Hierarchy panel, click on the triangle on its left to expand its hierarchy, expand group_17, and select the element named Ring.

Add a collider as we saw in step 15, but make sure to select Mesh Collider. Unity will then automatically detect the shape of the model and create a collider for it.


19. Hoop Sound

To play a sound when the ball hits the hoop, we first need to attach it. Select it from the Hierarchy or Scene view, click the Add Component button in the Inspector panel, and select Audio Source in the Audio section.

Uncheck Play on Awake and click the little dot on the right, below the gear icon, to select the sound you want to play.


20. Ball

Let's now focus on the basketball. Drag it from the Assets folder and place it in the scene. Don't worry about the ball's position for now, because we'll convert it to a Prefab later.

To make the ball detect when it hits the hoop, we need to add a component, a Sphere Collider to be precise. Select the ball in the scene, open the Inspector panel, and click Add Component. From the list of components, select Sphere Collider from the Physics section and update its properties as shown below.


21. Ball RigidBody

To detect a collision with the basketball, at least one of the colliding objects needs to have a RigidBody component attached to it. To add one to the ball, select Add Component in the Inspector panel, and choose Physics > RigidBody.

Leave the settings at their defaults and drag the ball from the Hierarchy panel to the Assets panel to convert it to a Prefab.


22. Hoop Sprite

To represent the baskets already made by the player, we use a 2D version of the basketball hoop. Drag it from the Assets panel and place it on the scene as shown below.


23. Score Text

Below the 2D hoop, we display the number of baskets the player has scored so far. Select GameObject > Create Other > GUI Text to create a text object, place it at the bottom of the basketball hoop, and change the text in the Hierarchy panel to 0.

You can embed a custom font by importing it in the Assets folder and changing the Font property of the text in the Inspector.

24. Force Meter

The force meter is a bar that will show the force used to shoot the ball. This will add another level of difficulty to the game. Drag the sprites for the force meter from the Assets panel to the Scene and position them as shown in the screenshot below.


25. Ball Sprite

We also add an indicator to the interface showing how many shots the player has left. To complete this step, follow the same steps we used to display the player's current score.


26. Basket Script

It's finally time to write some code. The first script that we'll create is the Basket script that checks if the ball passes through the ring or hits the board.

Select the hoop and click the Add Component button in the Inspector panel. Select New Script and name it Basket. Don't forget to change the language to C#. Open the newly created file and add the following code snippet.

using UnityEngine;
using System.Collections;

public class Basket : MonoBehaviour
{
    public GameObject score; //reference to the ScoreText gameobject, set in editor
    public AudioClip basket; //reference to the basket sound

    void OnCollisionEnter() //if ball hits board
    {
        audio.Play(); //plays the hit board sound
    }

    void OnTriggerEnter() //if ball hits basket collider
    {
        int currentScore = int.Parse(score.GetComponent().text) + 1; //add 1 to the score
        score.GetComponent().text = currentScore.ToString();
        AudioSource.PlayClipAtPoint(basket, transform.position); //play basket sound
    }
}

In this script, we set two public variables that represent objects on the Scene and in the Assets folder. Go back to the editor and click the little dot on the right of the variables to select the values described in the comments.

We play a sound when the ball hits the basketball hoop and check if the ball passes through the ring. The Parse method will convert the text from the GUI Text game object to a  number so we can increment the score and then set it again as text using toString. At the end, we play the basket sound.

27. Shoot Script

The Shoot class handles the rest of the game interaction. We'll break the script's contents down to make it easier to digest.

Start by selecting the Camera and click the Add Component button in the Inspector panel. Select New Script and name it Shoot.

28. Variables

In the next code snippet, I've listed the variables that we'll use. Read the comments in the code snippet for clarification.

using UnityEngine;
using System.Collections;

public class Shoot : MonoBehaviour
{
    public GameObject ball; //reference to the ball prefab, set in editor
    private Vector3 throwSpeed = new Vector3(0, 26, 40); //This value is a sure basket, we'll modify this using the forcemeter
    public Vector3 ballPos; //starting ball position
    private bool thrown = false; //if ball has been thrown, prevents 2 or more balls
    private GameObject ballClone; //we don't use the original prefab

    public GameObject availableShotsGO; //ScoreText game object reference
    private int availableShots = 5;

    public GameObject meter; //references to the force meter
    public GameObject arrow;
    private float arrowSpeed = 0.3f; //Difficulty, higher value = faster arrow movement
    private bool right = true; //used to revers arrow movement

    public GameObject gameOver; //game over text


29. Increase Gravity

Next, we create the Start method in which we set the gravity force to -20 to make the ball drop faster.

void Start()
{
    /* Increase Gravity */
    Physics.gravity = new Vector3(0, -20, 0);
}

30. Force Meter Behavior

To handle interactions with the physics engine, we implement the FixedUpdate method. The difference between this method and the regular Update method is that FixedUpdate runs based on physics steps instead of every frame, which might cause problems if the device is slow due to a shortage of memory, for example.

In the FixedUpdate method, we move the arrow of the force meter using the right variable to detect when to reverse the arrow's movement.

    void FixedUpdate()
    {
        /* Move Meter Arrow */
        
        if (arrow.transform.position.x < 4.7f && right)
        {
            arrow.transform.position += new Vector3(arrowSpeed, 0, 0);
        }
        if (arrow.transform.position.x >= 4.7f)
        {
            right = false;
        }
        if (right == false)
        {
            arrow.transform.position -= new Vector3(arrowSpeed, 0, 0);
        }
        if ( arrow.transform.position.x <= -4.7f)
        {
            right = true;
        }

31. Shoot Ball

The basketball is thrown when the player taps the screen. Whenever the screen is tapped, we first check if there's already a ball in the air and if the player has shots available. If these requirements are met, we update the values, create a new instance of the ball, and throw it using the addForce method.

/* Shoot ball on Tap */

        if (Input.GetButton("Fire1") && !thrown && availableShots > 0)
        {
            thrown = true;
            availableShots--;
            availableShotsGO.GetComponent().text = availableShots.ToString();

            ballClone = Instantiate(ball, ballPos, transform.rotation) as GameObject;
            throwSpeed.y = throwSpeed.y + arrow.transform.position.x;
            throwSpeed.z = throwSpeed.z + arrow.transform.position.x;

            ballClone.rigidbody.AddForce(throwSpeed, ForceMode.Impulse);
            audio.Play(); //play shoot sound
        }

32. Remove Ball

In the following code block, we test if the ball reaches the floor and remove when it does. We also prepare for the next throw by resetting the variables.

/* Remove Ball when it hits the floor */

        if (ballClone != null && ballClone.transform.position.y < -16)
        {
            Destroy(ballClone);
            thrown = false;
            throwSpeed = new Vector3(0, 26, 40);//Reset perfect shot variable

33. Check Available Shots

After removing the ball, we verify that the player has shots left. If this isn't the case, then we end the game and call restart.

/* Check if out of shots */
            
            if (availableShots == 0)
            {
                arrow.renderer.enabled = false;
                Instantiate(gameOver, new Vector3(0.31f, 0.2f, 0), transform.rotation);
                Invoke("restart", 2);
            }
        }
    }

34. restart

The restart method runs two seconds after the player runs out of shots, restarting the game by invoking LoadLevel.

    void restart()
    {
        Application.LoadLevel(Application.loadedLevel);
    }
}

35. Testing

It's time to test the game. Press Command-P to play the game in Unity. If everything works as expected, then you're ready for the final steps.


36. Player Settings

When you're happy with your game, it's time to select Build Settings from the File menu and click the Player Settings button. This should bring up the Player Settings in the Inspector panel where you can set the parameters for your application.

The settings are application and include the creator or company, application resolution and display mode, rendering mode, device compatibility, etc. The settings will differ depending on the platform and devices your application is targeting and also keep the requirements of store you're publishing on in mind.


37. Icons and Splash Images

Using the artwork you created earlier, you can now create a nice icon and a splash image for your game. Unity shows you the required sizes, which depend on the platform you're building for.

38. Build and Play


Once your project is properly configured, it's time to revisit the Build Settings and click the Build Button. That's all it takes to build your game for testing and/or distribution.

Conclusion

In this tutorial, we've learned about 3D models, mesh colliders, physics materials, collision detection, and other aspects of Unity game development. I encourage you to experiment with the result and customize the game to make it your own. I hope you liked this tutorial and found it helpful.

Create a Basketball Free Throw Game with Unity

Final product image
What You'll Be Creating

Introduction

In this tutorial, you'll learn how to create a mobile 3D game using C# and Unity. The objective of the game is to score as many points as possible. You'll learn the following aspects of Unity game development:

  • Setting up a 3D project in Unity
  • Implementing tap controls
  • Integrating physics
  • Creating Prefabs

1. Create a New Unity Project

Open Unity and select New Project from the File menu to open the new project dialog. Tell Unity where you want to save the project and set the Set up defaults for: menu to 3D.


2. Build Settings

In the next step, you're presented with Unity's user interface. Set the project up for mobile development by choosing Build Settings from the File menu and select your preferred platform. I've chosen Android for this tutorial.


3. Devices

The first thing we need to do after selecting the platform we're targeting is choosing the size of artwork that we'll use in the game. I've listed the most important devices for each platform below and included the device's screen resolution and pixel density.

iOS

  • iPad: 1024px x 768px
  • iPad Retina: 2048px x 1536px
  • 3.5" iPhone/iPod Touch: 320px x 480px
  • 3.5" iPhone/iPod Retina: 960px x 640px
  • 4" iPhone/iPod Touch: 1136px x 640px

Android

Because Android is an open platform, there are many different devices, screen resolutions, and pixel densities. A few of the more common ones are listed below.

  • Asus Nexus 7 Tablet: 800px x 1280px, 216ppi
  • Motorola Droid X: 854px x 480px, 228ppi
  • Samsung Galaxy S3: 720px x 1280px, 306ppi

Windows Phone

  • Nokia Lumia 520: 400px x 800px, 233ppi
  • Nokia Lumia 1520: 1080px x 1920px, 367ppi

BlackBerry

  • Blackberry Z10: 720px x 1280px, 355ppi

Remember that the code used for this tutorial can be used to target any of the above platforms.

4. Export Graphics

Depending on the devices you're targeting, you may need to convert the artwork for the game to the recommended size and resolution. You can do this in your favorite image editor. I've used the Adjust Size... function under the Tools menu in OS X's Preview application.


5. Unity User Interface

Before we get started, make sure to click the 3D button in the Scene panel. You can also modify the resolution that's being displayed in the Game panel.


6. Game Interface

The interface of our game will be straightforward. The above screenshot gives you an idea of the artwork we'll be using and how the game's interface will end up looking. You can find the artwork and additional resources in the source files of this tutorial.


7. Programming Language

You can use one of three programming languages when using Unity, C#, UnityScript, a variation of JavaScript, and Boo. Each programming language has its pros and cons, and it's up to you to decide which one you prefer. My personal preference goes to the C# programming language so that's the language I'll be using in this tutorial.

If you decide to use another programming language, then make sure to take a look at Unity's Script Reference for examples.


8. Sound Effects

I'll use a number of sounds to improve the audial experience of the game. The sound effects used in this tutorial were obtained from as3sfxr and Soungle.


9. 3D Models

To create our game, we first need to get our 3D models. I recommend 3Docean for high quality models, textures, and more, but if you're testing or still learning then free models may be a good place to start.

The models in this tutorial were downloaded from SketchUp 3D Warehouse where you can find a good variety of models of all kinds.

Because Unity doesn't recognize the SketchUp file format, we need to convert SketchUp files to a file format Unity can import. Start by downloading the free version of  SketchUp, SketchUp Make.

Open your 3D model in SketchUp Make and go select Export > 3D Model from the File menu and choose Collada (*.dae) from the list of options.

Choose a name, select a directory, and click Export. A file and a folder for the 3D model will be created. The file contains the 3D object data and the folder the textures used by the model. You can now import the model into Unity as explained in the next step.


10. Import Assets

Before we start coding, we need to add our assets to the Unity project. You can do this one of several ways:

  • Select Import New Asset from the Assets menu.
  • Add the items to the assets folder of your project.
  • Drag and drop the assets in the project window.

After completing this step, you should see the assets in your project's Assets folder in the Project panel.


11. Create Scene

We're ready to create the scene of our game by dragging objects to the Hierarchy or Scene panel.


12. 2D Background

Start by dragging and dropping the background into the Hierarchy panel. It should automatically appear in the Scene panel. Adjust the Transform values in the Inspector as shown in the next screenshot.


13. Hoop

The objective of the game is throw the ball through the hoop. Drag it from the Assets panel to the Scene and change its Transform properties as shown in the below screenshot.


14. Light

As you may have noticed, the basketball hoop is a bit too dark. To fix this, we need to add a Light to our scene. Go to GameObject > Create Other and select Directional Light. This will create an object that will produce a beam of light. Change its Transform values as shown in the next screenshot so that it illuminates the basketball hoop.


15. Hoop Collider

With the basketball hoop properly lighted, its time to add a collider so the ball doesn't go through when it hits the white area.

Click the Add Component button in the Inspector panel, select Physics > Box Collider, and change its values as shown in the next screenshot.

You'll see a green border around the basketball hoop in the Scene panel representing the box collider we just added.


16. Bounce Physics Material

If we were throw a ball at the basketball hoop, it would be stopped by the box collider, but it would stop without bouncing like you'd expect it to in the real world. To remedy this we need a Physics Material.

After selecting Create > Physics Material from the Assets menu, you should see it appear in the Assets panel. I changed the name to BounceMaterial.

Change its properties in the Inspector panel to match the ones in this below screenshot.

Next, select the box collider of the basketball hoop and click on the little dot to the right of the Material text, a window should appear where you can select the physics material.


17. Basket Collider

We'll use another collider to detect when the ball passes through the hoop. This should be a trigger collider to make sure it detects the collision without interacting with the physics body.

Create a new collider for the hoop as shown in step 15 and update its values as shown in the next screenshot.

This will place the collider below the ring where the ball can't go back upwards, meaning that a basket has been made. Be sure to check the Is Trigger checkbox to mark it as a trigger collider.


18. Ring Mesh Collider

Time to add a collider to the ring itself. Because we need the ball to pass through the center of the ring, we can't have a sphere or box collider, instead we'll use a Mesh Collider.

A Mesh Collider allows us to use the shape of the 3D object as a collider. As the documentation states the Mesh Collider builds its collision representation from the mesh attached to the GameObject.

Select the hoop from the Hierarchy panel, click on the triangle on its left to expand its hierarchy, expand group_17, and select the element named Ring.

Add a collider as we saw in step 15, but make sure to select Mesh Collider. Unity will then automatically detect the shape of the model and create a collider for it.


19. Hoop Sound

To play a sound when the ball hits the hoop, we first need to attach it. Select it from the Hierarchy or Scene view, click the Add Component button in the Inspector panel, and select Audio Source in the Audio section.

Uncheck Play on Awake and click the little dot on the right, below the gear icon, to select the sound you want to play.


20. Ball

Let's now focus on the basketball. Drag it from the Assets folder and place it in the scene. Don't worry about the ball's position for now, because we'll convert it to a Prefab later.

To make the ball detect when it hits the hoop, we need to add a component, a Sphere Collider to be precise. Select the ball in the scene, open the Inspector panel, and click Add Component. From the list of components, select Sphere Collider from the Physics section and update its properties as shown below.


21. Ball RigidBody

To detect a collision with the basketball, at least one of the colliding objects needs to have a RigidBody component attached to it. To add one to the ball, select Add Component in the Inspector panel, and choose Physics > RigidBody.

Leave the settings at their defaults and drag the ball from the Hierarchy panel to the Assets panel to convert it to a Prefab.


22. Hoop Sprite

To represent the baskets already made by the player, we use a 2D version of the basketball hoop. Drag it from the Assets panel and place it on the scene as shown below.


23. Score Text

Below the 2D hoop, we display the number of baskets the player has scored so far. Select GameObject > Create Other > GUI Text to create a text object, place it at the bottom of the basketball hoop, and change the text in the Hierarchy panel to 0.

You can embed a custom font by importing it in the Assets folder and changing the Font property of the text in the Inspector.

24. Force Meter

The force meter is a bar that will show the force used to shoot the ball. This will add another level of difficulty to the game. Drag the sprites for the force meter from the Assets panel to the Scene and position them as shown in the screenshot below.


25. Ball Sprite

We also add an indicator to the interface showing how many shots the player has left. To complete this step, follow the same steps we used to display the player's current score.


26. Basket Script

It's finally time to write some code. The first script that we'll create is the Basket script that checks if the ball passes through the ring or hits the board.

Select the hoop and click the Add Component button in the Inspector panel. Select New Script and name it Basket. Don't forget to change the language to C#. Open the newly created file and add the following code snippet.

using UnityEngine;
using System.Collections;

public class Basket : MonoBehaviour
{
    public GameObject score; //reference to the ScoreText gameobject, set in editor
    public AudioClip basket; //reference to the basket sound

    void OnCollisionEnter() //if ball hits board
    {
        audio.Play(); //plays the hit board sound
    }

    void OnTriggerEnter() //if ball hits basket collider
    {
        int currentScore = int.Parse(score.GetComponent().text) + 1; //add 1 to the score
        score.GetComponent().text = currentScore.ToString();
        AudioSource.PlayClipAtPoint(basket, transform.position); //play basket sound
    }
}

In this script, we set two public variables that represent objects on the Scene and in the Assets folder. Go back to the editor and click the little dot on the right of the variables to select the values described in the comments.

We play a sound when the ball hits the basketball hoop and check if the ball passes through the ring. The Parse method will convert the text from the GUI Text game object to a  number so we can increment the score and then set it again as text using toString. At the end, we play the basket sound.

27. Shoot Script

The Shoot class handles the rest of the game interaction. We'll break the script's contents down to make it easier to digest.

Start by selecting the Camera and click the Add Component button in the Inspector panel. Select New Script and name it Shoot.

28. Variables

In the next code snippet, I've listed the variables that we'll use. Read the comments in the code snippet for clarification.

using UnityEngine;
using System.Collections;

public class Shoot : MonoBehaviour
{
    public GameObject ball; //reference to the ball prefab, set in editor
    private Vector3 throwSpeed = new Vector3(0, 26, 40); //This value is a sure basket, we'll modify this using the forcemeter
    public Vector3 ballPos; //starting ball position
    private bool thrown = false; //if ball has been thrown, prevents 2 or more balls
    private GameObject ballClone; //we don't use the original prefab

    public GameObject availableShotsGO; //ScoreText game object reference
    private int availableShots = 5;

    public GameObject meter; //references to the force meter
    public GameObject arrow;
    private float arrowSpeed = 0.3f; //Difficulty, higher value = faster arrow movement
    private bool right = true; //used to revers arrow movement

    public GameObject gameOver; //game over text


29. Increase Gravity

Next, we create the Start method in which we set the gravity force to -20 to make the ball drop faster.

void Start()
{
    /* Increase Gravity */
    Physics.gravity = new Vector3(0, -20, 0);
}

30. Force Meter Behavior

To handle interactions with the physics engine, we implement the FixedUpdate method. The difference between this method and the regular Update method is that FixedUpdate runs based on physics steps instead of every frame, which might cause problems if the device is slow due to a shortage of memory, for example.

In the FixedUpdate method, we move the arrow of the force meter using the right variable to detect when to reverse the arrow's movement.

    void FixedUpdate()
    {
        /* Move Meter Arrow */
        
        if (arrow.transform.position.x < 4.7f && right)
        {
            arrow.transform.position += new Vector3(arrowSpeed, 0, 0);
        }
        if (arrow.transform.position.x >= 4.7f)
        {
            right = false;
        }
        if (right == false)
        {
            arrow.transform.position -= new Vector3(arrowSpeed, 0, 0);
        }
        if ( arrow.transform.position.x <= -4.7f)
        {
            right = true;
        }

31. Shoot Ball

The basketball is thrown when the player taps the screen. Whenever the screen is tapped, we first check if there's already a ball in the air and if the player has shots available. If these requirements are met, we update the values, create a new instance of the ball, and throw it using the addForce method.

/* Shoot ball on Tap */

        if (Input.GetButton("Fire1") && !thrown && availableShots > 0)
        {
            thrown = true;
            availableShots--;
            availableShotsGO.GetComponent().text = availableShots.ToString();

            ballClone = Instantiate(ball, ballPos, transform.rotation) as GameObject;
            throwSpeed.y = throwSpeed.y + arrow.transform.position.x;
            throwSpeed.z = throwSpeed.z + arrow.transform.position.x;

            ballClone.rigidbody.AddForce(throwSpeed, ForceMode.Impulse);
            audio.Play(); //play shoot sound
        }

32. Remove Ball

In the following code block, we test if the ball reaches the floor and remove when it does. We also prepare for the next throw by resetting the variables.

/* Remove Ball when it hits the floor */

        if (ballClone != null && ballClone.transform.position.y < -16)
        {
            Destroy(ballClone);
            thrown = false;
            throwSpeed = new Vector3(0, 26, 40);//Reset perfect shot variable

33. Check Available Shots

After removing the ball, we verify that the player has shots left. If this isn't the case, then we end the game and call restart.

/* Check if out of shots */
            
            if (availableShots == 0)
            {
                arrow.renderer.enabled = false;
                Instantiate(gameOver, new Vector3(0.31f, 0.2f, 0), transform.rotation);
                Invoke("restart", 2);
            }
        }
    }

34. restart

The restart method runs two seconds after the player runs out of shots, restarting the game by invoking LoadLevel.

    void restart()
    {
        Application.LoadLevel(Application.loadedLevel);
    }
}

35. Testing

It's time to test the game. Press Command-P to play the game in Unity. If everything works as expected, then you're ready for the final steps.


36. Player Settings

When you're happy with your game, it's time to select Build Settings from the File menu and click the Player Settings button. This should bring up the Player Settings in the Inspector panel where you can set the parameters for your application.

The settings are application and include the creator or company, application resolution and display mode, rendering mode, device compatibility, etc. The settings will differ depending on the platform and devices your application is targeting and also keep the requirements of store you're publishing on in mind.


37. Icons and Splash Images

Using the artwork you created earlier, you can now create a nice icon and a splash image for your game. Unity shows you the required sizes, which depend on the platform you're building for.

38. Build and Play


Once your project is properly configured, it's time to revisit the Build Settings and click the Build Button. That's all it takes to build your game for testing and/or distribution.

Conclusion

In this tutorial, we've learned about 3D models, mesh colliders, physics materials, collision detection, and other aspects of Unity game development. I encourage you to experiment with the result and customize the game to make it your own. I hope you liked this tutorial and found it helpful.

Create a 2D Platform Game with Unity and the Dolby Audio API

Final product image
What You'll Be Creating

Introduction

In this tutorial, you'll learn how to create a mobile 2D game using C# and Unity. We'll be taking advantage of the Dolby Audio Plugin for Unity to enhance the game's audial experience. The objective of the game is simple, reaching the other side of the level while avoiding enemies and collecting coins.

In this tutorial, you will learn the following aspects of Unity game development:

  • setting up a 2D project in Unity
  • creating Prefabs
  • movement and action buttons
  • working with physics collisions
  • using a sprite sheet
  • integrating the Dolby Audio API

1. Create a New Unity Project

Open Unity and select New Project from the File menu to open the new project dialog. Tell Unity where you want to save the project and set the Set up defaults for: drop-down menu to 2D.

 

2. Build Settings

In the next step, you're presented with Unity's user interface. Set the project up for mobile development by choosing Build Settings from the File menu and select Android as the target platform.


3. Devices

Since we're about to create a 2D game, the first thing we need to do after selecting the target platform is choosing the size of the artwork that we'll use in the game. Because Android is an open platform, there's a wide range of devices, screen resolutions, and pixel densities available on today's market. A few of the more common ones are:

  • Samsung Galaxy SIII: 720px x 1280px, 306 ppi
  • Asus Nexus 7 Tablet: 800px x 1280px, 216 ppi
  • Motorola Droid X: 854px x 480px, 228 ppi

Even though we'll be focusing on the Android platform in this tutorial, you can use the same code to target any of the other platforms that Unity supports.


4. Export Graphics

Depending on the devices you're targeting, you may need to convert the artwork for the game to the recommended size and pixel density. You can do this in your favorite image editor. I've used the Adjust Size... function under the Tools menu in OS X's Preview application.


5. Unity User Interface

Before we get started, make sure to click the 2D button in the Scene panel. You can also modify the resolution that's being displayed in the Game panel.


6. Game Interface

The interface of our game will be straightforward. The above screenshot gives you an idea of the artwork we'll be using and how the final game interface will end up looking. You can find the artwork for this tutorial in the source files of this tutorial.


7. Programming Language

You can use one of three programming languages when using Unity, C#, UnityScript, a variation of JavaScript, and Boo. Each of these programming languages has its pros and cons and it's up to you to decide which one you prefer. My personal preference goes to the C# programming language so that's the language I'll be using in this tutorial.

If you decide to use another programming language, make sure to take a look at Unity's Script Reference for examples.


8. 2D Graphics

Unity has built a name for being a great platform for creating 3D games for various platforms, such as Microsoft's Xbox 360, Sony's PS3, Nintendo's Wii, the web, and various mobile platforms.

While it's always been possible to use Unity for 2D game development, it wasn't until the release of Unity 4.3 that it included native 2D support. We'll learn how to work with images as sprites instead of textures in the next steps.


9. Sound Effects

I'll use a number of sounds to create a great audial experience for the game. The sound effects used in this tutorial were obtained from as3sfxr and PlayOnLoop.


10. Import Assets

Before we start coding, we need to add our assets to the Unity project. You can do this one of several ways:

  • select Import New Asset from the Assets menu
  • add the items to the assets folder in your project
  • drag and drop the assets in the project window

After completing this step, you should see the assets in your project's Assets folder in the Project panel.

11. Create Scene

We're ready to create the scene of our game by dragging objects to the Hierarchy or Scene panel.


12. Background

Start by dragging and dropping the background into the Hierarchy panel. It should automatically appear in the Scene panel.

Because the Scene panel is set to display a 2D view, you'll notice that selecting the Main Camera in the Hierarchy shows a preview of what the camera is going to display. You can also see this in the Game view. To make the entire scene visible, change the Size value of the Main Camera to 1.58 in the Inspector panel.


13. Floor

The floor is used to keep our main character from falling once we've added physics to the game. Drag it from the Assets folder and position it in the scene as shown below.


14. Floor Collider

In order to make the floor detect when the character is touching it, we need to add a component, a Box Collider 2D to be precise.

Select the floor in the scene, open the Inspector panel, and click Add Component. From the list of components, select Box Collider 2D from the Physics 2D section.

15. Jump Button

We'll use buttons to control our main character in the game. Drag and position the jump button in the Scene and add a Circle Collider2D component as shown in the previous step.


16. Jump Sound

To play a sound when the character jumps, we first need to attach it to the jump button. Select it from the Hierarchy or Scene view, click the Add Component button in the Inspector panel, and select Audio Source in the Audio section.

Uncheck Play on Awake and click the little dot on the right, below the gear icon, to select the sound we want to play when the player taps the button. In the next step, we'll implement the logic for playing the sound when the player taps the button.


17. Jump Script

Let's create the script that will control our character. Select the jump button and click the Add Component button in the Inspector panel. Select New Script and name it Jump. Don't forget to change the language to C#.

Open the newly created file and add the following code snippet.

using UnityEngine;
using System.Collections;

public class Jump : MonoBehaviour
{
    public float jumpForce;
    private GameObject hero; //used to reference our character (hero) on the scene

    // Use this for initialization
    void Start()
    {
        hero = GameObject.Find("Hero"); //gets the hero game object
    }
    
    // Update is called once per frame
    void Update()
    {
		/* Check if the user is touching the button on the device */

        if (Application.platform == RuntimePlatform.Android)
        {
            if (Input.touchCount > 0)
            {
                if (Input.GetTouch(0).phase == TouchPhase.Began)
                { 
                    CheckTouch(Input.GetTouch(0).position, "began"); // function created below
                } else if (Input.GetTouch(0).phase == TouchPhase.Ended)
                {
                    CheckTouch(Input.GetTouch(0).position, "ended");
                }
            }
        }

		/* Check if the user is touching the button on the Editor, change OSXEditor value if you are on Windows */
        
        if (Application.platform == RuntimePlatform.OSXEditor)
        {
            if (Input.GetMouseButtonDown(0))
            {
                CheckTouch(Input.mousePosition, "began");
            }
            
            if (Input.GetMouseButtonUp(0))
            {
                CheckTouch(Input.mousePosition, "ended");
            }
        }
    }

    void CheckTouch(Vector3 pos, string phase)
    {
		/* Get the screen point where the user is touching */
        Vector3 wp = Camera.main.ScreenToWorldPoint(pos);
        Vector2 touchPos = new Vector2(wp.x, wp.y);
        Collider2D hit = Physics2D.OverlapPoint(touchPos);

		/* if button is touched... */
        
        if (hit.gameObject.name == "JumpButton" && hit && phase == "began")
        {
            hero.rigidbody2D.AddForce(new Vector2(0f, jumpForce)); //Add jump force to hero
            audio.Play(); // play audio attached to this game object (jump sound)
        }
    }
}

The code snippet may seem daunting, but it's actually pretty straightforward. We first get a reference to the hero object, an instance of the GameObject class, so we can use it later. We then detect if the user is touching the jump button and, if they are, add a force to the hero object. Last but not least, we play the jump sound when the jump button is tapped.

18. Movement Buttons

The steps to add and implement the movement buttons, left and right, are very similar. Start by placing the buttons in the scene and add a Circle Collider 2D to each button like we did with the jump button.



19. Movement Scripts

Create a new script, attach it to the left button, and name it MoveLeft. Replace  its contents with the following code snippet, which contains the MoveLeft method.

using UnityEngine;
using System.Collections;

public class MoveLeft : MonoBehaviour
{
    public Vector3 moveSpeed = new Vector3();
    private bool moving = false;
    private GameObject[] scene; //array of game objects that conform the scene
    private GameObject bg;
    
    // Use this for initialization
    void Start()
    {
        scene = GameObject.FindGameObjectsWithTag("Moveable"); //Game objects with Moveable tag
        bg = GameObject.Find("Background"); //Game Background
    }
    
    // Update is called once per frame
    void Update()
    {
       /* Detect touch */ 
		if (Application.platform == RuntimePlatform.Android)
        {
            if (Input.touchCount > 0)
            {
                if (Input.GetTouch(0).phase == TouchPhase.Began)
                { 
                    CheckTouch(Input.GetTouch(0).position, "began");
                } else if (Input.GetTouch(0).phase == TouchPhase.Ended)
                {
                    CheckTouch(Input.GetTouch(0).position, "ended");
                }
            }
        }
        
        if (Application.platform == RuntimePlatform.OSXEditor)
        {
            if (Input.GetMouseButtonDown(0))
            {
                CheckTouch(Input.mousePosition, "began");
            }
            
            if (Input.GetMouseButtonUp(0))
            {
                CheckTouch(Input.mousePosition, "ended");
            }
        }
        
        // Move if button is pressed
        if (moving && bg.transform.position.x < 4.82f)
        {
            for (int i = 0; i < scene.Length; i++)
            {
                if (scene [i] != null)
                {
                    scene [i].transform.position += moveSpeed;
                }
            }
        }
    }
    
    void CheckTouch(Vector3 pos, string phase)
    {
        Vector3 wp = Camera.main.ScreenToWorldPoint(pos);
        Vector2 touchPos = new Vector2(wp.x, wp.y);
        Collider2D hit = Physics2D.OverlapPoint(touchPos);
        
        if (hit.gameObject.name == "LeftButton" && hit && phase == "began")
        {
            moving = true;
        }
        
        if (hit.gameObject.name == "LeftButton" && hit && phase == "ended")
        {
            moving = false;
        }
    } 
}

In this script, we create an array of the elements tagged as Moveable—we'll tag them later in this tutorial—to make it easier to move them all at once. To move the elements, we first check if the button is being touched and change the position using moveSpeed in the Update function. It's as simple as that.

Create another script, attach it to the right button, and name it MoveRight. This script contains the MoveRight method and its implementation is similar to that of the MoveLeft method we saw a moment ago. We change the direction of the movement by replacing += moveSpeed with -= moveSpeed. This will move the scene in the opposite direction.

In the MoveRight script, we also check if the player has completed the level.

using UnityEngine;
using System.Collections;

public class MoveRight : MonoBehaviour
{
    public Vector3 moveSpeed = new Vector3();
    private bool moving = false;
    private GameObject[] scene;
    private GameObject bg;
    public AudioClip completeSound;
    private GameObject[] buttons;
    private GameObject completeText;
    private bool ended = false;
    public Font goodDog;
    
    // Use this for initialization
    void Start()
    {
        scene = GameObject.FindGameObjectsWithTag("Moveable");
        bg = GameObject.Find("Background");
        buttons = GameObject.FindGameObjectsWithTag("Buttons");
    }
    
    // Update is called once per frame
    void Update()
    {
        if (Application.platform == RuntimePlatform.Android)
        {
            if (Input.touchCount > 0)
            {
                if (Input.GetTouch(0).phase == TouchPhase.Began)
                {
                    CheckTouch(Input.GetTouch(0).position, "began");
                } else if (Input.GetTouch(0).phase == TouchPhase.Ended)
                {
                    CheckTouch(Input.GetTouch(0).position, "ended");
                }
            }
        }

        if (Application.platform == RuntimePlatform.OSXEditor)
        {
            if (Input.GetMouseButtonDown(0))
            {
                CheckTouch(Input.mousePosition, "began");
            }

            if (Input.GetMouseButtonUp(0))
            {
                CheckTouch(Input.mousePosition, "ended");
            }
        }
        
        // Move if button is pressed && stage is not over
        if (moving && bg.transform.position.x > -4.8f)
        {
            for (int i = 0; i < scene.Length; i++)
            {
                if (scene [i] != null)
                {
                    scene [i].transform.position -= moveSpeed;
                }
            }
        }

        // Stage Completed
        if (bg.transform.position.x <= -4.8f && ended == false)
        {
            Alert("complete");
        }
    }

    void CheckTouch(Vector3 pos, string phase)
    {
        Vector3 wp = Camera.main.ScreenToWorldPoint(pos);
        Vector2 touchPos = new Vector2(wp.x, wp.y);
        Collider2D hit = Physics2D.OverlapPoint(touchPos);
            
        if (hit.gameObject.name == "RightButton" && hit && phase == "began")
        {
            moving = true;
        }
                
        if (hit.gameObject.name == "RightButton" && hit && phase == "ended")
        {
            moving = false;
        }
    }

    public void Alert(string action)
    {
        ended = true;

        completeText = new GameObject();
        completeText.AddComponent("GUIText");
        completeText.guiText.font = goodDog;
        completeText.guiText.fontSize = 50;
        completeText.guiText.color = new Color(255, 0, 0);
        
        if (action == "complete")
        {
            AudioSource.PlayClipAtPoint(completeSound, transform.position);

            completeText.guiText.text = "Level Complete!";
            completeText.guiText.transform.position = new Vector3(0.24f, 0.88f, 0);

        } else
        {
            completeText.guiText.text = "Game Over";
            completeText.guiText.transform.position = new Vector3(0.36f, 0.88f, 0);
        }

        bg.GetComponent().Stop();
        
        for(int i = 0; i < buttons.Length; i++)
        {
            buttons[i].renderer.enabled = false;
            Invoke("restart", 2);
        }
    }

    void restart()
    {   
        Application.LoadLevel(Application.loadedLevel);
    }
}

The Alert  function creates and displays a message to the player and plays the sound attached to the background sprite. For this to work, add the corresponding sound to the background sprite as we saw earlier in this tutorial. We also hide the buttons and restart the game with a delay of two seconds.

20. Sprite Sheet

We'll use a sprite sheet for the rest of the game elements. Unity has a sprite editor that makes using sprites a breeze. The artwork used in this tutorial was obtained from OpenGameArt.org.

Import the artwork, select it from the Assets panel, and change the Sprite Mode option to Multiple in the Inspector panel.

Open the Sprite Editor by clicking the button below and select Slice > Automatic.


21. Hero

With the sprite sheet sliced and ready to use, click the arrow that appears when the sprite sheet is selected and choose the sprite for the hero, the main character of our game. Place it on the scene and add a Collider 2D component to it.


22. Hero RigidBody 2D

To detect a collision with our hero, at least one of the colliding objects needs to have a RigidBody 2D component attached to it. To add one to our hero, select Add Component in the Inspector panel, followed by Physics 2D > RigidBody 2D.

Check the Fixed Angle box to prevent the hero from rotating if a collision occurs.

23. Hero Sound

When our hero is hit by an enemy, we play another sound to give the player feedback. If you've ever played Super Mario Bros., then you probably know what effect we're after. To accomplish this, we first need to add the sound. Select it from the Hierarchy or Scene view, click the Add Component button in the Inspector panel, and select Audio Source in the Audio section.

The details of the audio component will show up in the Inspector Panel. Click the dot below the gear icon and select the hit sound.

24. Collecting Coins

As in many traditional 2D platformers, you can collect coins in our game. Because we'll use this object multiple times in the game, we'll convert it to a Prefab once we've added all the necessary components.

Drag the coin from the Assets folder and add a Collider2D as we saw in the previous steps.


25. Coin Sound

We play a sound whenever our hero collects a coin. Add an Audio Source component as we saw a moment ago and select the coin sound from the project's assets.



26. Coin Script & Prefab

Attach this simple script to the coin. It detects when the coin and the hero collide. The coin is destroyed and a sound is played to indicate that the coin has been collected by the hero.

using UnityEngine;
using System.Collections;

public class GrabCoin : MonoBehaviour
{   
    void OnTriggerEnter2D(Collider2D other)
    {
        if (other.gameObject.name == "Hero")
        {
            audio.Play();
            Destroy(gameObject.collider2D);
            gameObject.renderer.enabled = false;
            Destroy(gameObject, 0.47f);// Destroy the object -after- the sound played
        }
    }
}

With all the components in place, drag the coin from the Hierarchy panel to the Assets panel to convert it to a Prefab. You'll notice the text becomes blue indicating it's now a Prefab.


27. Enemy

Let's not forget the enemies of the game. Drag the artwork for the enemy from the Assets folder and add two Collider 2D components as shown in the screenshot below.


The colliders are reduced in size to prevent the hero from colliding with both colliders at once. Change the settings of each Collider 2D component as below.

The first collider in the panel is the topmost collider that we've added to the enemy. It will detect if the hero jumps on top of the enemy and destroys it. The logic for this action is shown in the script below.

We mark the second collider as a trigger by checking the checkbox labeled Is Trigger. It detects when the enemy runs into the hero or vice versa. When that happens, the player loses the game.


The script attached to the enemy is shown below and implements the logic we just discussed. As you can see, the enemy is moved to the left in every frame and the script detects when the hero jumps on top of the enemy or when the hero runs into the enemy.

using UnityEngine;
using System.Collections;

public class Enemy : MonoBehaviour
{
    public Vector3 moveSpeed;
    public AudioClip hitSound;
    public GameObject alertBridge;

    // Use this for initialization
    void Start()
    {
    }
    
    // Update is called once per frame
    void Update()
    {
        transform.position -= moveSpeed; //Move the enemy to the left
    }

    void OnCollisionEnter2D(Collision2D other) //Hero jumps on enemy
    {
        if (other.gameObject.name == "Hero")
        {
            AudioSource.PlayClipAtPoint(hitSound, transform.position);
            Destroy(gameObject);
        }

    }

    void OnTriggerEnter2D(Collider2D other) //hero hits side of enemy
    {
        if (other.gameObject.name == "Hero")
        {
            other.gameObject.audio.Play(); //Play audio
            Destroy(other.gameObject.collider2D); //Remove collider to avoid audio replaying
            other.gameObject.renderer.enabled = false; //Make object invisible
            Destroy(other.gameObject, 0.626f); //Destroy object when audio is done playing, destroying it before will cause the audio to stop
            alertBridge.GetComponent().Alert("gameover");
        }
    }
}

28. Bricks

Bricks are used as platforms. The hero can jump on the bricks to avoid enemies and collect coins. Drag the brick artwork from the Assets panel and add a Collider 2D component to it. Don't forget to convert it to a Prefab, because it will be used quite a bit in the game.


29. The End

We'll use a sprite to show the finish line of the level. Drag it from the Assets panel to the Scene as shown in the screenshot below.

30. Dolby Audio Plugin


Let's enhance the audial experience of our game by using the Dolby Audio Plugin for Unity. However, let me first explain why you should be using the Dolby Audio Plugin and how it will improve your game.

Dolby Digital Plus is an advanced audio solution built into many mobile devices including tablets. Mobile applications can leverage the Dolby Digital Plus capabilities via API. Some of the benefits include Audio Optimization, Volume Maximization, and Volume Leveling. Dolby has made its API available for several platforms, including Android and Kindle Fire. In our game, we will take advantage of the Dolby Audio Plugin for Unity.

Note that the plugin for Unity is free to use and very easy to integrate. In other words, there's no reason not to include it in your next game.

Start by downloading Dolby's Unity plugin. You can download it from the Unity Asset Store or directly from Dolby's developer website. If you choose the latter option, then create a free account to download the plugin or log in if you already have a Dolby developer account. Extract the package and copy the version you need to Assets > Plugins > Android. That's how easy it is to install the plugin for Unity.

Create a new script and attach it to an object that is always present in the game like the background or the camera. Name the script Dolby and populate it with the following code snippet.

using UnityEngine;
using System.Collections;

using System.Runtime.InteropServices; //Allows us to use DLLImport

public class Dolby : MonoBehaviour
{
    private GameObject debugText;
    public Font arial; 

	/* Import plugin functions */

    [DllImport("DSPlugin")]
    public static extern  bool isAvailable();
    [DllImport("DSPlugin")]
    public static extern  int initialize();
    [DllImport("DSPlugin")]
    public static extern  int setProfile(int profileid);
    [DllImport("DSPlugin")]
    public static extern  int suspendSession();
    [DllImport("DSPlugin")]
    public static extern  int restartSession();
    [DllImport("DSPlugin")]
    public static extern void release();

    // Use this for initialization
    void Start()
    {
		/* Textfield created for feedback */        
		debugText = new GameObject();
        debugText.AddComponent("GUIText");
        debugText.guiText.font = arial;
        debugText.guiText.fontSize = 14;
        debugText.guiText.color = new Color(255, 0, 0);
        debugText.transform.position = new Vector3(0, 1, 0);
        
        /* Initialize Dolby if Available */

        if (isAvailable())
        {
            Invoke(Init, 0.1f); // Wait 100ms to make sure Dolby service is enabled
        }
        else
        {
            debugText.guiText.text = "Dolby Sound Not Available";
        }
    }
    
    void Init()
    {
        debugText.guiText.text = "Dolby Sound Available";
        setProfile(2); /* Set Profile to "Game" */
        initialize();
    }

    void OnApplicationPause()
    {
        suspendSession();// Dolby sound stops if app switched or paused
    }

    void OnApplicationFocus()
    {
        restartSession(); // Restart Dolby sound if app is active
    }

    void OnApplicationQuit()
    {
        release(); //Stops Dolby Sound completely
    }
}

I'm sure you agree that it's very easy to integrate the Dolby Audio API into your game. We first create a debugText object, which is of type GameObject, to receive feedback from the device. We then import the necessary functions defined by the Dolby Audio API and initialize the Dolby Audio API if the user's device supports it.

To ensure that the Dolby service is enabled, we briefly wait (0.1s) before calling the initialize() method. If we don't do this, there's a chance you receive a -1 error, which can happen when you try to set Dolby on when the service is getting established.

Dolby has also included functions to suspend and restart the sound when needed, which is useful when we switch to another application and we don't need the sound enhancement. This is important to conserve battery power and other device resources. We can also stop the sound enhancement completely by invoking release as we do in OnApplicationQuit.


31. Testing

It's time to test the game. Press Command-P to play the game in Unity. If everything works as expected, you are ready for the final steps.


32. Player Settings

When you're happy with your game, it's time to select Build Settings from the File menu and click the Player Settings button. This should bring up the Player Settings in the Inspector panel where you can set the parameters for your application.

These settings are application specific and include the creator or company, application resolution, display mode, etc. These settings depend on the devices you're targeting and the stores or markets you will be publishing your game on.


33. Icons and Splash Images

Using the graphics you created earlier, you can now create a nice icon and a splash image for your game. Unity shows you the required sizes, which depend on the platform you're building for.

34. Build and Play


Once your project is properly configured, it's time to revisit the Build Settings and click the Build button. That's all it takes to build your game for testing and/or distribution.

Conclusion

In this tutorial, we've learned about the new Dolby Audio Plugin for Unity, sprite sheets, controls, collision detection, and other aspects of game development using Unity. I encourage you to experiment with the result and customize the game to make it your own. I hope you liked this tutorial and found it helpful.

Working with Unity’s 2D Tools

In this tutorial, I'll show you how to take advantage of the new 2D Tools included in Unity to create a 2D Game.

1. Application Overview

In this tutorial, you'll learn how to create a Unity 2D project and create a mobile game using C# and Unity.

The objective of the game is to shoot a teleporting ray at the cows before they can reach the safety of the barn.

In this project you will learn the following aspects of Unity development:

  • setting up a 2D project in Unity
  • becoming familiar with the Unity interface
  • creating a Prefab
  • attaching scripts to game objects
  • working with physics collisions
  • using timers

2. Create a New Unity Project

Open Unity and select New Project from the File menu to open the new project dialog. Select a directory for your project and set Set up defaults for to 2D.


3. Build Settings

In the next step, you're presented with Unity's interface. Set the project up for mobile development by choosing Build Settings from the File menu and selecting your platform of choice.

Unity can build for iOS, Android, BlackBerry, and Windows Phone 8, which is great if you plan to create a mobile game for multiple platforms.


4. Devices

Since we're about to create a 2D game, the first thing we need to do after selecting the platform we're targeting, is choosing the size of the artwork that we'll use in the game.

iOS:

  • iPad without Retina: 1024px x 768px
  • iPad with Retina: 2048px x 1536px
  • 3.5" iPhone/iPod Touch without Retina: 320px x 480px
  • 3.5" iPhone/iPod with Retina: 960px x 640px
  • 4" iPhone/iPod Touch: 1136px x 640px

Because Android is an open platform, there are many different devices, screen resolutions, and pixel densities. A few of the more common ones are listed below.

  • Asus Nexus 7 Tablet: 800px x 1280px, 216 ppi
  • Motorola Droid X: 854px x 480px, 228 ppi
  • Samsung Galaxy SIII: 720px x 1280px, 306 ppi

And for Widows Phone and BlackBerry:

  • Blackberry Z10: 720px x 1280px, 355 ppi
  • Nokia Lumia 520: 400px x 800px, 233 ppi
  • Nokia Lumia 1520: 1080px x 1920px, 367 ppi

Even though we'll be focusing on the iOS platform in this tutorial, the code can be used to target any of the other platforms.


5. Export Graphics

Depending on the device you're targeting, you may need to convert the artwork to the recommended size and pixel density. You can do this in your favorite image editor. I've used the Adjust Size... function under the Tools menu in OS X's Preview application.


6. Unity Interface

Make sure to click the 2D button in the Scene panel. You can also modify the resolution that's being used to display the scene in the Game panel.


7. Game Interface

The user interface of our game will be simple. You can find the artwork for this tutorial in the source files of this tutorial.


8. Language

You can use one of three languages in Unity, C#, UnityScript, a language similar to JavaScript in terms of syntax, and Boo. Each language has its pros and cons, but it's up to you to decide which one you prefer. My preference goes to the C# syntax, so that's the language I'll be using in this tutorial.

If you decide to use another language, then make sure to take a look at Unity's Script Reference for examples.


9. 2D Graphics

Unity has built a name for being a great platform for creating 3D games for various platforms, such as Microsoft Xbox 360, Sony PS3, Nintendo Wii, the web, and various mobile platforms.

While it has always been possible to use Unity for 2D game development, it wasn't until the release of Unity 4.3 that it included native 2D support. We'll learn how to work with images as sprites instead of textures in the next steps.


10. Sound Effects

I'll use a number of sounds to improve the game experience. The sound effects used in this tutorial can be found at Freesound.org.


11. Import Assets

Before we start coding, we need to add our assets to the Unity project. Theres are several ways to do this:

  • select Import New Asset from the Assets menu
  • add the items to the assets folder in your project
  • drag and drop the assets in the project window

After completing this step, you should see the assets in your project's Assets folder in the Project panel.

12. Create Scene

We're ready to create the scene of our game by dragging objects to the Hierarchy or Scene panel.


13. Background

Start by dragging and dropping the background into the Hierarchy panel. It should then appear in the Scene panel.

Because the Scene panel is set to display a 2D view, you'll notice selecting the Main Camera in the Hierarchy shows a preview of what the camera is going to display. You can also see this in the game view. To make the entire scene visible, change the Size value of the Main Camera to 1.6 in the Inspector panel.


14. Ship

The ship is also a static element the player won't be able to interact with. Position it in the center of the scene.


15. Barn

Select the barn from the Assets panel and drag it to the scene. Position it as illustrated in the screenshot below.


16. Barn Collider

To make sure the barn is notified when a cow hits it—enters the barn—we need to add a component, a Box Collider 2D to be precise.

Select the barn in the scene, open the Inspector panel, and click Add Component. From the list of components, select Box Collider 2D from the Physics 2D section. Make sure to check the Is Trigger box.

We want the cow to react when it hits the door of the barn so we need to make the collider a bit smaller. Open the Inspector and change the Size and Center values of the collider to move the box closer to the door of the barn.


17. Barn Collision Script

It's time to write some code. We need to add a script so the application can respond to the collision when a cow enters the barn.

Select the barn and click the Add Component button in the Inspector panel. Select New Script and name it OnCollision. Remember to change the language to C#.

Open the newly created file and add the following code snippet.

using UnityEngine;
using System.Collections;

public class OnCollision : MonoBehaviour
{
    void OnTriggerEnter2D(Collider2D other)
    {
        if (other.gameObject.name == "cow(Clone)")
        {
            /* Play the save cow sound */
            audio.Play();
            /* Destroy the cow */
            Destroy(other.gameObject);
        }
    }
}

The snippet checks for a collision between the object to which the script is linked, the barn, and an object named cow(Clone), which will be an instance of the cow Prefab that we'll create later. When a collision takes place, a sound is played and the cow object is destroyed.


18. Barn Sound

To play a sound when a cow hits the barn, we first need to attach the sound to the barn. Select it from the Hierarchy or Scene view, click the Add Component button in the Inspector panel, and select Audio Source from the Audio section.

Uncheck Play on Awake and click the little dot on the right, below the gear icon, to select the barn sound.

You can increase the size of the icons in Unity's user interface (gizmos) by clicking Gizmos in the Scene panel and adjusting the position of the slider.


19. Ray

Drag the ray graphic from the Assets panel to the scene and add a collider to it. This is necessary to detect a collision with the unlucky cow. Check the Is Trigger option in the Inspector panel.

20. Ray Script

Create a new script by repeating the steps I outlined a few moment ago. Name the script Bullet and replace its contents with the following code snippet:

using UnityEngine;
using System.Collections;

public class Bullet : MonoBehaviour
{
    public AudioClip cowSound;

    // Use this for initialization
    void Start()
    {
        renderer.enabled = false; /* Makes object invisible */
    }
    
    // Update is called once per frame
    void Update()
    {
        /* Get main Input */
        if (Input.GetButton("Fire1"))
        {
            renderer.enabled = true; /* Makes object visible */
            /* Play the ray sound */
            audio.Play();
        }
        
        if (renderer.enabled == true)
        {
            transform.position += Vector3.down * (Time.deltaTime * 2);
        }

        /* Check for out of bounds */

        if (this.transform.position.y < -1.5)
        {
            transform.position = new Vector2(0.08658695f, 0.1924166f); /* Return bullet to original position */
            renderer.enabled = false;
        }
    }

    void OnTriggerEnter2D(Collider2D other)
    {
        if (other.gameObject.name == "cow(Clone)")
        {
            AudioSource.PlayClipAtPoint(cowSound, transform.position);
            /* Destroy the cow */
            Destroy(other.gameObject);
            transform.position = new Vector2(0.08658695f, 0.1924166f); /* Return bullet to original position */
            renderer.enabled = false;
        }
    }
}

That's a lot of code, but it isn't complicated. Let's see what is happening. First, we create an AudioClip instance named cowSound, which we'll use to store an audio file. This is just another technique to play a sound if you don't want to add two audio components to the object. We declare the variable as public so we can access it from the Inspector. Click the little dot on the right of cowSound and select the audio file.

We then make the ray invisible by disabling its renderer. We use the same object so we can save resources, which is an important optimization for less powerful devices.

We detect touches on the screen, which make the ray visible and play back the ray sound (see below). If the object is visible, it means that it should be going down to hit a cow.

There's also code to detect if the ray is outside the scene's bounds. If this is the case, we reposition it, ready to fire again (check the ray's x and y values in the Inspector).

The last part checks whether the ray hits a cow. If it does, it plays the cow sound and destroys the cow. The ray is then made invisible and repositioned at its original position, ready to fire again.


21. Ray Audio Source

To add the audio for the ray,  select it in the Hierarchy or Scene view and click Add Component in the Inspector panel. Select Audio Source from the Audio section. Uncheck Play on Awake and click the little dot on the right to select the sound file.


22. Add a Cow

Drag the graphic for the cow from the Assets panel and position it in the scene as shown below.


23. Rigid Body 2D

To detect a collision, at least one of the colliding objects needs to have a RigidBody2D component associated with it. As the cow can collide with both the barn and the ray, it's best to add the component to the cow.


24. Cow Collider

We also need to add a collider to the cow so we can detect collisions with the barn and the ray. Make sure to check the Is Trigger checkbox in the Inspector.


25. Move Cow Script

Add a script component to the cow and replace its contents with the following:

using UnityEngine;
using System.Collections;

public class MoveCow : MonoBehaviour
{
    public Vector3 moveSpeed;
    public float spawnTime = 2f;
    public float spawnDelay = 2f;

    // Use this for initialization
    void Start()
    {
        moveSpeed = Vector3.left * Time.deltaTime;
        InvokeRepeating("ChangeSpeed", spawnDelay, spawnTime);
    }

    void ChangeSpeed()
    {
        moveSpeed = new Vector3(Random.Range(-1, -2), 0, 0) * 0.05f;
    }
    
    // Update is called once per frame
    void Update()
    {
        transform.position += moveSpeed;
    }
}

The MoveCow class animates the cow across the screen using a variable named moveSpeed. The InvokeRepeating method changes the speed of the cow to make it sprint from the moment it reaches the center of the scene. This makes the game more challenging.


26. Create Cow Prefab

With the necessary components added to the cow, it's time to convert it to a Prefab. What is a Prefab? Let's consult the Unity Manual:

"A Prefab is a type of asset—a reusable GameObject stored in Project View. Prefabs can be inserted into any number of scenes, multiple times per scene. When you add a Prefab to a scene, you create an instance of it. All Prefab instances are linked to the original Prefab and are essentially clones of it. No matter how many instances exist in your project, when you make any changes to the Prefab you will see the change applied to all instances."

If you're coming from Flash and ActionScript, then this should sound familiar. To convert the cow to a prefab, drag the cow from the Hierarchy panel to the Assets panel. As a result, the name in the Hierarchy will turn blue.

Converting the cow to a prefab allows us to reuse it, which is convenient as it already contains the necessary components.


27. Spawner Script

The Spawner script is responsible for the cows to appear. Open MonoDevelop—or your favorite C# editor—and create a new script:

using UnityEngine;
using System.Collections;

public class Spawner : MonoBehaviour
{

    public float spawnTime = 2f;
    public float spawnDelay = 2f;
    public GameObject cow;

    // Use this for initialization
    void Start()
    {
        InvokeRepeating("Spawn", spawnDelay, spawnTime);
    }

    void Spawn()
    {
        /* Instantiate a cow */

        GameObject clone = Instantiate(cow, transform.position, transform.rotation) as GameObject;
    }
}

We call the InvokeRepeating method to spawn cows using the values set by spawnTime and spawnDelay. The GameObject cow is set to public and is created using the Inspector. Click the little dot on the right and select the cow Prefab.


28. Spawner Game Object

To instantiate the cow prefab, we'll use the graphic of the cow we've added to the scene a few minutes ago. Select it and remove its components. Then add the Spawner script.


29. Testing

It's time to test the game. Press Command + P to play the game in Unity. If everything works as expected, you are ready for the final steps.


30. Player Settings

When you're happy with your game, it's time to select Build Settings from the File menu and click the Player Settings button. This brings up the Player Settings in the Inspector panel where you can adjust the parameters for your application.


31. Application Icon

Using the graphics you created earlier, you can now create a nice icon for your game. Unity shows you the required sizes, which depend on the platform you're building for.


32. Splash Image

The splash or launch image is displayed when the application is launched.

33. Build

Once your project is properly configured, it's time to revisit the Build Settings and click the Build Button. That's all it takes to build your game for testing and/or distribution.

34. Xcode

If you're building for iOS, you need Xcode to build the final application binary. Open the Xcode project and choose Build from the Product menu.

Conclusion

In this tutorial, we've learned about the new 2D capabilities of Unity, collision detection, and other aspects of game development with Unity.

Experiment with the result and customize it to make the game your own. I hope you liked this tutorial and found it helpful.

Corona SDK: Create a Balance Ping-Pong Game

In this tutorial, I’ll be showing you how to create a balance game in Corona SDK. You’ll learn more about touch controls and collision detection without physics. The objective of the game is to keep the ball from touching the floor. Read on.


1. Application Overview

App Overview

Using ready-made graphics, we’ll create an entertaining game using Lua and the Corona SDK APIs. The player will be able to move a ping-pong paddle on the screen in order to hit a ball. You can modify the parameters in the code to customize the game.


2. Target Device

Target Device

The first thing we need to do is select the platform we want to run our application on so we’re able to choose the size of the images we’ll use.

The iOS platform has the following requirements:

  • iPad 1/2/Mini: 1024px x 768px, 132 ppi
  • iPad Retina: 2048px x 1536px, 264 ppi
  • iPhone/iPod Touch: 320px x 480px, 163 ppi
  • iPhone/iPod Retina: 960px x 640px, 326 ppi
  • iPhone 5/iPod Touch: 1136px x 640px, 326 ppi

Because Android is an open platform, there are many different devices and resolutions. A few of the more common screen characteristics are:

  • Asus Nexus 7 Tablet: 800px x 1280px, 216 ppi
  • Motorola Droid X: 854px x 480px, 228 ppi
  • Samsung Galaxy SIII: 720px x 1280px, 306 ppi

In this tutorial, we’ll be focusing on the iOS platform in terms of graphics. In particular, we’ll be developing for the iPhone and iPod touch. However, the code of this tutorial can also be used if you target the Android platform.


3. Interface

Interface

We’ll use a simple user interface involving multiple shapes, buttons, bitmaps, and more. The graphics that we’ll use for this tutorial can be found in the project included with this tutorial.


4. Export Graphics

Export Graphics

Depending on the device you’ve selected, you may need to convert the graphics to the recommended resolution (ppi), which you can do in your favorite image editor. I used the Adjust Size… option in the Tools menu in the Preview application on OS X. Remember to give the images a descriptive name and save them in your project folder.


5. Application Configuration

We’ll use a configuration file, config.lua, to make the application go full screen across devices. The configuration file shows the original screen size and the method used to scale the content in case the application is run on another resolution.

application =
{
    content =
    {
        width = 320,
        height = 480,
        scale = "letterbox"
    },
}

6. main.lua

Let’s write the actual application. Open your preferred Lua editor. Any plain text editor will work, but it is recommended to use a text editor that has syntax highlighting. Create a new file and save it as main.lua in your project folder.


7. Project Structure

We’ll structure our code as if it were a class. If you’re familiar with ActionScript or Java, you should find the project structure familiar.

Necesary Classes
Variables and Constants
Declare Functions
    contructor (Main function)
    class methods (other functions)
call Main function

8. Hide Status Bar

display.setStatusBar(display.HiddenStatusBar)

This code snippet hides the status bar. The status bar is the bar at the top of the device’s screen that shows the time, signal, and other indicators.


9. Background

Background

A simple background for the application’s user interface. The code snippet below draws the background to the screen.

-- Graphics
-- [Background]
local bg = display.newImage('bg.png')

10. Title View

Title View

This is the title view. It’s the first interactive screen to appear in our game. These variables store its components.

-- [Title View]
local title
local playBtn
local creditsBtn
local titleView

11. Credits View

Credits View

The credits view shows the credits and copyright of the application. This variable is used to store it.

-- [CreditsView]
local creditsView

12. Instructions Message

Instructions

A message with instructions will appear at the start of the game and it will disappear after the first tap.

-- Instructions
local ins

13. Paddle

Paddle

This is the graphic for the ping-pong paddle. It will be placed at the view’s center.

-- Paddle
local paddle
local paddleTop
local paddleBottom

14. Ball

Ball

And this is the graphic for the ping-pong ball used in the game.

-- Ball
local ball

15. Alert

Alert

The alert is displayed when the player misses the ball and the game is over. It displays a message and ends the game.

-- Alert
local alertView

16. Sounds

Sounds

We’ll use sound effects to spice up the game. The sounds used in this game can be found on freesound, a collaborative database of Creative Commons Licensed sounds.

-- Sounds
local pong = audio.loadSound('pong.mp3')

17. Variables

The following code snippet shows the variables that we’ll use. Read the comments to understand what each variable is used for.

-- Variables
local scoreTF -- score textfield
local scale = 1.1 -- initial ball scale
local variation = 0.05 -- controls the scale variation
local ballX = 0
local ballY = 0
local ballVar = 0.5 -- ball variation

18. Declare Functions

Declare all functions as local at the start.

-- Functions
local Main = {}
local startButtonListeners = {}
local showCredits = {}
local hideCredits = {}
local showGameView = {}
local gameListeners = {}
local startGame = {}
local hitTestObjects = {}
local update = {}
local movePaddle = {}
local alert = {}

19. Constructor

Next, we create the function that will initialize the game logic.

function Main()
  -- code...
end

20. Add Title View

We start by placing the title view in the stage and call a function that will add tap listeners to the buttons.

function Main()
  titleBg = display.newImage('titleBg.png', 26, 72)
  playBtn = display.newImage('playBtn.png', 125, 225)
  creditsBtn = display.newImage('creditsBtn.png', 115, 290)
  titleView = display.newGroup(titleBg, playBtn, creditsBtn)
  startButtonListeners('add')
end

21. Start Button Listeners

The following function adds the necessary listeners to the TitleView‘s buttons.

function startButtonListeners(action)
  if(action == 'add') then
    playBtn:addEventListener('tap', showGameView)
    creditsBtn:addEventListener('tap', showCredits)
  else
    playBtn:removeEventListener('tap', showGameView)
    creditsBtn:removeEventListener('tap', showCredits)
  end
end

22. Show Credits

The credits screen is shown when the user taps the about button. A tap listener is added to the credits view to dismiss it when the user taps it.

function showCredits:tap(e)
  playBtn.isVisible = false
  creditsBtn.isVisible = false
  creditsView = display.newImage('credits.png', 0, display.contentHeight)
  lastY = titleBg.y
  transition.to(titleBg, {time = 300, y = (display.contentHeight * 0.5) - (titleBg.height + 50)})
  transition.to(creditsView, {time = 300, y = (display.contentHeight * 0.5) + 35, onComplete = function() creditsView:addEventListener('tap', hideCredits) end})
end

23. Hide Credits

When the user taps credits view, it is animated out of the stage and removed.

function hideCredits:tap(e)
  transition.to(creditsView, {time = 300, y = display.contentHeight + 25, onComplete = function() creditsBtn.isVisible = true playBtn.isVisible = true creditsView:removeEventListener('tap', hideCredits) display.remove(creditsView) creditsView = nil end})
  transition.to(titleBg, {time = 300, y = lastY});
end

24. Show Game View

When the play button is tapped, the title view is animated off the screen and the game view is revealed. There are a number of moving parts so we’ll take a closer look at each of them.

function showGameView:tap(e)
  transition.to(titleView, {time = 300, x = -titleView.height, onComplete = function() startButtonListeners('rmv') display.remove(titleView) titleView = nil bg:addEventListener('tap', startGame) end})

25. Instructions Message

The following code snippet adds the instruction message.

ins = display.newImage('ins.png', 112, 370)

26. Paddle Parts

Next, we add the paddle parts. It is split up into two parts for better collision detection.

-- Paddle
  paddleBottom = display.newImage('paddleBottom.png', 138.6, 262)
  paddleTop = display.newImage('paddleTop.png', 110, 166)
  paddle = display.newGroup(paddleBottom, paddleTop)

27. Ball

We add the ball and set its scale.

-- Ball
  ball = display.newImage('ball.png', 146, 201)
  ball:scale(scale, scale)

28. Score

We create a score text field at the top right of the stage.

-- Score
  score = display.newImage('score.png', 260, 0)
  scoreTF = display.newText('0', 278, 21, 'Marker Felt', 30)
  scoreTF:setTextColor(238, 238, 238)
  gameListeners('add')
end

29. Game Listeners

The following function adds the necessary listeners for starting the game logic.

function gameListeners(action)
  if(action == 'add') then
    bg:addEventListener('touch', movePaddle)
  else
    bg:removeEventListener('touch', movePaddle)
    Runtime:removeEventListener('enterFrame', update)
  end
end

30. Start Function

The startGame function removes the instruction message and adds a listener to the main function of the game. In the function, a random y position is selected from the previously created table and subsequently adds physics to the newly created object. We add a collision listener to every enemy and also add them to the enemies table.

function startGame()
  display.remove(ins)
  bg:removeEventListener('tap', startGame)
  Runtime:addEventListener('enterFrame', update)
end

31. Hit Test Objects

For collision detection without using physics, we use a great function, which you can find on the Corona Labs Code Exchange website.

function hitTestObjects(obj1, obj2)
        local left = obj1.contentBounds.xMin <= obj2.contentBounds.xMin and obj1.contentBounds.xMax >= obj2.contentBounds.xMin
        local right = obj1.contentBounds.xMin >= obj2.contentBounds.xMin and obj1.contentBounds.xMin <= obj2.contentBounds.xMax
        local up = obj1.contentBounds.yMin <= obj2.contentBounds.yMin and obj1.contentBounds.yMax >= obj2.contentBounds.yMin
        local down = obj1.contentBounds.yMin >= obj2.contentBounds.yMin and obj1.contentBounds.yMin <= obj2.contentBounds.yMax
        return (left or right) and (up or down)
end

32. Scale Ball

The update function, shown below, runs every frame. In this function, we first scale the ball based on the values set by the variables.

function update()
  -- Scale Balls
  scale = scale - variation
  ball.xScale = scale
  ball.yScale = scale

33. Ball Raise

This part increases the ball size to simulate an increase in its height.

-- Raising
  if(math.floor(ball.xScale * 10) >= 15) then
    variation = 0.05
  end

34. Ball Missed

The same method is used to check if the ball has touched the floor, an essential aspect of the game.

-- Missed
  if(math.floor(ball.xScale * 10) < 3) then
    alert()
  end

35. Move Ball

In the following code snippet, we move the ball. Based on the value of the variables, it is moved up or down.

-- Move Ball
  ball.x = ball.x - ballX
  ball.y = ball.y - ballY

36. Ball Hit

A scale is set to be the same paddle height, which means that the ball has touched the paddle. We then increase the score and play a sound to provide feedback to the user.

-- Falling and Hit with paddle
  if(math.floor(ball.xScale * 10) == 3 and hitTestObjects(paddleTop, ball)) then
    variation = -0.05
    -- Increase Score
    scoreTF.text = tostring(tonumber(scoreTF.text) + 1)
    -- Play Sound
    audio.play(pong)

37. Change Ball Direction

The paddle is divided in four sections, top left, top right, bottom left, and bottom right. Each section moves the ball in a different direction.

-- Move Ball based on where it hits
    if(ball.x < paddle.x + 50) then       ballX = (math.random() * 0.5) + ballVar     end     if(ball.x  > paddle.x) then
      ballX = (math.random() * -0.5) - ballVar
    end
    if(ball.y < paddle.y + 75) then       ballY = (math.random() * 0.5) + ballVar     end     if(ball.y > paddle.y - 70) then
      ballY = (math.random() * -0.5) - ballVar
    end
    -- Increase moving distance
    ballVar = ballVar + 0.025 -- Every four hits increases 0.1
  end
end

38. Move Paddle

The movePaddle function handles the movement of the paddle using touch controls.

function movePaddle(e)
  if(e.phase == 'moved') then
    paddle.x = e.x
    paddle.y = e.y
  end
end

39. Alert

The alert function creates an alert view. The function animates the alert view onto the screen and ends the game.

function alert()
  gameListeners('rmv')
  alert = display.newImage('alert.png', (display.contentWidth * 0.5) - 105, (display.contentHeight * 0.5) - 55)
  transition.from(alert, {time = 300, xScale = 0.5, yScale = 0.5})
end

40. Call Main Function

In order to start the game, the Main function needs to be invoked. With the rest of the code in place, we do that here.

Main()

41. Loading Screen

Loading Screen

On the iOS platform, the file named Default.png is displayed while the application is launching. Add this image to your project’s source folder, it will be automatically added by the Corona compiler.


42. Icon

Icon

Using the graphics you created earlier, you can now create a nice icon. The dimensions of the icon size for a non-retina iPhone are 57px x 57px, while the retina version needs to be 114px x 114px. The artwork for iTunes is required to be 1024px x 1024px. I suggest creating the iTunes artwork first and then creating the smaller sized images by scaling the iTunes artwork down to the correct dimensions. There is no need to make the application icon glossy or add rounded corners as this is taken care of by the operating system for you.


43. Testing in Simulator

Testing

It’s time to test our application in the simulator. Open the Corona Simulator, browse to your project folder, and click Open. If everything works as expected, you’re ready for the final step.


44. Build Project

Build

In the Corona Simulator, go to File > Build and select the target device. Fill out the required fields and click Build. Wait a few seconds and your application is ready to test on a device and/or to be submitted for distribution.


Conclusion

In this tutorial, we’ve learned about touch listeners, and collision detection. Experiment with the final result and try to modify the game to create your own version of the game. I hope you liked this tutorial and found it helpful. Thank you for reading.

Corona SDK: Build a Frogger Inspired Game – Interface Creation

In this tutorial series, I’ll be showing you how to create a Frogger Inspired game with the Corona SDK. You’ll learn about moving objects across the screen and detect when they are colliding using the physics engine. The objective of the game is to move the Frog on the stage to its containers without being hit by an obstacle. Read on!

1. Application Overview

App Overview

Using pre made graphics we will code an entertaining game using Lua and the Corona SDK API’s.

The player will be able to use the on-screen pad to move the frog and get it to the other side, you can modify the parameters in the code to customize the game.

2. Target Device

Target Device

The first thing we have to do is select the platform we want to run our app within, this way we’ll be able to choose the size for the images we will use.

The iOS platform has these characteristics:

  • iPad 1/2/Mini: 1024x768px, 132 ppi
  • iPad Retina: 2048×1536, 264 ppi
  • iPhone/iPod Touch: 320x480px, 163 ppi
  • iPhone/iPod Retina: 960x640px, 326 ppi
  • iPhone 5/iPod Touch: 1136×640, 326 ppi

Because Android is an open platform, there are many different devices and resolutions. A few of the more common screen characteristics are:

  • Asus Nexus 7 Tablet: 800x1280px, 216 ppi
  • Motorola Droid X: 854x480px, 228 ppi
  • Samsung Galaxy SIII: 720x1280px, 306 ppi

In this tutorial, we’ll be focusing on the iOS platform with the graphic design, specifically developing for distribution to an iPhone/iPod touch, but the code presented here should apply to Android development with the Corona SDK as well.


3. Interface

Interface

A simple and friendly interface will be used. This involves multiple shapes, buttons, bitmaps and more.

The interface graphic resources necessary for this tutorial can be found in the attached download.

Frogger Sprite Pack.


4. Export Graphics

Export Graphics

Depending on the device you have selected, you may need to export the graphics in the recommended PPI. You can do this in your favorite image editor.

I used the Adjust Size… function in the Preview app on Mac OS X.

Remember to give the images a descriptive name and save them in your project folder.


5. App Configuration

An external file will be used to make the application go fullscreen across devices, the config.lua file. This file shows the original screen size and the method used to scale that content in case the app is run in a different screen resolution.

application =
{
    content =
    {
        width = 320,
        height = 480,
        scale = "letterbox"
    },
}

6. Main.lua

Let’s write the application!

Open your prefered Lua editor (any Text Editor will work, but you won’t have syntax highlighting) and prepare to write your awesome app. Remember to save the file as main.lua in your project folder.


7. Code Structure

We’ll structure our code as if it were a Class. If you know ActionScript or Java, you should find the structure familiar.

Necessary Classes
Variables and Constants
Declare Functions
    contructor (Main function)
    class methods (other functions)
call Main function

8. Hide Status Bar

display.setStatusBar(display.HiddenStatusBar)

This code hides the status bar. The status bar is the bar on top of the device screen that shows the time, signal, and other indicators.


9. Import Physics

We’ll use the Physics library to handle collisions. Use this code to import it:

-- Physics
local physics = require('physics')
physics.start()
physics.setGravity(0, 0)

10. Background

Background

A simple graphic is used as the background for the application interface, the next line of code stores it.

-- Graphics
-- [Background]
local bg = display.newImage('bg.png')

11. Title View

Title View

This is the Title View, it will be the first interactive screen to appear in our game, these variables store its components.

-- [Title View]
local title
local playBtn
local creditsBtn
local titleView

12. Credits View

Credits View

This view will show the credits and copyright of the game, this variable will be used to store it.

-- [CreditsView]
local creditsView

13. Game Background

Game Background

This image will replace our previous background. This will be the game background.

-- Game Background
local gameBg

14. Frog

Instructions

The frog you will be able to control.

-- Frog
local frog

15. Pad

Place Holders

This is the on-screen pad used to move the frog around the level.

-- [Pad]
local up
local left
local down
local right


16. Cars

Shapes

The obstacles the player needs to avoid to cross to the other side.


17. Alert

Alert

This is the alert that will be displayed when you win the game. It will complete the level and end the game.

  -- Alert
  local alertView


18. Sounds

Sounds

We’ll use Sound Effects to enhance the feeling of the game, the sounds used in this app were generated by AS3SFXR.

-- Sounds
local moveSnd = audio.loadSound('move.mp3')
local loseSnd = audio.loadSound('lose.mp3')
local goalSnd = audio.loadSound('goal.mp3')

19. Variables

This are the variables we’ll use. Read the comments in the code to learn more about them.

-- Variables
local lastY --Used to reposition the titleView after credits tween
local obstacles --Obstacles group
local counter = 0 --Counts the frogs that had crossed the street

20. Declare Functions

Declare all functions as local at the start.

-- Functions
local Main = {}
local startButtonListeners = {}
local showCredits = {}
local hideCredits = {}
local showGameView = {}
local gameListeners = {}
local addObstacle = {}
local movePlayer = {}
local update = {}
local onCollision = {}
local alert = {}

21. Constructor

Next we’ll create the function that will initialize all the game logic:

function Main()
	-- code...
end

22. Add Title View

Now we place the TitleView in the stage and call a function that will add the tap listeners to the buttons.

function Main()
	title = display.newImage('title.png', 64, 130)
	playBtn = display.newImage('playBtn.png', 134, 245)
	creditsBtn = display.newImage('creditsBtn.png', 114, 305)
	titleView = display.newGroup(bg, title, playBtn, creditsBtn)
	startButtonListeners('add')
end

Next Time…


In this part of the series you’ve learned the interface and the basic setup of the game. In the next and final part of the series, we’ll handle the level creation, collision detection, and the final steps to take prior to release like app testing, creating a start screen, adding an icon and, finally, building the app. Stay tuned for the final part!