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:

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 🙂

Unity Project Upgrade Required

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.

Import textures 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.

Add Image component to the canvas

Select to view in better resolution

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.

Add a background image for the canvas

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.

change a button texture in Unity

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.

Set native size will reset the image to the original sprite size.

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

Welcome_Scene after texturing

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.

Change the button texture (Main_Scene)

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.

The Transform component

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.

Add a button from the Create menu in the Hierarchy view

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.

Change the button texture in the Main_Scene

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.

Sounds files

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.

Attach Audio to GameObject in Unity

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.

Setting anchor presets in Unity

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.

manual preview

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.

How to center a button with Anchor presets in Unity

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.

Switch Platform in Unity

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.

Player Settings in Unity

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.

Unity generates a ready to go Xcode project for your game

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

My Unity project on landscape orientation on iPhone

My Unity project on landscape orientation on iPhone

Your Unity project on iPhone landscape orientation

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.

Deploy to iOS with the Simulator SDK in Unity

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 🙂

About Malek

Malek is a passionate iOS Engineer and Founder of Medigarage Studios, a small mobile games startup. I started my iOS adventures in 2011 and since then I fell in love with it. You can hire me for your project, get in touch by Email to discuss further details. Also, feel free to reach out on Twitter and Google+.

  • Denis Mahony

    Great tutorial again. Thanks 🙂

    Could you review this bit ?

    ” 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.”

    I followed this and the button was too big. It was almost the size of the image.

    I adjusted it to Width 80 and Height 110 to make it the size of the button in your scene.

    And set scale to:
    Scale: X = 2.3 Y = 0.85 Z =1

    I also had to adjust the ‘back’ button manually to get it to the required size.

    This stage certainly puts a gloss on the first tutorial. Thanks again.



  • Malek_T

    Hi Denis 🙂
    Thanks for your notes. Actually, if you click the ‘Set Native Size’ button in the inspector, the button will be resized to the imported image size, so if you click that, make sure to manually adjust the width and height manually. It was intended to make that button big size inside the scene. Of course, if you believe width=466 and height=230 are too much for the button, then feel free to resize it to match your preferences 🙂