Get HTML5 game to perform faster/more stable

[Pastelkatto]

Hello!

I just finished an HTML5 dress up game. I did it exactly like I used to with my flash games (but of course in javascript instead of AS3). However the result is a poorly performing game. It works pretty well when testing locally (although it takes 5-10 minutes to start the test), but online it's slow, laggy and some people can't even get past the loading screen. When discussing with other developers (although the ones I talked to were pretty much as new to HTML5 as I am), we concluded that it's probably because the game is so big and have so many items in it. As a dress up game it's pretty heavy on the images.

Now I wonder, is there anything I can do to make the game faster and more stable? (note that I'm a novice in working with HTML5 canvases, I only work in Animate CC with the code on the frames)

In my next game I'm lowering down the amount of items used and lowering the resolution. Before I used 1200x900px, which is certainly bigger than the standard 800x600px, but it allowed me to create better artworks for it and flash could take it. Now I'm trying a portrait format in 626x900px, so at least a big chunk of the game is cut out. In order to use color filters I cache all bitmaps that these filters will be applied to and I'm not sure if it matters but I do cache the smallest area possible to cover them. I've also tried to reduce the quality of the images in publishing options but anything less than 32 bits removed the transparency on the pictures which doesn't really work in this game.

Is there anything else I can do? I'm thinking (and also kinda hope) that I'm missing something really obvious just because I'm a noob.

You can try the game in question over here: Tomboy Creator HTML5

That is if you can get past the loading screen. It seems that the game works the best on desktop and chrome. Any other combination of device and browser will cause different issues to show up. I would continue working in flash but now more and more website refuses to even publish flash games, so it's not much of an option anymore.

[Colin Holgate · Accepted solution]

It works fine for me, and I don't see any performance issues. Here are some thoughts anyway:

In the HTML is a line:

   var loader = new createjs.LoadQueue(false);

if you add another line to make it be like this, the loading of the page may be six times faster:

  var loader = new createjs.LoadQueue(false);

  loader.setMaxConnections(6);

If you have used Motion Tweens anywhere, or you have done custom ease Classic Tweens, change those. Only use any of the preset eases, where you can set the strength to -100 to +100. Doing that will make the JS file smaller, and will perform a lot better.

Don't use static text, they end up being like complex curves. Either use device text or even bitmaps.

Look at sites like tinypng.com, which can dramatically reduce the file size of the bitmaps, without them looking ay worse.

Last thing, you can do an addChild() to make an object appear on top of everything. Right now it's strange that drag objects are in the background. If you have a layer that you're adding them into, for some reason, you could still have a top layer container for the dragging part.

[Pastelkatto]

Thank you for this response. I added the loader code and I didn't know about TinyPNG, so I used it for the spritesheets and given how it managed to reduce them with 73%, it gotta help with the loading time.

As for text and tweens, I don't use any, all text are bitmaps. But I'll keep that in mind for future projects! I also do use addChild, the user can choose between four layers to put the draggable items as some are supposed to be behind the character and some in front.

Although the game has worked just fine for me all of the time, I keep getting complaints daily about performance issues. Some websites doesn't even want to publish the game as they find it run too slow and is unstable. I hope that this has helped somewhat for these.

[cbunbury20]

animate preloader is not half as good, as swf preloaders into loading everything, with lots of graph sites in third world, internet conections we get this lag, untill you F5 we get stuff to work manny times, and its upsetting, Also, theoriclly what we should do now, for a thing with so manny graphics its make and app, either developing in AS3 or just making the canvas file with coocoon js, intell croswalk or phone gap services like that, then with a installed app you get much less lag and theres monetizations options