Firebase

Firebase Extension
Create Realtime Games

Platforms
Works only in HTML5.

About this extension

Firebase is a complete platform for building mobile and web applications.
It provides a real time JSON database for storing and sync your data with applications.

Firebase Extension is a new Stencyl Extension that lets you use the Firebase with three lines of code!

Recommendations for use

A public multiplayer game requires better security rules to make this available online.
Use this only in pessoal prototypes or private educational games.
Do not use in commercial games and do not post on Itchio and etc .
The free version of Firebase supports only 100 simultaneous users.

Get it

- Download Firebase Extension

(How to Install and Update an Extension)


Get Start

1. Create an account on firebase.

The first thing you need to do to get started with Firebase is sign up for a free account.


2. Create an application in firebase.

To use this extension you will need: apiKey and projectID

3. Firebase authentication.

In Firebase project go to Authentication -> Sign-in method -> active anonymous

Stencyl Project

1. Create a new project in stencyl.

Access Stencyl to create your game.

2. Set Firebase apiKey and projectID and game attributes.



Always use "/" to define the database URL

3. Use Game attributes to get data.



4. Use Update block to update data in Firebase.


 
In this example, when you click the W key, the player1 score increases by +1
 
5. How store data to different users?
 

 
Data is Set and Get always as string. 


 
Project Demo: how move chars

Stencyl
0- Download and open project:  Download
1- Open "Login scene"
2- Set your "apiKey" and "projectID"
3- Right side header panel: Change platform to "HTML"
4- Right side header panel: Click Button "Test game"

Game
5- Insert input username as "player1"
6- Click button "Start"
7- Open other tab browser with same game url
8- Insert input username as "player2"
9- Click button "Start"
10- Use arrow keys to move

Documentation

For details on data security and user authentication visit: https://www.firebase.com/docs/security/

----------------------------------------------

ApiKey Block (String)

 

Inputs
- Value (as String)

Returns
This is a action block that does not return a value.

----------------------------------------------

Create Game Attribute Block (STR)



Inputs
- Value (as Text)

Returns
This is a action block that does not return a value.

----------------------------------------------

update Game Attribute Block (STR)



Inputs
- Value (as Text)

Returns
This is a action block that does not return a value.
 
----------------------------------------------

Version History

Version 1.0 - Deprecated
Version 2.0 - 06/11/2015 - Update Build 8737.
Version 2.0.1 - 06/11/2015 - Bug fix: Int to Float Number.
Version 3.0.0 - 20/06/2020 - Simplified version

Notes

- It works only on HTML5.
- To "big data" post in format JSON string and use JSON parse.
- A public multiplayer game requires better security rules to make this available online.
- Use this only in pessoal prototypes or private educational games.
- Do not use this in commercial games and do not post on Itchio and etc .
- The free version of Firebase supports only 100 simultaneous users.

License: The MIT License (MIT)
Copyright (c) 2015-2020 Gurigraphics

Special thanks: mdotedot

Make your own extension.

For flash you could look into externalinterface call to javascript.
You can look at my parse.com extension which used REST API from parse as well for the other platforms.

Good luck with it.

Best regards from
M.E.

Thanks mdotedot!

For now I did this test and it worked:

Reload html page on click

Code: [Select]

import flash.external.ExternalInterface;

override public function init() {
        /* ============================ Click ============================= */
        addMouseReleasedListener(function(list:Array<Dynamic>):Void
        {
            if (wrapper.enabled)
            {
               ExternalInterface.call( [ "(function(){setTimeout(\"",
               "location.reload();\\n",
               "\",0);})" ].join('') );               
            }
        });
 }


I developed.  ^ ^

Blocks


Haxe code

Code: [Select]

import flash.external.ExternalInterface;

override public function init() {
    /* ============================ Click ============================= */
    addMouseReleasedListener(function(list: Array < Dynamic > ): Void {
       if (wrapper.enabled) {
                   var param1 = Engine.engine.getGameAttribute("FIREBASE");
                   var param2 = Engine.engine.getGameAttribute("NAME");
                   var param3 = Engine.engine.getGameAttribute("ID");
                   var result = ExternalInterface.call("addNumbers", param1, param2, param3);
                   ExternalInterface.call(["(function(){setTimeout(\"",
                   "post();",
                   "\",0);})"
                   ].join(''));
       }
    });
}

Html/Javascript code

Code: [Select]

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Stencyl</title>
</head>
<body>

        <object type="application/x-shockwave-flash" data="game.swf" width="800" height="600">

        <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            var firebase = "";
            var name = "";
            var id = "";

            function addNumbers(num1, num2, num3) {
                firebase = num1;
                name = num2;
                id = num3;
            }

            function post() {
                var post = new Firebase(firebase);
                post.set({
                    name: name,
                    id: id,
                });

            }
        </script>
</body>
</html>

Now missing put "all code" inside of the Haxe.

Again, check out the parse.com code how to source in the cdn.firebase.com/js/client/2.2.4/firebase.js code with externalinterface calls.
Be also very aware of the fact you can't mix http and https protocols later on. So if you publish the flash game it has to be on a https location or it will not work.
The REST API would be more cross-platform but for flash you might up looking at the direction you are moving now.

Good luck with it.
Best regards from
M.E.

Hi mdotedot, I analyzed the parse code. Very advanced for me.

I tried to create a block, but did not run the code.

Code: [Select]

<palette>
<block tag="firebase" spec="firebase post" ccode="Firebase.post();" type="action"  color="cyan" returns="void">
<fields>
</fields>
</block>
</palette>


Code: [Select]

package scripts;
import flash.external.ExternalInterface;

class Firebase
{         
  public static function post(){       
            var param1 = Engine.engine.getGameAttribute("FIREBASE");
var param2 = Engine.engine.getGameAttribute("NAME");
var param3 = Engine.engine.getGameAttribute("ID");
var result = ExternalInterface.call("addNumbers", param1, param2, param3);
        ExternalInterface.call( [ "(function(){setTimeout(\"",
"post();",
"\",0);})" ].join('') );
           }
}


So you created an extension?

The palette code is from blocks.xml ? It should be
And the Firebase class code should be in a file Firebase.hx

Both files need to be accompanied by other files that make up an extension.

After you made those files and put them in the engine-extensions directory in a folder. You need to restart Stencyl if you did all this when Stencyl was running in order for the extension to appear in the Settings->Extensions system.

If you want me to take a look put all the files in a zip and PM me or attach to a forum post.

Best regards from
M.E.

Yes, I did it all.

info.txt : the compatibility looks kind of strange. I'm not sure if that is allowed. Please use

Code: [Select]

compatibility=all
At least for now .. If all works you might be able to change that.

Also
Firebase.hx starts with

Code: [Select]

package ..
try without it.

To make it easier to debug I would also advice to use:

Code: [Select]

trace(' in post');
Before or better instead of the externalinterface calls. I'm not sure if the syntax on the second call is correct.

Let me know how it goes!

Best regards from
M.E.

Thanks mdotedot,

The error is that this code should be of the another class:

Code: [Select]

Engine.engine.getGameAttribute("");
So, better is too create a block for it.

In order for Engine code to work you need to import the Stencyl API:

Code: [Select]

import com.stencyl.Engine;

Hope this helps.

Best regards from
M.E.

I did it with the blocks:



It got weird. Not sure if the blocks are sufficient for universal use.

I started by login



https://dl.dropboxusercontent.com/u/35815394/firebase/index.html

Generate user id: ok
Authentication: ok

Almost realtime
https://youtu.be/AuEuhj51Uio

Cool.  Can't wait to see an actual game!