Forums » Help » ready function doesnt get called in entity

Hi,

I added the ready function to my Entity but it doesnt get called at all. Usindg the newest ImpactJS.

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

EntityBackgroundtile = ig.Entity.extend({
    
    img:null,
    id:null,
    
    init: function(x, y, settings) {        
        this.parent( x, y,settings);
        
        this.id = settings.id;
        this.img = new ig.Image("media/background/green/tile" + this.id + ".png");
    },
    
    ready: function() {
        ig.log("TEST");
        this.pos.x = this.id * this.img.width;
    },
    
    update: function() {
        this.parent();

        this.maxVel.x = 10000;
        this.vel.x = -100;
    },
    
    draw: function() {
        this.parent();
        this.img.draw(this.pos.x,this.pos.y);
    }
    
});
});

I try to use the ready function because when I try to get the width of the Image in the init function I get 0 but in the update I get the real width.

OK I just noticed that the img.width is always 0 in thw first update circle. so how can I get the image width to set the position depending on the Imagesize after the entity is created.

I believe the downloading and caching of the image is an asynchronous event, which means that when the browser is given the instruction to download it, it just continues interpreting code and doesn't wait for the image to finish downloading first. What you could do is have Impact create the image somewhere before the rest of the code is fired, like outside of the entity:

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

//Here, it's just going to fire off this 
//line of code and create the image, 
//and Impact and the browser will cache it.
new ig.Image("media/background/green/tile" + this.id + ".png");

EntityBackgroundtile = ig.Entity.extend({

....

Although you're just throwing it away, it's going to access that image before the entity is created or instantiated, so it might be available right away in the "init" method. I haven't tested it and I'm not sure, though, so let me know what you find.

Sorry for the late reply.
Yes that works but too bad I can't use use it without when I want to load dynamic images like in my case so I have always plac them in front of the Entity.extend.
I always thought tha the preloader of impactJS load the images which are used in my game before :/

also, whats the reason taht the ready function is not being called?

The .ready() function is called as the last step in the Game&039;s #.loadLevel(). This also means, that if you create your entity programmatically (i.e. through ig.game.spawnEntity()), the Entity&039;s #.ready() will not be called, as the game is already running and the level loaded.

Your problem is a different one though and cannot be solved with the .ready() function.

So, yes. Impact pre-loads images that are used in the game. However, in order for Impact to know which images to pre-load, the ig.Image instances have to be created before the game starts. See Working with Assets for a detailed explanation.

I see two easy ways to fix your problem:

a) Make sure all images that are needed in the game are pre-loaded. Something like this maybe:

EntityBackgroundtile = ig.Entity.extend({
    
	allImages: [
		new ig.Image("media/background/green/tile1.png"),
		new ig.Image("media/background/green/tile2.png"),
		new ig.Image("media/background/green/tile3.png")
	],
	
    img: null,
    tileNumber: null,
    
    init: function(x, y, settings) {        
        this.parent( x, y,settings);
        
        this.img = this.allImages[this.tileNumber];
    },
	
	// ...
	
});

b) Combine all your tiles in a single image and use .drawTile(). This is probably the better solution, as you limit the number of HTTP requests needed and make loading faster:

EntityBackgroundtile = ig.Entity.extend({
    
	img: new ig.Image("media/background/green/tiles.png");
    
    init: function(x, y, settings) {        
        this.parent( x, y,settings);
        // You could actually ommit the init() function here completely, 
        // because all it does is calling the parent implementation.
    },
	
	draw: function() {
		// Replace 32, 32 with your actual tile width and height
        this.img.drawTile(this.pos.x,this.pos.y, this.tileNumber, 32, 32);
    }
	
	// ...
	
});

A couple of notes:

.id is a property given to all Entities by Impact. Overwriting it is a bad idea. Use something like .tileNumber or simply .tile instead.

If you call this.parent( x, y, settings ) in an Entity&039;s #init() method, all the settings will be merged into the entity. There&039;s no need to do #this.tile = settings.tile; - it&039;s already handled by the default #init() implementation.

In the code you posted, your Entity had no animation. The call to this.parent() in your draw() function will simply do nothing if there&039;s no animation set. So the call to #this.parent() can be ommited entirely.

You don&039;t have to set #this.vel.x and this.maxVel.x in every frame. Setting it as class properties or in the init() would suffice (I assume that's just debug code though?)

Aaaand, last but not least, having an Entity named BackgroundTile smells just like a bad idea. I don't know what exactly you want to do, but filling a game screen with Tile entities will have horrible performance. If you want to draw a tilemap, use a tilemap (i.e. ig.BackgroundMap) :)

Thanks for the reply. That explains everything :)

I solved the Problem the way you described (loading images)

For your last question. my BackgroundTile contains a 800x480 image which scrolls from right to left its a large background wich i divided in 3 images and then move it and when its out on the left I wrap it to the right.
I think that's ok ..

@XTender I may be misunderstanding, but it sounds like your background tile is just a repeating background map. Checkout the ig.BackgroundMap and its repeat property, it already does all that for you. You can also set it to preRender for improved performance.

When I created Impact++, I found it odd that the ready() method was only called on level load, as it seemed like a great pattern for separating the one-time initialized properties from the properties that should be set each time an entity is added to the game (assuming you pool and reuse entities, which ImpactJS now supports by default). So I overrode the game&039;s #spawnEntity() method and added a check to see if the current level was "ready" (i.e. done loading). If so, I called the new entity&039;s #ready() method, and if not, I know that once the game is done loading the current level it will call ready() on all the entities. Hope this helps!

Thanks, I will check it out but currently I try to learn the basics of impact before adding the ++ :)