Forums » Help » Loading Multiple Spritesheets without Lag

Hey, I'm working on a Chrome Web Store game that uses fairly large Spritesheets.
The size of the sheets is roughly 7000x4000 on average and the game runs very well.

I'm using multiple smaller spritesheets to contain the animations as such:

//This is in .defines Entity
animSheet_1: new ig.AnimationSheet( 'media/characters/player/evelyn/Evelyn_Sheet_1.png', 1400, 1000), 
animSheet_2: new ig.AnimationSheet( 'media/characters/player/evelyn/Evelyn_Sheet_2.png', 1400, 1000),
animSheet_3: new ig.AnimationSheet( 'media/characters/player/evelyn/Evelyn_Sheet_3.png', 1400, 1000), 

And to draw the animations...

//This is in init() for the entity
this.idleAnim = new ig.Animation( this.animSheet_1, 0.1, [0,0,0,0,0,1,1,2,2,2,2,1,1]);
this.movAnim = new ig.Animation( this.animSheet_1, 0.05, [3,4,5,6,7,8,9,10,11,12,13,14,15,16]);
this.crouchAnim = new ig.Animation( this.animSheet_1, 0.1, [17,17,17,17,18,19,19,19,19,18]);
this.prejumpAnim = new ig.Animation( this.animSheet_2, 0.06, [2,3,4,5,6,7,8]);
this.risingAnim = new ig.Animation( this.animSheet_2, 0.06, [9,10]);
this.fallingAnim = new ig.Animation( this.animSheet_2, 0.06, [11,12]);
this.landingAnim = new ig.Animation( this.animSheet_2, 0.06, [13,14,15,16,17,18]);
this.kickNeutralAnim = new ig.Animation( this.animSheet_3, 0.07, [0,1,2,3,4,5,6,7,8,9,10,11]);
this.weaponAtkNeutral = new ig.Animation( this.animSheet_3, 0.07, [12,13,14,15,16,17,18,19,20,21,22,23,24,25,26]);

The main problem I am having is that when I use each sheet for the first time, it lags/loads it, but afterwards, the game is completely smooth with no lag.

My question is how do I fix this initial lag? And more importantly, can I load the base spritesheets BEFORE using them in game. Ideally I'd load all animation sheets fully before the player can do anything.

Thanks,

Dan

I figured out a way to preload it without doing anything complicated:

First I added temporary image objects to load the sheets in main.js

preloadAnimSheets: true,
EvelynAnimSheet_1: new ig.Image( 'media/characters/player/evelyn/Evelyn_Sheet_1.png'), 
EvelynAnimSheet_2: new ig.Image( 'media/characters/player/evelyn/Evelyn_Sheet_2.png'),
EvelynAnimSheet_3: new ig.Image( 'media/characters/player/evelyn/Evelyn_Sheet_3.png'), 

Then I temporarily drew the sheets, which caused them to load before the game loaded getting rid of the lag:

//this is in the main.js draw function
if( this.preloadAnimSheets ){
	//draw animsheets at a position
	this.EvelynAnimSheet_1.draw( 0, 0);
	this.EvelynAnimSheet_2.draw( 0, 0);
	this.EvelynAnimSheet_3.draw( 0, 0);
			
}

They should have already been pre-loaded in the first example you posted. Would you mind posting the entire JavaScript file you copied-pasted the code from? Some funny business is going on there. You shouldn't have to do that "workaround".

Here's what I am using to begin with:

.defines(function(){
	EntityEvelyn = ig.Entity.extend({
	
animSheet_1: new ig.AnimationSheet( 'media/characters/player/evelyn/Evelyn_Sheet_1.png', 1400, 1000), 
animSheet_2: new ig.AnimationSheet( 'media/characters/player/evelyn/Evelyn_Sheet_2.png', 1400, 1000),
animSheet_3: new ig.AnimationSheet( 'media/characters/player/evelyn/Evelyn_Sheet_3.png', 1400, 1000), 
		//Collision Box Settings
		size: {x: 200, y: 400},
		offset: {x: 600, y: 360},
		flip: false,
		health: 45, 
		armor: 3,
		//Physics Settings
		maxVel: {x: 400, y: 3000},
		friction: {x: 1500, y: 0},
		accelGround: 800,
		accelAir: 500,
		jump: 900,
		actionOne: false,
		attackLimiter: false,
		
		inAir: false,
		animCycle: true,
		type: ig.Entity.TYPE.A,
		
		playerType: 'Evelyn',
		
		collides: ig.Entity.COLLIDES.ACTIVE,
		
		init: function( x, y, settings ) {
			this.parent( x, y, settings );
			//SPEAR ANIM SETUP
			
			
			
this.idleAnim = new ig.Animation( this.animSheet_1, 0.1, [0,0,0,0,0,1,1,2,2,2,2,1,1]);
this.movAnim = new ig.Animation( this.animSheet_1, 0.05, [3,4,5,6,7,8,9,10,11,12,13,14,15,16]);
this.crouchAnim = new ig.Animation( this.animSheet_1, 0.1, [17,17,17,17,18,19,19,19,19,18]);
this.prejumpAnim = new ig.Animation( this.animSheet_2, 0.06, [2,3,4,5,6,7,8]);
this.risingAnim = new ig.Animation( this.animSheet_2, 0.06, [9,10]);
this.fallingAnim = new ig.Animation( this.animSheet_2, 0.06, [11,12]);
this.landingAnim = new ig.Animation( this.animSheet_2, 0.06, [13,14,15,16,17,18]);
this.kickNeutralAnim = new ig.Animation( this.animSheet_3, 0.07, [0,1,2,3,4,5,6,7,8,9,10,11]);
this.weaponAtkNeutral = new ig.Animation( this.animSheet_3, 0.07, [12,13,14,15,16,17,18,19,20,21,22,23,24,25,26]);
			
			
			
	//prejumpTimer = new ig.Timer(0.54); //creates a new timer of .54 seconds
 },

Then later on when I use each individual animSheet, I change the this.currentAnim:

if( this.standing && ig.input.pressed('jump')  && !(this.actionOne) ) {
	this.actionOne = true;
	this.currentAnim = this.prejumpAnim.gotoFrame(0); //set anim to prejump
	this.currentAnim = this.prejumpAnim;
}
...
else if( this.currentAnim == this.prejumpAnim ) {
				
	if( this.prejumpAnim.frame == 6 ){
		this.vel.y = -this.jump;
		this.actionOne = false;
		this.currentAnim = this.risingAnim;
	}
	//Landing Anim	
}

So the logic triggers the anim, I am using .gotoFrame because the .loopCount method tends to draw extra frames (or has for me in the past).

The currentAnim is what triggers the loading, which caused the lag.

When you say "lag", do you mean that your game kind of hiccups? It's unresponsive for less than a second but it's enough to be noticeable?

I don't have any good answers, but a couple of suggestions.

If you have animations that you really-and-for-true only want to run once, add a final true argument to your addAnim calls. Then the loopCount won't lie (as much).

If you take your workaround out and look at the Dev Tools in Chrome you should still see the images getting loaded in the Network tab. Keep the tab open and reload the page to see it. I bet they're getting loaded before your game runs. As long as the AnimationSheet is declared as part of your class and not instantiated in your init method, Impact will preload it.

In the Dev Tools, check out the Profiles tab. You probably want to grab a Heap snapshot while your game is running and loading these images (again, without your hack in place). I wonder if there's some big memory transfer happening right when you draw the image.

I'm pretty sure that impact preloads it but the memory transfer is where the lag comes from. It is a very short hiccup that happens once, the workaround I tried effectively loaded the image into ram I am guessing before it gets used in game, allowing the anims to be used without the hiccup.

After the hiccup or after the workaround occurs the game runs perfectly fine at a solid 60 fps with great performance as well.

Or maybe even loads it in to the GPU...? I don't know of a way in Chrome to determine if that's happened or not with image data.

Would be interesting if you could upload a demonstration somewhere so we could see this happening. Curious if it happens on some devices and not others.

Edit: Also, if you enable the Impact debug module, you can get some pretty useful information. For example, if you are getting lag, you should see it, and it should tell you where in the engine it's occurring (draws, updates, physics, etc.).