OUYA Game Development by Example Beginner's Guide (2014)

Chapter 8. Polishing and Prepping Your Game for Deployment

You now have the knowledge and the code base to create any game and make it run smoothly. In the previous chapter, Chapter 7, Expanding Your Gameplay with In-App Purchases, you learned how to add in-app purchasing to your projects, allowing your players to explore additional content in your games and unlock advanced features.

In this chapter, we'll shift our focus from project fundamentals to several different polishing techniques that you can use to make your game stand out. In addition to being clean and polished, your game also has to meet the OUYA content guidelines before it can be submitted to the marketplace. We'll review the steps to create an acceptable submission in this chapter as well.

Here's a summary of what we'll cover:

· Meeting the OUYA content guidelines

· Polishing your aesthetic and mechanics

· Packaging your project for submission

Above all, we want to ensure all of the final changes we make adhere to the content guidelines, so the first thing we'll do is prepare a game for marketplace submission using the marble coin prototype as an example. If you've been working on your own game independent of these tutorials, feel free to follow along using that instead of the marble coin prototype; these steps can be applied to any project.

Meeting the OUYA content guidelines

The power to produce and potentially publish a game is entirely in the hands of the OUYA audience, but the OUYA team must approve any submitted game before it's published on the marketplace. To ensure quality games and a uniform review process, a list of content guidelines is available that includes all of the recommended and required criteria for your OUYA projects. You can find the latest version of this list at https://devs.ouya.tv/developers/docs/content-review-guidelines.

Time for action – containing game elements within the safe zone

The OUYA console works on any TV or monitor with a High-Definition Multimedia Interface (HDMI) port, so you can expect your game to be played on a lot of different screens. Certain screens can experience overscan, which cuts off the outer border of the screen and can potentially hide game elements that are right on the edge of the window.

Note

Overscan is the result of TV and monitor manufacturers cropping the screen to ensure that there are no blank borders or visible edges. However, because overscan is different on each screen, it can cut off parts of what you're viewing as well. To minimize overscan, try setting your monitor to a 1:1 pixel ratio (methods of doing this vary, but can be found in the manual of your TV or monitor).

To make sure everything in your game is visible no matter what screen it's being played on, OUYA features a toggleable "safe zone" that highlights the area that should contain vital game elements. Safe zones vary by TV but are usually between 80 and 90 percent of the screen space. We'll use this safe zone to make sure everything important is where it ideally should be.

We'll begin by enabling a developer overlay that allows us to visualize the safe zone. Perform the following steps to do so:

1. Connect your OUYA console to your computer via its included Universal Serial Bus (USB) cable.

2. Open a command-line window (Terminal if you're using Mac OS X, Command Prompt if you're using Windows).

3. Run the adb devices command to ensure that your OUYA console is connected and ready. OUYA will appear as a series of numbers and letters on the device list, similar to the following screenshot:

Tip

If your console does not show up in the list of attached devices, you may need to run the adb kill-server command and then run adb devices again. This will restart the adb service before fetching the list of devices, and it's a good thing to try before troubleshooting your physical connections.

4. Start your marble game on OUYA. This can be done by clicking on Build & Run in Unity's File menu, or if you've tested it on OUYA recently, you can start it from the console in the Play menu.

5. Return to the command-line window on your computer while the game is still running and enter the following commands:

6. adb shell

su

These two commands will open a shell that can interact directly with OUYA and give it root permissions, which are needed to display the safe zone.

7. Run the following command to toggle the safe zone display over your marble game:

am start -n tv.ouya.console/tv.ouya.console.launcher.ToggleSafeZoneActivity

The display will appear directly on top of the normal game view, as shown in the following screenshot:

The transparent green overlay that appears on top of your game is the safe zone, and everything important to the user must be within that box. Already, we can see in the previous screenshot that our GUI element, situated in the upper-left corner, is outside the safe zone and far too small for the monitor's resolution (1920 x 1080). The safe zone will typically display over your default resolution, but you can test on smaller resolutions as well with a simple command.

8. Enter the following command in the command line to test your game on a 1280 x 720 resolution:

am display-size 1280x720

The screen will adjust your game to display in a smaller resolution and fill the rest of the screen with black, as shown in the following screenshot:

The font size is slightly easier to read on a smaller resolution, but it's still far outside the safe zone, so we'll have to change our GUI text to meet the OUYA content guidelines.

9. Select the GUI Text object in your hierarchy to display its properties in the Inspector window.

10. Increase the font size from 20 to 50 in the Inspector window.

11. Change the position of the GUI Text object from 1.0, 1.0, 0.0 to 0.95, 0.95, 0.0.

Now that the text is more easily visible and farther from the edge of the screen, we can check the safe zone again.

12. Click on the Build & Run option in Unity's File menu to deploy your latest build to the console.

13. If the safe zone isn't enabled already, toggle it on and ensure that the text lies completely within the bounds of the safe zone.

We now know that our GUI element will be visible on any screen because it fits within the safe zone overlay, as shown in the following screenshot:

Note that the GUI element is now large enough to easily read without interfering with the game area and the text is within the safe zone, which guarantees that it will be visible on any TV that supports OUYA.

What just happened?

You just learned how to toggle the safe zone reference and then tweak a visual element to fit within the safe zone, which is crucial to ensure the playability of your game across any model of television or monitor. You also learned how to change the display resolution of OUYA on your own monitor using the command line, so you can test multiple resolutions without needing multiple screens.

Tip

Some game developers measure their safe zones and then cover anything outside of the safe zone in screen-safe tape, so they never forget to stay inside of it. This isn't mandatory, but at the very least, you'll have to make a final check before submitting your game to ensure that the screen specifications fit the OUYA content guidelines.

Time for action – creating icons for your game

Up until this point, the icon for your game has been shown on OUYA's Play menu as a standard Unity icon. Before submitting your game, it needs to have a unique icon that will draw attention to it and differentiate it from other games on the market, so we'll now create a set of custom icons by performing the following steps:

1. Open the folder that contains your RollingMarble project and navigate to RollingMarble\Assets\Plugins\Android\res.

2. Open the folder named drawable and examine the file inside it named app_icon.png.

The app_icon.png file is the icon that will appear when people view your app from the OUYA marketplace. Note that this is different from the icon that will appear on the Play menu; this is the one that most people will see before they download the game.

3. Use your preferred image manipulation program to make yourself an app icon. Get creative! You can have anything in your app icon as long as it's appropriate for all ages and it fits the required resolution of 96 x 96.

4. Once you finish creating your custom icon, save it over the old icon in the same folder with the same name.

5. Next, you'll change your game's OUYA icon. This is the large rectangular icon that shows up in the OUYA menu.

6. Navigate back to RollingMarble\Assets\Plugins\Android\res and open the folder named drawable-xhdpi.

7. Create your own custom OUYA icon to be displayed in the OUYA Play menu. The requirements are the same as the app icon, but with a resolution of 732 x 412.

8. Save the icon over the old one with the same name.

9. Click on Build & Run again to deploy your new package to the console.

10. Double-click on the OUYA system button to return to the Play menu and see your new icon.

The icon will also be visible in the main menu as your most recently played title, as shown in the following screenshot:

What just happened?

When you changed the icon images in the res folder within your Unity project, it replaced the images that Unity uses to package your game into its APK file. Each game on the OUYA marketplace needs to have its own icon, and the small app icon and the larger OUYA icon are great tools to help you make your game stand out.

Following the Unity Submission Checklist

In addition to the safe zone requirements, there are several technical criteria that your game must meet in order to be accepted. These criteria include, but are not limited to, the following:

· The game displays properly on 720dpi and 1080dpi

· The game must be playable offline

· The user must be able to easily figure out how to play

· The game cannot experience crashes or major gameplay bugs

While you're finalizing your game, it's a good idea to follow the full Submission Checklist, which can be downloaded from the Games page on the OUYA developer portal. This extensive checklist contains every requirement that games must meet to be accepted and includes several recommended features as well.

Now that you've polished your game's packaging, we'll focus on some advanced techniques for polishing the actual content. If you're working on your own project and don't feel the need to add anything more to it, you can skip right to the final Time for action – creating your game on the developer portal section—all of the following tutorials until the final one are assorted polishing techniques that you can experiment with at any time.

Polishing Unity projects in depth

This section will focus on several of the finer points of what makes up any game, including the title screen and end screen, tutorial, camera, and audio. While the scripting you've done so far has mostly focused on game logic and mechanics, the scripts you write in this section will provide your game with a cohesive structure and frame the user experience.

Creating your game flow

The marble game is perfectly playable right now, but there's no introductory title screen to prepare the player or a reset/death screen that appears if they roll off the side of the level. A title screen and end screen are the two ends to your game flow, and you should be able to continue to play the game through the loop regardless of victory or loss.

Time for action – creating a title screen

Your title screen is the first part of your game that your player will see, and it's the first part of the game flow we'll create. The title screen doesn't need much—we just want to present the title to the player and provide a button to start the game. Perform the following steps to create the title screen:

1. Create a new scene called TitleScreen in your RollingMarble project.

2. Click on the Main Camera object in the Hierarchy window to select it.

3. Change the Background color property to black so that it appears as shown in the following screenshot:

Your title so far is just a flat black screen, so what it needs now is a logo.

4. Using your preferred image manipulator (that is, Paint, Photoshop, or GIMP), create a logo for your game in your preferred size (this tutorial will use a logo approximately 600 pixels wide and 400 pixels tall).

5. Save your logo in a location that you will be able to find easily. As this is the first texture we're applying to our marble project, we should create a folder to hold it and all future textures.

6. Create a folder named Textures in your project's Asset directory.

7. Move the logo that you created into the new Textures folder of your Unity project.

2D images are displayed in Unity using an object type called GUI Texture, so we'll have to create one to display our logo. Alternatively, you can make use of one of Unity's core 2D features and drag-and-drop an image directly onto the scene to add it to your game world.

8. Open the Create menu in the Hierarchy window and select GUI Texture. By default, a new GUI Texture object will display the Unity logo and name itself UnityWatermark-small in the object hierarchy.

9. Click on the GUI Texture object in the hierarchy while it is selected to rename it. Name the object Title Logo.

10. Click-and-drag your texture from the Textures folder to the Texture property of the GUI Texture component of Title Logo to set it as the image to display.

11. You'll notice that your logo is most likely skewed and too small because it is still set to the small Unity watermark's pixel inset. To change this, set the W and H values to the pixel width and pixel height of your logo, respectively.

The X and Y values of the Pixel Inset property let you set where to draw the origin of the image. Unity's origins are in the upper-right corner of objects by default, but setting a negative inset of half of the width and height will draw it directly in the center. The watermark already had a centered inset, but we need to change it to match the new dimensions of our logo.

12. Set your Pixel Inset property's X and Y values to the negative of half of your logo's width and height, respectively. For instance, if your image is 600 pixels wide and 400 pixels high, set the X inset value to -300 and the Y inset value to -200.

13. Check your Game window to make sure your logo looks like it's positioned and scaled correctly. It should be the correct size and positioned directly in the center of the window.

You can see that the logo is positioned and scaled correctly because it's in the center of the Game window and the red circle is not stretched vertically or horizontally, as demonstrated in the following screenshot:

Now that the constraints are set properly, you can move the logo to wherever you want on the screen by editing its Transform component. Once you've done that, all you need to do is add a button.

14. Create a new C# script named StartButton.cs in your Code folder and attach it to the GUI Text object.

15. Open StartButton.cs in your code editor.

16. Add in a method to extend Unity's OnGUI function and add the following lines to it:

17.void OnGUI()

18.{

19. if(GUI.Button(new Rect(Screen.width / 2 – 50, Screen.height / 2 + 25, 100, 50), "Start"))

20. {

21. Application.LoadLevel("level1");

22. }

}

The numbers following the screen width and height variables represent the size of the button in pixels. We subtract 50 from the screen width and add 25 to the height, which are half of the values we used for width and height, respectively; this is to account for the positioning offset and to ensure that the button remains in the very center of the screen.

The GUI.Button function we called makes a simple button that displays whatever content you input in dimensions you define, and encapsulating it in an if statement allows us to easily handle a button press. In the case of our start button, we want it to load the level that contains our rolling marble, so we use Application.LoadLevel to load the level1 scene (or whatever your main scene is named).

23. Open the Build Settings window from Unity's File menu and click on Add Current to add the title screen to the build and make it accessible from other scenes. Ensure that it is the first item in the list so that it is loaded as soon as the application is started.

As you're changing the first scene, you need to change the position of OuyaGameObject. It's already been added to your game scene, but OUYA requires it to be in the first scene that's loaded.

24. Drag an instance of OuyaGameObject from your Project window into your TitleScreen scene.

25. Don't forget to delete OuyaGameObject in your game scene, as it is not necessary to be loaded twice.

What just happened?

Your game now begins with a title screen instead of throwing the player directly into the game, which also gives you a place to explain the rules or add paths to other options (we'll learn how to add a game tutorial later in this chapter in the Creating a tutorial section).

You used a GUI Texture object, which is a type of object that displays any image imported into Unity according to a defined size and pixel inset. You've now used both the GUI Texture and GUI Text objects, so think about which ones are better to use in different scenarios. Is the information that you're trying to convey to your player a number that they'll want to read or could it be represented as a picture or symbol instead?

You also had your first foray into Unity's built-in GUI system, which features a simple button set up in just a few lines of code. The Unity GUI is quick to set up but features multiple points of customization and advanced coding; if you want to dive further into Unity GUI techniques, check out the GUI scripting guide at http://docs.unity3d.com/Documentation/Components/GUIScriptingGuide.html.

Time for action – creating a loss screen

You can already exit the game by winning because we coded a collision with the cube at the other end of the level to result in the win screen being displayed. However, if the player accidentally rolls off the level, there's no way for them to get back up and try again.

To fix this, we'll create a loss screen that lets the user replay the game. The process of building our loss screen will follow our process of building the title screen, but we'll also create a trigger so that the loss screen is displayed when the marble falls off the level. Perform the following steps to create a loss screen:

1. Create a new scene called LossScreen in your RollingMarble project.

2. Set your preferred background color in the Inspector window for the Main Camera object in the Hierarchy window.

3. Create a new GUI Text object from the Create menu in the Hierarchy window.

4. Set the Text property of the new GUI Text object to read You Lose.

5. Set the font size of the GUI Text object to be 50.

6. Set the Anchor property of the text to middle center and the Alignment property to center.

7. Set the GUI Text object to display in your preferred color by changing the Color property.

Once you're finished, you should have something that looks like this:

The only addition left to make in this scene is to add a reset button that returns the user to the title screen.

8. Create a new script called ResetButton.cs and attach it to the GUI Text object.

9. Open ResetButton.cs in your code editor.

10. Add the following extension to OnGUI in the ResetButton.cs script:

11.void OnGUI()

12.{

13. if(GUI.Button(new Rect(Screen.width / 2 – 50, Screen.height / 2 + 25, 100, 50), "Reset"))

14. {

15. Application.LoadLevel("TitleScreen");

16. }

}

You'll notice that this code is the same basic code we used for the title screen button, but we changed the text of the button to read Reset and we told it to load the title screen instead of the game screen.

17. Open the Build Settings window from Unity's File menu and click on Add Current to add the loss screen to the build and make it accessible from other scenes.

The only thing left is to detect when the marble leaves the level, which we'll do by placing an invisible collider underneath the main platform.

18. Double-click on your level1 scene to open the main game area in your Unity editor.

19. Create a new cube and position it underneath the platform at 0, -7.5, 0.

20. We want to scale this cube into a platform that will catch the marble whenever it falls off of the main platform, so we'll need to make it relatively large. Increase the X scale to 50 and the Z scale to 30 so that it looks something like the following screenshot:

21. We want our lower platform to serve as a trigger but it doesn't need to be visible, so disable the renderer by unchecking the box at the top of the Mesh Renderer component window.

22. Check the Is Trigger box within the Box Collider component of the platform.

Your lower platform should now be an invisible trigger, only highlighted by a green wireframe box whenever it's selected in the object hierarchy.

All that's left is to code the collider trigger that will send our player to the loss/reset screen if they fall.

23. Create a new script called FallPlatform.cs and attach it to the invisible trigger object.

24. Open FallPlatform.cs in your code editor.

25. Add the following extension to OnTriggerEnter in the script:

26.void OnTriggerEnter(Collider collider)

27.{

28. Application.LoadLevel("LossScreen");

}

29. Test your code by running the game in the Unity editor and rolling the marble off of the platform. When the marble collides with the lower platform, it will activate your OnTriggerEnter extension and load the loss screen.

What just happened?

With the addition of a loss screen with a Replay button, your game loop is now complete. You added a loss condition that is triggered by an invisible nonphysical collision when the player rolls off the map, which sends the player to a loss screen where they can restart the game and attempt it again.

Your game can now be played as many times as the player wants in one play session, no matter how many times they win or lose. A solid game loop is crucial to a game's functionality, and your title and end screens take some focus away from the main game screen to help to break up the game into a typical beginning, middle, and end.

Creating a tutorial

The OUYA content guidelines require that your player be able to easily figure out how to play, and what better way to do that than with a tutorial. In this section, we'll go through the process of creating a tutorial with text instructions and a sample marble that can be moved around safely to test the controls.

Time for action – creating a tutorial scene

Perform the following steps to create a tutorial scene:

1. Create a new scene called TutorialScreen in your RollingMarble project.

2. Create a cube primitive and position it at 0, 0, 0.

3. Scale the cube to 10, 1, 10 so that it's a large enough surface for the player to roll around on.

4. Change the Y value of the Main Camera to 5 so that it can give the player an elevated view that's easier to observe the marble with.

Your scene should now look something like the following screenshot in the Scene window:

5. We don't want our player to be able to fall off the level and lose on the tutorial screen, so create four cube primitives and scale them into walls for the platform as shown:

6. The scene looks very dark in the camera preview. Add Directional Light by navigating to Hierarchy| Create menu with default settings.

7. Click-and-drag an instance of your Marble prefab from the Project window onto the new platform in your scene.

As you stored all of the properties of the marble in a prefab, no additional coding is necessary to make this marble work in the tutorial—in fact, if you press play right now, you can test the tutorial level by moving the marble around it.

8. The camera doesn't follow the marble yet, so apply the TrackingCamera.cs script to the Main Camera object in the Hierarchy menu.

9. Tell the camera which object to track by clicking-and-dragging the Marble object in the Hierarchy menu to the Object To Track variable field in the Inspector menu.

You've now got a good "sandbox" area for your player to get used to the controls of the game before reaching any objectives or pitfalls, but it could still use some explanatory text elements.

10. Create three new GUI Text objects and position them in the upper-right corner of the screen in a list format.

11. Change the text of the GUI elements to reflect the controls of the game. Make sure to color-coordinate each text element with its corresponding face button on the OUYA controller. When you're finished, your game screen should look like the following screenshot:

12. Make sure your new GUI elements are inside the safe zone. Build to OUYA and toggle the safe zone display to ensure that the game text still meets the content requirements.

The only thing left to do in our tutorial is code our exit functionality, which we'll trigger with the A button.

13. Create a new script called TutorialScript.cs and attach it to the current instance of your marble.

Tip

In the past, almost every change you've made has been applied to an object prefab so that the change is automatically applied on every other instance. However, we don't need to handle tutorial exiting when we're not in the tutorial, so in this case, we're only attaching TutorialScript.cs to the marble instance in the tutorial scene.

14. Open TutorialScript.cs in your code editor and add the following lines of code to the Update function:

15.void Update()

16.{

17. if(OuyaInput.GetButton(OuyaButton.A, OuyaPlayer.P01))

18. {

19. Application.LoadLevel("TitleScreen");

20. }

}

21. Add the TutorialScreen scene to the build by opening the Build Settings menu and clicking on Add Current.

What just happened?

You've taken your first steps into creating a tutorial for your game. Tutorials can be as simple or as complex as you want them to be; as long as they give a player an understanding of how to navigate your game world, you can convey that understanding in any way you want. This could simply be with a screen with 2D instructions, a more interactive demo like the one we created, or an entire level of the game with a special focus on teaching the player.

Time for action – linking your tutorial to your game

Your tutorial level is ready to play, but we still need a way to access it. We'll accomplish this by adding another button to your title screen directly underneath the start button. Perform the following steps to link the tutorial:

1. Open the scene named TitleScreen and double-click on the StartButton.cs script to open it in your code editor.

2. Add the following lines of code in your OnGUI function to create a tutorial button immediately below the start button:

3. void OnGUI()

4. {

5. if(GUI.Button(new Rect(Screen.width / 2 – 50, Screen.height / 2 + 25, 100, 50), "Start"))

6. {

7. Application.LoadLevel("level1");

8. }

9.

10. //create a tutorial button

11. if(GUI.Button(new Rect(Screen.width / 2 – 50, Screen.height / 2 + 125, 100, 50), "Tutorial"))

12. {

13. Application.LoadLevel("TutorialScreen");

14. }

}

Much like the start and reset buttons, the code for the tutorial button is uniform with the others; we only needed to edit the button text and the linked level name.

15. Press the play button in the Unity editor to test your scene and ensure that your tutorial button is displaying and functional.

What just happened?

Your tutorial scene was already capable of exiting the menu, but before you created a button to access it, the player had no way to get there in the first place. Now that you can get to the tutorial from the title screen and then back again, the tutorial is fully integrated into the game loop, and it now provides a way for new players to experiment without overwhelming them with challenges right off the bat.

Creating a following camera in Unity

One of the most important features to polish in your project is your camera. Game cameras are just as important as movie cameras because they frame everything the player sees in your game world. They can also feature smooth and intuitive controls that aid with immersion. So far, we've only covered fixed-position cameras that look at our target, but in this section, we'll create a third-person camera that follows our marble as it moves.

Time for action – creating a following third-person camera

A large portion of games use some variant of a following third-person camera, including marble-rolling games like the one we've been using as an example. These cameras typically follow the target around while maintaining a set distance and elevation.

First, we'll need to disable our current camera code, and then we can create a new script for our new camera code. Perform the following steps to create the camera:

1. Click on the Main Camera object in the Hierarchy window to display its properties in the Inspector window.

2. Uncheck the box next to the Tracking Camera component to disable it.

Disabled components are still present on objects, but they don't function as long as the checkbox is empty as shown in the following screenshot:

3. Create a new script called ThirdPersonCamera.cs in your Code folder, attach it to the Main Camera object in the Hierarchy window, and open it in your code editor.

The first thing we'll add to the camera is a function that runs for every frame and makes sure the camera is always following the marble.

4. Declare the following variable at the top of the ThirdPersonCamera script:

public GameObject target;

5. Create a new function called UpdatePosition in your ThirdPersonCamera script and define it as shown in the following code:

6. void UpdatePosition()

7. {

8.

}

9. Add the following lines of code to the function:

10.void UpdatePosition()

11.{

12. //set the camera's position to the target position

13. Vector3 targetPosition = target.transform.position;

14. transform.position = targetPosition;

15.

16. //move the camera away from the target according to an

17. //offset value

18. Vector3 forwardOffset = transform.forward * -5;

19. Vector3 upwardOffset = transform.up * 5;

20. transform.Translate(new Vector3(0, upwardOffset.y, forwardOffset.z, Space.World);

}

Let's examine the previous code, which is divided into two main steps: setting the camera to match the position of the target object and then moving the camera up and away from the target using two offset values.

The first step creates a Vector3 value to store the position of the target and then accesses the target through the GameObject target you declared earlier to retrieve the data. It then sets the camera's current position to the retrieved position as a starting point for the next step, the offset step.

First, we declare a Vector3 value for the forward offset, which we set to the camera's transform.forward property and multiply it by a magnitude of -5 (the number is negative because we're moving backwards away from the camera). We create an upwards offset in the same way, but we use transform.up instead of transform.forward so that the offset vector lies along the y axis. We then translate the camera by the Y value of the upward offset and the Z value of the forward offset in world space, leaving the X value at zero because we don't require any lateral movement.

Note

When defining relative space in a Translate operation, there are two options: Self and World. The Self space moves the object according to its local axes or the axes bound to the object's current orientation. The World space moves the object according to the global position axes, which means the direction of movement won't be affected by orientation.

As our new function positions the camera at a higher elevation than the marble, using our new positioning function alone leaves the marble out of frame, as shown in the following screenshot:

We should create another function that corrects the orientation of the camera so that it keeps the marble in the center of the screen. The easiest way to do this is with the LookAt function.

21. Add an UpdateRotation function to your ThirdPersonCamera script.

22. Add the following lines to the function:

23.void UpdateRotation()

24.{

25. //rotate the camera to look at our target

26. transform.LookAt(target.transform);

}

The last step before testing our camera is adding calls to our new functions in the Update function.

27. Add the following lines to the Update function in the ThirdPersonCamera script:

28.void Update()

29.{

30. UpdatePosition();

31. UpdateRotation();

}

Now we're ready to link the target to our public variable slot and test our camera's new functionality.

32. Set your marble as the target of ThirdPersonCamera by clicking-and-dragging it from the Hierarchy window to the Target field in the Main Camera object's Inspector window.

33. Press the play button in the Unity editor to test your new camera functions.

The camera should now follow the movement of the marble and keep it in the center of the view from an elevated third-person perspective, as shown in the following screenshot:

What just happened?

You've successfully implemented a following third-person camera that follows your player around the game world instead of being stationary. Your constantly updating offset means you can make your levels as big as you want without worrying that your marble will leave the camera's view boundaries.

Have a go hero – add rotation controls to your camera

Now that you've explored the camera functionality in a little more depth, you can start to apply that knowledge to build advanced camera scripts that present your game in just the way you want.

For a challenge, try editing your UpdateRotation function to enable user rotation control that orbits the camera around the target marble. Use your user knowledge from Chapter 4, Moving Your Player with Controller Input, and combine it with your new knowledge of offsets, rotation, and translation (in both World space and Self space).

Keep in mind that your input is still based on perspective, so the rotation of the camera won't affect the direction of movement. This is disorienting to some players, so if you decide to incorporate a rotating camera, make sure to change your marble's movement code to account for the camera's transform.forward vector.

Tip

Need a good jumping-off point? Unity's built-in third-person controller is a good place to get some ideas. Import it by clicking on Assets on the top toolbar and selecting Character Controller from the Import Package menu. You can then find the code files in theStandard Assets folder in your Project window and open them in your code editor to see how they work.

Time for action – adding audio to your game

No game is complete without audio, and fortunately it's relatively simple to integrate in Unity. In this tutorial, we'll demonstrate how to add audio to your Unity project by creating a sound effect that plays whenever a coin is collected. Perform the following steps to add audio:

1. Click on your Coin prefab in the Project window to display its properties in the Inspector window.

2. Click on the Add Component button in the Inspector window and select Audio Source from the Audio menu.

The Audio Source component has several properties that can be set in the Inspector window, as shown in the following screenshot:

The Audio Clip region is where you'll add the sound effect file that you want to play.

The Play On Awake checkbox, which is enabled by default, dictates whether the Audio Source component plays Audio Clip as soon as it's created.

3. We only want the coin's Audio Clip to play when it's collected, so uncheck the box next to Play On Awake.

Before you add in your first audio clip, it's a good idea to create a dedicated folder for it and other sound effects in your Assets directory.

4. Create a new folder in your Project window and name it Audio.

5. Click-and-drag any Unity-compatible sound effect to the Audio folder.

Note

Any audio file with the extension .aif, .wav, .mp3, or .ogg can be used as a sound effect or music track in the Unity engine. If you need to find sound effects, there are several free sound databases, such as http://www.freesound.org/, that game developers use for the same purpose.

6. Drag the audio file from your Audio folder in your Project window to the Audio Clip field in the Inspector window.

When your audio clip is loaded, you will see its name next to the Audio Clip label as well as a gray information box that says This is a 3D Sound., as shown in the following screenshot:

A 3D Sound in Unity is a sound that has a physical location in the game world. The distance from the player and the player's rotation affects the way the sound is played, enabling them to identify where something is around them or how far away it is.

In the case of our rolling marble game, we want our sound to play when the player picks up a coin, but the location of the sound doesn't matter. Therefore, we'll turn this audio clip into a 2D Sound by editing its import properties.

7. Click on your audio clip in the Project window to display its import settings in the Inspector window.

The 3D Sound checkbox is the second object from the top, as shown in the following screenshot:

8. Uncheck the box next to 3D Sound to use your sound effect as a 2D sound.

Audio Source on the Coin prefab is now ready to play your audio file, but we still have to script a trigger for it.

9. Create a new script called CoinSound.cs, attach it to your Coin prefab, and open it in your code editor.

10. Add a function in the script that extends Unity's OnTriggerEnter function as shown in the following code:

11.void OnTriggerEnter(Collider obj)

12.{

13.

}

Tip

You may recall that our Coin prefab's collider is marked as a trigger, so collisions are reported through OnTriggerEnter. If the collider wasn't marked as a trigger, you would extend OnCollisionEnter instead.

14. Add the following line to the OnTriggerEnter function as shown:

15.void OnTriggerEnter(Collider obj)

16.{

17. gameObject.GetComponent<AudioSource>().Play();

}

In the previous line, we use the GetComponent function on the Coin object to retrieve the audio source we added, and then we triggered it by calling the Play function.

18. Click on the play button in the Unity editor and roll the marble into a coin to hear your new sound effect.

What just happened?

You've now successfully added an Audio Source component to an existing prefab and triggered Audio Clip to play with a script. Now that you have done this, you can add sound effects and music tracks to anything using the same method. Try having your menu buttons make a click noise, or add a sound effect to your marble that plays whenever the player presses the jump button.

If you're adding music to your game, try using the Loop property in the Audio Source component window so that the music plays as long as your player is in the game even if the song ends.

Packaging your project for submission

Publishing a piece of art for the entire world to see is intimidating, and games are no exception. Once you're completely satisfied with the feel, aesthetic, and general play style of your game, you're ready to package it for submission to the OUYA marketplace where OUYA players all around the world can download and experience your game.

The last thing you have to do before submitting your game is to create an entry for it on the OUYA developer portal, which will allow you to check the status of your review and publish it when it is accepted. It's also where you will write the description of your game, assign it a content rating, and include any notes to the reviewers that you'd like them to read.

Time for action – creating your game on the developer portal

The first time you create a game on the developer portal, you'll have to set up your account, which includes completing your developer profile and the marketplace agreement. Perform the following steps to create the game:

1. Open a web browser and navigate to the link https://devs.ouya.tv/developers/games.

2. Click on Add a Game.

The portal will automatically redirect you to a window where you can see what developer information still needs to be completed.

The top two elements, Developer Profile and Marketplace Agreement, are required for any game to be submitted for publication on the OUYA marketplace. The last two elements, Payment Info and Tax Documents, are only required if your project contains any sort of sale as an in-app purchase.

3. Open the Developer Profile link in a new window and fill out all of the required information on the following page.

4. Click on Save and close the window.

5. Refresh the Developer Info window and ensure that the Developer Profile section is now marked as Done.

6. Open the Marketplace Agreement link in a new window and read the provided document. Mark the checkbox if you agree to the terms and click on Agree.

7. Click on Save and close the window.

At this point, you can either continue with the Developer Info page and complete the remaining steps that are required for a game with in-app purchases, or if your game is completely free, you can continue to submission.

8. Navigate to the following link:

https://devs.ouya.tv/developers/games/new

9. Fill in the required information, review each mandatory checkbox, and double-check to make sure your Android package name matches your bundle ID in your Unity project (something like com.YourSite.YourGame).

10. When you're ready, press Create. You will be taken to a page where you can enter more information about your game such as a description or input notes for the reviewer.

11. After inserting all the required information, it's now ready for the game's APK file. Whenever the game is final and ready to be published, you can upload it on this page.

That's it! You've taken your OUYA experience to the end of the line. You may not be ready to upload your first game right after finishing this chapter, but as soon as you're ready, return to this chapter and use it as a guide to share your creation with the world.

What just happened?

The OUYA Developer Portal is the final destination for the projects that you're ready to publish and potentially sell. The submission process is subject to change as well as the content guidelines, but the latest steps and requirements will always be available from the Developer Portal site, so make sure that you examine the resources and checklists there before adding games to your My Games list for review. Typically, games take three days to receive a review, but that timeline may change depending on how many submissions they receive in addition to your own. The review process is generally lenient, but the OUYA team will let you know if you need to alter any content before it's allowed on the marketplace.

Pop quiz – the end of the beginning

Q1. Which of the following criteria is not required by the OUYA Content Submission Guidelines?

1. All vital game elements within the "safe zone"

2. Multiplayer functionality

3. No hate speech or derogatory content

4. Game doesn't crash

Q2. Where should you instantiate the OuyaGameObject prefab that's necessary for all OUYA games made in Unity?

1. In the final scene

2. In the title screen scene

3. In the game scene

4. In the first scene to be loaded

Q3. If you want to move an object through the game world based on its orientation, which space should you specify in the Translate function?

1. World space

2. Self space

3. Scene space

4. Game space

Summary

In this chapter, you took an unfinished game prototype, polished it, and prepared it for publishing by making sure it met all of the OUYA submission guidelines. You made sure that all game elements are visible on the screen by containing them within the safe zone.

You also created two unique icons for your game that will distinguish it and serve as a cover for it on the OUYA marketplace and on the OUYA menu.

You also learned how to present your game cleanly with a title screen, end screen, and tutorial screen. You also learned how to use GUI Texture objects and GUI buttons, which you can combine with your knowledge of GUI Text to create any user interface you can imagine. You also learned how to play audio in your games using the Audio Source object type.

You've now experienced every facet of game development for the OUYA in Unity, from setting up a project to submitting it for publication.

The next chapter will be focused on ways that you can keep growing and lay a self-sustainable foundation of development knowledge so that if you can think it, you can create it.