Notifications
Article
Firebase for WebGL
Published 14 days ago
11
0
Requirements
Recently there was a requirement in a project I worked on that required Firebase as our backend for saving progress and login for a simple RPG game. I had never worked with Firebase before but I presumed that it wouldn't be that hard. To my surprise, there was no plugin ready to use for Firebase in WebGL.

Creating the plugin

So I investigated for possible solutions and the best one was to create a plugin in javascript for Unity. I did learn a little bit of javascript in the past but I had no experience working in web before so this was all new to me.
Here are the docs for creating the javascript plugin https://docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html. I created the functions as mentioned in the link in a static class named FirebaseWrapper and created a class named FirebaseHandler which inherits from Monobehaviour that implemented the callbacks that the plugin would use using the SendMessage function, also mentioned in the docs. This method can only send one argument so in most cases I serialized a json to make the communication between the plugin and Unity. This script also used some events to easily show changes in the UI.
To make testing easier, since Firebase only works in web and not in the editor, I used a UNITY_EDITOR directive to define some dummy implementation for the login and progression save. This actually made our development much quicker, since other parts of the game didn't require the backend.
I created a WebGL template which implemented the necessary imports and configurations for Firebase, this also checks the login status so when the Unity app launches I can check that and automatically move forward in the ui. https://firebase.google.com/docs/web/setup?hl=es

Demo github repo

Here is a demo with the scripts I used. This project has some syntax errors as of now, mostly because there are some plugins from the asset store which I used but are not included in the repo (Doozy UI is a great plugin for managing your UI!). Hopefully this will suffice.
https://github.com/oms064/WebGLFirebaseDemo
Omar Rodríguez Pérez
Computer Engineer - Programmer
15
Comments