Forums » Help » How to change a entity image?

Hey guys,

I create a entity like that:

        ig.game.spawnEntity(EntityMainPlayer, data.x, data.y, {
            animSheet: new ig.AnimationSheet('media/tiles/player.png', 24, 24),
            nickname: data.nickname,
            name: 'MainPlayer',
            player_id: data.playerId,
            health: data.life,
            energy: data.energy
        });

And Im trying to change the entity image using a command like that..

ig.game.getEntityByName('MainPlayer').animSheet = new ig.AnimationSheet('media/tiles/dead.png', 24, 24);

But the image doesnt change... :(
anybody know how I can load a new image in my Entity?

Thanks ;)

Hi, maybe you should preload the new animSheet rather than replacing it on-the-fly while your game runs. Maybe something like this should work:

 ig.game.spawnEntity(EntityMainPlayer, data.x, data.y, {
  animSheet: new ig.AnimationSheet('media/tiles/player.png', 24, 24),
  // new animation sheet 
  newAnimSheet: new ig.AnimationSheet('media/tiles/dead.png', 24, 24);
  nickname: data.nickname,
  name: 'MainPlayer',
  player_id: data.playerId,
  health: data.life,
  energy: data.energy
 });

Then call it as

var entity = ig.game.getEntityByName('MainPlayer').animSheet = this.newAnimSheet;

And lastly don't forget to specify the currentAnim

entity.addAnim('idle', 0.1, [0]);
entity.currentAnim = entity.anims.idle;

I hope this helps ;)

Thanks for reply tarrent...

im trying something like that:

ig.game.getEntityByName('MainPlayer').diePlease();

and on my entity:

ig.module(
    'game.entities.player'
).requires(
    'impact.entity'
).defines(function(){
    EntityPlayer = ig.Entity.extend({
        animSheet: new ig.AnimationSheet('media/tiles/player.png', 24, 24),
        deadSheet: new ig.AnimationSheet('media/tiles/dead.png', 24, 24),
        collides: ig.Entity.COLLIDES.PASSIVE,
    
        init: function(x, y, settings){
            this.parent(x, y, settings);
            this.addAnim('idle', 1, [0]);
        },

        diePlease: function(){
			this.addAnim('idle', 1, [0]);
            this.currentAnim = this.deadSheet;
        },
        
        update: function(){
            this.parent();
        }
    });
});

But I receive this error on console:

Uncaught TypeError: Object [object Object] has no method 'update' entity.js:80

Do you know what ir wrong?

Thanks a lot ;)

Animations and AnimationSheets are two different things. Animations use AnimationSheets to draw something.

If you define an Animation (with the Entity's addAnim() or new Animation(...)) it will use the .animSheet (or the one you hand it in the constructor) and will keep a "private" reference to that. So changing the Entity's .animSheet wont change the Animation itself.

The error you're getting, is because you assigned an AnimationSheet as the .currentAnim - which expects an Animation, not an AnimationSheet.



And to quote myself from another thread:

The entity's addAnim() function is just a shorthand for the ig.Animation constructor that always uses the .animSheet property of the entity.

To specify different animation sheets, use the ig.Animation constructor directly:

EntityTest = ig.Entity.extend({
	runAnimSheet: new ig.AnimationSheet( 'media/run.png', 8, 8 ),
	idleAnimSheet: new ig.AnimationSheet( 'media/idle.png', 8, 8 ),

	init: function( x, y, settings ) {
		this.parent( x, y, settings );
		
		this.anims.run = new ig.Animation( this.runAnimSheet, 0.2, [0,1,2] );
		this.anims.idle = new ig.Animation( this.idleAnimSheet, 0.2, [0,1,2] );
	}
});

Thanks ... now I understand how to works ...
now i can call using:

this.currentAnim = new ig.Animation(this.deadSheet, 1, [0]);

thanks :)

@salsa: Hi, nice to see that you've got the Animations working correctly.
@dominic: Thanks for the direct feedback on Animation and AnimationSheets I understand them more clearly now.