New Phaser Asset Pack feature - please test!

[rich]

Hi all,

 

Today I added a new feature into the Phaser dev branch. It's the ability to define and load an asset pack (also known as a manifest file).

 

Basically it's a way to define which files are loaded in a JSON file (or object), split up by section, and then the loader will automatically load each file in the pack. Here's an example asset json file:

{     "level1": [        {            "type": "image",            "key": "starwars",            "url": "assets/pics/unknown-the_starwars_pic.png",            "overwrite": false        },        {            "type": "image",            "key": "spaceship",            "url": "assets/pics/spaceship.png",            "overwrite": false        },        {            "type": "audio",            "key": "boden",            "urls": ["assets/audio/bodenstaendig_2000_in_rock_4bit.mp3", "assets/audio/bodenstaendig_2000_in_rock_4bit.ogg"],            "autoDecode": true        },        {            "type": "spritesheet",            "key": "mummy",            "url": "assets/sprites/metalslug_mummy37x45.png",            "frameWidth": 37,            "frameHeight": 45,            "frameMax": 18,            "margin": 0,            "spacing": 0        }    ],    "level2": [        {            "type": "image",            "key": "ball",            "url": "assets/sprites/shinyball.png",            "overwrite": false        }    ],    "meta": {        "generated": "1401380327373",        "app": "Phaser Asset Packer",        "url": "http://phaser.io",        "version": "1.0",        "copyright": "Photon Storm Ltd. 2014"    }}

Here you can see the assets have been split into 2 sections: level1 and level2. In level1 there are 2 images, an audio file and a sprite sheet. Here is what the preload function looks like:

function preload() {    game.load.pack('level1', 'assets/asset-pack1.json');}

When the loader starts it will immediately parse any asset packs in the queue (you can queue as many of them as you like), then it will add each of the assets into the load queue and finally start the loader. So the actual load process is identical to how it works currently, you can still use preloader sprites, still get the same events.

 

You can even mix and match, so a preload function could contain one asset pack + a bunch of regular load calls as well.

 

Anyway I'd very much like if you could test this It's in the dev branch, there is an example in the Examples repo and I've build the build files with this all in there. Also I updated the TypeScript defs for it too.

 

Here you'll find a full json structure definition: https://github.com/photonstorm/phaser/tree/dev/resources/Asset%20Pack%20JSON%20Format

 

This is the first stage into allowing you to control Phaser from external scripts, the next will be scene generation.

[Heppell08]

That is crazy insane! Looks epic nice!!

[TangZero]

WOW!!!!! 

[yetanother]

Awesome! I was thinking of that last week. I even started making a json format that contains tweens and sprites anims definitions. Can't wait to test that.

[flet]

Thanks for this. It should certainly help make assets easier to automate.

 

Question: Is this based off an existing format? If not, would you consider a more object-y format that uses the keys instead of an array?

 

example:

"level1": {		"starwars": {			"type": "image",			"url": "assets/pics/unknown-the_starwars_pic.png",			"overwrite": false		},		"spaceship": {			"type": "image",			"url": "assets/pics/spaceship.png",			"overwrite": false		},		"boden": {			"type": "audio",			"urls": ["assets/audio/bodenstaendig_2000_in_rock_4bit.mp3", "assets/audio/bodenstaendig_2000_in_rock_4bit.ogg"],			"autoDecode": true		},		"mummy": {			"type": "spritesheet",			"url": "assets/sprites/metalslug_mummy37x45.png",			"frameWidth": 37,			"frameHeight": 45,			"frameMax": 18,			"margin": 0,			"spacing": 0		}	}

Should be able to process it just as easily using Object.keys() call...

 

Using "key" as a key name feels funky to me, but maybe its a personal problem

[terebentina]

@rich, what do you mean by "scene generation" ? 

[rich]

@flet - maybe, I have further plans for dynamic keys, but we'll see (like doing key ranges with number modifiers).

 

@terebentina - so this is a json file purely for asset loading, but I'm also planning one for scenes / game objects. So basically the way a 'create' method at the moment is mostly full of "create sprite" and setting-up physics properties and such, it would be a json file that encapsulated all of that as well. This should prove extremely useful for those who are creating phaser based game editors and level export tools.

[jouniii]

Sounds interesting feature. Right now I have solved asset loading with custom loader pool to which I can just register object classes which then tell the loader what they want to load, thus the preloader definitions are coupled with the objects needing the assets. Own loader state then uses the pool and exhausts it. Mainly just textureatlas image files and the json data is preprocessed with grunt to js objects to optimize loaded files to minimum.

[terebentina]

@rich - the scene generation plan sounds great and I am really looking forward to seeing it. I actually took the first steps towards this in my playground and some things I stumbled upon were:

1. custom classes - you need to add the class type in json because the object might not be a pure sprite, for example, but a class extending sprite.

 

2. parameter order - a class extending sprite might not have all the sprite params or it might have them in a different order (when calling the constructor). This means that the game/scene builder will have to know about the parameter order which kind of makes it less modular. Means you won't be able to just add new classes, even ones made by someone else or you'd need a way to describe the order param for each class. I implement my custom classes with a single object param like this:

function MyClass(params) {    Phaser.Sprite.call(this, params.game, params.x, params.y,...);}var asd = new MyClass({    game: this.game,    x: 0,    y: 10,    key: 'sprite',    frame: 1,    ...});

This is perfect for storing the params in json, without worrying about future compatibility and without having to know the order of the params - I can send them in any order.

Unfortunately, I cannot do it for built in classes, like the sprite so I'd probably have to extend all built in classes just to make the params into an object. Kind of wasted resources, I'd say.

I wonder what your take is on this.

[rich]

I'm curious why the parameter order makes any difference? Surely it's the job of the Scene Builder to intelligently handle that? They can be defined in any order they like in the json, so long as required parameters exist they should be good to go.

 

Custom objects will be more interesting for sure though, but there's no reason why you couldn't provide the Scene Builder with a map of custom object types to keys.

[terebentina]

The way I imagined the Scene Builder was something like this:

click "add new object" button -> it asks for object type -> I select Sprite -> I enter params or move the sprite around a canvas to position it where I want. Since this is a built-in object, sure, it's easy for the Builder to know the order of the params. It could even have the list of params already listed for me to fill in:

x: <enter x>

y: <enter y>

key: <enter cache key>

frame: <enter frame no>

 

That's because the map you're talking about is already built into the Builder.

 

Now let's say I found a nice class made by somebody else that I could use with Phaser (like my VisualTimer). I just drop it in a classes folder then, in the Builder:

click "add new object" button -> it asks for object type -> I select VisualTimer -> the Builder doesn't know anything about this class so it won't know what to ask me.

Sure it could ask me something like:

first param: <enter value for param 1>

second param: <enter value for param 2>

The problem with this is that if I enter a wrong value for second param - let's say I put the 'key' value for param 2 instead of the 'x' value, I will have to rearrange the params to be in the right order and this is prone to bugs.

 

What I wanted to be able to do was something like:

<enter param name>: <enter param value>

<enter param name>: <enter param value>

which would look like this after I enter a few things:

y: 20,

key: 'sprites',

x: 10,

frame: 1

 

So even if x is the third param and y the first, this wouldn't matter because that class would use the key names:

new VisualIndicator({y: 20, key: 'sprites', x: 10, frame: 1})

 

And this would be saved in json as something like:

stage23: [

    {className: 'VisualIndicator', params: {y: 20, key: 'sprites', x: 10, frame: 1, seconds: 30}},

 

    ...

]

 

Anyway, this is highly theoretical for now, at least for me and with your deeper understanding of Phaser I am sure you can come up with something good. And really looking forward to seeing it

[rich]

That's not what it will do

 

It will be a json parser that effectively replaces the 'create' statement of your game. So it'll create sprites, set-up physics, add sounds, hook to local vars, etc. There will be no visual editor as such. That's a job for the community imho. It will just give editor authors a standard way to export those scenes into a json file that Phaser can load. Supporting custom object types within that will be pretty painless. For the editor itself, more so I guess.

[terebentina]

Ok, I'll wait and see. I wasn't thinking you were going to build the visual editor, btw. Just trying to imagine how a visual editor would look like if I were to create it on top of this json for game objects which you haven't even released yet. Got carried away

[rolandino]

Looks v interesting. Any sense as to when it might be ready to roll-out? I know, piece of string etc ... but just wondered, as I've found myself just creating a json file to describe various bits in a smalll game ... so always keen to avoid reinventing wheel, particularly if this is going to be out soon (ish)

 

R

[rich]

The asset pack support will be in 2.0.6 next week.

 

The Scene file will be in 2.1.

[rolandino]

Great, thanks. Sounds v useful.

[wildsky]

Sounds great! I love the approach you're taking with the architecture.

[adicirstei]

Is the stage feature out yet? The official release today is 2.1.3. 

 

Looking forward for it.

[Roberto__74]

@rich, Im looking Phaser documentation about asset packs at:
http://phaser.io/docs/2.4.3/Phaser.Loader.html#pack

 

About the 3rd parameter (data) it says:

"The Asset Pack JSON data. Use this to pass in a json data object rather than loading it from a URL. TODO"

You know if this feature is already functional? o do you have any idea when it could be functional?

thanks a lot!

[PhaserEditor2D]

@flet - maybe, I have further plans for dynamic keys, but we'll see (like doing key ranges with number modifiers).

 

@terebentina - so this is a json file purely for asset loading, but I'm also planning one for scenes / game objects. So basically the way a 'create' method at the moment is mostly full of "create sprite" and setting-up physics properties and such, it would be a json file that encapsulated all of that as well. This should prove extremely useful for those who are creating phaser based game editors and level export tools.

 

Hi @rich, I see a scene json file was an idea you had but for any reason it is not yet implemented. I see this is very useful to improve the Phaser tooling. I guess editors like MightyEditor or LREditor are using custom file formats, but it will be pretty nice to have an official scene json format.

 

I am planning to add a very simple scene builder to Phaser Editor and generate the "create" code, however an official scene file should be much better and cleaner implementation.

 

So I vote to get a scene file in Phaser!

[Djloop]

I am unable to load from more than one asset pack. 

If I put all my assets to load from one asset pack then everything loads fine, but as soon as I add a second asset pack the assets listed in the second pack does not load to the cache.

Does phaser support multiple asset pack loading?

[NKpresh]

is it possible for me to load an asset from a website into my game?