phaser-asset-loader

Automatically creates simple commands to load Phaser assets from a directory.

Quick-Start Guide

1. Install Node.js
2. Open empty directory and instll Grunt with npm install grunt --save-dev
3. Create a package.json and a Gruntfile.js or just copy these two templates into the same directory
4. Create a folder called 'assets' in the same directory and put all of your images, sounds, spritesheets in there. The internal structure of the asset folder doesn't matter. The script will find all the files and their corresponding paths.
5. Open a command line in that directory and run grunt phaser-asset-loader
6. If all went right, you should see a green "Done, without errors" message in the log.
7. There should be a directory called dest with a .js file with all the Phaser commands. Copy that into your game and get coding. =)

Getting Started

This plugin requires Grunt ~0.4.5

EXCEPT I HAVE NO IDEA HOW THE PLUGIN SYSTEM IN GRUNT WORKS SO JUST FOLLOW THE QUICK-START GUIDE.

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install phaser-asset-loader --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('phaser-asset-loader');

The "phaser_asset_loader" task

Overview

In your project's Gruntfile, add a section named phaser-asset-loader to the data object passed into grunt.initConfig().

grunt.initConfig({
  "phaser-asset-loader": {
    files: {
        'dest/phaser-asset-code.js' : ['assets/**/*.png','assets/**/*.jpg','assets/**/*.json','assets/**/*.csv','assets/**/*.txt','assets/**/*.ogg','assets/**/*.mp3','assets/**/*.m4a']
    }
  },
});

Files

They key specifies the path of the destination file and value is an array of source files. Be sure to follow the template and include all extension types that you want.

Usage Examples

Default Options

Use this example for loading basic images, spritesheets, JSON, and audio clips.

grunt.initConfig({
  "phaser-asset-loader": {
    files: {
        'dest/phaser-asset-code.js' : ['assets/**/*.png','assets/**/*.jpg','assets/**/*.json','assets/**/*.csv','assets/**/*.txt','assets/**/*.ogg','assets/**/*.mp3','assets/**/*.m4a']
    }
  },
});

Custom Options

There are no custom options. However, the way I parse the filename, you specify the name of the asset followed by an underscore ( _ ) followed by the type of asset. Only the word after the last underscore will be used as the type.

Unless specified:

• .png and .jpg default to image type.
• .ogg, .mp3, and .m4a default to audio type
• .json .csv and .txt default to text type
• .xml defaults to xml type

If there is no type specified and the extension is not among those listed above, the type defaults to unknown for you to Ctrl+F/ Cmd+F and replace later.

Examples

Assets:

 
preloadBar.png                //.png and .jpg default to image type
player_spritesheet.jpg        //type specified with underscore
player_dead_spritesheet.png   //only word after last underscore used as type
level_01.json                 //invalid type defaults to text type because of .json extension
win.mp3                       //files with same name are loaded as same asset with array of paths
win.ogg                       //files with same name are loaded as same asset with array of paths
win.m4a                       //files with same name are loaded as same asset with array of paths
info.data                     //unknown type and unknown extension defaults to uknown type
 

Results:

 
this.load.image.('preloadBar',['assets/preloadBar.png']);
this.load.spritesheet.('player',['assets/player_spritesheet.jpg']);
this.load.spritesheet.('player_dead',['assets/player_dead_spritesheet.png']);
this.load.text.('level_01',['assets/level_01.json']);
this.load.audio.('win',['assets/win.ogg','assets/win.mp3','assets/win.m4a']);
this.load.uknown.('info',['assets/info.data']);
 

Contributing

Clone. Test. Submit pull request. Wash. Rinse. Repeat.

Release History

My first release. My first Grunt plugin too. =D