Forums » Impact Engine » Animating a tile

Hi guys. im just trying to get my animation to work and cannot seem to find an answer for my pitty problem.

im animating torches for my top-down rpg and have done the following.

var torch = new ig.AnimationSheet( 'media/torch.png', 32, 32);
			this.backgroundAnims = {
    		'media/torch.png': {
        		1: new ig.Animation( torch, 0.1, [0,1,2,3] )
        	}
        	
			};
		this.loadLevel (LevelLevel1);

so basically nothing is happening, just the first tile displaying.

Edit.

So i realised you may need a bit more then that to help me so here is my main.js

ig.module( 
	'game.main' 
)
.requires(
	'impact.game',
	'impact.font',
	'game.levels.level1',
	'game.levels.level2',
	'game.entities.player',
	'game.entities.levelchange',
	'plugins.scrollscreen',
	'plugins.touch-button'
	
)
.defines(function(){

MyGame = ig.Game.extend({
	
	// Load a font
	font: new ig.Font( 'media/04b03.font.png' ),
	
	buttons: [],
    buttonImage: new ig.Image( 'media/movebtns.png' ),
	
	init: function() {
		// Initialize your game here; bind keys etc.
		ig.input.bind( ig.KEY.LEFT_ARROW, 'left' );
		ig.input.bind( ig.KEY.RIGHT_ARROW, 'right' );
		ig.input.bind( ig.KEY.UP_ARROW, 'up' );
		ig.input.bind( ig.KEY.DOWN_ARROW, 'down' );
		
		 // For Mobile Browsers and Ejecta
        if( ig.ua.mobile ) {
            var ypos = ig.system.height - 42;
            this.buttons = [
	            new ig.TouchButton( 'up', 400, 0, 80, 80, this.buttonImage, 0 ),
	            new ig.TouchButton( 'down', 400, 560, 80, 80, this.buttonImage, 1 ),
                new ig.TouchButton( 'left', 0, 240, 80, 80, this.buttonImage, 3 ),
                new ig.TouchButton( 'right', 820, 240, 80, 80, this.buttonImage, 2 )
            ];
        }
		var torch = new ig.AnimationSheet( 'media/torch.png', 32, 32);
			this.backgroundAnims = {
    		'media/torch.png': {
        		1: new ig.Animation( torch, 0.1, [0,1,2,3] )
        	}
        	
			};
		this.loadLevel (LevelLevel1);
	},
	
	update: function() {
		// Update all entities and backgroundMaps
		this.parent();
		
		// Add your own, additional update code here
		var player = this.getEntitiesByType( EntityPlayer )[0];
		if( player ) {
			this.screen.x = player.pos.x - ig.system.width/2;
			this.screen.y = player.pos.y - ig.system.height/2;
		}
		this.scrollScreen();
	},
	
	draw: function() {
		// Draw all entities and backgroundMaps
		this.parent();
		
		var player = this.getEntitiesByType( EntityPlayer )[0];
		// Add your own drawing code here
		var x = ig.system.width/2,
			y = ig.system.height/2;
		
		this.font.draw( player.messagebox, x, y, ig.Font.ALIGN.CENTER );
		
		 // Drawing touch buttons
        for( var i = 0; i < this.buttons.length; i++ ) {
            this.buttons[i].draw();
        }
	}
});


// Start the Game with 60fps, a resolution of 320x240, scaled
// up by a factor of 2

//ig.main( '#canvas', MyGame, 60, 960, 640, 2 );
if( ig.ua.iPhone4 ) {
	ig.main( '#canvas', MyGame, 60, 960, 640, 1 );
	document.getElementById("bgvid").style.display = "none";
}
else if( ig.ua.mobile ) {
  	ig.main( '#canvas', MyGame, 60, 1136, 640, 1 );
  	document.getElementById("bgvid").style.display = "none";
}
else {
  	document.getElementById("canvas").style.width = "100%";
  	ig.main( '#canvas', MyGame, 60, 960, 480, 1 );
}
});

This is a bit confusing, so let me try to explain: By putting some animations into the backgroundAnims object, you tell Impact that you want a particular tile of a particular tileset replaced by your animation. So in your case:

this.backgroundAnims = {
	'media/torch.png': { // <- the tileset!
		1: new ig.Animation( torch, 0.1, [0,1,2,3] )
	}
};

This says that you want to replace the tile number 1 in the tileset 'media/torch.png' with your animations.

So, I would guess the problem is that 'media/torch.png' is not actually the tileset that you use for your background map - hence, Impact has nothing to replace, because no background map uses a tileset with the name 'media/torch.png'.

tl;dr: replace 'media/torch.png' in the backgroundAnims object with the name of the tileset you used in Weltmeister for your background map.

Edit: also make sure you have Pre-Render in game disabled for the animated background map in Weltmeister.

Thanks for the quick response Dominic. i'll see if i can figure it out, if im understanding correctly this should work if id put my torch tiles inside my tileset i use for background map, instead of having a single file with all torch tiles.

anyway ill check back here afterwards thx

so i went around and made it an entity instead, its serving its purpose as it should and was easy enough :)


god i love impactjs.

thx