Splitting sprite atlas into multiple chunks

[Xyals]

Hi, I'm currently preloading in a single sprite atlas (png image with a json data file) for one sprite (by this i mean a character i want to animate). However, the problem is that the sprite atlas image file is pretty big (over 8000x6000 sometimes) and there's FPS drops on lower end machines/older browsers.

I'm not 100% sure that the FPS drops are caused by the large image file, but when i reduced the sprite atlas image file's size, it fixed the issue.

My question is, is there a good way I can assign multiple sprite atlases to one character/sprite? Also, would that even help the issue? I want to keep decently high resolution frames so in the end this solution doesn't actually reduce the total size of images being preloaded, just preloads multiple smaller images instead of one huge one.

I want to do something like:

game.load.atlas('mysprite', 'assets/sprites1.png', 'assets/sprites1.json');

game.load.atlas('mysprite', 'assets/sprites2.png', 'assets/sprites2.json');

this.sprite = game.add.sprite(game.world.centerX, 300, 'mysprite');

// 'walking' is part of the sprites1.png
this.sprite.animations.add('walking', Phaser.Animation.generateFrameNames('walking', 1, 6), 5, true);

// 'flying' is part of the sprites2.png
this.sprite.animations.add('flying', Phaser.Animation.generateFrameNames('flying', 1, 6), 5, true);

 

[samme]

You can switch textures with loadTexture. That's a bit expensive.

You could also use dedicated child sprites just to hold the separate textures and hide/show them appropriately.