Forums » Help » Dynamic variables in preloader problem

Hello again,
I thought it best to form this as a new question as its related to my last, but on a slightly different angle.

I'm trying to setup an entity to use variables from Weltmeister or if they're not supplied, a default image. ie I change the "fileName" variable in weltmeister to "building1" and this should preload "media/buildings/building1.png".

The problem is though that in the init the variable accurately reports "fileName = building1" but when loaded in game or in WM it throws the error;
Uncaught Failed to load resource: media/buildings/undefined.png

Any idea how I can set the fileName variable to actually be used when creating the animSheet so I can use the preloader to fetch the image.

Thank you in advance!

ig.module(
    'game.entities.building'
)
.requires(
    'impact.entity'
)
.defines(function(){

EntityBuilding = ig.Entity.extend({
    
        size: {x: 96, y:80},   
    collides: ig.Entity.COLLIDES.FIXED,
    type: ig.Entity.TYPE.BOTH,

    _wmScalable: true,
    _wmDrawBox: true,
    _wmBoxColor: 'rgba(196, 255, 0, 0.1)',
    
//the fileName variable will be changed in weltmeister to reflect another 
//image stored in the media/buildings folder such as "building1" or "building2"... etc.

    fileName: "default",
    animSheet: new ig.AnimationSheet( 'media/buildings/' + this.fileName + '.png', 96,80 ),


    init: function( x, y, settings ) {
        console.log(this.fileName); //this shows up with the correct filename if an image called "undefined.png" 
//is placed the media/buildings folder so it must get at least this far.
        
        this.parent( x, y, settings ); 
        this.addAnim( 'idle', 1.0, [0] );
       
    },
});

});

You have to call the parent init() first, before you can access the this.fileName var.

init: function( x, y, settings ) {
	// 'fileName' is supplied in the 'settings' object and will be merged
	// into the entity itself in the parent init:
	
	console.log(settings.fileName); // works
	console.log(this.fileName); // doesn't work yet

	this.parent( x, y, settings ); 
	
	console.log(this.fileName); // works now
},

This also means that using this.fileName when defining the animSheet as a class variable doesn't work because

a) the this object is not referring to Entity at this point, but to the global object (window). The this variable only refers to the entity inside its methods.

b) this.fileName will only have the correct value after init() was called.

Did the solution from the other thread work for you? Or do you have any problems with this?

The solution from the other thread worked a charm, but I simply thought whilst implementing it that I could also do it this way, but in the meantime I decided to change my method of execution and simply load all the assets in 3-4 large png files, split them in impactjs and select them by the index, this way the preloader gets everything ready, and my "worlds" can be prepared the way I want.

Thanks again for all the assistance Dominic!