Abra a New Server/Automation tool for Phaser

[Ravonus]

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 () {
    this.state.start('HomeState');
  }
};

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"
      },
      "position":{
        "x": "[{mx}]-100",
        "y": "[{my}]-100"
      }
  }

 

https://github.com/Ravonus/Abra

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

Edited January 25, 2018 by Ravonus

[Ravonus]

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!

 

Features

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