Database creation<\/h2>\n
Start by creating your database. Open your database management program of choice and create a new database, giving it the name highscores<\/em>.<\/p>\n Figure 1: Creating a new database in WAMP using phpMyAdmin<\/strong><\/p>\n Next, create a table containing the data needed. Since the goal is just to display the player’s name and their score, you can leave the table at that. Go into the SQL tab and enter the following SQL command to create this table:<\/p>\n It’s recommended that you enter in some data for testing the application. While you could simply enter five new scores within the Unity app itself, it’ll be easier to test high score retrieval if there’s already some data within the database. You can use the below SQL command to quickly add some test data.<\/p>\n Now that the database is set up, you’ll need some PHP scripts to both retrieve and insert data into the database. These scripts will act something like the communicator between Unity and the MySQL database.<\/p>\n First, inside your server (this example’s file path is the WampServer folder, then www <\/em>folder), create a folder named HighScoreGame<\/em> for storing your PHP scripts. Then create a new PHP script called display<\/em> and place it within this folder. Open the file in a code editor such as Notepad++ and enter the following code. Note that you may have to change the values of This script is pretty straightforward. It’s just establishing a connection to the database before going through the scores table and retrieving the top five scores and their respective players. You’ll notice the echo statements at the end add in a newline and underscore. These might seem like strange additions to the results, but they will actually be used to help organize and display the results in a nice looking manner in the Unity app.<\/p>\n The next PHP script will be called addscore<\/em>. As the name implies, this script will be responsible for adding data to the highscores<\/em> database. All data that addscore<\/em> tries to insert into the database will originate from within the Unity app. Like before, you may need to edit some of the variables to accommodate your specific setup. The important thing to note is the value of To keep things tidy, make sure this script is within the same folder as display<\/em>. Once you have this code prepared, it’ll be time to open up Unity and begin creating the app that your users would use.<\/p>\n Unity App \u2013 User Interface<\/em><\/strong><\/p>\n Now comes the part where the Unity app is made. This section is focused on making the user interface, which means using the editor to place buttons, input fields, and text. Start by creating a new project from the Unity Hub.<\/p>\n Figure 2: Creating a new project in Unity<\/strong><\/p>\n Any of the templates will work fine for this project, but the example here will use the basic 3D template. Give the project a name and set the location, then click the Create <\/em>button.<\/p>\n Figure 3: Project name, template, and location<\/strong><\/p>\n This app’s user interface is a little involved, consisting of nine elements total. There are two buttons, one for retrieving the top five scores from a database and the other for sending a new score. Speaking of sending, there are two input fields asking for a name and score. There will also be a few text labels, with two of them containing the names and scores of the top five players. Start by creating the elements, and then they’ll be positioned in a way that looks appealing.<\/p>\n To create user interface (UI) elements, click the Create <\/em>button in the Hierarchy <\/em>window, indicated by the plus icon with a downward arrow next to it. From there, select UI<\/em>, and then the UI element of choice. You will need five Text <\/em>objects, two Input Field <\/em>objects, and two Button<\/em> objects.<\/p>\n Figure 4: Creating UI objects<\/strong><\/p>\n Next, you’ll position and resize the objects. Doing this requires editing properties in the Rect Transform <\/em>component, located in the Inspector <\/em>window while an object is selected. Changing the values is as simple as selecting the designated field and changing the value within it. Alternatively, you can use the Scene <\/em>window to click and drag objects where you want them.<\/p>\n Figure 5: Setting the location, size, and name of an object<\/strong><\/p>\n Below is a table listing all the objects and the position and size values of each object you’ve just created. They have also been assigned names to help you know which object is which. If you wish to match the names, then renaming the object is done by right clicking the object and choosing Rename<\/em>. Additionally, what type of object each item is will be noted in this table.<\/p>\n Name<\/strong><\/p>\n<\/td>\n Object Type<\/strong><\/p>\n<\/td>\n Pos X<\/strong><\/p>\n<\/td>\n Pos Y<\/strong><\/p>\n<\/td>\n Width<\/strong><\/p>\n<\/td>\n Height<\/strong><\/p>\n<\/td>\n<\/tr>\n NameResults<\/p>\n<\/td>\n Text<\/p>\n<\/td>\n -365<\/p>\n<\/td>\n 50<\/p>\n<\/td>\n 162<\/p>\n<\/td>\n 297<\/p>\n<\/td>\n<\/tr>\n ScoreResults<\/p>\n<\/td>\n Text<\/p>\n<\/td>\n -202<\/p>\n<\/td>\n 50<\/p>\n<\/td>\n 162<\/p>\n<\/td>\n 297<\/p>\n<\/td>\n<\/tr>\n NameField<\/p>\n<\/td>\n Input Field<\/p>\n<\/td>\n 245<\/p>\n<\/td>\n 58<\/p>\n<\/td>\n 160<\/p>\n<\/td>\n 30<\/p>\n<\/td>\n<\/tr>\n ScoreField<\/p>\n<\/td>\n Input Field<\/p>\n<\/td>\n 245<\/p>\n<\/td>\n -36<\/p>\n<\/td>\n 160<\/p>\n<\/td>\n 30<\/p>\n<\/td>\n<\/tr>\n NameFieldLabel<\/p>\n<\/td>\n Text<\/p>\n<\/td>\n 108<\/p>\n<\/td>\n 58<\/p>\n<\/td>\n 103<\/p>\n<\/td>\n 30<\/p>\n<\/td>\n<\/tr>\n ScoreFieldLabel<\/p>\n<\/td>\n Text<\/p>\n<\/td>\n 108<\/p>\n<\/td>\n -35<\/p>\n<\/td>\n 103<\/p>\n<\/td>\n 30<\/p>\n<\/td>\n<\/tr>\n InputDirections<\/p>\n<\/td>\n Text<\/p>\n<\/td>\n 246<\/p>\n<\/td>\n 148<\/p>\n<\/td>\n 274<\/p>\n<\/td>\n 51<\/p>\n<\/td>\n<\/tr>\n SendScoreButton<\/p>\n<\/td>\n Button<\/p>\n<\/td>\n 240<\/p>\n<\/td>\n -130<\/p>\n<\/td>\n 170<\/p>\n<\/td>\n 65<\/p>\n<\/td>\n<\/tr>\n RefreshHighScoreButton<\/p>\n<\/td>\n Button<\/p>\n<\/td>\n -287<\/p>\n<\/td>\n -130<\/p>\n<\/td>\n 170<\/p>\n<\/td>\n 65<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Table 1: All UI elements and their positions and sizes<\/strong><\/p>\n Now all the objects need some proper placeholder text. This can be adjusted by selecting an object in the Hierarchy <\/em>window, then navigating to the Text <\/em>component in the Inspector <\/em>window. For NameResults <\/em>and ScoreResults<\/em>, those can be left with empty text for now. You’ll need to edit their placeholder text for the input fields, which is found by clicking the arrow next to their name in the Hierarchy<\/em>. This brings up all child objects found under the parent.<\/p>\n Figure 6: Revealing child objects<\/strong><\/p>\n Find Placeholder<\/em>, then edit the text to say \u201cEnter Player’s Name.\u201d Do the same with ScoreField<\/em>, but the text should say \u201cEnter Player’s Score\u201d instead. Next, find the text objects being used to label the input fields, and change their text to reflect which field is being edited. For InputDirections<\/em>, you’ll ask the player to \u201cEnter a New Score!\u201d To make it stand out a little more, adjust the font size property to thirty for InputDirections<\/em>. Finally, the text for the buttons should be changed to better indicate what the buttons do. Starting with the SendScoreButton <\/em>object, click the arrow next to it to show the child Text <\/em>object. Enter the text \u201cSEND SCORE\u201d and fill in the button by adjusting the text size to twenty-five. As for the RefreshHighScoreButton<\/em>, that button’s text can say \u201cREFRESH HIGH SCORES\u201d and be given a size of twenty. Once you’re finished, the user interface should look similar to the one seen in figure 7.<\/p>\n Figure 7: The finished UI<\/strong><\/p>\n While not required, if you wish to change the alignment and size of any other text, all you need to do is find the Text <\/em>component in each object and adjust the size, alignment, and other properties to your liking. After that, all that’s left before returning to coding is making the scripts themselves. You will need just a single C# scripts, called HighScoreControl<\/em>. Creating scripts is done by right-clicking in the Assets <\/em>window and navigating to Create->C# Script<\/em>. This script will be called HighScoreControl<\/em>.<\/p>\n Figure 8: Creating a new C# script<\/strong><\/p>\n Once you have created your script, open it by double clicking the script in the Assets <\/em>window.<\/p>\n The HighScoreControl<\/em> script is responsible for both sending and retrieving data to and from the MySQL database. Of these two actions, getting the scores is likely the easiest, as it involves creating a For this script to function correctly, you’ll need the following using statements added at the top of your script:<\/p>\n Within the HighScoreControl <\/em>class itself, add these variables:<\/p>\n You may recognize the Next come two methods, one for getting scores, the other for sending. These will be the methods tied to your buttons in the UI. Both methods start coroutines that will soon be defined, while quickly resetting some text to their defaults.<\/p>\n Speaking of coroutines, now would be a good time to go ahead and create the first one. The Next comes The HighScoreControl <\/em>script is now complete. Be sure to save your work, then return to the Unity editor for a few final tasks.<\/p>\n Start by attaching the HighScoreControl <\/em>script to the Main Camera <\/em>object, as seen in figure 9.<\/p>\n Figure 9: Assigning HighScoreControl <\/em>to Main Camera<\/em><\/strong><\/p>\n Make sure Canvas <\/em>is expanded to show all the UI elements underneath it, then drag the Text <\/em>objects of both NameField <\/em>and ScoreField <\/em>into Name Text Input <\/em>and Score Text Input, <\/em>respectively. Then bring NameResults <\/em>to Name Result Text<\/em>, and ScoreResults <\/em>to Score Result Text<\/em>.<\/p>\n Figure 10: Setting all HighScoreControl <\/em>fields<\/strong><\/p>\n Next, choose the SendScoreButton <\/em>and assign it the SendScoreBtn <\/em>method. To do this, navigate to the Button <\/em>component in the Inspector <\/em>window and find the OnClick <\/em>event list. There, click the plus icon to add a new event.<\/p>\n Figure 11: Creating a new OnClick <\/em>event<\/strong><\/p>\n Drag the Main Camera <\/em>object into the object field. Why the Main Camera <\/em>object in particular? Because it’s the object with the HighScoreControl <\/em>script attached to it.<\/p>\n Figure 12: Assigning an object to get the function from<\/strong><\/p>\n Click on the No Function <\/em>drop down menu, and then navigate to HighScoreControl->SendScoreBtn <\/em>to set the method for this button.<\/p>\n Figure 13: Assigning the button function<\/strong><\/p>\n Do the same for the RefreshHighScoreButton <\/em>object, using the GetScoreBtn <\/em>method instead. Once you’ve done that, try out the project using the play button at the top of the editor. Start by seeing if you can retrieve the current set of high scores. Then, try entering a score of your own, then refresh the top five to see the change.<\/p>\n Figure 14: The completed app<\/strong><\/p>\n A database can be easily made to store all kinds of data, whether it be interesting stats from various players or rankings. Now that you’ve been shown how to set up a basic database with a Unity app, you can expand this knowledge by experimenting with different database value types, multiple tables, and more. On the Unity side, you can try using data from a database to change a game in different ways. For instance, what if a player of higher rank meets one of a lower rank? What would you change within the game itself to reflect this scenario? While Unity is designed as a game engine, there’s also applications outside of video games that you can use it for that utilize these same database integration concepts. There’s much that can be done with this tech, some knowledge, and a little creativity.<\/p>\n![\"Creating](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/04\/graphical-user-interface-text-application-email-4.jpeg\")
<\/p>\nCREATE TABLE scores (\r\n name VARCHAR(15) NOT NULL DEFAULT 'anonymous',\r\n score INT(10) UNSIGNED NOT NULL DEFAULT 0\r\n)\r\nENGINE=MyISAM<\/pre>\n
INSERT INTO scores (name, score) VALUES ('John', 100), \r\n('Sally', 110), ('Phil', 90), ('Katy', 130), ('Jack', 150)<\/pre>\nServer scripts \u2013 display.php<\/h2>\n
hostname<\/code>, username<\/code>, and password<\/code> depending on your configuration.<\/p>\n$hostname = 'localhost';\r\n$username = 'root';\r\n$password = '';\r\n$database = 'highscores';\r\n \r\ntry \r\n{\r\n\t$dbh = new PDO('mysql:host='. $hostname .';dbname='. $database, \r\n $username, $password);\r\n} \r\ncatch(PDOException $e) \r\n{\r\n\techo '<h1>An error has occurred.<\/h1><pre>', $e->getMessage()\r\n ,'<\/pre>';\r\n}\r\n \r\n$sth = $dbh->query('SELECT * FROM scores ORDER BY score DESC LIMIT 5');\r\n$sth->setFetchMode(PDO::FETCH_ASSOC);\r\n \r\n$result = $sth->fetchAll();\r\n \r\nif (count($result) > 0) \r\n{\r\n\tforeach($result as $r) \r\n\t{\r\n\t\techo $r['name'], \"\\n _\";\r\n\t\techo $r['score'], \"\\n _\";\r\n\t}\r\n}<\/pre>\nServer scripts \u2013 addscore.php<\/h2>\n
secretKey<\/code>, which can be anything you like so long as the Unity app uses this value as well. This is because it will be used later on to create a secure hash which verifies that the scores being sent are indeed coming from the Unity app. If the Unity app uses a different value, then the script will not insert the input.<\/p>\n$hostname = 'localhost';\r\n$username = 'root';\r\n$password = '';\r\n$database = 'highscores';\r\n$secretKey = \"mySecretKey\";\r\n \r\ntry \r\n{\r\n\t$dbh = new PDO('mysql:host='. $hostname .';dbname='. $database, \r\n $username, $password);\r\n} \r\ncatch(PDOException $e) \r\n{\r\n\techo '<h1>An error has ocurred.<\/h1><pre>', $e->getMessage() \r\n ,'<\/pre>';\r\n}\r\n \r\n$hash = $_GET['hash'];\r\n$realHash = hash('sha256', $_GET['name'] . $_GET['score'] . $secretKey);\r\n\t\r\nif($realHash == $hash) \r\n{ \r\n\t$sth = $dbh->prepare('INSERT INTO scores VALUES (null, :name\r\n , :score)');\r\n\ttry \r\n\t{\r\n\t\t$sth->bindParam(':name', $_GET['name'], \r\n PDO::PARAM_STR);\r\n\t\t$sth->bindParam(':score', $_GET['score'], \r\n PDO::PARAM_INT);\r\n\t\t$sth->execute();\r\n\t}\r\n\tcatch(Exception $e) \r\n\t{\r\n\t\techo '<h1>An error has ocurred.<\/h1><pre>', \r\n $e->getMessage() ,'<\/pre>';\r\n\t}\r\n}<\/pre>\n![\"Creating](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/04\/graphical-user-interface-description-automaticall-1.jpeg\")
<\/p>\n![\"Figure](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/04\/graphical-user-interface-application-description-2.jpeg\")
<\/p>\n![\"Figure](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/04\/graphical-user-interface-application-description-3.jpeg\")
<\/p>\n![\"Setting](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/04\/graphical-user-interface-description-automaticall-2.jpeg\")
<\/p>\n\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ![\"Revealing](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/04\/text-description-automatically-generated.jpeg\")
<\/p>\n![\"The](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/04\/graphical-user-interface-application-description-4.jpeg\")
<\/p>\n![\"Creating](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/04\/graphical-user-interface-application-description-5.jpeg\")
<\/p>\nUnity App \u2013 HighScoreControl script<\/h2>\n
UniyWebRequest<\/code> to send an HTTP request. That’s the point in which the display <\/em>PHP script from earlier comes in. The server script will be executed and send data back into Unity to later display in the UI created earlier. Posting a new score follows a similar pattern, but requires you use the POST method to send data to addscore.php<\/em>. Before doing this, the user’s input is also hashed using the SHA256 algorithm as a basic security measure. In real-world applications, you would likely need to do more than just hash your values to secure them. But, for the purpose of this example, this process will be kept simple. Once the values are sent through the HTTP request, addscore<\/code> will handle the process of adding the score to the database.<\/p>\nusing System;\r\nusing System.Collections;\r\nusing System.Security.Cryptography;\r\nusing System.Text.RegularExpressions;\r\nusing UnityEngine;\r\nusing UnityEngine.Networking;\r\nusing UnityEngine.UI;<\/pre>\n
private string secretKey = \"mySecretKey\";\r\npublic string addScoreURL = \r\n \"http:\/\/localhost\/HighScoreGame\/addscore.php?\";\r\npublic string highscoreURL = \r\n \"http:\/\/localhost\/HighScoreGame\/display.php\";\r\npublic Text nameTextInput;\r\npublic Text scoreTextInput;\r\npublic Text nameResultText;\r\npublic Text scoreResultText;<\/pre>\n
secretyKey<\/code> value from the addscore.php <\/em>script. Make sure that this value matches the version seen in addscore<\/code> exactly<\/strong>. Additionally, the two URL strings will be used to point Unity to where the server scripts are so data can be sent and retrieved from the database using those PHP scripts. Finally, four Text <\/em>objects are set up in code. These will be used to change the text seen in the UI. Later on, Unity will be told which objects in the editor are to be changed using these variables.<\/p>\npublic void GetScoreBtn()\r\n{\r\nnameResultText.text = \"Player: \\n \\n\";\r\nscoreResultText.text = \"Score: \\n \\n\";\r\nStartCoroutine(GetScores());\r\n}\r\npublic void SendScoreBtn()\r\n{\r\n StartCoroutine(PostScores(nameTextInput.text, \r\n Convert.ToInt32(scoreTextInput.text))); \t\r\n nameTextInput.gameObject.transform.parent.GetComponent<InputField>().text = \"\";\r\n scoreTextInput.gameObject.transform.parent.GetComponent<InputField>().text = \"\";\r\n}<\/pre>\nGetScores<\/code> coroutine, as the name implies, will be responsible for communicating with the MySQL database in order to retrieve the top five scores along with player names currently stored in the database. As mentioned before, an HTTP request will be sent to communicate with the display.php <\/em>script, which will then query the database. This PHP script will organize the data before Unity wetakes that data and separates the returned information to neatly fit it into the texts of nameResultText<\/code> and scoreResultText<\/code>. Those curious underscores found in the echo statements at the end of display <\/em>will be used to more easily separate this data.<\/p>\nIEnumerator GetScores()\r\n{\r\n\tUnityWebRequest hs_get = UnityWebRequest.Get(highscoreURL);\r\n\tyield return hs_get.SendWebRequest();\r\n\tif (hs_get.error != null)\r\n\t\tDebug.Log(\"There was an error getting the high score: \"\r\n + hs_get.error);\r\n\telse\r\n\t{\r\n\t\tstring dataText = hs_get.downloadHandler.text;\r\n\t\tMatchCollection mc = Regex.Matches(dataText, @\"_\");\r\n\t\tif (mc.Count > 0)\r\n\t\t{\r\n\t\t\tstring[] splitData = Regex.Split(dataText, @\"_\");\r\n\t\t\tfor (int i =0; i < mc.Count; i++)\r\n\t\t\t{\r\n\t\t\t\tif (i % 2 == 0)\r\n\t\t\t\t\tnameResultText.text += \r\n splitData[i];\r\n\t\t\t\telse\r\n\t\t\t\t\tscoreResultText.text += \r\n splitData[i];\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}<\/pre>\nPostScores<\/code>, which will handle the process of putting new data into the database. It takes two parameters which correspond to the inputs in the UI input fields. It will first hash the input along with the secret key, then construct a POST URL to send the player’s name and score with alongside the newly created hash. Like with GetScore<\/code>, another HTTP request is sent, this time calling upon addscore.php <\/em>to enter the new data into the database. The PHP script handles the rest from there, comparing the hash it received with the one it creates using similar data before inserting the data.<\/p>\nIEnumerator PostScores(string name, int score)\r\n{\r\n\tstring hash = HashInput(name + score + secretKey);\r\n\tstring post_url = addScoreURL + \"name=\" + \r\n UnityWebRequest.EscapeURL(name) + \"&score=\" \r\n + score + \"&hash=\" + hash;\r\n\tUnityWebRequest hs_post = UnityWebRequest.Post(post_url, hash);\r\n\tyield return hs_post.SendWebRequest();\r\n\tif (hs_post.error != null)\r\n\t\tDebug.Log(\"There was an error posting the high score: \" \r\n + hs_post.error);\r\n}<\/pre>\nPostScores<\/code> is still looking for the HashInput<\/code> method at this point, so you’ll need to finish the script by adding this method. All it’s doing is taking a single input string, which is constructed using the player’s name, score, and your secret key, and constructing a hash based on that string using the SHA256 algorithm. It will then return this hash to PostScores<\/code> to be sent in the HTTP request.<\/p>\npublic string HashInput(string input)\r\n{\r\n\tSHA256Managed hm = new SHA256Managed();\r\n\tbyte[] hashValue = \t\r\n hm.ComputeHash(System.Text.Encoding.ASCII.GetBytes(input));\r\n\tstring hash_convert = \r\n BitConverter.ToString(hashValue).Replace(\"-\", \"\").ToLower();\r\n\treturn hash_convert;\r\n}<\/pre>\nUnity app \u2013 Finishing UI<\/h2>\n
![\"Assigning](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/04\/graphical-user-interface-description-automaticall-3.jpeg\")
<\/p>\n![\"Setting](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/04\/a-picture-containing-graphical-user-interface-des.jpeg\")
<\/p>\n![\"Creating](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/04\/graphical-user-interface-text-application-descr.jpeg\")
<\/p>\n![\"Assigning](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/04\/graphical-user-interface-website-description-aut.jpeg\")
<\/p>\n![\"Assigning](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/04\/graphical-user-interface-application-description-6.jpeg\")
<\/p>\n![\"The](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/04\/graphical-user-interface-application-description-7.jpeg\")
<\/p>\nUsing MySQL with Unity<\/h2>\n