How to use optimized animations in Phaser?

[weratius]

Hello, guys. 

 

I think that this question is often asked by developers who want to minimize the size of images to be loaded by users

 

So, the question is: how to use optimized animation in Phaser?

 

At first I had about 100 pictures of a NPC animation and it was like (businnessMan in attachment)

 

But then I saw that the one of the NPCs picture pack weights about 15mb and I was shocked, so I decided to make only one MAIN picture and create another 99 like this (HumanGov0 in attachment)

 

But I couldn't use that at all, I tried to do that smth like this

 

Loading:

for(var i = 0; i <= 100; i++) {                if(i < 10) {                    loader.image('man' + i, 'img/government/NPC/businessMan/HumanGov0_00' + i + '.png');                }                if(i >= 10 && i < 100) {                    loader.image('man' + i, 'img/government/NPC/businessMan/HumanGov0_0' + i + '.png');                }                if(i == 100) {                    loader.image('man' + i, 'img/government/NPC/businessMan/HumanGov0_' + i + '.png');                }            }

Usage (myObject = this)

var ind = 0;            setInterval(function() {                if(ind > 100) {                    ind = 0;                }                myObject.animArray.push(myObject.createImage(windowMain.x , windowMain.y + 30, 'man' + ind));                ind++;                console.log(ind)            }, 500);

And I event can't see that images at all (coordinates are set in a right place, I can images set there)

 

Maybe there is a better way to use that? Maybe a Phaser's method exists or smth?

 

Thank you very much and good luck)