Forums » Help » Delayed Loading Animations

I'm pretty sure I'm doing something slightly wrong, but when my character loads, the animation sheets don't seem to be preloading.

I set up the animation sheets then the separate animations in initialize, later on...

.defines(function() {
	EntityScarlette = ig.Entity.extend({
		
		
		ScarletteIdle: new ig.AnimationSheet ( 'media/Scarlette/IdleScarlette.png', 420, 760 ), // 
		ScarletteMove: new ig.AnimationSheet ( 'media/Scarlette/MovingScarlette.png', 420, 760 ), 
		
		
		
		
		size: {x: 340, y : 640},
		offset: {x: 30, y: 60 },
		health: 10,
		maxVel: {x: 600, y: 2000},
		friction: {x: 2000, y: 0},
		flip: false,
		actionOne: false,
		accelGround: 440,
		
		
	init: function( x, y, settings){
		this.parent( x, y, settings);
		
		this.idleAnim = new ig.Animation( this.ScarletteIdle, 0.1, [0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2,2,2,2,2,2,2,2,1]);
		this.movAnim = new ig.Animation( this.ScarletteMove, 0.04, [0,0,1,1,2,3,3,4,4,5,5,6,6,7,8,8,9,9]);
		
	},

Later on, my logic dictates that idle is played inherently, and may delay loading as well but it is hard to tell.

if( (ig.input.state('left') || ig.input.state('right')) && this.standing && !(this.actionOne) ){
			this.currentAnim = this.movAnim;
		} else {
			this.currentAnim = this.idleAnim;
		}

The issue I am experiencing is, when the second animation sheet is loaded, it has a slight 0.1ish second delay before the anim plays and the character moves. The entire game freezes for a fraction of a second (because it is loading the animation sheet into RAM when the sheet is used I am guessing. After this happens, the game is extremely smooth and it does not happen again.

I am prototyping a game at the moment so that is all the functionable code for this character.

Would be cool if your game was hosted on https://github.com/ so we could test it out ourselves... :)

However, so you're saying that this "delay" you observe only happens the very first time, and then never again for the current game session?

Yeah, the delay only happens once. I am guessing for whatever reason the assets aren't loading until they're used.

The first game that I made with impact didn't have this problem, but I also used one animation sheet with the default animSheet. I think this may be the problem, I need to use multiple sprite sheets because of the size of the sprite though.

Example from the Impact Documentation

 // Load an animation sheet
    animSheet: new ig.AnimationSheet( 'media/player.png', 16, 16 ),

Maybe something is going on behind the scenes where it will instantly load assets that are animSheets but won't load multiple sprite sheets defined differently than the default anim?

I'm thinking this is the case because even in Weltmeister, the character doesn't have any animation frame visable as they did with the animSheet in previous games/prototypes.

I noticed in entity.js all entities inherently have a this.animSheet property, but obviously alternate animation sheets can be added, not sure if that is the cause of the loading.

I'll try loading the spritesheets as images in player to see if that changes anything.

Does something need to happen in main.js with entities to ensure that their assets are preloaded?

Hey Joncom, do you work for/with Dominic? I noticed you reply to pretty much all of the forum posts.

In the case of AnimationSheet, the Image inside of it makes sure that it gets registered with the loader. Image has a method called load that, at the beginning of the game (before ig.ready has been set) calls ig.addResource to queue the image for loading.

So multiple AnimationSheet#s should be fine. The first #Animation you create with addAnim becomes the default animation for the character, so that should be fine too... like, it should be showing up in Weltmeister.

Basically, I'm saying I don't see any errors in your stuff. ( =

There aren't errors in your console?

because it is loading the animation sheet into RAM when the sheet is used I am guessing

I don't think that's it. The image is already loaded by the preloader and waiting to be used – like, literally, it's an <img> tag hanging around in your JS waiting to be used. Do you have any scaling on your game, like from the ig.main call? Are your sprites rotated?

Are you using WebGL-2d or anything?

There aren't any console errors. I checked the debugging tools and when I move (causing the next sprite sheet to be drawn/used), there is an instant in the performance tab where the game spikes up with a single yellow-orange bar that goes to the top of the graph, after that it goes away and things run normally.

I do not use any scaling, sprite rotation or WebGL-2d.

Something that may be of interest is that the sprite sheets are:

Sheet1 - 1260 x 760 (3 frames @ 100% size) 601 KB
Sheet2 - 2100 x 1520 (10 frames, 2 rows of 5 @ 100% size) 1.67 MB

I was working on a prototype of a game before this one with larger sprites with sheets of sizes up to 7000 x 4000, which cause the same loading problem, except the loading took longer.

I know based on these results that the larger the sprite sheet, the longer the temporary loading lag is (sheet 1 doesn't seem to cause any lag, or less lag than sheet 2, while the 7000 x 4000 sheet froze the game for 1-2 seconds).

So I am guessing the preloading isn't the issue then? Maybe it has something to do with the actual drawing of the asset? This may explain the increase in freezing time relating to the increase in sprite sheet size.

I noticed in the prototype of the other game I was working on with the larger sheets, drawing the assets before loading the character removed the loading issue. Does this mean that the GPU needs to literally draw the asset in order for this delay to disappear?

To clarify, the loading-lag still occurred, but it happened during the loading, as I drew the images in main.js immediately.

Alternatively I could cycle through drawing anim sheets and cover it with a loading screen to get rid of this problem, I was curious if I was doing something wrong, or if there's a better way to do it.

So...

-Animation is preloaded properly and is ready to use
-Player code file draws the animation
-Draw lag occurs based on sprite sheet size unless already drawn
-Draw lag doesn't typically occur because of small sprite sheets and or default entity sprite sheet(which because the default sheet is loaded when the game first loads, the freeze in the beginning isn't noticed during actual gameplay.)
-I'll probably have to cycle through the anim sheets and conceal it with a loading screen then remove the loading screen after the cycle finishes.

This is a seriously great post. That might be 'cuz I'm a nerd, though. Thanks for laying all this out, too.

Here's a Chrome bug about drawing from RAM canvas to GPU canvas. It's closed now (regression?), but that means you're right, the size of the spritesheet absolutely can be an issue here.

Chrome's got a lot of experimental canvas stuff. Here's a gist in Japanese that talks about how to turn this stuff on. Basically, go to chrome://flags/#enable-devtools-experiments, enable, restart, inspect canvas, go to profiler, turn on canvas inpsection, consecutive frames, yadda yadda yadda.

But it sounds like the draw at load time fix is working for you? I'd hate to have this behavior lurking around ready to strike at my game, though. Let us know what you find!

So cycling through works, but you have to force the entity to animate specific animations per execution meaning that if you write something like:

if ( this.cycleAnims){
      this.currentAnim = this.movAnim;
      this.currentAnim = this.idleAnim;
}

Only the sheet that uses idleAnim loads (the last one resolves in this case, just tested it.

However, if you set the entity to idle somewhere else (such as an if/else if or a switch, or an array, etc). You can set off each animation simultaneously.

So this worked:

if( (ig.input.state('left') || ig.input.state('right')) && this.standing && !(this.actionOne) ){
			this.currentAnim = this.movAnim;
		} else {
			this.currentAnim = this.idleAnim;
		}
			

//Later on...

if( this.cycleAnims ){
	this.currentAnim = this.movAnim;
	
	this.cycleAnims = false;
			
}

The above logic for playing idle triggers, and later on, the movAnim sheet cycleAnim statement triggers causing both to be drawn. So it seems that you need to use some kind of conditional control structure, otherwise it'll just draw the last sheet in the list.

So I might be able to cycle through the anims using a for loop and if/else if or switches to check for case then to draw the next anim.

Quote from Joncom
I hang out here and help people if I can, if that's what you mean... :)

Nothing wrong with helping people haha, I was just curious if you were a forum moderator or something.

Used a timer with if statements when delta reached certain areas, worked.

l