Large Texture Atlas

[Titus]

Hi Guys,

I'm making a game that uses assets for a 1920 x 1080 screen and I'm having some issues with some states taking a long time to load. All my assets are loaded in a preload state which has a loading bar but the issue I'm having is that some states which access a large texture atlas (8,000 or higher) take 3-5 seconds to load, without any feedback to the user. I wouldn't mind if that extra time was added to the preload state with a loading bar but I'm confused as to why switching states takes so long if the assets are already loaded. 

I've run some tests with simply adding a single sprite to a page in a create function from a large texture atlas. The texture atlas is 7643 x 8488 (2.94MB) and I've used Texture Packer to create the png and JSON array. The atlas contains around 70 textures.

create: function(){
	this.game.stage.backgroundColor = "#db6565";

	this.test = this.game.add.sprite(400, 50, 'wrongFoam');

}

This state takes around 2-3 seconds to load after pressing the next button in the previous state. Am I doing something wrong here? I can't split the textures into multiple atlases because I need access all 70 textures for certain animations. I also don't believe that Phaser supports multipack from Texture Packer. Any help would be appreciated. Thanks

[Skeptron]

Your sprite is indeed gigantic, I wouldn't expect any miracle at that point. Why do you need such a big sprite, and why can't you split it? Does it contain skeletal animations? If so, you might consider using a tool like Spriter. You'll be able to do a lot of very subtle animations for very limited sprites size.

[WiLD11]

I would split it up into more than 1 atlas, or just like @Skeptron said. You should look into Spine or Dragonbones.

[Skeptron]

For god's sake I'm sorry I meant Spine, not Spriter. Sorry!

http://fr.esotericsoftware.com/

 

[Titus]

@Skeptron Thanks for the suggestions. I really don't think that Spine or Spriter would be what I need. Mainly because my animations aren't really skeletal, except the player character, which I don't really have this issue with.  I'm very new to game development but I've been tasked with creating this game primary for web browsers on PC but should to work for mobile devices. I have someone making the assets using Abode After Effects. It's a fire extinguisher simulation. An example here is I have a state that is shown for game over if the user selects the wrong type of extinguisher. The animation on that page shows the player (half body framing) getting electrocuted , but there isn't really any skeletal movement. I have exports of all the frames for a 3 second animation at 24fps. That gives me 70+ images that I put into an atlas using Texture Packer. Each export is 1920 x 1080 with the player taking up about 1/3 to 1/2 of that size. Texture packer does a decent job of packing them together in the atlas. I was hoping that I was just doing something wrong but I'm now assuming that I just have too many textures that are too big for Phaser (or maybe any html5 framework) to load well.

Interestingly I have noticed quite a bit of improvement by changing the render type from Phaser.AUTO to Phaser.CANVAS. That has surprised me quite a bit.. I'm using a PC and it's not super high end but it has a GTX 750 Ti so I thought that webgl would offer the better performance for sure and I also read that webgl would be best for most mobile devices.

 

[Skeptron]

Yeah CANVAS has always been performing better. People have been talkin for years about how WebGL is great but the truth is, it still is behind canvas.

But yeah, you definitely have way too huge art for your game. It's not an issue with Phaser specifically (at least I don't think so), it's an issue with you guys trying to do amazing animations with super-high framerates and frame-by-frame export. No wonder it's super heavy. To do such beautiful animations, Spine would have been a life changer, too bad you can't use it. It would make the animations even more fluid and the game 1000 times more lightweight.

[Titus]

Thanks again @Skeptron. Have you used Spine yourself? I might have to give it another look if the current way are doing things is just too heavy. I've done a bit of research but it wasn't clear to me if it's possible to use Spine animations with Phaser.

[samme]

On 10/16/2017 at 6:22 AM, Titus said:

All my assets are loaded in a preload state which has a loading bar but the issue I'm having is that some states which access a large texture atlas (8,000 or higher) take 3-5 seconds to load, without any feedback to the user. I wouldn't mind if that extra time was added to the preload state with a loading bar but I'm confused as to why switching states takes so long if the assets are already loaded.

I'd guess that's the texture uploading to the GPU.

[Skeptron]

I do indeed use Spine myself (see example here).

I absolutely needed it because time can be slowed down in the game, so for the animations not to look choppy, I needed infinite precision. And that's what Spine provides : you give it the body parts (arm, leg, head etc.), you animate (just like Spriter), and instead of exporting a huge spritesheet with all the frames it exports a json file with the result code to animate the body parts like you asked. Needless to say, this code is much lighter that Spriter's spritesheet. 

And this code is based on time, so you can slow down an animation as much as you like for example. In fact, you can do much, much more, like replacing body parts at runtime (changing a weapon, displaying the damaged version of a part etc.), you can apply skins at runtime, move some limbs independently and so on... 

I know I sound like I'm making their publicity but it really is much, much better than Spriter. Also performance is much better. I used to have huge spritesheets for my characters, and it caused the game to lag a lot. Spine is much faster, despite having to do animations calculations at runtime.

Only hiccup is the integration. I think there is a repository 'phaser-spine' or something like that, but it was barely maintained when I checked it. I wrote the integration code myself using the official spine-js code (repo here). It didn't take too long but it's not perfect and does not work with WebGL (which is fine for my project).