Tutorial Nenjine


Preamble

Hey all. Recently after picking up the Html5 export for Gamemaker Studio 2, I found myself running into a lot of issues trying to develop for the platform. I want to compile a list of things that I've found different when working with the html5 export, to hopefully save you time trying to trouble shoot your game.

Because support has been dropped for the old documentation, not all things being added to the new documention are in the old documentation, so I'll be linking all references to the new documenation.


Networking

Mandatory web socket sockets

  • network_create_socket()
  • network_connect_async()
  • network_resolve()
  • Coding a multiplayer game for html5 is very similar to working with windows, but there is almost no infomation in the documentation about what the differences are.

    Firstly, the limitations. You cannot run a server in html5, and you cannot connect to servers unless you are both using network_socket_ws type sockets. The documentation says that the use of network_socket_ws is only for projects running on html5, but it seems to be that its the only type of socket web export projects can use, and that other types of exports and use it just fine.

    Since youre working with html and probably have a webserver and domain name all setup already, you can use network_resolve to get the ip address for your website from your website's url, rather than needing to put the public ip that is likely be dynamic and subject to change.

    Making a new type of connection

  • Networking Async Event
  • The next thing you need to keep in mind is that when connecting to the server, unless you are using network_connect_async the connection will fail. This function is just like the regular network_connect one, but won't pause the game to connect. This also has the caveat that along with the regular triggers for the async - networking event, the event will also be triggered when the client connects and disconnects with the server.

    Becauase the client will trigger network_type_connect and network_type_disconnect events, you'll need to make sure the before you run all the usual packet recieving code you check to see that the type of packet recieved was a network_type_data type, or the game will crash imediatly after it sucessfully connects to the server.

    Buffer strings are broken

  • buffer_read()
  • When you recieve a packet and want to read a string out of it, you cannot use buffer_read function. Trying to do so will result in the buffer read head getting moved inccorectly and an undefined value being returned. Luckily there is a work around:

    function buffer_read_string(_buffer){
    	
        var _str = "";
        var byte;
    	
        while (true) {
    		
            byte = buffer_read(_buffer ,buffer_u8);
    		
            if (byte = 0) { break };
    		
            _str = _str + ansi_char(byte);
    		
        };
    	
        return _str;
    	
    };
    

    This script will read and return a string from the given buffer, and move the buffer header along the correct way.


    General Considerations

    Data Structures

  • Data Structures
  • Because of how structured java script is compared to GML, when working with data structures you will need to be extra carefull not to write outside of the data structure, otherwise the game will crash and will show a black screen.

    You can check if this is happening without needing to compile the game as HTML, as the output window in the IDE will notify you of when this happens, as well as where in the grid, and the size of the grid being read or writen from.

    Arrays and Accessors

  • Accessors
  • If you are using the shorthand way to access arrays, instead of a function it's a good idea to use the array accessor @. Although gamemaker usually reads it correctly, sometimes with the web export it will fail to figure out what sort of data structure you're trying to access, and will crash the game instead.

    Surfaces

  • surface_create()
  • As noted in the documentation, its essential that when you create surfaces for the web export that the surface size is a power of 2. This isn't as important on the desktop export, but will make your game more compatible and cause less obscure issues if they ever arise.


    HTML

    Multiple Games On One Page

    You can run multiple games on one page, but it requires you to load the game in through an iframe, and have a js scipt that allows switching the focus between the iframes.

    It is requiured for the iframe to be focused if you want to be able to use the keyboard in your game this way.

    Center the game on the page

    There are two ways to center the game on the page. One way is to do it in the Game Options for HTML5. Under Graphics there is a check box.

    The other way is to do it manually in the html or css file when you build your page. In the html it will look like this:

    <canvas id="canvas" width="600" height="400" display="block" margin-left="auto" margin-right="auto">
    	<p>Your browser doesn't support HTML5 canvas.</p>
    </canvas>
    

    Naturally, you would want to change the width and height to the width and height of the window you game uses.


    Optimisations

    Web GL

    If your game is slowing down, it may have something to do with your browser not using Web GL. You can make Web Gl required for your game to run, in Game Options under HTML5 and Graphics.

    Creating and destorying instances

  • DS Lists
  • DS Grids
  • instance_activate_object()
  • instance_deactivate_object()
  • One slow down I've seen on the fourms is that if instances are frequently created and destroyed, then after a while the framerate will begin to tank. It seems that as resources are used and discarded it will generate garbage memory that the browser will have to deal with, which will make the frame rate drop.

    One way to get around this is to collect your instances you intend to destory into a list, and make sure that they are all deactivated. Then when you want to create a new instance of that type, you can pull an instance from the list to reactivate rather than create a new one from scratch.

    Another solution would be to take any lightweight instances, such as ones for buttons, tiles and walls, and to replace them with one control instance that would use a ds_grid to simulate them. This results in the game resizing a ds_grid, rather than creating and destorying instances, thus reducing the load on resources.

    Particles

    If you don't require the use of particles in your game, you can improve load time and file size of your game by not including built-in particle images in your export. To disable the inclusion of these images, in the Game Options, under HTML and Graphics, uncheck the box that says Use built-in particles

    Unresponsive Game Fix

    One issue i personally ran into was that when running the game from the website, the game would be unresponsive and only detect clicks and keypresses some of the time. This is the result of the canvas element not being properly created, specifically, you have not included this:

    image-rendering: optimizeSpeed;

    In either the css file for canvas elements, or in a style tag for the canvas in the html file.


    Postamble

    Naturally, this isn't everthing that could go wrong when working on a game for the web export, but this is a good place to get started when looking for solutions for issues that you may come across.

    If you do come across anything not in this list, or have noticed that it needs updating, please contact me here, so that this list can become more useful in the future.

    14 19 06 21


    [