Intro to Firebase
At the November 2015 HTML5 Game Development Meetup I gave a talk on how to use Firebase to build a multiplayer online game in HTML5. The demo will be built using Facade.js and related plugins (Gamepad.js and Box2D Facade.js plugin) but the Firebase related code can be used elsewhere with ease. Art leveraged in the demo was downloaded from Kenny Game Assets.
- Demo: https://html5-game-demo.firebaseapp.com/
- Demo Repo: https://github.com/neogeek/html5-game-demo
But before we get to all that, a little bit about myself. My name is Scott Doxey and I work here at Cantina as front-end developer. You can find me on Twitter and GitHub at the username @neogeek.
What is Firebase?
Firebase is a Platform as a Service (PaaS) that can store data and static files.
What does this mean? It means you can connect to a preexisting database, one that you don't have to setup models or API endpoints for digesting data with. And it also means you store your static files on Firebase.
So let’s get started. The first step, of course, is to sign up with Firebase, which you can do via a Google or GitHub account.
Next create an application by specifying both a unique application name and URL that the data and static files will be stored at.
In this example we have included the Firebase library via CDN and created a reference to a new Firebase object. Note that the Firebase object is just a URL and doesn’t include a username or password. This is because Firebase (by default) has read/write access available to anyone connecting to this application. There are ways to secure different parts of your database but that is for another talk.
So now that we have a Firebase reference we easily start storing data. We can do so by using the set method which is available on all Firebase references. Set can be used to store objects, strings, numbers or booleans.
We can also choose where to store data by specifying a reference child. Here we are saying to store the user in a child object with the key users.
In this example rather than setting the object directly, we are pushing a new child object to users. This results in Firebase creating a unique Id for each child pushed to the parent object.
Here were are using a Firebase event on the users reference. The event being used here, value, will fire whenever there is a change to the children of the selected reference. You can easily test this by editing a value via the dashboard.
Rather than displaying all values of the child reference at once we can iterate through each one, returning the key and value to the console by using the reference methods key and val.
Finally we can remove a specific references by iterating through data returned and filtering based on user name.
How can this be applied to making games?
Quite easily actually.
The demo that I built for this talk utilizes everything mentioned in the previous slides.
This is a screenshot of the demo, but to better illustrate what it does here is a live demo.
So let’s checkout a few simple examples of how Firebase is used to achieve this demo.
In this example I am checking to see if the player has already launched the game before and attempts to retrieve their previous position. If they haven’t played before a new player object gets pushed to the players Firebase reference and the key returned is stored in localStorage for later usage.
Here I am using the on value event to update all active players on the screen. This includes both their position and sprite. If a player has been idle for more than 10 seconds they are removed from the database. All other players (excluding the local player) are rendered to the screen in as real time as possible.
In addition to Firebase I used a few other preexisting libraries to build this demo.
The code for this demo is available online at this URL.