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&039;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&039;s #.animSheet wont change the Animation itself.

The error you&039;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&039;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.