Completely Dynamic Asset Loading And Rendering! (Language Dependant)

[megmut]

I've recently found myself in a professional position where by the artist is sapping most of my time demanding changes to art work. This has to stop! So I've created a simple and easy way to render art dynamically including the ability to add new art with absolutely no requirements from the coder! I have no idea if this is of use to anybody, just throwing it out there

 

The idea is, the artist or creative director, or anybody who wishes to tinkle with the game can drag and drop the images into your asset folder, than edit a couple of JSON files to add them to the game.

 

So, to start with, we're going to need a couple of JSON files. Beginning with none other than the list of files to be loaded into the game. I am also going to be wrapping these Javascript objects inside languages as to simulate a multi-lingual game / app.

 

You are going to start by creating a JSON file and put inside it:

{    "english": {        "0": {        	"name": "mainMenuBackground",        	"location": "assets/images/mainMenu/yes.png"        }    },    "spanish": {       "0": {                "name": "mainMenuBackground",                "location": "assets/images/mainMenu/yes.png"      }}

Next, in your boot file.. you need to load this in using:

this.game.load.json('imagesToLoad', 'assets/json/states/imagesToLoad.json');

Now, onto the meaty stuff! In your Prelaoder, you are going to want to define the language the user is playing.. for me, that's english.. 

 

We now need a function to dynamically add any image we choose to throw at it:

loadImage: function(asset) {	this.load.image(asset.name, asset.location)},

Add to that, a simple for loop to iterate over out JSON file and boom!

for (var i in imagesToLoad[lang]) {	this.loadImage(imagesToLoad[lang][i]);}

And that's part one! When the user changes the language, the JSON file will look for those assets accordingly. 

 

For part two, we use a very similar process where by the images to be rendered are stored in a JSON (inside a language object again). Here is an example JSON file I would use:

{    "english": {        "background": {        	"programName": "background",        	"assetName": "background1",        	"scale": 1,        	"x": 0,        	"y": 0,        	"anchorX": 0,        	"anchorY": 0,        	"alpha": 1,            "angle": 0        },        "logo": {        	"programName": "logo",        	"assetName": "loadingLogo",        	"scale": 1,        	"x": 400,        	"y": 100,        	"anchorX": 0.5,        	"anchorY": 0.5,        	"alpha": 1,            "angle": 0        }    }}

Calling this file, we can simply do the same for loop as before:

for (var i in images[lang]) {	this.addImage(images[lang][i].programName);}

And then the method that is invoked using that for loop:

	addImage: function(objectName) {		this.objectName = this.add.image(images[lang][objectName]['x'], images[lang][objectName]['y'], images[lang][objectName]['assetName']);		this.objectName.anchor.set(images[lang][objectName]['anchorX'], images[lang][objectName]['anchorY']);		this.objectName.alpha = images[lang][objectName]['alpha'];		this.objectName.angle = images[lang][objectName]['angle'];	},

Thus, allowing the artist to add any art work, as well as draw it to any screen he or she wishes. This is also very handy when tweaks are required: i.e: "move this image 2 pixels to the right".

 

I have also done the same for all text in my project but I'm sure you get the idea on how to do that now!

 

Sorry if this is a little simple for this forum, It's actually my first ever tutorial.. if you could call it that!

 

Many happy coding hours everyone

 

Thanks

 

Nick

[georgejfrick]

You could skip even more manual steps by using texture packer, which will generate the JSON for you. All they have to do is open up the texture packer project, change the image and click 'publish', the new JSON file and new art file will be created.

[drhayes]

You can do this for resources besides graphics using the pack method on the loader: http://phaser.io/examples/v2/loader/asset-pack