Forums » Help » Entity subclass: how to access a resource image's dimensions at init time?

I want a creator class instance (a game, a factory, or another entity) to specify the image path of the entity that it creates.

In the Impact examples that I've seen, entities are either loaded from a wm level, or are hard coded with a texture path.

This seemed like a no brainer but my approach doesn't seem to work. Spawned entities are unable to access their texture file's attributes at init time.

I spawned an EntityButton from MyGame's init() method like this:

init: function ()
{
	this.playBtn = this.spawnEntity (EntityButton, ig.system.width/2, ig.system.height/2 + 96, {path:'media/button-play.png', owner:this, callback:'play'});
},

with EntityButton implementation starting like this:

ig.module(
	'plugins.button'
)
.requires(
	'impact.game',
	'impact.entity',
)
.defines(function()
{
EntityButton = ig.Entity.extend (
{
	init: function (x, y, settings)
	{
		var img = new ig.Image (settings.path);
		ig.log('1.');
		ig.log(img);
		ig.log('2.');
		ig.log('loaded: '+img.loaded);
		ig.log('dimensions: w:'+img.width+ ' w:'+img.height);
		...

In the browser, the console shows this:

1.
Class:
data: HTMLImageElement
height: 60
loadCallback: null
loaded: true
path: "media/button-play.png"
width: 116
__proto__: window.ig.Class

2.
loaded: false
dimensions: w:0 h:0

My question: why, despite img reporting it has been loaded, does a subsequent img.loaded access indicate false and said image's dimensions 0?

Likely because settings.path = null.

You can grab an image's dimensions like so:

var img = this.currentAnim.sheet.image;
ig.log( img.width );
ig.log( img.height );

Best.

That's not it. Look at the log output following the "1.". The img variable has all the right values (path, width, height), plus it is loaded.

Per the docs, all sound and image files that your game needs should be loaded by the preloader... All instances of ig.Image, ig.Font, ig.AnimationSheet and ig.Sound that are created during load-time will be appended to the preloader's chain of assets to load. Images and Sounds that are only created at runtime, will not be loaded by the preloader.

That last bit is the problem. I don't want to have to hard-code asset paths at load-time for this button class. I need a bit more flexibility than that, i.e., the ability to instantiate Entity objects on the fly.

I'm sure there's a way. I'll check around some more.

(code below per the docs)

MyGame = ig.Game.extend({
    // This image will be loaded by the preloader. It is created
    // as soon as the script is executed
    titleImage: new ig.Image( 'media/title.png' ),

    init: function() {
        // This image file will NOT be loaded by the preloader. The
        // init() method is only called after the preloader finishes
        // and the game is started.
        this.backgroundImage = new ig.Image( 'media/background.png' );
    }
});

That wasn't it. This thread: http://impactjs.com/forums/impact-engine/preloading-images demonstrates the problem (and provides a roundabout solution for it).

I'll post a suggestion for future versions of Impact as this is an issue for a project I wanted to work on (streaming assets).

Downloading an image file will not block JavaScript execution.

I.e. you're instructing the browser to begin downloading the file and then ask half a nanosecond later - in the next line of code - if it's finished. It's probably not :D

More in my other post.

Quote from alexandre
My question: why, despite img reporting it has been loaded, does a subsequent img.loaded access indicate false and said image's dimensions 0?

This is tricky. See, if you do ig.log( img.loaded ), the current value of img.loaded, at the time of execution of ig.log() will be reported in your browser's console.

If you do ig.log( img ), the browser will put a "link" to the img object in the console. If you then, maybe a second later, click on the expand icon on that link, to see all the properties of that object, the browser is showing you the current object where the loaded flag is already true. It's a "live view" of that object.

This is because in JavaScript primitives (such as booleans, numbers and strings) are "passed by value", whereas objects are "passed by reference". You may want to ask Google about that.


Btw: both of these issues reflect the way how JavaScript, Browsers and their debug tools work. It's a layer "above" Impact. Just wanted to say that I'm innocent this time :D

Thanks for the in-depth explanation. You are free to go. :)