Unity User Data & Scoreboard Tutorial - Firebase Realtime Database

hello guys welcome to a tutorial on using the firebase realtime database with unity in this tutorial we are going to be going over how to save and load user data using firebase we will go over setting up the realtime database in the firebase console then how to save some simple user data from your unity project to the database and then how to load that data from the database and display it on a scoreboard this tutorial builds off of the previous tutorial about firebase authentication before continuing with this tutorial i suggest watching the previous video so that you're at the same stage you can find the link in the description okay let's get started the first thing that you need to do if you don't already have a unity project that you are integrating this into is download the starter project i made from github it is essentially the completed project from the last tutorial but there are some new ui elements for things we are going to be adding today link is in the description if you don't want to use the starter project that's fine as well you can create your own or use an existing project i do suggest using my starter project though as it is the easiest way to follow along with the tutorial now that you have the starter project we are going to go to the firebase console once we're there on the left side we're going to navigate to the real-time database tab and then here we're going to click create database it's going to prompt you with wanting to create it in lock mode or test mode we're going to be doing it in lock mode to start so just click enable and it's going to load into our main data tree here which is currently empty okay now let's look at the options we have here in the top left we have these four tabs here data which is the one that we're in the rules here which shows all the rules for our database which we're going to get into in a minute then we have backups which isn't available unless you have the blaze plan okay and then you have the usage which shows you how much data is being sent and received so let's go back to the rules tab here and we're going to actually set these both to true so we have read true and write true now because we selected the lock mode when we created the database by default set them to false so it's completely private and nobody can read and write but now we've made it completely public because you set them both to true now when we publish this it's going to give us a warning here saying that this is public and are you sure you want to do this because anybody can read and write to this database now this is okay because we're going to be coming back to this later and fixing it so just dismiss that for now there is one more thing we need from the firebase console if you don't already have it downloaded we go to the gear icon here and go to project settings scroll down we're gonna need to get our google services.json file so we're just gonna download that for later and that's all we have to do in the console for now so let's head back to unity okay so now that we're back in unity the first thing we need to do is import the firebase real-time database package now in the previous tutorial i showed how to do it by going to assets import package custom package and then you would select the correct package that we downloaded from the firebase website but we're not going to do it that way anymore because that's the old way and that's not how we're meant to do it in uni 2019 and uni 2020 so the new way of doing it is by going to window package manager and it should open the package manager window here and if we make sure that we're in the right packages filter here the in project okay it should show these three packages already installed if you're using the starter project under google llc or if you properly installed the packages last episode okay so i went ahead and uninstalled all the firebase packages just so we can start from scratch and make sure that if you're using your own project you can figure this out too so we're gonna go to this gear here and click on advanced project settings which is where you can get access to the scoped registries so this is the google registry here and it's already here but you're gonna have to go ahead and add it if it's not there you can give it whatever name this name works you're gonna need to make sure you have the same urls here and scope right here and then you're just gonna have to click apply and then if we close this it should show up in the package manager if we change the filter to my registries you should see here the google llc registry and these are all the packages that google offers for unity so the first thing we're going to need to do is install the firebase app core package okay and you should see it automatically installed the external dependency manager the next one we need is the firebase authentication we're going to reinstall that okay and the last one we need is the firebase real-time database and we're going to install that as well okay and now to make sure they're in here if we change the filter back to in project it should show all these four packages here under google llc and these are the four that we need okay now if you're using 2019 instead of unity 2020 this option here for advanced product settings and adding the google llc registry is not there yet so in 2019 you have to actually go and manually add it in the manifest.json file which can be found in your project folder and then the packages folder and the manifest.json and right at the bottom here you're going to have to add this part here that i've highlighted it's basically the same thing just you have to add it in this file instead and what this will do is just basically add what we did already which is add the google llc registry to the my registries now you should hopefully have all these firebase packages installed correctly now and we are ready to move on okay now we're going to go get that google services.json file we downloaded or you may already have it in your project if you're continuing on from last time so we're going to grab it here and we're going to drag it into our streaming assets folder here if you don't have this folder then just make one and you can see here now it's in our project this google services.json file is what links your unity project to your firebase console project so you need to make sure that you have your own unique google services.json file in your project okay so we're going to start by doing a few cleanup tasks here so now that we're using firebase authentication and the firebase database we're no longer going to call this the auth manager here we're going to call it the firebase manager so let's rename it to firebase there we go and then also on this firebase manager we have the auth manager script which we should now rename if we go to the scripts folder here instead of auth manager let's rename it also to firebase manager there we go and now let's open it up and once visual studio opens here we have to also change the class name here from off manager to firebase manager and make sure to save it so back in unity here let's actually click play and see what we left off with from the last tutorial so let's start by logging in here okay so let's click log in right now it just shows this logged in text but what we wanted to actually do here if we end the game and go under our canvas here and what we wanted to do is disable this login ui and enabled this user data ui and then we'll actually be interacting with these boxes to change user data okay so back in our firebase manager script here let's scroll down and find our login innumerator method here and then at the bottom here where we're right now setting the confirmation text to say logged in i'm just going to copy from my reference script here in some code which is basically going to wait for two seconds and then it's going to call this method in the ui manager to change to the user data ui and then it's just going to set the confirmation text to blank so pause here and copy this code now if you remember from last episode this ui manager script it comes with the starter project which basically handles changing between the different screens so you're either gonna have to use this one or if you're in your own project you're gonna have to make your own system to change between screens okay now back in unity let's log in and it shows a login text and then two seconds later it switches to the user data screen perfect so the next thing we're going to do is hook up the sign out button okay so back in our firebase manager script first thing we're going to do is right at the top we're going to type using firebase.database so we have all our package reference in here and then what we're going to do i'm going to copy in from my reference script here all the variables that we're going to be using for these new database features so yeah username xp kills etc we'll get into how to implement these later but for now just pause the video and copy these in okay so now what we're going to do is because we're going to be signing out we're going to be going back to the login screen so what we want to do here if i copy these two methods from my reference script here is we are going to want to clear the login fields and register fields when we go back to those screens so basically what these two methods do here is they just set all the text boxes to blank so go ahead and pause the video here and copy them down okay so let's implement this sign out method here now so right below the register button let me copy from my script here this sign out button method here and what it does is basically does auth dot sign out which signs you out of the authentication and then right after it does the ui manager and it runs the login screen method which brings us back to the login screen and then it calls our two clear field methods that we just made so go ahead and pause the video here and copy her down okay back in unity here let's hook up that sign out button so we go to our user data elements buttons and then our log out button here and we're gonna have to drag in our firebase manager script into here and then we're gonna go to firebase manager and find our sign out button method right there and now the sign up button is hooked up now if we click play and log in okay now if we click the sign out button it'll bring it back to the login screen and the input fields are empty perfect right now if we go and turn off our login ui and turn on our user data ui here just so we can see you can see that these are our four user data that we're going to be storing here username experience kills and deaths so now let's go and hook these up back in our firebase manager script here we're going to go right to the top and we're going to make another variable here the database reference variable here called a db reference and then we're going to go down to our firebase initialize firebase method here and let me copy it in here this is where we're going to initialize it to the firebase database default instance root reference okay so copy this and now let's go right to the bottom here and we're going to get a bunch of methods here so let's start with the update username methods here now you notice there's actually two of them so the first one here is for the update username off so for the authentication there is a username linked with the user profile so this first one basically does the update profile async passing the profile which has the username in it okay so and then now the second one down here the update username database one is for a username that we're going to be storing in a database for the scoreboard so if you see right here this db task this is the main line right here that updates the database so we go to our db reference and then a child of that will be a users list and then the child of that will be our user dot user id and then the child of that will be the username and then we're going to set that value to the username that we passed to the method and then it waits for the task to be completed and then down here it just handles if there's any errors and otherwise the username is now updated and that right there is how you update data in the database now let's scroll up and let's copy in for my reference the save data button method and this method basically is going to call all the update enumerator methods so you can see here it's starting the co-routine for the update username auth update username database passing in the username field.text so that's what's in the username field okay and then the other three here right now would have errors because we haven't made them yet so let's go make them scroll down let's let me copy these in for my reference here they all are now we have the update xp high numerator update kills and update deaths and these basically do the same thing i did with the username it goes to the database reference users user id instead of username it just goes to death kills or xp okay so now you can go ahead and copy all these in scrolling back up here you should see it now all the errors are gone because they exist now so there's one more thing that we should do here before we test it and that's in our login method here so since we already know the username from when we register the user when we log in we want to set the username field in the data screen to the user.display name and the other thing we want to do is we might as well clear the fields here and then if we scroll down to the register let's also clear the fields here okay let's go test it okay so now let's wire up this save button under the user data elements buttons save button here let's in the on click here drag in the firebase manager object and then find the function for the save data button okay now let's also on the firebase manager remember we added all those variables so let's drag in all the references to these variables so under the elements here let's open all these up we need the username input the xp inputs kills input and the deaths input now for the score element you're gonna have to go to this prefabs folder that came with the starter project and this is the score element prefab so we're gonna drag that in there we'll get more into what that is in a bit and then the same thing we're gonna have to go to our scoreboard ui go down into the elements school view viewport content this is where the content is gonna go for our score elements which again we'll get into when we hook up the scoreboard okay let's go ahead and play now log in quickly and you can see here that zippy is the username and it populated the field that's perfect now let's go ahead and fill out these other fields with some data here so let's give one for experience 10 for kills and 7 for desks and then let's click the save button okay now if we look in the firebase console real-time database in the data tab here you can see that there's actually data here now that save button sent the data to the database and here it is so there you can see the users and then my uid for zippy and then you can see the desk kills the username and the xp so yeah we have data here now perfect okay so the next thing we want to do is we want to actually reload the data from the database if there already is some and populate those fields so let me copy it in here here we go load user data so right here here's the task it's going to go to the db reference under the child users and then it's going to go under the child our user id and it's going to get the value async so it's going to get all the data from there there's any errors if the data is null so if there is no data yet we haven't sent it before we're just gonna set all the fields to zero because no data exists okay and then otherwise if there's data it's gonna create a snapshot of the task result and then it's gonna set the xp field because field depth field to a snapshot of the xp value kills and deaths so go ahead and copy this down okay now let's scroll up to the login method here is the login method and let's go down the else and right after we set the text to say logged in we're now going to call the load user data start co routine so this is going to load the user data right before we wait two seconds and then go to the user data screen so yeah i think that's good let's go test it [Music] okay so now let's play again and this time log in with our test account here log in see this is the tester username and you can see that all the inputs here populated with zero because we have no data for the tester account yet so let's go ahead and fill in some data now okay and let's click save here and then if we go look in the firebase console now in the database you can see there's another uid which is for the tester account and there's the desks kills in xp here now so now back in unity let's sign out of the tester account and sign back into my zippy account and as you can see now this is the zippy data populating instead of the tester so next let's hook up the scoreboard so back in the firebase manager right at the bottom here we're going to bring in one last big method the load scoreboard data method here now it's going to do a db task going to go to the db reference child the users list and then it's going to order all the data by the child of kills so that the user with the most kills will show up first so it's going to get that value it's going to wait for the task to be completed any errors will be handled here then it's going to set snapshot to the dbtask.result so all the data we just got then it's going to loop through all the childs in our scoreboard content transform and just destroy them all because we're going to remake all of the score elements in this next for each loop here it's going to loop through all the user datas in the snapshot so the children it's actually going to reverse it because it actually comes in as the least kills showing first but we want the most kills to show first so here actually it's red here so let's show potential issues and it shows here that we need to import this using here so it's apply and if you go right to the top you see it just brought in the system.li and q so copy that in okay so if we scroll right back down here you can see the air is gone so this 4-h loop loops through all the users in the users list in the database right so what we're going to do is we're going to go through each user get the username from the child snapchat username same thing with the kills the deaths and the xp and then what we're going to do is we're going to instantiate a new scoreboard element here the instantiate score element which is the prefab and then we're going to put it under the scoreboard content transform then we're going to go to the score element and get the component score element and we're going to call the method new score element passing the username kill destin xp and if we actually go to the score element script here you can see that this came with the starter project it just holds all the texts for the score element and this method right here new score element sets all the text to the past username kill desk and xp okay and then the very last thing that we need to do is we just need to go to the ui manager instance and load the scoreboard screen okay now let's scroll up and right below the save button method here let's put in one last method here for the scoreboard button and what this does is it just starts the co routine for the method we just made load scoreboard data and that's it copy this in and we're good to go back in unity now we just have to set up the two buttons on the scoreboard scene here so let's go to the scoreboard button in the user data screen and the on click let's drag in the firebase manager find the scoreboard button method there we go now there's a login button on the user data ui but there's also one in the scoreboard ui we have been hooked up yet so under buttons the logout button here we just also have to drag in the firebase manager to this on click and find the sign out button method here to hook up that button okay so back in the firebase console here let's go to the rules tab here and if you remember at the very beginning the tutorial we set both of these rules to true which sets the database to completely publish which we said was a bad idea because anybody can read and write so we're actually going to copy in proper rules here for our database setup what this does is underneath the users you can only read if you're authenticated so your auth is not equal to null so if you're logged in you're allowed to read underneath users and then underneath a certain user id you can only write to that data if that user id matches your current auth.uid so the user id you're currently logged in with so there's this cool thing here also called the rules playground which you can kind of test these rules with so if we just set it to read here and on authenticate me and run it you can see that it says that i'm denied because i'm not authenticated but if i do authenticate myself and make sure that my user id is one of the user ids here so let's grab the tester user id here put it in that user id field and then make sure we're reading and that we're actually going to that just to the users and run you can see it allows me because i have a user id that is authenticated now let's try and update here let's make sure that the right works properly and it doesn't work let's see why here uh oh it's because i'm not actually going to a user id under the users so let's put in the tester user id and now it lets me write now let's maybe instead get the zippy user id here and try and access zippy's data but with the tester uid trying to do it and you see it doesn't allow me because the uid doesn't match so now let's copy this one and make sure we put in the uid and now it allows me because the user ids match so this whole rule stuff can be confusing but i highly suggest you go read the docs if you're going to be making a proper database because this stuff's important to make sure that your data stays secure so now let's test the final product here so click play and let's log in with my zippy account quickly okay all our data is here now let's click on the scoreboard button brings us to the scoreboard screen and there you go it shows our two users the zippy and the tester user and it shows zippy first because he has more kills now let's go ahead and go back and let's actually change zippy's kills to zero here and then save that data and go back to the scoreboard and now you can see the testers first because he has five kills which is more than zero kills which zip he has awesome so i know this is a really long tutorial but there was a lot of stuff to cover if you need help join the discord server i'll try to help you as much as i can there other than that i think that's it for this tutorial thanks for watching

Channel: xzippyzachx

Views: 36,671

Keywords: Unity, Tutorial, unity tutorial, firebase, user, login, system, user login, Authentication, Register, Account, Firebase unity, Unity Firebase, Firebase Tutorial, zippyzach, xzippyzachx, c#, game, development, user account, unity user account, user login tutorial, how, to, make, how to make, database, scoreboard, user data, data, real-time database, unity firebase database, Firebase database, realtime database, how to, game development, firebase unity database

Id: GjyQiq23fBk

Length: 25min 11sec (1511 seconds)

Published: Wed Dec 23 2020