• Hey Guest! Ever feel like entering a Game Jam, but the time limit is always too much pressure? We get it... You lead a hectic life and dedicating 3 whole days to make a game just doesn't work for you! So, why not enter the GMC SLOW JAM? Take your time! Kick back and make your game over 4 months! Interested? Then just click here!
  • Hello [name]! Thanks for joining the GMC. Before making any posts in the Tech Support forum, can we suggest you read the forum rules? These are simple guidelines that we ask you to follow so that you can get the best help possible for your issue.

HTML5 Performances and issues with HTML5 export

V

valryon

Guest
Hello!
I'm doing a little DOOM demake for fun as a 2D run'n'gun game and I'm learning GameMaker Studio 2 with it.

As this is a fun and unfinishable project I want to have a web playable version but I'm encountering several issues with the HTML5 export.
The game is actually playable here, I'm linking for context: https://2doom.itch.io/game

I have two main issues :

1/ Performances are very poor in browsers (FF and Chrome) if I don't add some tricks. The playable version above includes those tricks.
Tricks = I added a "manual culling" (instance_deactivate_all then instance_activate_region) running every frame around the player, but it mess up some collisions (mobs and props going through the floor).

Now, I know that the level is huge and filled with too many things and I'm doing collisions with invisible boxes so I udnerstand this is not optimal :


BUT I have a steady 300 FPS on the Desktop version (PC and Mac) and 5 FPS on the web if both without culling...


2/ When you hit an enemy, they should have a "white hit flash" for few frames. I tried with a shader, it was fine on standalone but not in HTML5.
I switched to gpu_set_fog white and got the same effect but also the same incompatibility in browsers.

gpu_set_fog(true,hit_color,0,1)
draw_self()
gpu_set_fog(false,hit_color,0,1)​

Note that :
- The game is 100% functionnal on desktops. It really is the browser export the issue.
- WebGL is required. Performances are mostly the same if WebGL is disabled.
- I tested with Firefox and Chrome up-to-date

I'm not sure 1 is solvable and I managed to get 80% of the level without too much bugs. But point 2 is really annoying.

Any ideas? Thanks! :)
 

TsukaYuriko

☄️
Forum Staff
Moderator
For 1, you pretty much summed it up yourself - you're not handling things in the most efficient way possible and you're comparing desktop exports with the web export, which is naturally slower due to the platform it runs on (interpreted in a browser vs. compiled natively or in a VM). Either split up the stage into multiple smaller, modular portions (through strategic deactivation related to the player's position, or having multiple rooms...) or optimize what's running otherwise (the profiler should help with finding out what the biggest performance drain is).

About 2, what happens when you use this on HTML5? What is actually being drawn? Please also state your version numbers to rule out any bugs that may have been fixed in a newer release as well.
 
V

valryon

Guest
Thanks!
For the 2, what happens is what you see in the playable version on itch: no flash.
But if I switch to desktop with the same code, I'll have a white flash on hit.

Versions:
- IDE 2.2.2.413
- Runtime 2.2.2.326
 

Ricardo

Member
Make sure to check the browser's dev console while running your game to see if there's an error or maybe an useful warning there.
You can also run your game in debug mode (F6) and profile it using the browser dev tools. That'll give you a glance of what's exactly affecting the performance.
 
V

valryon

Guest
Thanks, I did some profiling with the browser tools and it looks like "requestAnimationFrame" is taking all the resources.
I guess objects are animated even if not in game view.
Is there a simple way to avoid animations outside of game view?

I tried setting image_speed to 0 on room_start and setting it back on view intersection with no success on performances.
 

Nocturne

Friendly Tyrant
Forum Staff
Admin
Try setting the "visible" flag in all instances outside the view to false. This will negate all the draw events, so also make sure there is no essential code in the draw event otherwise it won't run, and you'll get issues.

Oh, and file a bug about the gpu_set_fog() issue, as it should work with WebGL enabled (please supply a download link to a small test file that shows the issue if you can).

PS: Love the game! :)
 

True Valhalla

Full-Time Developer
GMC Elder
The big red flag here is that you said performance is similar with and without WebGL enabled. That's very unusual.

Thanks, I did some profiling with the browser tools and it looks like "requestAnimationFrame" is taking all the resources.
I guess objects are animated even if not in game view.
This points to issues with your draw events. You may want to try disabling all alpha/color manipulation - these can be a massive drain on HTML5 performance. You may also need to optimise your texture pages.

Since you haven't been optimising your game for HTML5 from the start, there are probably quite a few issues stacking up on top of each other.
 
Last edited:
V

valryon

Guest
Hello,
I did some optimizations:
- setting visible flag to false when not in camera view
- setting sprites speed to 0 when there's a single sprite
- adding texture groups and tweaking texture pages

and many more small tweaks. I've doubled the FPS!
Well, it's still 12 in HTML and 600 on Windows...

BUT I can narrow the performance issue to the collision. (If I disable all colliders, the game runs ~60 FPS)

I'm doing a "instance_place" to check collisions between entities and invisible colliders.
There's a lot of colliders (see portion of the room above) so I get why it's so unefficient.

I tried "place_free" instead with the "solid" flag on the invisible colliders, but it's still inefficient.
Also, I need information about the colliding ground so I need the object...
 

Ricardo

Member
@valryon I just played your game on Itch using Chrome and it run perfectly smooth for me. Have you ever checked if your browsers have hardware acceleration properly enabled on settings?
 
V

valryon

Guest
@Ricardo Well, the itch version is full of hacks so it can run smoothly. :)
(Mostly dynamic activation/deactivation).
But those hacks are causing some bugs, even if I thing most of them has been eliminated.
 
F

fizzog

Guest
@valryon I am experiencing poor Chrome performance with my export as well. But on Safari, it's nearly identical to Desktop performance. As a sanity check, I downloaded the YoYo Dungeon Demo and I saw the same results. Safari performed flawlessly, Chrome tick-laged along. Hardware Acceleration is enabled on my version of Chrome. I'm working from my MacBook Pro with GMS2 IDE v2.2.2.413 Runtime v2.2.2.326 and Chrome Version 75.0.3770.100 (Official Build) (64-bit).

Chrome showed 2 FPS in the profiler.

Any resolution to this?

including @Ricardo
 
Last edited by a moderator:
F

fizzog

Guest
Found the issue with Chrome. Though hardware acceleration was check enabled, when I navigate to chrome://gpu/ I see
  • WebGL: Software only, hardware acceleration unavailable
  • WebGL2: Software only, hardware acceleration unavailable
Then I navigated to chrome://flags/ and saw the following disabled,

Override software rendering list
Overrides the built-in software rendering list and enables GPU-acceleration on unsupported system configurations. – Mac, Windows, Linux, Chrome OS, Android
#ignore-gpu-blacklist

Setting this to enabled vastly improved Chrome's performance.

//gpu now shows:
  • WebGL: Hardware accelerated
  • WebGL2: Hardware accelerated
 
Top