• 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.

HTML 5 - Works?

jas490

Member
Hi All-
Debating whether or not to purchase the web (HTML 5) export option. Does anyone have much experience porting GM2 games to HTML 5? I'm not that experienced with HTML 5, so if the game doesn't work "out of the box" I think I may have wasted the $149...Anyway, LMK what you all think and how easy/hard it is to publish a working version of an HTML 5 game.
Thanks!!!
 

matharoo

manualman
GameMaker Dev.
It's very good. I've personally not had much trouble, and any issues weren't too hard to overcome. I even imported an HTML5 project from the ol' GM:S 1.4 into 2.3.1 and it worked without errors.

Do note that you may face issues if you're trying to run a pre-built project in HTML5, as the best practice is to develop a project from scratch for that platform and test it along the way. However, most of your issues should be easy enough to fix during the porting process.

I recommend getting it. If you face any issues, the community is here for you! :)
 

Mr Magnus

Viking King
If it's anything like the 1.4Html export it works fine out of the box assuming the underlying project is sound. I made a lot of html5 games as a teen with varying quality, and never had any issues with the exporter itself.
 

markysoft

Member
Hi All-
Debating whether or not to purchase the web (HTML 5) export option. Does anyone have much experience porting GM2 games to HTML 5? I'm not that experienced with HTML 5, so if the game doesn't work "out of the box" I think I may have wasted the $149...Anyway, LMK what you all think and how easy/hard it is to publish a working version of an HTML 5 game.
Thanks!!!
I bought the HTML5 license a few weeks ago when the sale was on. It was primarily so I could get my hobby game more easily played by people (link at the bottom of you're interested).

I was pleasantly surprised how well it works as an HTML5 game. It's pretty simple and is more of an arcade game, but runs steadily around 60 FPS, same as desktop on my machine.

The pixel shader works OK too, which is nice.

Chrome seems to be a bit smoother than other browsers when rendering.

Sometimes the sound is a bit more "clicky" than the desktop version.

Strangely the browser version works better than the compiled version on raspberry pi.

One thing I would say is the HTML output is pickier than desktop. Small errors like writing past the end of a ds_map that the desktop compilation will handle will error in the browser, so it might not "just work" if you've got some small issues. It's more common than you might think - I had to fix problems on both my games when I first ran them as HTML5.

If you're not comfortable with debugging JavaScript in the browser you may find it challenging to get your game working.

Also JS is notoriously poor at floating point numbers, so if you are using procedural generation it might be slightly different from desktop to browser.

Finally sometimes the html local build screws up and mixes up the sprites, but running clean, then as debug sorts it out.

I'm pretty happy with the HTML5 export, though I'm pretty experienced with web tech so fixing issues isn't too bad for me.

I think that about covers it! Anyway here's a GMS game exported to HTML5:
 
I like the replay mechanics, tho it made me look like a fool more often than not. Nice twist of using the mouse buttons to steer, I like it.
 

Padouk

Member
@jas490 Is it for your chromebook? :)


What I love about the HTML5 target is how you simply have to press "run" on your desktop and open up the debug url on your chromebook to enjoy your last version of things.
I'm using the HTML5 target quite extensively for rapid prototyping and networking development... The easy of deployment is lovely.
Performance wise, the purists will say performances are not good... I don't understand it. With webgl, you get almost the same end-results and performances than you'd get with your desktop version. (I say almost... 60fps is a target. Not always easy to reach depending on your game).


--
I first purchased the HTML5 target for my daughter so she could create a game and play with it on our chromebook.
Turns out.. I use that license more than the Desktop version now for my personal projects.



--

It all boiles down to your intent.
I find it rather hard to monetize an html games... You have to go a looooong way to make some money out of it. So if your intent is to make money... that's probably not a good way to go.
I find it easier to get visibility on an html games. Publishing on facebook, on itch.io, on newground or even on a cheap Lamp server. If your intent is to build a portfolio or show off to your friends. That's probably a good way to go.
I find it a littlebit harder to come up with a Smooth experience on HTML5. You will have a few more friction points and a few more bugs. If you are just fooling around throwing ideas for yourself. I'd stick with the Desktop version for a little while. Learn the platform, enjoy it. Desktop has less friction points and is all you should need for a while.

--

Few pitfall to remember when porting an existing game... the browser is a more restrictive sandbox...
--

- File access is completly different.
- - For load/save game state... nothing major. Try to stay bellow the 1M localstorage limit when saving your buffer.
- - If you use files in any other way (saving sprites, saving surfaces, listing files, creating files, downloading content, etc) you will have to revisit it. It won't be possible in HTML5.

- Different Security measure
- - sound: You can't play a sound before the user have interacted with the browser (click) so your splashscreen might need some fixing.
- - couple of other little tweak to do in iframe.

- Framerate
- - Unlike the Desktop version, which use clock speed. The Browsers are tied to the monitor refresh rate and GMS rely on it for timing and dispatching.
- - fps_real will mostlikely always be 60 when using a 60hz monitor. If you are using webgl and your gamespeed is at 60fps don't worry about it.

- Extensions
- - If you use extensions from the marketplace, make sure they support html5 (most of them dont...)
- - If you make your own extensions... that double the work.

- Debugging/Profiling
- - You can no longer put breakpoint in GMS, you need to use the Browser's debugger and profiler. It forces you to learn another tool stack.

Couple of other more advanced area.. buffers, networking (udp vs websockets), 32 bit arithmetics, couple of internal bugs...

The devil is in the detail... if you want to support 2 platforms with the same codebase, expect to throw in a few decision split.
GML:
if (os_browser == browser_not_a_browser)
{
  //Desktop version
}
else
{
  //Browser version
}



Finally sometimes the html local build screws up and mixes up the sprites, but running clean, then as debug sorts it out.
I second that...
This is the single most frustrating thing about the HTML5 target.
Your texture group get mixed up. Whenever you add some sprites to your projects caches are not well invalidated.
Your animation will start blinking like crazy after a build. Don't panic if that happens.. just clean and rebuild.
It's actually quite annoying at the beginning of a project when you start adding your images.
 
Last edited:

jas490

Member
I bought the HTML5 license a few weeks ago when the sale was on. It was primarily so I could get my hobby game more easily played by people (link at the bottom of you're interested).

I was pleasantly surprised how well it works as an HTML5 game. It's pretty simple and is more of an arcade game, but runs steadily around 60 FPS, same as desktop on my machine.

The pixel shader works OK too, which is nice.

Chrome seems to be a bit smoother than other browsers when rendering.

Sometimes the sound is a bit more "clicky" than the desktop version.

Strangely the browser version works better than the compiled version on raspberry pi.

One thing I would say is the HTML output is pickier than desktop. Small errors like writing past the end of a ds_map that the desktop compilation will handle will error in the browser, so it might not "just work" if you've got some small issues. It's more common than you might think - I had to fix problems on both my games when I first ran them as HTML5.

If you're not comfortable with debugging JavaScript in the browser you may find it challenging to get your game working.

Also JS is notoriously poor at floating point numbers, so if you are using procedural generation it might be slightly different from desktop to browser.

Finally sometimes the html local build screws up and mixes up the sprites, but running clean, then as debug sorts it out.

I'm pretty happy with the HTML5 export, though I'm pretty experienced with web tech so fixing issues isn't too bad for me.

I think that about covers it! Anyway here's a GMS game exported to HTML5:
Thank you!!
 

jas490

Member
@jas490 Is it for your chromebook? :)


What I love about the HTML5 target is how you simply have to press "run" on your desktop and open up the debug url on your chromebook to enjoy your last version of things.
I'm using the HTML5 target quite extensively for rapid prototyping and networking development... The easy of deployment is lovely.
Performance wise, the purists will say performances are not good... I don't understand it. With webgl, you get almost the same end-results and performances than you'd get with your desktop version. (I say almost... 60fps is a target. Not always easy to reach depending on your game).


--
I first purchased the HTML5 target for my daughter so she could create a game and play with it on our chromebook.
Turns out.. I use that license more than the Desktop version now for my personal projects.



--

It all boiles down to your intent.
I find it rather hard to monetize an html games... You have to go a looooong way to make some money out of it. So if your intent is to make money... that's probably not a good way to go.
I find it easier to get visibility on an html games. Publishing on facebook, on itch.io, on newground or even on a cheap Lamp server. If your intent is to build a portfolio or show off to your friends. That's probably a good way to go.
I find it a littlebit harder to come up with a Smooth experience on HTML5. You will have a few more friction points and a few more bugs. If you are just fooling around throwing ideas for yourself. I'd stick with the Desktop version for a little while. Learn the platform, enjoy it. Desktop has less friction points and is all you should need for a while.

--

Few pitfall to remember when porting an existing game... the browser is a more restrictive sandbox...
--

- File access is completly different.
- - For load/save game state... nothing major. Try to stay bellow the 1M localstorage limit when saving your buffer.
- - If you use files in any other way (saving sprites, saving surfaces, listing files, creating files, downloading content, etc) you will have to revisit it. It won't be possible in HTML5.

- Different Security measure
- - sound: You can't play a sound before the user have interacted with the browser (click) so your splashscreen might need some fixing.
- - couple of other little tweak to do in iframe.

- Framerate
- - Unlike the Desktop version, which use clock speed. The Browsers are tied to the monitor refresh rate and GMS rely on it for timing and dispatching.
- - fps_real will mostlikely always be 60 when using a 60hz monitor. If you are using webgl and your gamespeed is at 60fps don't worry about it.

- Extensions
- - If you use extensions from the marketplace, make sure they support html5 (most of them dont...)
- - If you make your own extensions... that double the work.

- Debugging/Profiling
- - You can no longer put breakpoint in GMS, you need to use the Browser's debugger and profiler. It forces you to learn another tool stack.

Couple of other more advanced area.. buffers, networking (udp vs websockets), 32 bit arithmetics, couple of internal bugs...

The devil is in the detail... if you want to support 2 platforms with the same codebase, expect to throw in a few decision split.
GML:
if (os_browser == browser_not_a_browser)
{
  //Desktop version
}
else
{
  //Browser version
}





I second that...
This is the single most frustrating thing about the HTML5 target.
Your texture group get mixed up. Whenever you add some sprites to your projects cash are not well invalidated.
Your animation will start blinking like crazy after a build. Don't panic if that happens.. just clean and rebuild.
It's actually quite annoying at the beginning of a project when you start adding your images.
Hey @Padouk , yes for a chromebook. Thank you so much for the info!!!
 

Fielmann

Member
It works, but there are some quibbles and hiccups.

- the build times are longer;
- I have to restart GameMaker and clean cache often;
- the usual error message is gone - must learn to use the browser console;
- some functions and syntax patterns that work in PC, don't work in HTML5;
- scaling works differently: window now refers to the canvas element and display refers to the browser window;
- must work around some nuances of browser technology that GMS can do little about. For example - sounds tend not to play until user has interacted with the page once.
 

gnysek

Member
HTML5 may require some knowledge about JS and web technologies (for example why you can't run a game directly from disk, but need a server, what is CORS etc.). Also it's good to know, that if something behave differently in HTML5, it might not be a bug, but a feature of browser/JS/how websites work, so don't get mad :) Sometimes some bypassing my be needed for solutions that would work on other exporters, but advanced users know, that in fact for every exporter this is needed at some point (and that's why we have constants for detecting device/os type).
 

jas490

Member
Hi All-
So, the HTML 5 target worked really well! I would say 98% of the game is working. But, as some of you have mentioned, there are a couple of bugs I need to work out. For those that are not JS fluent, what is your workflow? Do you debug in the browser and go back to GM code? Or do you directly edit the JS? I think at the very least I have to learn the developer console in Chrome (for example) so I can start to troubleshoot. I'm just a little worried that I am going to have to learn Javascript to fix a few minor things. Any advice would be appreciated as always!!
 

chamaeleon

Member
Start the game in debug mode so the Javascript for your gml code is not obfuscated. Add show_debug_message calls with data that you think may be pertinent for problems you experience. Have small playground project available to test out specific behavior without having to deal with the whole game. Open the browser developer tools and select the console so you can see any Javascript errors.
 
Last edited:

jas490

Member
Hi All-
Thanks for the continued comments and help. Unfortunately, it turns out not even people well versed in java script are able to help. I've had a few people tell me the debugging in JS is going to be close to impossible as the code is "transpiled" 8000+ lines ,and basically a mess. Maybe that's what @chamaeleon is referring to when having to debug in GM without the code obfuscated, IDK. Ughhhh!
 

chamaeleon

Member
Sample of what you can expect to see. Starting the project in debug mode, the small create event code is included in a comment block, followed by unobfuscated code (not necessarily readable). The GMS core library codebase is of course obfuscated and should be viewed as a black box that you don't try to look inside.
JavaScript:
// #####################################################################################################
// var a = [1, 2, 3];
// var sum = 0;
// for (var i = 0; i < 10; i++) {
//     sum += a[i];
// }
// show_debug_message(sum);
function gml_Object_obj_generic_Create_0( _inst, _other )
{
var gmla;
{
__yy_gml_array_set_owner(100004);
gmla=__yy_gml_array_create([1,2,3]);
}
;
var gmlsum = 0;
var gmli = 0 ; for (; yyfless(gmli,10) ; gmli++) {{
gmlsum=yyfplus(gmlsum,gmla[__yy_gml_array_check_index(gmli, gmla)]);
}
};
show_debug_message( gmlsum );
}
The code is obviously faulty, attempting to sum numbers in an array that does not have enough entries. From the GMS HTML5-specific browser window with debug information, the stack trace showing that the index was out of range at some point. Sadly no information maintained line number causing the problem.
Code:
Unhandled Exception - Uncaught { message : "index out of range", longMessage : "index out of range", stacktrace : [ "function _0h("index out of range")
", "function __yy_gml_array_check_index(3, [unknown])
", "function gml_Object_obj_generic_Create_0([instance], [instance])
", "function(0, 0, [instance], [instance])
", "function(0, 0, [instance], [instance])
", "function _cj2(3, [unknown])
", "function _bf3()
", "function _Oe3(1172.593)
" ], script : "", line : -1 } in file undefined at line undefined
 

markysoft

Member
To be honest HTML5 output has been driving me nuts the last few days as I've found what appear to be a few bugs.

phy_speed is undefined when I export to html5. phy_speed_x and phy_speed_y are OK though... so I have to compute it by via sqrt(sqr(phy_speed_x) + sqr(phy_speed_y))

Also the device_mouse_x_to_gui only work for the first 'finger' on multi touch. if you have more than one input the subsequent calls just return the room x or y, so I'm having to compute that manually from the camera x and y too.

Has anyone else experienced these issues?

I guess I can create a small sample project and submit it to YoYo as a bug report
 

chamaeleon

Member
phy_speed is undefined when I export to html5. phy_speed_x and phy_speed_y are OK though... so I have to compute it by via sqrt(sqr(phy_speed_x) + sqr(phy_speed_y))
Can confirm phy_speed is undefined in HTML5 when using a show_debug_message() statement outputting it, while working correctly in a Windows program.
 

jas490

Member
I don't know what I'm missing here. I created a new game with two objects and a few lines of GM code. Ran the game with HTML target in debug mode and in the JS file there is still over 4,000 lines of code, when I try to use listener events to track the code, I am in unreadable, messy thousand of lines.

1612636418837.png
 

Attachments

chamaeleon

Member
I don't know what I'm missing here. I created a new game with two objects and a few lines of GM code. Ran the game with HTML target in debug mode and in the JS file there is still over 4,000 lines of code, when I try to use listener events to track the code, I am in unreadable, messy thousand of lines.
If I were you I'd try to stay away from the GMS library code. There's nothing much in there you should touch or play with. If you have a particular issue I think you're better served clearly explaining what you are trying to do in a separate topic, and unless you are actively working on a Javascript extension, your code should only be GML code for everyone to understand what you are trying to do.
 
Top