Firebase

gurigraphics

  • Posts: 657
Firebase Extension
Create Real-time Games


Platforms
Works only in Flash.



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. It is just not limited to this but also enables authentication and hosting of your app and many more.

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


Get it

- Download Firebase Extension
- Download Javascript Source
- Download Stencyl Project Demo
- GitHub Project Source

(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.

Access the control panel to create your application:




Stencyl Project

1. Create a new project in stencyl.

Access Stencyl to create your game.

2. Create Game Atributtes.

Create 24 Game Attributes (12 type number and 12 type text) with these names:



These blocks will be the "memory slots" for storing data.

3. Start Firebase.

Start Firebase with this block:



4. Post data in database.

Post data in database with this blocks:



5. Get data of database.

Get data of database with this blocks:



These blocks work exactly as Game Attributes. You can use these blocks or else use original Game Attributes blocks to get date.

6. Example of project.




Export Game

1. Export game as swf.

Export game and insert in html the id="flashObject":
Code: [Select]
<object type="application/x-shockwave-flash" id="flashObject" name="flashObject" data="game.swf" width="352" height="192">

2. Firebase source.

Insert firebase source in header of html
Code: [Select]
<header>
<script src="https://cdn.firebase.com/js/client/2.3.1/firebase.js"></script>
</header>

3. Configuration of project.

To test your project Edit on the first line code of archive javascriptHX.js the Address of your application:
Code: [Select]
var URL_firebase = "https://<app-name>.firebaseio.com/";
4. FirebaseHX source

Upload firebaseHX.js in the same folder as the Game.swf file and insert address in footer of body html
Code: [Select]
<script src="javascriptHX.js"></script>
</body>
</html>

5. Template demo
Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>Game</title>
    <script src="https://cdn.firebase.com/js/client/2.3.1/firebase.js"></script>
</head>
<body>
    <object type="application/x-shockwave-flash" width="640" height="480" id="flashObject" data="Game.swf">
        <param name="movie" value="Game.swf">
        <script src="javascriptHX.js"></script>
</body>
</html>

Documentation

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

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

Post Block (INT)



Inputs
- Value (as Number)
- Dropdown (select memory slot of database)

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

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

Post Block (STR)



Inputs
- Value (as Text)
- Dropdown (select memory slot of database)

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

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

Get Block (INT)



Inputs
- Dropdown (select memory slot of database)

Returns
This is a normal block that return a Number value.

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

Get Block (STR)



Inputs
- Dropdown (select memory slot of database)

Returns
This is a normal block that return a Text value.

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

Start Firebase



Inputs
- Dropdown (unique selection firebase)

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.

Notes

- It works only on flash.
- Publish the game on a site with HTTPS address.
- Do not change in HTML this: id="flashObject" name="flashObject".
- There are 12 "INT blocks" to post numbers and 12 "STR blocks" to post text.
- To "big data" post in format JSON and use JSON parse.

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

Special thanks: mdotedot

« Last Edit: November 06, 2015, 11:15:35 am by gurigraphics »

mdotedot

  • *
  • Posts: 1099
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.
Best regards from
M.E.
Hanging out in the Chat:  http://www.stencyl.com/chat/

gurigraphics

  • Posts: 657
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('') );               
            }
        });
 }


« Last Edit: August 02, 2015, 04:48:40 am by gurigraphics »

gurigraphics

  • Posts: 657
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.

« Last Edit: August 02, 2015, 07:59:36 am by gurigraphics »

mdotedot

  • *
  • Posts: 1099
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.
Best regards from
M.E.
Hanging out in the Chat:  http://www.stencyl.com/chat/

gurigraphics

  • Posts: 657
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('') );
           }
}

mdotedot

  • *
  • Posts: 1099
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.
Best regards from
M.E.
Hanging out in the Chat:  http://www.stencyl.com/chat/

gurigraphics

  • Posts: 657
Yes, I did it all.


mdotedot

  • *
  • Posts: 1099
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.


Best regards from
M.E.
Hanging out in the Chat:  http://www.stencyl.com/chat/

gurigraphics

  • Posts: 657
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.

mdotedot

  • *
  • Posts: 1099
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.
Best regards from
M.E.
Hanging out in the Chat:  http://www.stencyl.com/chat/

gurigraphics

  • Posts: 657
I did it with the blocks:



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

gurigraphics

  • Posts: 657


mdotedot

  • *
  • Posts: 1099

Cool.  Can't wait to see an actual game!
Best regards from
M.E.
Hanging out in the Chat:  http://www.stencyl.com/chat/