{"id":3554,"date":"2020-05-07T22:12:20","date_gmt":"2020-05-07T12:12:20","guid":{"rendered":"https:\/\/learntodroid.com\/?p=3554"},"modified":"2020-08-18T16:11:31","modified_gmt":"2020-08-18T06:11:31","slug":"how-to-make-a-simple-2d-android-game-with-unity","status":"publish","type":"post","link":"http:\/\/10.0.0.14:32769\/how-to-make-a-simple-2d-android-game-with-unity\/","title":{"rendered":"How to Make a Simple 2D Android Game with Unity"},"content":{"rendered":"\n<p>A lot of the most successful Android apps on the Google Play Store are games. Getting started with Android game development and building your first game can be daunting as there are many game engines to choose from such as Unity, libGDX, Unreal Engine and Corona SDK among others that require you to use different programming languages.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"459\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-GemBuster-Game-Screenshot.png\" alt=\"\" class=\"wp-image-3804\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-GemBuster-Game-Screenshot.png 500w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-GemBuster-Game-Screenshot-300x275.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><figcaption>Screenshot of the GemBuster game we will be creating in this tutorial<\/figcaption><\/figure><\/div>\n\n\n\n<p>I have put together this tutorial on how to make a simple two dimensional game for Android using the popular game engine Unity. The game we will make in this tutorial will be GemBester which is a stripped down clone of the match 3 casual game Bejewelled by PopCap Games. In addition to the gameplay the game will contain 2D graphics, sound effects and a scoring system.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/20200502193217_1-1024x576.jpg\" alt=\"\" class=\"wp-image-3646\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/20200502193217_1-1024x576.jpg 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/20200502193217_1-300x169.jpg 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/20200502193217_1-768x432.jpg 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/20200502193217_1.jpg 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Screenshot of Bejeweled 3, a match 3 game by PopCap Games<\/figcaption><\/figure>\n\n\n\n<p>Read on and we will cover some of the benefits of using the Unity game engine for Android game development before we start building our first game for Android using Unity.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What are the Benefits of Using Unity for Android Game Development?<\/h2>\n\n\n\n<p>As mentioned in the introduction we will be using the Unity game engine in this tutorial for building a simple 2D game for Android.<\/p>\n\n\n\n<p>The Unity game engine is feature rich easy to use game engine that will improve your productivity on building your game.<\/p>\n\n\n\n<p>The Unity game engine has mutli-platform support, this allows you to create your game once and deploy it across many different platforms. Some of the platforms supported by Unity includes:<\/p>\n\n\n\n<ul><li>Desktop platforms such as Windows, Mac and Linux<\/li><li>Mobile platforms such as Android and iOS<\/li><li>Console platforms such as PS4, Xbox One and Nintendo Switch<\/li><\/ul>\n\n\n\n<p>Unity offers a generous free tier for using the game engine even for commercial purposes which reduces the upfront costs for development. Providing you make less than $100,000 in revenue or funding from the use of the Unity game engine you will qualify to use the free to use Unity personal license.<\/p>\n\n\n\n<p>If you create a well received game and your revenue grows the pricing for the Plus and Pro licenses at $40 per month and $150 per month respectively are quite reasonable for the value you get.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"484\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Plans-and-Pricing-1024x484.png\" alt=\"\" class=\"wp-image-3636\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Plans-and-Pricing-1024x484.png 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Plans-and-Pricing-300x142.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Plans-and-Pricing-768x363.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Plans-and-Pricing.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Unity also has an <a rel=\"noreferrer noopener\" href=\"https:\/\/assetstore.unity.com\/\" target=\"_blank\">Asset Store<\/a> where you can purchase assets for use in your game such as 2D graphics, 3D graphics, audio files and much more to help you save on development costs.<\/p>\n\n\n\n<p>Another strength of Unity is such as popular game engine there are many free resources such as tutorials and YouTube videos available online to help you were you may get stuck using it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Install Unity<\/h2>\n\n\n\n<p>In this section of the post I will take you through how to install the Unity game engine to allow you to start making games for Android.<\/p>\n\n\n\n<p>We will be using the Unity Personal license for an Individual which is free to use providing you make less than $100,000 in revenue or funding from game development.<\/p>\n\n\n\n<p>First we will <a rel=\"noreferrer noopener\" href=\"https:\/\/store.unity.com\/#plans-individual\" target=\"_blank\">navigate to the Unity Store<\/a> and select the &#8220;Get started&#8221; button under the Unity Personal license for an Individual.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"666\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Select-Unity-Personal-Free-Get-Started-1024x666.png\" alt=\"\" class=\"wp-image-3559\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Select-Unity-Personal-Free-Get-Started-1024x666.png 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Select-Unity-Personal-Free-Get-Started-300x195.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Select-Unity-Personal-Free-Get-Started-768x500.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Select-Unity-Personal-Free-Get-Started.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Next in the &#8220;First-time users&#8221; section select the &#8220;Start here&#8221; button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"667\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Select-First-Time-Users-Start-Here-1024x667.png\" alt=\"\" class=\"wp-image-3560\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Select-First-Time-Users-Start-Here-1024x667.png 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Select-First-Time-Users-Start-Here-300x196.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Select-First-Time-Users-Start-Here-768x500.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Select-First-Time-Users-Start-Here.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Review the terms presented then select &#8220;Agree and download&#8221; button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Review-Terms-and-Select-Agree-and-download-1024x634.png\" alt=\"\" class=\"wp-image-3561\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Review-Terms-and-Select-Agree-and-download-1024x634.png 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Review-Terms-and-Select-Agree-and-download-300x186.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Review-Terms-and-Select-Agree-and-download-768x476.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Review-Terms-and-Select-Agree-and-download.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This will start the download of the UnityHubSetup application.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"420\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Download-UnityHubSetup-Application.png\" alt=\"\" class=\"wp-image-3563\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Download-UnityHubSetup-Application.png 960w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Download-UnityHubSetup-Application-300x131.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Download-UnityHubSetup-Application-768x336.png 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n\n\n<p>Once the download is complete, run the UnityHubSetup Application. Install the latest version of Unity using UnityHub by selecting the &#8220;Install&#8221; button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1010\" height=\"664\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Hub-Install-Unity.png\" alt=\"\" class=\"wp-image-3565\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Hub-Install-Unity.png 1010w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Hub-Install-Unity-300x197.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Hub-Install-Unity-768x505.png 768w\" sizes=\"(max-width: 1010px) 100vw, 1010px\" \/><\/figure>\n\n\n\n<p>Next we will create a Unity ID, then we will sign in to your Unity ID in UnityHub while the latest version of Unity is being installed. After you have signed in select continue and wait for Unity to finish installing.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"705\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Create-Unity-ID-1024x705.png\" alt=\"\" class=\"wp-image-3566\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Create-Unity-ID-1024x705.png 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Create-Unity-ID-300x206.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Create-Unity-ID-768x528.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Create-Unity-ID.png 1071w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Once Unity has finished installing select the &#8220;Launch Unity&#8221; button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"707\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Select-Launch-Unity-Button-1024x707.png\" alt=\"\" class=\"wp-image-3574\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Select-Launch-Unity-Button-1024x707.png 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Select-Launch-Unity-Button-300x207.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Select-Launch-Unity-Button-768x530.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Select-Launch-Unity-Button.png 1071w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This will load the Unity editor with a sample project. For now we will close the Unity editor and in the next section of this tutorial we will create our first project in Unity.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"556\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Load-Sample-Project-1024x556.png\" alt=\"\" class=\"wp-image-3576\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Load-Sample-Project-1024x556.png 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Load-Sample-Project-300x163.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Load-Sample-Project-768x417.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Load-Sample-Project.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Creating your First Unity Project<\/h2>\n\n\n\n<p>In this section we will be creating our first unity project for our 2D puzzle game &#8220;GemBuster&#8221;.<\/p>\n\n\n\n<p>To create a unity project, open the Unity Hub application. Navigate the Projects section and select &#8220;NEW&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"965\" height=\"593\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Hub-Projects.png\" alt=\"\" class=\"wp-image-3580\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Hub-Projects.png 965w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Hub-Projects-300x184.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Hub-Projects-768x472.png 768w\" sizes=\"(max-width: 965px) 100vw, 965px\" \/><\/figure>\n\n\n\n<p>Select the 2D Template, enter the Project Name as &#8220;Gem Buster&#8221; and select the &#8220;Create&#8221; button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"848\" height=\"486\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Hub-Create-New-Project.png\" alt=\"\" class=\"wp-image-3581\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Hub-Create-New-Project.png 848w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Hub-Create-New-Project-300x172.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Hub-Create-New-Project-768x440.png 768w\" sizes=\"(max-width: 848px) 100vw, 848px\" \/><\/figure>\n\n\n\n<p>This will create and load the Gem Bester Unity project in the Unity Editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"555\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Gem-Buster-Unity-Project-in-Unity-Editor-1024x555.png\" alt=\"\" class=\"wp-image-3582\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Gem-Buster-Unity-Project-in-Unity-Editor-1024x555.png 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Gem-Buster-Unity-Project-in-Unity-Editor-300x163.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Gem-Buster-Unity-Project-in-Unity-Editor-768x416.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Gem-Buster-Unity-Project-in-Unity-Editor.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Configuring Unity Project to Build for Android<\/h2>\n\n\n\n<p>Next we will set up our Unity environment to allow us to build Android apps.<\/p>\n\n\n\n<p>Open up Unity Hub then navigate into the &#8220;Installs&#8221; section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"963\" height=\"585\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Hub-Installs.png\" alt=\"\" class=\"wp-image-3585\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Hub-Installs.png 963w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Hub-Installs-300x182.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Hub-Installs-768x467.png 768w\" sizes=\"(max-width: 963px) 100vw, 963px\" \/><\/figure>\n\n\n\n<p>Select the 3 veritical dots, and select &#8220;Add Modules&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"965\" height=\"589\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Installs-Add-Modules.png\" alt=\"\" class=\"wp-image-3586\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Installs-Add-Modules.png 965w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Installs-Add-Modules-300x183.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Installs-Add-Modules-768x469.png 768w\" sizes=\"(max-width: 965px) 100vw, 965px\" \/><\/figure>\n\n\n\n<p>Check the &#8220;Android Build Support&#8221; module and check the &#8220;Android SDK &amp; NDK Tools&#8221; module and the &#8220;OpenJDK module&#8221; and select the &#8220;Next&#8221; button and follow the prompts to install the modules.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"964\" height=\"590\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Android-Build-Support-Module-1.png\" alt=\"\" class=\"wp-image-3590\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Android-Build-Support-Module-1.png 964w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Android-Build-Support-Module-1-300x184.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Android-Build-Support-Module-1-768x470.png 768w\" sizes=\"(max-width: 964px) 100vw, 964px\" \/><\/figure>\n\n\n\n<p>Once the download is completed, open your Unity project in the Unity Editor and open the build settings by selecting &#8220;File&#8221; then &#8220;Build Settings&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"554\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Configure-Build-Settings-1024x554.png\" alt=\"\" class=\"wp-image-3584\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Configure-Build-Settings-1024x554.png 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Configure-Build-Settings-300x162.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Configure-Build-Settings-768x415.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Configure-Build-Settings.png 1032w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Select the &#8220;Android&#8221; platform then select &#8220;Switch Platform&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"609\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Android-Build-Settings-Switch-Platform.png\" alt=\"\" class=\"wp-image-3592\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Android-Build-Settings-Switch-Platform.png 624w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Android-Build-Settings-Switch-Platform-300x293.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<p>Select a connected device from the Run Device drop down list and select &#8220;Build And Run&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"609\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Android-Build-Settings-Build-and-Run-1.png\" alt=\"\" class=\"wp-image-3595\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Android-Build-Settings-Build-and-Run-1.png 710w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Android-Build-Settings-Build-and-Run-1-300x257.png 300w\" sizes=\"(max-width: 710px) 100vw, 710px\" \/><\/figure>\n\n\n\n<p>Enter a name for the APK and select Save<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"945\" height=\"533\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Build-Android-APK.png\" alt=\"\" class=\"wp-image-3594\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Build-Android-APK.png 945w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Build-Android-APK-300x169.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Unity-Build-Android-APK-768x433.png 768w\" sizes=\"(max-width: 945px) 100vw, 945px\" \/><\/figure>\n\n\n\n<p>This will run the Unity project on your Android device as per the photo below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"497\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/20200426_163754-1024x497.jpg\" alt=\"\" class=\"wp-image-3598\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/20200426_163754-1024x497.jpg 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/20200426_163754-300x146.jpg 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/20200426_163754-768x373.jpg 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/20200426_163754.jpg 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Creating GemBuster (A Bejeweled Clone)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">What We Will Create<\/h3>\n\n\n\n<p>GemBuster is a simple clone of the casual match 3 game Bejeweled created by PopCap Games which is also responsible for creating other popular casual games such as the Plants vs. Zombies Series and Peggle.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"container-lazyload preview-lazyload container-youtube js-lazyload--not-loaded\"><a class=\"lazy-load-youtube preview-lazyload preview-youtube\" href=\"https:\/\/www.youtube.com\/watch?v=itZKKGjBOLY\" data-video-title=\"Bejeweled 3 Classic Mode gameplay\" title=\"Play video &quot;Bejeweled 3 Classic Mode gameplay&quot;\">https:\/\/www.youtube.com\/watch?v=itZKKGjBOLY<\/a><noscript>Video can&#8217;t be loaded because JavaScript is disabled: <a href=\"https:\/\/www.youtube.com\/watch?v=itZKKGjBOLY\" title=\"Bejeweled 3 Classic Mode gameplay\">Bejeweled 3 Classic Mode gameplay (https:\/\/www.youtube.com\/watch?v=itZKKGjBOLY)<\/a><\/noscript><\/div>\n<\/div><figcaption>Sample Bejeweled 3 Gameplay Footage<\/figcaption><\/figure>\n\n\n\n<p>The GemBuster game will feature an 8 by 8 grid of gems that will start in a random order. The player will be able to select a gem and move it to an adjacent tile in the grid to switch positions with the gems. If gems of the same are positioned in the grid 3 times or greater, the gems will be removed from the grid, the player will score points and the existing gems will fall into the empty spaces spawning more gems into the grid to fill all empty spaces.<\/p>\n\n\n\n<p>&lt;GemBuster Screenshot&gt;<\/p>\n\n\n\n<p>We will utilize game assets from the popular free to use Kenney.nl game asset packs. The sprites for the gems will be sourced from the Kenney.nl puzzle asset pack. The sound effects for the gems falling with be sourced from the Kenney.nl impact sounds asset pack. &lt;Assets for the UI&gt;.<\/p>\n\n\n\n<p>The game will be built using Unity targeting release for Android.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Importing Game Assets into the Unity Project<\/h3>\n\n\n\n<p>First we will need to download the following free to use asset packs from Kenney.nl.<\/p>\n\n\n\n<ul><li>Puzzle pack &#8211; <a rel=\"noreferrer noopener\" href=\"https:\/\/kenney.nl\/assets\/puzzle-pack\" target=\"_blank\">https:\/\/kenney.nl\/assets\/puzzle-pack<\/a><\/li><li>Impact sounds pack &#8211; <a rel=\"noreferrer noopener\" href=\"https:\/\/kenney.nl\/assets\/impact-sounds\" target=\"_blank\">https:\/\/kenney.nl\/assets\/impact-sounds<\/a><\/li><li>Interface sounds pack &#8211; <a rel=\"noreferrer noopener\" href=\"https:\/\/kenney.nl\/assets\/interface-sounds\" target=\"_blank\">https:\/\/kenney.nl\/assets\/interface-sounds<\/a><\/li><\/ul>\n\n\n\n<p>Next we will open our GemBuster project in Unity and add some directories into the Assets folder.<\/p>\n\n\n\n<p>We will create the following directories:<\/p>\n\n\n\n<ul><li>Sprites<\/li><li>Sounds<\/li><li>Scripts<\/li><li>Scenes<\/li><li>Prefabs<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Importing Sprites<\/h4>\n\n\n\n<p>The &#8220;Sprites&#8221; directory will contain all of the images we want to use in our game. Unzip the Kenney.nl Puzzle Pack archive and copy the following images we will use for the 6 different colored gems into the &#8220;Sprites&#8221; folder in Unity.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/element_blue_diamond_glossy.png\" alt=\"\" class=\"wp-image-3616\" width=\"48\" height=\"48\"\/><figcaption>element_blue_diamond_glossy.png<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"48\" height=\"48\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/element_green_diamond_glossy.png\" alt=\"\" class=\"wp-image-3617\"\/><figcaption>element_green_diamond_glossy.png<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"48\" height=\"48\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/element_grey_diamond_glossy.png\" alt=\"\" class=\"wp-image-3618\"\/><figcaption>element_grey_diamond_glossy.png<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"48\" height=\"48\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/element_purple_diamond_glossy.png\" alt=\"\" class=\"wp-image-3619\"\/><figcaption>element_purple_diamond_glossy.png<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"48\" height=\"48\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/element_red_diamond_glossy.png\" alt=\"\" class=\"wp-image-3620\"\/><figcaption>element_red_diamond_glossy.png<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"48\" height=\"48\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/element_yellow_diamond_glossy.png\" alt=\"\" class=\"wp-image-3621\"\/><figcaption>element_yellow_diamond_glossy.png<\/figcaption><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Importing Sounds<\/h4>\n\n\n\n<p>Have a look through the impact and interface sound packs mentioned above and offered for free by Kenney.nl. We will need three sounds to add to our GemBuster game later in this tutorial.<\/p>\n\n\n\n<p>Find a sound you like for each of the actions below and copy them into the Sounds folder inside the Assets directory.<\/p>\n\n\n\n<ul><li>Selecting a Gem<\/li><li>Swapping a Gem<\/li><li>Clearing Gems<\/li><\/ul>\n\n\n\n<p>I chose the following audio clips from the Kenney.ml impact and interface sounds pack for GemBuster.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"389\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Selected-Audio-Clips-for-GemBuster-1024x389.png\" alt=\"\" class=\"wp-image-3776\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Selected-Audio-Clips-for-GemBuster-1024x389.png 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Selected-Audio-Clips-for-GemBuster-300x114.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Selected-Audio-Clips-for-GemBuster-768x292.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Selected-Audio-Clips-for-GemBuster.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Saving the Game Scene<\/h4>\n\n\n\n<p>Make sure to save the Scene in Unity and give it the name &#8220;GameScene&#8221;. Place the GameScene file in the Scenes folder in the Assets directory.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Creating a Grid and Displaying the Gems on Screen<\/h3>\n\n\n\n<p>In this section of the tutorial for the GemBuster game for Android we will implement a 8&#215;8 Grid of Gems of different colours to be shown on the screen in a randomized order.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"553\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/GemBuster-Unity-Show-Gems-in-Grid-1024x553.png\" alt=\"\" class=\"wp-image-3651\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/GemBuster-Unity-Show-Gems-in-Grid-1024x553.png 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/GemBuster-Unity-Show-Gems-in-Grid-300x162.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/GemBuster-Unity-Show-Gems-in-Grid-768x415.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/GemBuster-Unity-Show-Gems-in-Grid.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Creating the Prefab for the Gem<\/h4>\n\n\n\n<p>In this section of the tutorial we will introduce the Unity concepts of GameObjects and Prefabs.<\/p>\n\n\n\n<p>In Unity a GameObject is an object that is placed inside a Unity Scene that always has a position and rotation. Components can be added to GameObjects such as a Box Collider, Light, SpriteRenderer or a Script to change it&#8217;s appearance or functionality.<\/p>\n\n\n\n<p>In Unity a Prefab is a template of a GameObject which enable you to save the configuration details of a GameObject in an Asset that you can reuse throughout the Unity Scene.<\/p>\n\n\n\n<p>We will need to create Prefab of one of the gem sprites that we will use in our Script for generating a grid of gems. Before we create the Prefab of the gem we will need to create and configure it as a GameObject first then convert the GameObject into the Prefab saving all of it&#8217;s configuration details.<\/p>\n\n\n\n<p>To create the GameObject of a gem that we will then turn into a Prefab navigate into the Sprites folder inside the Assets folder, select the Sprite of the grey gem and drag and drop it into the Unity Scene Editor. Locate and on the GameObject you have just created for the grey gem in the Unity Scene Hierarchy. Next will will configure the GameObject of the grey gem and set the scale of the X and Y to 1.25 on the Transform vector to increase the size.<\/p>\n\n\n\n<p>Now we are ready to create the Prefab of the grey gem, navigate to the Prefab directory in the Unity Assets folder then drag and drop the GameObject of the grey gem from the Unity Scene Hierarchy into the Prefabs folder. This will create the Prefab and now you can delete the GameObject of the grey gem.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Creating the GridManager Script<\/h4>\n\n\n\n<p>Next we will create our first Unity script that will be used for creating an 8 by 8 Grid of Gems.<\/p>\n\n\n\n<p>In Unity a Script is code you write in the C# programming language to control the behaviour of GameObjects in your game. Scripts are written using a code editor and consist of classes and methods. Scripts can be added to GameObjects to be displayed in your Scene in Unity.<\/p>\n\n\n\n<p>I recommend you bookmark the following resources below that contain documentation to help you to write C# scripts in Unity.<\/p>\n\n\n\n<ul><li><a rel=\"noreferrer noopener\" href=\"https:\/\/docs.microsoft.com\/en-us\/dotnet\/csharp\/\" target=\"_blank\">Official C# documentation from Microsoft<\/a><\/li><li><a href=\"https:\/\/docs.unity3d.com\/ScriptReference\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">Unity Scripting Reference<\/a><\/li><\/ul>\n\n\n\n<p>To create the Script, navigate into the Scripts folder inside the Assets folder. Left click on the Assets folder, select &#8220;Create&#8221; then &#8220;C# Script&#8221;. Give the Script the name &#8220;GridManager&#8221; and select enter key.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"875\" height=\"795\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Create-Script.png\" alt=\"\" class=\"wp-image-3662\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Create-Script.png 875w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Create-Script-300x273.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Create-Script-768x698.png 768w\" sizes=\"(max-width: 875px) 100vw, 875px\" \/><\/figure>\n\n\n\n<p>Now that the Script has been created, open it up in a code editor and copy and paste the following C# code into the GridManager.cs Script.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/ce6c1a87a1cfe7e38881492b6df8a858.js\"><\/script><\/p>\n\n\n<p>As mentioned above Unity Scripts are written in the C# (pronounced C Sharp) programming language. If you have experience with Java, you may notice there are some similarities in syntax.<\/p>\n\n\n\n<p>In Unity, public variables in Scripts can be configured against the GameObject in the Unity Inspector. In the GridManager script we have a mix of the following public and private variables. <\/p>\n\n\n\n<ul><li>An instance of GridManager, that is a static variable that has public visibility<\/li><li>Two integer variables with public visibility, representing the number of rows and columns in the grid<\/li><li>A private multi dimensional array of GameObjects representing the Gems shown in the Grid, with the column and row of the Gem in the Grid as indices to the array<\/li><li>A public variable for the list of Sprites to be populated with a Sprite for each color of the Gem<\/li><li>A public variable for the GameObject of a Gem Prefab that we will use for creating each of the Gems in the Grid<\/li><\/ul>\n\n\n\n<p>Also in the Unity Script for the GridManager we have three methods. A Start() method, an Update() method and the GenerateGrid(float, float) method. Our class for the GridManager Script extends the MonoBehaviour class.<\/p>\n\n\n\n<p>The Start() method is called in a Unity Script that extends the MonoBehaviour class when the game is run. In our Start() method we first set the GridManager instance variable using the GetComponent method. <\/p>\n\n\n\n<p>After that the Gem Prefab is used to obtain the width and height of each Gem to be shown in the Grid by getting the SpriteRenderer from the Gem Prefab and accessing the bounds.size variable on the SpriteRenderer. Finally in the Start() method we set up the 8 x 8 Grid by calling the GenerateGrid(float, float) method passing the Gem width and height as parameters.<\/p>\n\n\n\n<p>The Update() method is called in a Unity Script that extends the MonoBehaviour class at the frequency of once per frame. For our GridManager Script we have left the Update() method empty.<\/p>\n\n\n\n<p>The GenerateGrid(float, float) method is used to create the 8 x 8 Grid of Gems. First in the GenerateGrid method we initialize the multi dimensional array of Gems using the number of columns and rows that are to be provided to the Script in the Unity Inspector.<\/p>\n\n\n\n<p>Next we start two for loops to create a Gem GameObject at each row and column in the Grid.<\/p>\n\n\n\n<p>The Gem GameObject is created using the Instantiate(&#8230;) method with the Gem Prefab as the GameObject to be replicated, at a calculated position using a 3D Vector with the rotation matching the rotation of the Prefab of the Gem.<\/p>\n\n\n\n<p>The position of each Gem is calculated using the coordinates of the Grid (using the transform.position 3D Vector) and adding the Gem width or Gem height multiplied by the index of the column or row.<\/p>\n\n\n\n<p>Once a Gem is created using the Instantiate(&#8230;) method, it gets assigned to the applicable column and row in the multi dimensional array. Then a parent child relationship is created between the Grid and the Gem using transform.parent variable on the Gem.<\/p>\n\n\n\n<p>The Sprite to be used for the Gem (which is different for each Gem color) is set using the SpriteRenderer on the Gem by assigning the sprite variable on the SpriteRenderer of the Gem to a random Sprite in the List of Sprites containing each Gem color.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Creating and Configuring the Grid GameObject<\/h4>\n\n\n\n<p>Now that we have a Script for the GridManager the next step will be to add a Grid to be shown in the Unity Scene.<\/p>\n\n\n\n<p>To do this we will first open the GameScene in Unity from the Scenes folder in the Assets directory. Next we will add an empty GameObject to the GameScene by clicking the right mouse button in the Unity Scene Hierarchy and selecting &#8220;Create Empty&#8221;. Rename the GameObject you have just created to &#8220;Grid&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"293\" height=\"519\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Create-GameObject.png\" alt=\"\" class=\"wp-image-3669\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Create-GameObject.png 293w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Create-GameObject-169x300.png 169w\" sizes=\"(max-width: 293px) 100vw, 293px\" \/><\/figure>\n\n\n\n<p>Next we will add the GridManager script to the Grid GameObject in the Unity Inspector by selecting the Grid GameObject, then selecting the &#8220;Add Component&#8221; button, selecting the &#8220;Script&#8221; option then selecting the &#8220;GridManager&#8221; Script.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"477\" height=\"571\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-GameObject-Add-Component-Script.png\" alt=\"\" class=\"wp-image-3671\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-GameObject-Add-Component-Script.png 477w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-GameObject-Add-Component-Script-251x300.png 251w\" sizes=\"(max-width: 477px) 100vw, 477px\" \/><\/figure>\n\n\n\n<p>Now that the GridManager Script has been added to the Grid GameObject next we will populate the public variables from GridManager Script in the Unity inspector.<\/p>\n\n\n\n<p>Because we want an 8 by 8 grid enter 8 in the Rows and Columns fields on the Grid Manager Script. Under the Gem Sprites public variable for the Size variable enter 6 as we have 6 different color Gems, this will create Elements 0 &#8211; 5 in under the Gem Sprites variable.<\/p>\n\n\n\n<p>Next navigate into the Sprites folder in the Assets directory and locate the 6 different Gem Sprites, drag and drop each Gem Sprite into one of the Element slots.<\/p>\n\n\n\n<p>Finally navigate into the Prefabs folder in the Assets directory and locate the Gem Prefab you created earlier. Drag and drop this Gem Prefab into the Gem variable in the Grid Manager Script in the Unity Inspector. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"479\" height=\"493\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Inspector-Grid-GameObject.png\" alt=\"\" class=\"wp-image-3673\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Inspector-Grid-GameObject.png 479w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Inspector-Grid-GameObject-291x300.png 291w\" sizes=\"(max-width: 479px) 100vw, 479px\" \/><\/figure>\n\n\n\n<p>Now if you select the Play button in the Unity Editor you should see the 8 by 8 grid of Gems in a random order shown on screen. You may need to reposition the Grid GameObject if the Gems are spilling over the bounds of the screen so that all of the Gems are shown correctly on screen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"632\" height=\"458\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Grid-of-Gems-from-GemBuster.png\" alt=\"\" class=\"wp-image-3685\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Grid-of-Gems-from-GemBuster.png 632w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Grid-of-Gems-from-GemBuster-300x217.png 300w\" sizes=\"(max-width: 632px) 100vw, 632px\" \/><\/figure>\n\n\n\n<p>You may notice that we do have some Gems in the Grid that are shown as 3 or more in a row either vertically or horizontally this is something we will address in later stages of the tutorial.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Adding Touch Controls to Swap Gems<\/h3>\n\n\n\n<p>In the third step of the tutorial for creating the GemBuster game we will create a Script for the Gem and implement basic touch controls to select, unselect and swap gems.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Creating the Gem Script<\/h4>\n\n\n\n<p>Create a new C# Script in Unity by navigating the Scripts folder inside the Asset directory, right click the mouse button, select &#8220;Create&#8221; and click on &#8220;C# Script&#8221;. Rename is to &#8220;Gem&#8221; and open the script in the code editor.<\/p>\n\n\n\n<p>Copy and paste the following C# code into the Gem.cs Script.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/0587f14c803ede6abcbbc263aa8ae1e1.js\"><\/script><\/p>\n\n\n<p>All of the variables in the Gem Script are private. The following variables are defined in the Gem Script.<\/p>\n\n\n\n<ul><li>A variable for the color to be applied to the SpriteRenderer on the Gem when it is selected<\/li><li>A variable for the color to be applied to the SpriteRenderer on the Gem when it is not selected<\/li><li>A boolean variable which is set to true if the Gem is selected, otherwise it is set to false<\/li><li>A Gem variable which references the previously Gem selected which is used for swapping the previous Gem with the currently selected Gem<\/li><li>A SpriteRenderer variable which is used for applying a color against the Gem Sprite if it is selected or unselected as well as changing the Gem Sprite if two Gems are swapped<\/li><\/ul>\n\n\n\n<p>The following methods are defined in the Gem Script.<\/p>\n\n\n\n<ul><li>Start()<\/li><li>Select()<\/li><li>Unselect()<\/li><li>OnMouseDown()<\/li><li>IsSelectedGemAdjacent()<\/li><li>SwapGem()<\/li><\/ul>\n\n\n\n<p>The Start() method is used to initialize the Gem. It retrieves the SpriteRenderer and defaults the Gem to unselected.<\/p>\n\n\n\n<p>The Select() method is used to handle the selection of a Gem in the 8 x 8 Grid. The Unselect() method will unselect the currently selected Gem.<\/p>\n\n\n\n<p>The IsSelectedGemAdjacent() method calculates the adjacent Gems by sending a raycast in the up, down, left and right directions of the selected Gem and adding the GameObjects that produced a collision into a List. This List is then checked if it contains the previously selected Gem. If this is the case, the selected Gem is adjacent to the previous Gem and the method will return true otherwise it will return false.<\/p>\n\n\n\n<p>The SwapGem() method is used to adjacent swap gems that have been selected one after the other. This is achieved by swapping the Sprite of the Gems with the help of a temporary value for the Sprite.<\/p>\n\n\n\n<p>The OnMouseDown() method is used for handling touch events on the Gem. It determines whether the Gem needs to be Selected, Unselected or Swapped with an adjacent Gem using a series of conditional statements.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Updating the Gem Prefab<\/h4>\n\n\n\n<p>Now we will to make two changes to the Gem Prefab we created earlier in this tutorial. We will need to open the Gem Prefab in the Unity Inspector for editting, to do this, locate the Gem Prefab inside the Prefabs folder in the Assets directory and double click on it.<\/p>\n\n\n\n<p>First we will need to assign the Gem Script we have just created to the Gem Prefab. To do this, select the &#8220;Add Component&#8221; button, select &#8220;Scripts&#8221; then click on the &#8220;Gem&#8221; Script.<\/p>\n\n\n\n<p>Next we will need to add a Box Collider 2D component to the Gem Prefab. This is required so that when we tap on a Gem to select or swap it, the taps will only be registered if there is a collider present on the GameObject. To add the Box Collider 2D to the Gem Prefab, select the &#8220;Add Component&#8221; button, select &#8220;Physics 2D&#8221; then click on &#8220;Box Collider 2D&#8221;.<\/p>\n\n\n\n<p>Once you have made these changes to the Gem Prefab, the Unity Inspector should show the Gem Script and the Box Collider 2D components added to the Gem Prefab as per the screenshot below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"474\" height=\"805\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Gem-Prefab-with-Gem-Script-and-Box-Collider-2D.png\" alt=\"\" class=\"wp-image-3708\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Gem-Prefab-with-Gem-Script-and-Box-Collider-2D.png 474w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Gem-Prefab-with-Gem-Script-and-Box-Collider-2D-177x300.png 177w\" sizes=\"(max-width: 474px) 100vw, 474px\" \/><\/figure>\n\n\n\n<p>Save the changes to the Gem Prefab then proceed to the next section of the tutorial.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Configuring Physics 2D Unity Project Settings<\/h4>\n\n\n\n<p>For the last part of the step to ensure the raycasting will work correctly when detecting adjacent gems we will need to disable the &#8220;Queries Start In Colliders&#8221; flag in the Unity Physics 2D Project Settings.<\/p>\n\n\n\n<p>To access the Unity Project Settings, select the &#8220;Edit&#8221; menu and select the &#8220;Project Settings&#8230;&#8221; menu item.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"360\" height=\"758\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Edit-Project-Settings.png\" alt=\"\" class=\"wp-image-3711\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Edit-Project-Settings.png 360w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Edit-Project-Settings-142x300.png 142w\" sizes=\"(max-width: 360px) 100vw, 360px\" \/><\/figure>\n\n\n\n<p>Select the &#8220;Physics 2D&#8221; option in the left side bar and uncheck the &#8220;Queries Start In Colliders&#8221; flag. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"655\" height=\"621\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Project-Settings-Queries-Start-in-Colliders-Off.png\" alt=\"\" class=\"wp-image-3705\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Project-Settings-Queries-Start-in-Colliders-Off.png 655w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Project-Settings-Queries-Start-in-Colliders-Off-300x284.png 300w\" sizes=\"(max-width: 655px) 100vw, 655px\" \/><\/figure>\n\n\n\n<p>Now if you run your the GemBuster game you should be able to swap adjacent Gems in the 8 x 8 Grid as per the screen capture below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"626\" height=\"469\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/GemBuster-Swapping-Gems.gif\" alt=\"\" class=\"wp-image-3713\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Implementing Matching, Clearing and Falling Gems<\/h3>\n\n\n\n<p>In the forth step of this tutorial we will be finalizing the game logic that is required to be built for the GemBuster game.<\/p>\n\n\n\n<p>First we will modifying the GridManager Script to update the Grid creation method to prevent matches of 3 or more Gems found in the initial Grid generated.<\/p>\n\n\n\n<p>After that we will create some methods to detect matches of 3 or more Gems in the Grid using ray casting against the two Gems that have swapped positions. Once matches are detected we will create some methods to clear those Gems from the Grid.<\/p>\n\n\n\n<p>Finally in forth step of the tutorial we will implement game logic to drop gems that sit above cleared gems and spawn new games where required to fill the 8 x 8 Grid of gems.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Modifying the Grid Creation Script to Prevent Matches in the Initial Grid<\/h4>\n\n\n\n<p>We will start this section by opening up the GridManager.cs Script in a code editor and we will make some changes to GenerateGrid(float, float) method along with adding a new method RandomSpriteExcluding(List&lt;Sprite&gt;).<\/p>\n\n\n\n<p>In the GenerateGrid(float, float) method we change how we assign a new Sprite to a Gem in the Grid. Instead of selecting any Gem Sprite at random we will create a List of Sprites to choose for the Gem and we will first exclude the Sprite of the Gem to the left of the new Gem, if it exists. And we also exclude the Sprite of the Gem underneath the new Gem, if it exists. Then from this List of possible Sprites we select a random Sprite ensuring we don&#8217;t end up with a match of 3 or more in the initial Grid.<\/p>\n\n\n\n<p>See the code excerpt showing the changes in the GridManager.cs script below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/0f89489dafc52c33109c147a56d5b92f.js\"><\/script><\/p>\n\n\n<p>If you implement the changes above in the GridManager script, when you run the GemBuster game, you will see that the 8 x 8 Grid will start with no matches of 3 or more in a row as per the screenshot below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"631\" height=\"459\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/GemBuster-New-Grid-Without-Matches.png\" alt=\"\" class=\"wp-image-3742\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/GemBuster-New-Grid-Without-Matches.png 631w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/GemBuster-New-Grid-Without-Matches-300x218.png 300w\" sizes=\"(max-width: 631px) 100vw, 631px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Detecting and Clearing Matches of 3 or More Gems in the Grid<\/h4>\n\n\n\n<p>In this section of the tutorial we will alter the existing Gem.cs Script to introduce some new methods to detect and clear matches of 3 or more gems in a grid.<\/p>\n\n\n\n<p>See the code excerpt showing the changes for implementing the match finding and clearing game logic in the Gem.cs script below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/e08fcd71f4f106bf0c1989a8e09d0291.js\"><\/script><\/p>\n\n\n<p>Three new methods have been created in this code excerpt.<\/p>\n\n\n\n<ul><li>FindHorizontalMatches()<\/li><li>FindVeriticalMatches()<\/li><li>ClearMatches()<\/li><\/ul>\n\n\n\n<p>The FindHorizontalMatches() method returns a List of GameObjects which are Gems that match the same color of the swapped Gem in the left and right direction. Ray casting is used in the Vector2.left and Vector2.right direction of the swapped gem to check if the adjacent gem matches the swapped gem&#8217;s color.<\/p>\n\n\n\n<p>If there is a match the gem is added to the List and the ray casting is performed again on the adjacent gem until either the adjacent gem&#8217;s color doesn&#8217;t match or the left or right side of the grid is hit and there are no more gems to compare.<\/p>\n\n\n\n<p>The FindVeriticalMatches() method also returns a List of GameObjects, it uses the same logic defined in the FindHorizontalMatches() method but instead of going in the Vector2.left and Vector2.right direction when comparing the color of adjacent gems to the swapped gem it moves in the Vector2.up and Vector2.down direction.<\/p>\n\n\n\n<p>The FindVeriticalMatches() method will check that the swapped gem matches in the adjacent gem&#8217;s color in the up and down direction until the color&#8217;s no longer match or the top or the bottom of the grid is reached and there are no more gems to compare.<\/p>\n\n\n\n<p>The ClearMatches() method is responsible for calling the FindHorizontalMatches() and FindVerticalMatches() methods after gems are swapped in the grid. If there are at least two gems in the List of horizontal matches or the List of vertical matches these gems will be cleared from the screen by using the SpriteRenderer on the Gem and setting the Sprite to null. At least two gems are required instead of three because the swapped gem is not included in the count of matches.<\/p>\n\n\n\n<p>The ClearMatches() method also calls the DropGems() method on the GridManager instance if there are at least two vertical or horizontal matches. This method will be covered in the next section of this tutorial.<\/p>\n\n\n\n<p>In additional to the three new methods, the OnMouseDown() method has also been altered slightly. After the user has swapped two adjacent gems the ClearMatches() method will be called twice against gem that was swapped.<\/p>\n\n\n\n<p>If you implement these changes and run the GemBuster game, you will see that when you swap two adjacent gems and a match of 3 or more gems is detected, they will be cleared from the grid as per the screen capture below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"626\" height=\"469\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/GemBuster-Matching-and-Clearing-Gems.gif\" alt=\"\" class=\"wp-image-3744\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Implementing Falling and Spawning Gems<\/h4>\n\n\n\n<p>In this section of the tutorial we will update the GridManager.cs Script to make gems falls if there are cleared spots underneath. In addition to this we will implement spawning of new gems after gems are cleared so that they can be replenished in the 8&#215;8 grid.<\/p>\n\n\n\n<p>See the code sample of the GridManager.cs Script containing the functionality for implementing falling and spawning Gems.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/6bc0f08f6576c6dad2ccbdc0efc66f9d.js\"><\/script><\/p>\n\n\n<p>Three new methods have been added in this GridManager Script.<\/p>\n\n\n\n<ul><li>GetDroppableGems()<\/li><li>GetSpawnableGems()<\/li><li>DropGems()<\/li><\/ul>\n\n\n\n<p>The GetDroppableGems() method returns a list of x and y indices of the multi dimensional array of Gems that are sitting above a blank spot in the Grid. <\/p>\n\n\n\n<p>The GetSpawnableGems() method returns a list of x and y indices of the multi dimensional array of Gems that can have a Gem spawned in that location from the top of the grid.<\/p>\n\n\n\n<p>The DropGems() method uses both the GetDroppableGems() method and the GetSpawnableGems() method to make sure that any droppable gems fall to the correct location in the Grid and new gems are spawned correctly.<\/p>\n\n\n\n<p>The DropGems() method will first use the GetDroppableGems() method and get a list of x and y indices that contain gems that can drop. Then it uses a while loop to lower the position of each droppable a gem one space at a time until no more droppable gems are left.<\/p>\n\n\n\n<p>After that the DropGems() method will call the GetSpawnableGems() method to retrieve the list of x and y indices that can have a gem spawned into them. For each of these x and y indices a random Sprite that will not cause a match to be created is spawned and placed at the x and y coordinates in the Grid.<\/p>\n\n\n\n<p>Finally each Gem in the Grid is retrieved and the GetMatches() method is called on the Gem to check if there are any new matches requiring the process around matching, clear, dropping and spawning of gems to be repeated.<\/p>\n\n\n\n<p>If you implement these changes to the GridManager.cs Script and run the GemBuster game, you will see Gems will drop if there is an empty space underneath and new gems will spawn from the top as required as seen in the screen capture below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"626\" height=\"469\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/GemBuster-Dropping-Gems.gif\" alt=\"\" class=\"wp-image-3745\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Adding Sound<\/h3>\n\n\n\n<p>Back in Step 1 you would have downloaded some sound packs from Kenney.nl and added three sounds into the Sounds folder in the Assets directory.<\/p>\n\n\n\n<p>In this step of the tutorial we will be updating our Gem Prefab and Gem.cs Script to play the following three sounds during game play in the GemBuster game.<\/p>\n\n\n\n<ul><li>Selecting a Gem Sound<\/li><li>Swapping a Gem Sound<\/li><li>Clearing Gems Sound<\/li><\/ul>\n\n\n\n<p>We will start by making the following changes to the Gem.cs Script.<\/p>\n\n\n\n<ul><li>Add three public AudioClip variables<\/li><li>Adding code to the Select() method, the Swap() method and the ClearMatches() method to play each of the Audio Clips<\/li><\/ul>\n\n\n\n<p>See the code excerpt from the Gem.cs Script below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/81fada96a16379bb9b04af3740d5c04c.js\"><\/script><\/p>\n\n\n<p>Next we will need to make some changes to the Gem Prefab to set the Audio Clips to the variables on the Script and then add an Audio Source component.<\/p>\n\n\n\n<p>Open the Gem Prefab, then open the Sounds folder in the Assets directory and drag and drop the sound files into the relevant Audio Clip variable.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"482\" height=\"135\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Adding-Audio-Clips-to-Script-on-Prefab.png\" alt=\"\" class=\"wp-image-3782\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Adding-Audio-Clips-to-Script-on-Prefab.png 482w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Adding-Audio-Clips-to-Script-on-Prefab-300x84.png 300w\" sizes=\"(max-width: 482px) 100vw, 482px\" \/><\/figure>\n\n\n\n<p>Then to add the Audio Source component to the Gem Prefab, select the &#8220;Add Component&#8221; button, select &#8220;Audio&#8221; then select &#8220;Audio Source&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"477\" height=\"883\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Adding-Audio-Source-to-Gem-Prefab.png\" alt=\"\" class=\"wp-image-3781\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Adding-Audio-Source-to-Gem-Prefab.png 477w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Adding-Audio-Source-to-Gem-Prefab-162x300.png 162w\" sizes=\"(max-width: 477px) 100vw, 477px\" \/><\/figure>\n\n\n\n<p>Once you make these changes and run the GemBuster game, you should hear different sounds playing when you select a gem, swap a gem or clear gems from the grid.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 6: Adding Scoring and a Count Down Timer<\/h3>\n\n\n\n<p>In the sixth step of this tutorial we will be adding a scoring system to the game as well as a count down timer that we will be displaying in the game user interface.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Adding a Canvas with Text Fields<\/h4>\n\n\n\n<p>We will start this step of the tutorial by adding some text fields to the screen for showing the current score, high score and a count down timer.<\/p>\n\n\n\n<p>The Canvas can be added to the screen by right clicking the mouse in the Unity Scene Hierarchy, selecting &#8220;UI&#8221; then selecting &#8220;Canvas&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"467\" height=\"463\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Create-Canvas.png\" alt=\"\" class=\"wp-image-3786\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Create-Canvas.png 467w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Create-Canvas-300x297.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Create-Canvas-150x150.png 150w\" sizes=\"(max-width: 467px) 100vw, 467px\" \/><\/figure>\n\n\n\n<p>Next we will add a Panel to the Canvas by right mouse clicking on the Canvas and selecting &#8220;UI&#8221;, then &#8220;Panel&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"545\" height=\"847\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Add-Panel-to-Canvas.png\" alt=\"\" class=\"wp-image-3787\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Add-Panel-to-Canvas.png 545w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Add-Panel-to-Canvas-193x300.png 193w\" sizes=\"(max-width: 545px) 100vw, 545px\" \/><\/figure>\n\n\n\n<p>Give the Panel the name of &#8220;GameUIPanel&#8221; and make sure the Panel is fully transparent by unchecking the Image checkbox.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"468\" height=\"501\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Configure-Panel-in-Inspector.png\" alt=\"\" class=\"wp-image-3788\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Configure-Panel-in-Inspector.png 468w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Configure-Panel-in-Inspector-280x300.png 280w\" sizes=\"(max-width: 468px) 100vw, 468px\" \/><\/figure>\n\n\n\n<p>Next we will add three text fields to the panel by clicking the right mouse button on the panel in the Unity Hierarchy, selecting &#8220;UI&#8221; and clicking on &#8220;Text&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"655\" height=\"867\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Add-Text-to-Panel.png\" alt=\"\" class=\"wp-image-3789\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Add-Text-to-Panel.png 655w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Add-Text-to-Panel-227x300.png 227w\" sizes=\"(max-width: 655px) 100vw, 655px\" \/><\/figure>\n\n\n\n<p>Configure each of the three Text fields in the Unity inspector by giving them a recognisable name, setting the text to be shown, setting the font size and configuring the horizontal and vertical text alignment as per the screenshot below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"810\" height=\"747\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Configure-Text-in-Inspector.png\" alt=\"\" class=\"wp-image-3790\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Configure-Text-in-Inspector.png 810w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Configure-Text-in-Inspector-300x277.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Configure-Text-in-Inspector-768x708.png 768w\" sizes=\"(max-width: 810px) 100vw, 810px\" \/><\/figure>\n\n\n\n<p>After configuring the panel for the game user interface, repeat the relevant parts of the process above to create a second panel underneath the Canvas to be shown when the game ends.<\/p>\n\n\n\n<p>Add three Text fields to this panel, one for displaying &#8220;Game Over&#8221; text and two others for showing the final score and the high score.<\/p>\n\n\n\n<p>Add a Button to the panel to restart the game from the Game Over screen by clicking the right mouse button on the panel in the Unity Hierarchy, selecting &#8220;UI&#8221; then clicking on &#8220;Button&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"659\" height=\"919\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Add-Button-to-Canvas.png\" alt=\"\" class=\"wp-image-3792\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Add-Button-to-Canvas.png 659w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Add-Button-to-Canvas-215x300.png 215w\" sizes=\"(max-width: 659px) 100vw, 659px\" \/><\/figure>\n\n\n\n<p>Expand the Button in the Unity Hierarchy and select the Text element underneath the Button and update the Text to &#8220;PLAY AGAIN&#8221; in the Unity Inspector as per the screenshot below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"812\" height=\"783\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Configure-Button-in-Panel-in-Inspector.png\" alt=\"\" class=\"wp-image-3794\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Configure-Button-in-Panel-in-Inspector.png 812w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Configure-Button-in-Panel-in-Inspector-300x289.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Configure-Button-in-Panel-in-Inspector-768x741.png 768w\" sizes=\"(max-width: 812px) 100vw, 812px\" \/><\/figure>\n\n\n\n<p>Make one additional change the GameOverPanel to load as inactive (hiding it from the user) by unchecking the checkbox next to the name of the panel in the Unity inspector as per the screenshot below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"812\" height=\"483\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Inactive-Panel.png\" alt=\"\" class=\"wp-image-3795\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Inactive-Panel.png 812w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Inactive-Panel-300x178.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-Inactive-Panel-768x457.png 768w\" sizes=\"(max-width: 812px) 100vw, 812px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Setting up the GameManager<\/h4>\n\n\n\n<p>Next we will set up the GameManager which will be responsible for keeping track of the game score, the game count down timer, showing the game over screen and restarting the game.<\/p>\n\n\n\n<p>Create a new Script called &#8220;GameManager&#8221; and copy and paste the following code inside.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/de11872f4538f7fdf2e6058a78e18f1f.js\"><\/script><\/p>\n\n\n<p>Next create an empty GameObject in the Unity Hierarchy and give it the name &#8220;GameManager&#8221;. Then add the GameManager Script to the GameManager GameObject.<\/p>\n\n\n\n<p>Next drag and drop the relevant Text fields, Panels and Buttons from the Unity Hierarchy into the public variables in the Unity Inspector for the GameManager GameObject.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"813\" height=\"547\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-GameManager-Script-Variables.png\" alt=\"\" class=\"wp-image-3798\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-GameManager-Script-Variables.png 813w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-GameManager-Script-Variables-300x202.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-GameManager-Script-Variables-768x517.png 768w\" sizes=\"(max-width: 813px) 100vw, 813px\" \/><\/figure>\n\n\n\n<p>Finally, we will make two minor changes to the Gem Script.<\/p>\n\n\n\n<p>The first change is in the OnMouseDown() method where we will add a condition to the if statement to return null at the start of the OnMouseDown() method to check if the game is over using the boolean variable from the GameManager. This will allow us to prevent the user from interacting with the game play if the game is over until the game is restarted.<\/p>\n\n\n\n<p>The second change is in the ClearMatches() method where the IncreaseScore() method on the GameManager is invoked to add points to the score after calling the DropGems() method on the GridManager.<\/p>\n\n\n\n<p>See the code excerpt below containing the changes to the Gem.cs Script.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/1a0efdf68ad1fac74e2d6d9d0520d441.js\"><\/script><\/p>\n\n\n<p>If you make the changes above and run the GemBuster game you should see something like the screenshot shown in the introduction of this post.<\/p>\n\n\n\n<p>Now that you have completed the GemBuster game, to create an APK for your Android app in Unity, select &#8220;File&#8221; then &#8220;Build Settings&#8221;. Then click the &#8220;Build&#8221; button, choose a file name and location for the APK file and select &#8220;Save&#8221; and wait for the APK to be generated. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"397\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-GemBuster-Create-APK-1024x397.png\" alt=\"\" class=\"wp-image-3807\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-GemBuster-Create-APK-1024x397.png 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-GemBuster-Create-APK-300x116.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-GemBuster-Create-APK-768x298.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Unity-GemBuster-Create-APK.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>A lot of the most successful Android apps on the Google Play Store are games. Getting started with Android game development and building your first game can be daunting as<\/p>\n","protected":false},"author":1,"featured_media":4481,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[23],"tags":[],"acf":[],"_links":{"self":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/3554"}],"collection":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/comments?post=3554"}],"version-history":[{"count":5,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/3554\/revisions"}],"predecessor-version":[{"id":3810,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/3554\/revisions\/3810"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/media\/4481"}],"wp:attachment":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/media?parent=3554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/categories?post=3554"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/tags?post=3554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}