HTML Performance Optimization

  • #1, by Johannes Reß-2Wednesday, 18. October 2017, 15:04 3 years ago
    The performance of the HTML Version of our game is criticised by a lot of players. Do you have any tipps, for performance optimization?

    What helps the most? I already removed most of our background animations, but it did only help a bit.

    The game is about 200MB and has a resolution of 1080p - which looks awesome in the windows, android and iOS versions.

    In addition: 
    In the export window, there is an option for "change resolution" - what does this option? When I tried it in the past, it simply broke my application and only parts of it were visible.

    Thanks for your tips.

    If you want to, I could share the link to the game - it is completely in german.

    Newbie

    31 Posts


  • #2, by atrusWednesday, 18. October 2017, 15:35 3 years ago
    A link will be good to check it out.

    Honestly 1080p sounds like an overkill for an html game, and by default browser will take loads of RAM. Which browser have you tested it on? How much RAM it takes?

    Forum Fan

    237 Posts

  • #3, by afrlmeWednesday, 18. October 2017, 15:53 3 years ago
    Firefox alone uses around 200-400mb RAM with just the default page open. Chrome uses considerably much less, but I've been using Firefox more or less since it first came out & I'm too stubborn to switch over to Chrome.

    Anyway, yeah. While 1080p may look great, it's a massive resource hog; especially as far as 2D is concerned. I recommend 720p or lower. Also probably scrap openGL shader stuff or at least the more intense features/functions/effects. & finally convert png to webp & use that as it will reduce all of your images & animation file sizes down by at least 1/3 to 50% which means less required hdd space / loading times overall, which is a massive help. Lossy webp format will reduce file sizes by a lot compared to lossless webp, but I highly recommend using lossless because there's less chance of weird graphical glitches.

    As for the change resolution option, I believe it reduces the default game resolution. Theoretically I think it's supposed to scale down the images, animations, way borders, interaction polygons & all of that, but I really wouldn't trust it. I've not tried it in 5.x, but it's never worked as intended in previous versions or at least not worked 100% accurately.

    https://wiki.visionaire-tracker.net/wiki/Game_Optimization

    https://wiki.visionaire-tracker.net/wiki/Image_Encoding

    Imperator

    6842 Posts

  • #4, by Johannes Reß-2Wednesday, 18. October 2017, 21:36 3 years ago
    Thank you for your answers!

    You can play the current version here:
    http://schulprojekte-reformation.de/game/html/

    I used the webp option in the html export module and hope, that this will convert all images to webp - would I have to do it by hand? Alle pngs we use as are basis are compressed to png8 with tinypng.org.

    I don't use shaders or particle effects in my game - a lot of handdrawn animations only. 

    1080p was the wish of my customer - so no other chance for the Windows and mobile versions - where it is working good. The problem is, that converting the whole game to 720p will be a work of weeks, since I would have to redo all positions, walkzones, borders, hotspots etc... Or is there an easier way for changing the resolution? 

    Newbie

    31 Posts

  • #5, by afrlmeWednesday, 18. October 2017, 23:32 3 years ago
    No, by hand is the only guaranteed method of changing resolution. Maybe the built in webp export is ok? I don't know. I personally convert png to webp with XnConvert while I'm working as I like to see the end result while I'm working/testing.

    How much filesize total did converting to webp with the export option shave off?

    Imperator

    6842 Posts

  • #6, by atrusThursday, 19. October 2017, 10:47 3 years ago
    Just checked on my latest 64-bit chrome and the game takes about 830MB of memory, quite a lot i'd say.

    Btw, the game looks very nice!

    Forum Fan

    237 Posts

  • #7, by afrlmeThursday, 19. October 2017, 14:15 3 years ago
    Aye, looks really nice. Took about 10 minutes to ready up on firefox for some reason. Also runs really slow in firefox & some audio glitches occur randomly while the characters speak.

    I think most of this is down to optimization & the 1080p resolution as the game should run without any issues on my pc. Let's put it this way... I can run PLAYERUNKNOWN's Battlegrounds & Battlefield 1 on my PC more or less fine, bar the odd fps drop now & then - the optimization in PUBG still isn't that great.

    Imperator

    6842 Posts

  • #8, by Chriz MerklThursday, 19. October 2017, 14:58 3 years ago
    Just checked on my latest 64-bit chrome and the game takes about 830MB of memory, quite a lot i'd say.

    Btw, the game looks very nice!
    Thanks a lot ;-)

    Newbie

    1 Posts

  • #9, by rosina-m-Thursday, 19. October 2017, 15:15 3 years ago
    Auf Opera (48.0.2685.50) laufen die Animationen erst flüssig, wenn sie schon einmal abgespielt wurden. Ich weiß nicht ob es Einfluss darauf hat, in meiner Müllhalde stecken 16GB RAM. Die Ladezeit beim ersten Start betrug 25 Sekunden, also alles in Allem ist die Performance für 1080p in Ordnung.

    Newbie

    7 Posts

  • #10, by afrlmeThursday, 19. October 2017, 17:53 3 years ago
    Strange maybe it just works better in certain browsers? Firefox was slow, but Firefox already uses a fair bit of RAM just to run the browser with only the default page open - anything from around 200mb to 400mb  or so.

    Chrome, I haven't tested. Had same loading problem where it was taking forever to startup & ended up getting bored of waiting.

    Not tried it on MS Edge.

    Imperator

    6842 Posts

  • #11, by SimonSSaturday, 21. October 2017, 00:21 3 years ago
    I tested a little and made an update for the html5 player, that betters performance a little and also adds info about the download progress. I get the best performance in Chrome here, Firefox tends to lock up and Edge is really slow. The biggest performance issue is decoding images and not how big the game is (although Firefox is not so skilled at managing it).

    Thread Captain

    1368 Posts

Write post