AUGUST 23, 2015
Lately I've been working on an HTML5 demo for my adventure game Demetrios. That way, people can try the game without having to download it! (which is tedious for many people who just won't bother)
With Game Maker Studio, it's supposed to be just choosing another export type, however it's not that simple! Here are some details that will interest the game devs among you :
- The game was way too slow (Full HD is too much for HTML5 to handle) => I had to reduce the resolution, and to get real gain, I had to actually reduce the size of the graphics used. So I made scripts to reduce the files, and many other changes (graphics were wrongly placed on screen)
- HTML5 file loads are asynchronous (unlike computer versions), so this required loading the graphics beforehand (otherwise they would not appear, or way too late) This meant adding some load screens between changing rooms. Also, the "image loaded" event caused many problems.
- I had to switch from 60FPS to 30FPS to make it playable on slower computers. Again, it's not as easy as changing one variable (but now, it is!) because I hadn't planned it and had to make a few fixes here and there to make it work.
NB : I'm not using any automatic frameskip function, because they wouldn't work with HTML5. Instead, I just double the speed of everything which has a speed in each step (example : typewriting is twice faster)
- I needed a custom startup screen (because there's quite a lot of big files to load), and Game Maker Studio doesn't provide one by default. You can have a picture (which won't appear...), OR a loading bar, but there's no easy way to make a picture WITH a loading bar?!
Some people talked about checking the demo, and I did, but it wasn't really self explanatory (no tutorial or anything, at least I couldn't find it) Also, I couldn't see the loading when starting the demo because it started immediately! However I figured it out, and I was finally able to add a picture WITH a loading bar. Phew! Thanks for making it easy...
- Many other issues : Some inputs behaved slightly differently, surfaces too.
- On Firefox, there's a bug with mouse clicks : if the frame takes too long to render, the mouse input will not register the "mouse button released" event. So even though I physically released the button, it still registers it as being pressed at every following step, UNTIL I click again!
So far it seems to be a Game Maker Studio bug : it only does that on Firefox, and only with the mouse : I've tested it on two computers. If I try with a keyboard button instead, it works perfectly. I think I'll report it - but i may not be easy to reproduce it in an example project. I haven't been able to find a workaround, so this means Firefox users will have to sometimes click several times to make it work.
- I also had a LOT of trouble (almost spent a day on this issue!) with the loading image event, only on Firefox. I submitted several images to load at the same time, and the result was... random. Most of the time it worked fine, but many times, it reported having load the same file several times, or report an incorrect file, or just forget to tell that it's loaded that file! Firefox went totally berserk. The solution was... to load the files sequentially. And it works great. Sometimes it stills loads the files incorrectly, but I added a timeout and some checks to ensure it works and to try again in case a loading fails.
- Internet Explorer has many issues : the new audio engine doesn't work with it (found a workaround), and surfaces are totally glitchy. When creating a surface, it's actually rendered on screen immediately (and covering up the whole screen!) instead of hidden on every other environment. (still hasn't fixed that yet, it seems to be a bug with GMS again but I have to investigate)
However, it's working perfectly on Google Chrome, and even with the new Microsoft Edge browser (and it's actually the fastest one!!!)
I've spent 3-4 days to make this HTML5 demo work, it was tedious at times but now I've got some satisfying results. I just need to fix some of the IE issues, make a few improvements, and I'll add it to my site's demo page :)