Make games with Unity [Part 2: Customising scenes and deploying to your device]

In the first part, you learned the basics of Unity views and editors, also, we learn how to configure a blank project composed of two simple scenes with two directional transitions using the LoadLevel API provided by Unity scripting SDK.

This is the second part, here you will revive the scenes you have made previously using cool assets, and also, you will build and deploy the two-scenes project to iOS.

Without further ado, let’s do this!

Before we start, make sure to:

• Download the ready to go project to pick up where we left off in the first part, or Read the first tutorial to build the project from scratch for better understanding.
• Download the latest Unity version(version 5.0.0 while writing this tutorial).

Unity 5, a new level for better games experience

Since Unity released the 4.3 version in late 2013 with the 2D games support and the 4.6 version with the fabulous new GUI, all Unity developers were waiting for a bigger release from the folks of the biggest game engine who surely have been working hard to bring out the Unity 5 with a set of enormous new features and enhancements, such as the audio mixer, the WebGL preview and a gorgeous updates to the animation system (I recommend you learn more about all Unity 5 new features from the official website).

Unzip the project(if you downloaded it) and open it with Unity 5.

Note: Unity may notify you of some updates the first time you open it from the 4.x to the 5 version, something like the following alert. Don’t worry, it’s safe to upgrade 🙂

The first thing you will do is to skin your scenes with some cool assets, download them here.

Let’s add the downloaded assets to the project. In the ‘Project’ view, right clic the Assets folder and select Create\Folder from the menu, a new folder is added, name it ‘Textures’.

Now unzip the assets folder you just downloaded, select all the images inside and drag them to the ‘Textures’ folder in Unity.

Start by skinning the first scene, select the ‘Assets’ folder in the ‘Project’ view then double click the ‘Welcome_Scene’ file. You will notice all the scene game objects are now loaded in the Hierarchy view.

Select the ‘Canvas’ object from the ‘Hierarchy’ view, all attached components will show up in the ‘Inspector’ view, click on the “Add Component” button and from the drop down menu, select UI\Image.

Nice, a white default background image is now added to the canvas, let’s change it to the one you imported earlier to your project. From the Image component, locate the ‘Source Image’ property and click on the small rounded button on its right.

A list of all assets will be displayed, select the sprite named “bg”.

Cool, now let’s change the default background of the button, select it from the ‘Hierarchy’ view and from the Image component, click the small rounded button on the right of the Source Image property.

From the list of sprites, select “playbtn”. The button dimension may look stretched, so make sure to set it to its original size by clicking the “Set Native Size” button from the Image component in the ‘Inspector’ view, like shown below.

Last thing before you move to the next scene is to remove the default text in the button and also resize and center it inside the canvas. To do so:

1/ Select the ‘Text’ property of the button from the ‘Hierarchy’ view, then remove the text value in the ‘Text’ component from the Inspector.
2/ Select the button from the ‘Hierarchy’ view, locate the ‘Transform’ component in the ‘Inspector’ view, and set its width to 466, height to 230.
3/ Select the second tool in the ‘Transform’ toolbar and manually center the button in the canvas.

Here is what the scene will look like

Save your work in this scene by selecting ‘File\Save Scene’ from the menu).

Now it’s time to move to the next scene. To open it, double click on the ‘Main_Scene’ file from the ‘Assets’ folder in the ‘Project’ view.

Then, select the ‘Canvas’ object from the ‘Hierarchy’ view, click on the ‘Add Component’ button in the ‘Inspector’ view and select ‘UI\Image’ from the list (same way you did for the previous scene).

Next, change the ‘Source Image’ property sprite to the image named ‘bg’ (select the small rounded button to the right of the ‘Source Image’ property and select the sprite named ‘bg’ from the list).

Now select the button from the ‘Hierarchy’ view, locate the ‘Image’ component and change the ‘Source Image’ sprite to ‘BackBtn’, like illustrated below.

Always from the ‘Image’ component of the button, select the ‘Set Native Size’ button. And from the ‘Transform’ component, change the Pos X to 96, Pos Y to 273, width to 81 and height to 83.

Also, make sure to remove the text of the button the same way you did for the button in the previous scene (select the ‘Text’ property from the ‘Hierarchy’ view and remove the text value in the ‘Text’ component from the ‘Inspector’ view).

So far so good, I think it will be nice to add a button to manage the sound on the scene later for the game. Don’t you think ?

Let’s add a new button to the scene, from the ‘Hierarchy’ view, select Create\UI\Button.

A new button is added to the scene, select it (either from the ‘Scene’ or from the ‘Hierarchy’ view) and from the ‘Image’ component in the ‘Inspector’ view, change its source image to ‘MusicOnBtn’ from the sprites list, like below.

Next, click on the ‘Set Native Size’ button from the ‘Image’ component and set the button Pos X to 402, Pos Y to 247, width to 81 and height to 83 from the ‘Transform’ component.

Finally, select the button ‘Text’ property from the ‘Hierarchy’ view and remove the ‘Text’ component’s value from the ‘Inspector’ view.

So far, the scene should look almost like the following.

Note: Feel free to change the game objects names in the ‘Hierarchy’ view, it’s best practice to attribute them with easily referenced names so that you know what each object is responsible for.

Now, you gonna add some sound so that it will be played when you enter the scene 🙂

First, create a new folder under ‘Assets’ in the ‘Project’ view, the same way you did for the ‘Textures’ folder, name it ‘Sounds’.

Next, download the sound file, Unzip and drag it to the ‘Sounds’ folder in Unity.

Note: The sound file you used here is a .wav file, you can use other extension of sound files like .mp3, but it’s recommended (for quality purposes) to work with uncompressed formats (like .wav) and let Unity do the encoding work for you. You can learn more about Unity audio files here.

Select the ‘Main Camera’ Game Object from the ‘Hierarchy’ view, and click the ‘Add Component’ button from the ‘Inspector’ view. From the drop down list, select ‘Audio\Audio Source’.

Next, drag the audio file from the ‘Sounds’ folder in the ‘Project’ view to the ‘AudioClip’ property in the ‘Inspector’ view.

At this stage, try to run the project to make sure the sound is playing correctly.

Before you deploy the two re-skinned scenes to iOS, let’s put some Anchor constraints to ensure the buttons positions will remain the same on different screen size resolutions.

Select the back button and set its anchor presets to left-top.

Also, select the music button and set its anchor presets to right-top.

If you try to manually resize the screen, you will notice that both buttons keep their positions regardless the screen size.

You are done with this scene, select ‘File\Save Scene’ from the menu, and double click the ‘Welcome_Scene’ file from the Assets folder in the ‘Project’ view to open it.

You will need the button to remain always in the center of its container, so select it from the ‘Hierarchy’ view and set its Anchor presets to center-middle.

That’s all, save the scene and run the project. You can experiment the Anchor presets results by changing the screen sizes from the ‘Game’ view, you should notice all buttons keep their positions regardless of the screen size.

Now it’s time to deploy to your iOS device 🙂

Select ‘File\Build Settings’ from the menu.

The ‘Build Settings’ window will show up, make sure that ‘iOS’ is the selected platform. If not, select iOS from the ‘Platform’ list in the right and click on the ‘Switch Platform’ button.

Next, select the ‘Player Settings’ button, and from the ‘Inspector’ view, uncheck ‘Portrait’ and ‘Portrait Upside Down’ orientations. We will support only landscape orientations for this project.

Finally, click the ‘Build’ button located in the ‘Build settings’ screen.

A new window will appear to name your project and locate a place where to save it. Let’s call it ‘UnityBasics’, click ‘Save’.

Unity will compile and generate a ready to go Xcode project for you, locate it and double click the ‘Unity-iPhone.xcodeproj’ file to open it on Xcode.

Select your device and run the project, have fun with your work so far 😉

Note: If you got issues trying to run the project on iOS simulator, then you need to deploy your project with the Simulator SDK instead of the default Device SDK and Build your project again.

That’s it folks, here you can download the completed project for this part. In the next tutorial, you will implement a custom menu, animate the buttons while moving between the scenes, and also toggle the sound play.

Stay tuned and feel free to leave a comment below, I’d love to hear from you 🙂