Intermediate Unity 3D for iOS: Part 1/3

Game Assets

In this section, you’ll walk through the process of importing an asset into Unity, discover how Unity handles assets, and quickly cover what Materials are and what role they play in Unity.

Looking at the list of features from the design section of this tutorial, you have a pretty good handle on what Assets you’ll require. Imagine your designer has created the assets for you, including the images and fonts necessary to create the main menu screen:

Here the user can quickly initiate a game and see their progress. Note that social networking is not implemented in this tutorial.

Your designer has also created some textures and 3D models for the main level, which will look like this:

He has delivered all of these assets as a zip file, which you can download here. After you unzip the file, you should see a directory of textures, fonts, images, and models like this:

Now let’s import a few of the assets into your project. On the Project panel in Unity, click on the Create button and select Folder. Create the structure as shown below:

Start with the GUI graphics you’lll be using in this tutorial. Drag all the files in the /NBNAssets/GUI folder into the /NothingButNet/GUI folder. These are the graphics that you will be using for your GUI, including the icon and splash screen.

Unity will automatically detect the type of asset you’re importing and set some default properties. In this case, Unity assumes that the .png files you’re importing will be used as 3D model textures and apply compression to them. This will result in a reduction in image quality when rendering them as GUI Textures, which you don’t want! :]

You’ll need to go through each image and set the type to GUI. To do this, select an item, navigate to the Inspector panel and select GUI option from the Texture type dropdown (as shown below).

Repeat the above for each of your images.

Next, import the textures for your models. Drag the .png files from the /NBNAssets/Textures folder into the /NothingButNet/Textures folder in Unity. Since these are textures for your 3D models, you can leave the default settings as they are.

Now import the fonts. Drag the .ttf files from the /NBNAssets/Fonts folder into the /NothingButNet/Fonts folder in Unity. These fonts come from www.dafont.com (http://www.dafont.com/score-board.font by Bou Fonts, and http://www.dafont.com/varsity.font by Unknown).

Finally, import the models. Drag the .fbx files from the /NBNAssets/Models folder into the /NothingButNet/Models folder in Unity.

Note: The models for this game were created in the open source (free) 3D creation tool Blender and exported as FBX. Unity provides extensive support for a wide array of media formats for audio, graphics, and 3D assets beyond just FBX files – for more information on the file formats supported by Unity, please refer to Unity’s importing guide.

After adding the models, you should check the textures are correctly associated with your models. To do this, click on each model and inspect in the Preview pane of the Inspect panel. If you click on the model and move the mouse around, you can rotate the model to inspect it from all sides.

If your models are grey, then it’s most likely that the link between the Material and Texture is broken. I’ll explain how this linking works and how you can fix it in the next section – materials and textures!

Materials and Textures

Models are associated with Materials. Materials are assigned a Shader (Shaders are small prgrams in the graphics pipeline that determine how the models vertices are positioned and how the model is rasterized to the 2D screen) which determines how Unity renders the image based on lighting, normal mapping, and pixel data. Some Shaders can be processor intensive, so the best idea here is to assign Shaders specifically for mobile to your Materials.

Open up the Materials folder found under Models. Here you can find the materials for each model. Select each Material in this list and change the Shader from Diffuse to Mobile/Diffuse.

If your texture hasn’t been associated with the material, then you’ll see a blank gray spot in the box where the image should be (there’s a “Select” button in the bottom right here). To associate the correct texture, you can click the Select button to choose a texture, or simply drag the texture onto this spot.

For the player, the material should look something like the following:

For the HoopTex Material, you’ll require transparency to be set. Select this material and choose the Transparent/VertexLit Shader.

There’s just a few things left to do in this section before you wrap things up. There is no standardized scaling between 3D modeling tools, so to get the models to a reasonable size, select each of them and update their scale factor from 0.01 to 1 as shown below:

Finally, open up the Player model and you’ll notice a few child elements, as below:

Some of these child elements will differ depending on what 3D modeling tool you are using. In Blender, the BPlayer and BPlayerSkeleton are the objects, the BPlayer (under BPlayerSkeleton) is the mesh data that describes the geometry of the player, and finally the items below that are animation frames, which will be described in further detail once you start wiring up your player!

Setting up the Scene

In this section you will visually setup the scene of your game. The goal here is to get some hands on experience working with the Unity scene environment, discover some more Components that Unity offers, and finally end up with a scene ready for your game.

Before you start visually designing your scene, consider the requirements from the design stage. You’ll have the camera facing side on to the court and the player, and positioned so that one of the hoops on the court can be seen.

Your goal is to arrange the scene so it looks somewhat like the following:

However, this is easier said than done! :]

This is your first chance to start playing around with the Scene, Camera, and Hierarchy panels in Unity. Perform the following steps:

• Select the Main Camera in the Hierarchy folder, and set X=6.5, Y=7, Z=14, and the Y-Rotation to -180.
• Drag a scene model into the Hierarchy panel, and set X=0, Y=0, and Z=0. You should see it appear in the Camera window!
• Drag a player model into the Hierarchy panel, and the Y-rotation to 90.

Now that you have some basic objects appearing, experiment moving the player around the scene using the Scene panel. Select the player, and drag it around the scene using the X, Y, and Z arrows that appear next to the player when it’s selected. You can also change the perspective of how you’re looking at the scene using the perspective switcher in the upper right of the scene panel.

At this point add the remaining objects – the basketball and the hoop. See if you can arrange them into roughly the right spot yourself using the Scene and Hierarchy panels – if you get stuck, you can always set their position back to the center (X=0, Y=0, Z=0).

While you’re playing around with this, you might notice that whatever you click on in Hierarchy is highlighted in the Scene. You can also easily zoom in on an object in the scene view – for example, try double clicking on the Player to center it.

If it isn’t centered the way you want it, use your mouse wheel to zoom in or out, drag the view in the window with the mouse, or hold down the Alt/Option key to rotate around and see things from another angle.

Note that none of these operations affect the actual position of objects, it’s just to help you get a better view.

Now that you have your scene roughly set up, time to configure the scoreboard!