Jump to content

Completely Dynamic Asset Loading And Rendering! (Language Dependant)


Recommended Posts

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 :D





Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...