Forums » Help » backgroundAnims not working... not sure what's wrong...

I've never really dabbled in backgroundAnims, and I've read all of the documentation/forum posts that I could, trying to learn how to do it correctly, but even then no matter what I try it just doesn't seem to want to work...

init: function() {
		var water = new ig.AnimationSheet( 'media/graphics/environment/water.png', 32, 32 );
		this.backgroundAnims = {
			'media/graphics/environment/water.png': {
				6: new ig.Animation( water, 0.5, [6,8,6,12] ),
			}
		};
	
		this.loadLevel(LevelDungeon);

I'm just trying to animate the water on my map, and the tiles for the animation are on the same tilesheet that the tile-to-be-animated is on... not sure if that could be the reason, but no matter how I try doing it, it just doesn't want to animate.

That's the code that I've got set to run RIGHT inside of my init method, and I really can't figure this out.

II am trying to animate tile number 6, from the tilesheet - and I know it's the right tile number - but it just wont do anything. I'm not sure if there's something I'm supposed to be calling in my update/draw functions, or if I'm calling something wrong, but in the console, when I call ig.game.backgroundAnims, it lists that animation, and if I call it repeatedly, I can see that it IS animating, but on the actual map itself, I see nothing...

Have you got the map layer you want to animate set with pre render off? If it's on it will not get updated.

Yeah, I've got that disabled - and I've double checked it 5 or 6 times just to make sure. I've seriously gone through the steps in all of the documentation over and over... nothing will work, >.<

Try this (not tested).

this.backgroundAnims ['media/graphics/environment/water.png'] =  {
                                        6: new ig.Animation( water, 0.5, [6,8,6,12] )};

eh, still no luck.
This is really weird, I'm not getting any errors, everything is functioning normally, and the backgroundAnims object IS cycling through the correct tiles, when I check the properties in the console.

It just doesn't want to show it at all.

Ok try these steps and see if they help.

Make sure that you are using the water.png tileset only for the water layer you want to animate.

On your water layer make sure you are drawing tile number 6 on the map.

thats what's going on, but still nothing.

Ok, doing a little more testing today on this issue; I've checked if.game.backgroundAnims in the console and all of the settings show up. Then I checked the specific backgroundMap.anims object and it shows up and even changes if I continually check it. So it IS animating... its just not showing the animation.

I quintuple-checked that the layer is NOT pre rendered in the code, console and debug module and it is not. I then checked to see if another layer was over it, blocking my view of the animation and it isn't being blocked.

I also double checked the layer's data in the console and there are multiple tiles that are drawn with tile 6.

I also checked the actual tileset to make sure that the correct tiles are being called in the animation's sequence, and they are correct and they ARE different tiles. I even, just to double check this, changed the animation's sequence to random tiles, just to see if there was a difference at all, and there wasn't.

After all of this, I double checked my code, and the background animation is being declared just before loading the level with loadLevel(). Nothing about this makes ANY sense to me right now... I'm not seeing what would be keeping this from being animated at all, >.<

I've also cleared my browser's cache multiple times, thinking that maybe it was seeing the cached tileset, but nothing changed

I'm going insane trying to get this to work now, >.<

I'm not sure where the problem could be, cuz there is nothing in any of my code anywhere that would interfere with this working...

init: function() {
		var water = new ig.AnimationSheet('media/graphics/environment/water.png', 32, 32 );
		this.backgroundAnims['media/graphics/environment/water.png'] = {
			6: new ig.Animation(water, 0.5, [4,8,4,12] )
		};
										
		this.loadLevel(LevelDungeon);

this is where the layer is setup, in the level file. To prevent an EXTREMELY long post, I've omitted the actual level data, but I will say that it is comprised of 0's and 6's, nothing else. This layer is specifically used for water tiles, while there are transparent 'wrapper' tiles that overlay it to make up the 'shore' around the water.

Even with every other layer commented out of the level, it still will not play any animations.

{"name":"water","width":50,"height":50,"linkWithCollision":false,"visible":1,"tilesetName":"media/graphics/environment/water.png","repeat":false,"preRender":false,"distance":"1","tilesize":32,"foreground":false,"data":data},

I've already tried using a separate image-file, so that the layer and animations are not using the same one, but still nothing. If anyone can help me, I would really appreciate it.

Not sure if you got my PM ? but if you have a cut down version of the code I can take a look. I cant think of any other way to help.

( have you tried to create a new project with just the background animations ?) just to see if its a general issue or only related to the project you are working on.

Just tried it on a new project, with nothing but my animation code, loading a level and the tilesheet. Still nothing.

It shows the water, but doesn't actually animate it at all.

Here's the code from the new project...

ig.module( 
	'game.main' 
)
.requires(
	'impact.game',
	
	'game.levels.test'
)
.defines(function(){

MyGame = ig.Game.extend({
	
	init: function() {
		var waterAnims = new ig.AnimationSheet("media/water.png", 32, 32 );
		this.backgroundAnims = {
			"media/water.png": {
				6: new ig.Animation(waterAnims, 0.5, [4,8,4,12] )
			}
		};
		
		this.loadLevel(LevelTest);
	},
	
	update: function() {
		this.parent();
	},
	
	draw: function() {
		this.parent();
	}
});

ig.main( '#canvas', MyGame, 60, 320, 240, 2 );

});

And the level, i just went in weltmeister and filled the screen with water tiles (tile 6) to test it, and nothing happens.

ig.module( 'game.levels.test' )
.requires( 'impact.image' )
.defines(function(){
LevelTest=/*JSON[*/{"entities":[],"layer":[{"name":"new_layer_0","width":10,"height":8,"linkWithCollision":false,"visible":true,"tilesetName":"media/water.png","repeat":false,"preRender":false,"distance":"1","tilesize":32,"foreground":false,"data":[[6,6,6,6,6,6,6,6,6,6],[6,6,6,6,6,6,6,6,6,6],[6,6,6,6,6,6,6,6,6,6],[6,6,6,6,6,6,6,6,6,6],[6,6,6,6,6,6,6,6,6,6],[6,6,6,6,6,6,6,6,6,6],[6,6,6,6,6,6,6,6,6,6],[6,6,6,6,6,6,6,6,6,6]]}]}/*]JSON*/;
LevelTestResources=[new ig.Image('media/water.png')];
});

...and this doesn't work either, >.<

ig.module( 
	'game.main' 
)
.requires(
	'impact.game',
	
	'game.levels.test'
)
.defines(function(){

MyGame = ig.Game.extend({
	
	init: function() {
		var waterAnims = new ig.AnimationSheet("media/water.png", 32, 32 );
		this.backgroundAnims["media/water.png"] = { 6: new ig.Animation(waterAnims, 0.5, [4,8,4,12] ) };
		
		this.loadLevel(LevelTest);
	},
	
	update: function() {
		this.parent();
	},
	
	draw: function() {
		this.parent();
	}
});

ig.main( '#canvas', MyGame, 60, 320, 240, 2 );

});

try this ...

this.backgroundAnims["media/water.png"] = { 5: new ig.Animation(waterAnims, 0.5, [4,8,4,12] ) };

animations are 0 based so i think when you change it to 5 all will be good.

sorry missed that the first time around..

Doesn't work - 6 is the tile number thats in the map data, so using a 5 would only refer to the tile before the correct one, wouldn't it?

Animations are 0-based, but map tiles are not. On a map, tile 0 is nothing.

You are correct: Maps are 1 based when referencing the tile number (0 being no tile) but animation is 0 based: http://impactjs.com/documentation/class-reference/game#backgroundanims

If you check the docs : http://impactjs.com/documentation/class-reference/game#backgroundanims you will see that you need to specify the tile number from the animation tile set not the tile number as placed on the map.

Your level code above shows tile number 6 from your tile set (which would be tile 5 in the animation sheet) but when you setup the animation you are requesting tile 6 to be animated from the sheet.

The code you have posted works fine, I did a copy paste test it just needed the correct animation tile number to work on my system.

Ill have to try that out in the morning. It makes very little sense to me that way but if you got it working, then I guess thats how it must be.

Thanks for the help, I really appreciate it, ^^

Yup, that did it - makes no sense to me though, cuz you shouldn't be replacing a tile thats FROM the animation sheet... if the map says tile 6, then you should put 6, not 5... idk, its just weird, but now that it works, I'm happy, ^^

Thanks so much Stuart, xD