HTML5 How to scale the loading screen of a HTML5 game?

Discussion in 'Programming' started by CombatCalamity, Aug 27, 2019.

  1. CombatCalamity

    CombatCalamity Member

    Joined:
    Feb 16, 2019
    Posts:
    67
    Hello

    As the title says..

    For now my game scales perfectly post loading screen, but how do you scale the loading screen?

    Perhaps by using a custom loading bar extension like this one https://yellowafterlife.itch.io/gamemaker-loadbar

    Then configuring it through the JS manually, but I don't have any idea how to do that.

    Any help would be much appreciated, thanks.
     
  2. FrostyCat

    FrostyCat Member

    Joined:
    Jun 26, 2016
    Posts:
    4,549
    As mentioned in this companion article, the loading bar extension function should have a width and a height argument to handle these kinds of use cases. You'd only have issues with scaling if that function is built to draw at fixed coordinates instead of in terms of width and height.
     
  3. CombatCalamity

    CombatCalamity Member

    Joined:
    Feb 16, 2019
    Posts:
    67
    Hmm I'm really lost.. I searched over the land and sea in the docs or blogposts but can't find anything of this. Who executes the function ImageLoadBar_hook()? Is it done by gamemaker? If so, where am I supposed to know that? I literally cannot tell what goes where and what gets executed.

    I know I'm struggling the basics of GM-JS communication in itself, it would be great if you could reference something for me to look further. Thanks a bunch for your help.

    PS: I saw you talking back and forth with Mike on some thread something about this as well, and it basically resulted with Mike including
    Code:
    window.onload = GameMaker_Init
    in every GM HTML5 index page. Does it have a correllation with this to be doing stuff before the game loads?
     
  4. FrostyCat

    FrostyCat Member

    Joined:
    Jun 26, 2016
    Posts:
    4,549
    After you import the extension, go into Options > HTML5 > General and change the the dropdown that says "Loading bar extension". Once you do that and build, the loading bar function you selected would be called periodically by the runner when it starts loading resources outside of the runner (i.e. everything else in html5game except the main .js file). The runner would pass in information on the size of the canvas, the drawing context and the current progress, so that the loading bar function can draw the appropriate content.

    Among all the extension options in GM, the one to JS on the HTML5 export is by far the simplest, so simple that they neglected to document it. Begin by starting an extension and adding an empty JS file to it. On the JS side, simply declare each function using the function keyword. Here is an example:
    Code:
    function helloWorld() {
      alert("Hello world!");
    }
    
    function myFunction(a, b) {
      return a+b;
    }
    function myFunction2(name) {
      return "Hello " + name + "!";
    }
    
    Then in GMS 2, double-click the extension and then the js file listed in the window that comes up. Now click the hamburger menu icon next to "Functions" and select "Add function". In there, set "Name" to the name you want to call it from the GML side (can be the same as or different from in the JS file; here we'll assume it's the same), "External Name" to the name of the function as shown in the JS file (helloWorld, myFunction and myFunction2 in the example), and add as many arguments as are shown in the JS file (0, 2, 1 respectively in the example). Repeat the "Add function" part once per JS function that you want to be directly accessible from the GML side. Once you're done that, you can use these JS functions from GML like this:
    Code:
    helloWorld();
    show_message("1+1=" + string(myFunction(1, 1)));
    show_message(myFunction2("Kitty"));
    
    From there you'll probably want to learn how to do JS-to-GML callbacks, but beyond that there really isn't much more to learn. I've done JS extension work before and know YoYo should have more ways to hook in (e.g. getting at runner-internal surfaces, buffers, data structures and other resources from external JS are currently off-limits, but everyone agrees that isn't the way things should be), but the basics are there and it's small enough to pick up in a quick read.

    No, that line just starts the runner. The runner will call the loading bar extension somewhere down the line, but only after it starts.
     
    Last edited: Aug 27, 2019
  5. CombatCalamity

    CombatCalamity Member

    Joined:
    Feb 16, 2019
    Posts:
    67
    Awesome, it works!!!

    In case anyone wondering how I did it.

    Just add a script called gmcallback_setScaling

    Fill it with any scaling scripts you want, wether window_set_size, window_set_position, setting view ports, resolution, anything you want.

    Then open up your .js extension file, the one that you use as the custom loading bar extension for, and execute that script on the first line using
    Code:
    window.gml_Script_gmcallback_setScaling();
    @FrostyCat God bless your soul! With your explanations being put in easy words I was able to comprehend this.

    This absolutely makes 'that' $100 HTML5 scaling engine useless! wink wink.:D Now I might actually sell my own in the marketplace and undercut the heckk out of it lol
     
  6. True Valhalla

    True Valhalla Full-Time Developer GMC Elder

    Joined:
    Jun 20, 2016
    Posts:
    318
    The Mobility Engine is actually on sale for just $64.95 - thanks for the mention. It features a custom loading extension specially designed to support responsive scaling within mobile browsers.
     
    Posh Indie likes this.
  7. Posh Indie

    Posh Indie Member

    Joined:
    Dec 5, 2016
    Posts:
    200
    I am pretty sure I picked the Mobility Engine up years ago to show you some support (In light of all the negativity you experience). Your site says free updates for life. If I find the receipt, maybe I will download it and play around with it again when I get a free moment. I do not think I would last in the HTML5 space, though, especially this late in the game (Would be nice, though, haha).
     
  8. CombatCalamity

    CombatCalamity Member

    Joined:
    Feb 16, 2019
    Posts:
    67
    I can do 100% just like that for free. If someone asked me how to do it I'll show them for free as well, or honestly if they want a ready-to-go-packed version I'll put them up including the source code or something. All for no cost.

    It's just, setting things for 'free' doesn't help it compete in the open market, so I might need to actually set a price for it.

    It features a custom loading extension specially designed to support responsive scaling within mobile browsers. :D You name it, it's exactly the same like on truevalhalla's games. Its got you all covered, all for nowhere as much as $100 (or $65?). All thanks to yellowafterlife and frostycat for making all this possible!!

    Also, @True Valhalla I'm curious as to why don't you put it up at yoyo's official marketplace and not just your own site?
     
    hacktually likes this.
  9. hacktually

    hacktually Member

    Joined:
    Sep 17, 2017
    Posts:
    6
    Please do this as it’s a needed solution for many. I understand needing to add a price to it as well. As long as it’s not as steeply priced as the mobility engine I’ll instantly buy it.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice