Abra a New Server/Automation tool for Phaser

Recommended Posts

New to Phaser. wanted to make a cool tool that could extend into Phaser! 

Abra Auto loader and server for Phaser. Just install node and go! ( Not sure if this would be best category for this topic)

Auto load assets into phaser and run it as well. Stop messing around with the back end and writing asset files into your code. Abra works with all types of files. It will auto load anything you want it to. Some files just require a bit of extra love.

Turn your preload asset code into easy auto loaded assets. Abra grabs asset files automagically. He can grab most assets without any instructions, but can also grab sprite sheets and atlas with simple configuration file.

Your preload could look like this. Try Abra today and turn your code into functional easy design. Abra also protects your code by obscurity. If javascript is copied. User does not have asset list, or any actual Phaser code used to load assets.

I have seen a few tools that somewhat do what I aimed to do, but not quite the same functionality. I really aimed to make an autoloader/server. Where nothing has to be done to get assets loaded into phaser.

Abra can load most assets with no instructions.  This was just a fun test project I made for node, but figured I would release it to the community to see if anyone has some use for it. There are a few small glitches I am working out. For the most part should be able to be used to extend phaser and make it much easier. If project gets popularity I will keep it up and add more features and bug fixes. Turn your preload code into this.. With no configuration. Just use abra to start the server! Abra is loading all assets into phaser!

var PreloadState = {
  preload: function () {
    //built in Abra asset load function and Abra object creator. Send true flag to use directory listing for asset names. directory-assetname. False = just Asset name for sprite. Warning this can result in images with the same name to have the same sprite name.
    Function.apply(null, ['dirAdd', JSON.parse(document.getElementById("phaserConfig").getAttribute('value')).abraLoad])(false);
  create: function () {

Abra also lets you create custom functions/ or use built in functions to actually extend Phaser code. Make an entire layout with 1 line of code - and math equations. You can create entire layouts within Phaser. With two math equations and a few JSON objects. 

Create multiple sprites with just array placements - Also auto generate arrays with math or static variables.  Position below x,y are created with chained equations. Example 0+100 is set for x. which will +100 for each of the array spots. So the last array spot = 800. Y is set to something like this. 

0+250_4 (Which tells abra to make it so y only gets the +250 every 4 spots. resulting in the first 4 being 250 and the last 4 being 500.) You can chain and do any type of math. Addition/Subtraction/Multiplication/Division.
Anchor is set to 0.5 in the example below. x: anchor logic is the exact same as y. Write much less code and even chain math equations to create functional easy design. 

    "spinner2" : {
      "position": {
       "x": "[{math-x}]-8",
       "x": "[{math-y}]-8",
      "anchor": {
        "x": "[{anchor}]-8",
        "y": [0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5]

Create this!! 


With just the code below!


    "{mx}": "48+48_1-480_10",
    "{my}": "100+48_10",
    "qbox" : {
      "anchor": {
        "x": "[0.5]-100",
        "y": "[0.5]-100"
        "x": "[{mx}]-100",
        "y": "[{my}]-100"



The documentation will get a bit better. For now if you have any questions feel free to ask.

Edited by Ravonus

Share this post

Link to post
Share on other sites

Current feature list and my ideas of to Add. Project is still very fresh, but I would love to get feed back so I can add stuff people would use!



  • Easy Express Web Server - Ready to run Phaser anywhere you want it!
  • Auto Asset Load
  • Hide Configuration/Phaser code
  • Extend Phaser Code - Currently create object function.
  • Custom Templates and variables
  • Math equations for auto loading of sprites
  • Black listing of assets
  • AUto Server restart on asset Changes - right now uses nodemon. Actual Socket.IO client updates could come in the future.(npm run watch) for current wach command.
  • Auto Array building
  • Custom Functions

To Add

  • JSON Config Generator (Working on)
  • Better configurations (Working on)
  • Better Math functionality
  • More pre built phaser extended functions
  • API Method (To use with current web servers, instead of using Abra to host game as well)
  • Game example that shows full functionality of Abra.
  • Automatic Phaser update/add
  • Stand alone node module
  • Multi-game support for one server
  • More configurations. Example - set file types for phaser - even down to the specific asset.
  • Socket.io connections - Create custom methods to send custom abra data specific to the user. Example could use a login system and actually let users upload their own images. You would not have to change phasers logic at all. Just socket.io check that would change the object to said users asset folder.
  • Easy test method. Test Abra and make sure its grabbing all the configurations,etc. So you don't have to take time troubleshooting the client. Abra will tell you what files are being served/blacklisted/configs you have/etc.


Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.