1. Hello Guest! It's with a heavy heart that we must announce the removal of the Legacy GMC Archive. If you wish to save anything from it, now's the time! Please see this topic for more information.
    Dismiss Notice

HTML5 GMLive.js - test GML right in your browser!

Discussion in 'Made with GameMaker' started by YellowAfterlife, Oct 17, 2016.

Tags:
  1. YellowAfterlife

    YellowAfterlife ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ Forum Staff Moderator

    Joined:
    Apr 21, 2016
    Posts:
    2,434
    The thing itself: http://yal.cc/r/gml/

    Blog post: http://yal.cc/introducing-gmlive/

    In short, through a lot of trouble I made a GML->JS compiler that works closely enough to the original one. Then it is hooked up with a special project build and runs very similarly to how actual GML code would on HTML5 target. Also there's a matching code editor. And other things.

    As result, you can write and execute GML code right in the browser, in real-time (Ctrl+Enter to run). This can be used for a lot of things:
    [​IMG]
    [​IMG]
    [​IMG]
    [​IMG]

    Feedback is welcome.
     
    SilentxxBunny, Japster, Nux and 23 others like this.
  2. Arturo

    Arturo Member

    Joined:
    Jul 13, 2016
    Posts:
    47
    Nice toy!!

    So it works as an object in a room and we have access to all of its events.

    It could be a nice and fast option to test code

    Very impressive
     
  3. YellowAfterlife

    YellowAfterlife ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ Forum Staff Moderator

    Joined:
    Apr 21, 2016
    Posts:
    2,434
    Thanks!

    There's a "controller" instance that handles actual code execution, but you can make additional ones (via instance_create) and set up several predefined empty objects (obj_blank, obj_1...obj_9) for any other purpose needed.

    As an example, I made a small demo with slopes and smooth movement recently.
     
  4. PWL

    PWL Member

    Joined:
    Jun 21, 2016
    Posts:
    28
    Amazing.

    Just imagine how handy including a working, editable example on the GMC is.
    EDIT: Without downloading anything. Oh boy.
     
  5. Bingdom

    Bingdom Googledom

    Joined:
    Jul 1, 2016
    Posts:
    1,680
    This is really useful. Thank you!

    Bug:
    Type in 'spe', then hit backspace.
    The word variable and function gets cut off.
    upload_2016-10-19_20-57-0.png
     
  6. YellowAfterlife

    YellowAfterlife ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ Forum Staff Moderator

    Joined:
    Apr 21, 2016
    Posts:
    2,434
    Thanks! I've seen that bit, is an issue with editor component (does not realign items when scrollbar reappears). Haven't gotten around to making a clean reproduction case and reporting it yet though.
     
  7. Ehsan

    Ehsan Pirates vs Clones

    Joined:
    Jun 20, 2016
    Posts:
    38
    Played with it a little. Very nice and smooth.

    *My play

    *Edit
    I was hoping the share button would share your gameplay. Maybe a suggestion to implement for the next update? ;)

    **Benefits (beside the things already mentioned):
    • Takes away the trouble of opening GM for a quickie!
    • For guys like me who doesn't have much time and/or are mostly on the way
    • And want to stay fresh with gml!
    • A quicker way to guide/help solve a problem (for a noob)!! (→Two exclamation marks for this one!!)
     
    Last edited: Oct 19, 2016
  8. YellowAfterlife

    YellowAfterlife ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ Forum Staff Moderator

    Joined:
    Apr 21, 2016
    Posts:
    2,434
    Thanks! Replays would be an interesting feature and might happen at some point, but not too soon, since the nature of this project makes the feature's scope insanely big, requiring recording and replaying results of every input, time, file, and system-specific functions (you can look into the manual to see just how many there are). To the point where a replay would even need to contain files downloaded via http_ or sprite_add functions, since they could change or go amiss before it is played.

    Needless to say, would be an extremely ambitious goal to pursue.

    You can always record GIFs with GifCam, LICEcap, or ScreenToGif though.
     
    Galladhan and Ehsan like this.
  9. Tirous

    Tirous Member

    Joined:
    Jun 21, 2016
    Posts:
    75
    Cool lad, i like it! :D

    Tho could you add a way to reset back to the original example code, as that could be quite handy when you simply want to make something new.
    Also maybe a 'save code to clipboard' button, as that could also be quite handy.

    Still awsome tho, nice work lad! :D
     
  10. Alexx

    Alexx Member

    Joined:
    Jun 21, 2016
    Posts:
    441
    Awesome work, I can see a lot of scope for using this.
     
    YellowAfterlife likes this.
  11. YellowAfterlife

    YellowAfterlife ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ Forum Staff Moderator

    Joined:
    Apr 21, 2016
    Posts:
    2,434
    Thanks! A link that resets to sample code is included in the documentation ("sample program"); erasing all the code, hitting run, and reloading the page will also pop the sample program back in. I may look about adding an actual button for that in the future.

    Less sure about "save code to clipboard" - would that be identical to doing Ctrl+A, Ctrl+C?
     
    Tirous likes this.
  12. Conbeef

    Conbeef Member

    Joined:
    Jun 21, 2016
    Posts:
    108
    Whipped up a quick platformer using this. Pretty cool!
    Code:
    #define main
    // init code here
    width = 32;
    height = 32;
    hspd = 0;
    vspd = 0;
    spd = 7;
    jumpHeight = 9;
    grav = 0.5;
    jumpAmount = 2;
    inAir = false;
    jump = jumpAmount;
    x = room_width/2;
    y = room_height/2 + 150;
    
    floorX = 0;
    floorY = room_height/2 + 200;
    floorWidth = room_width;
    floorHeight = 64;
    
    
    #define step
    // update code here
    if  scr_place_meeting_floor(x,y+1){
        jump = jumpAmount;
        inAir = false;
    }else{
        inAir = true;
        if vspd < 15{
            vspd += grav;
        }
    }
    
    if keyboard_check_pressed(vk_up){
        if scr_place_meeting_floor(x,y+1){
            vspd = -jumpHeight;
        }else{
            if jump > 0{
                jump -= 1;
                vspd = -jumpHeight;
            }
        }
    }
    
    if (keyboard_check(vk_left)){
        hspd = -spd;   
    }
    if (keyboard_check(vk_right)){
        hspd = spd;   
    }
    
    if keyboard_check_released(vk_left) ||
    keyboard_check_released(vk_right){
        hspd = 0;   
    }
    
    if scr_place_meeting_floor(x+hspd,y){
        while(!scr_place_meeting_floor(x+sign(hspd),y)){
            x += sign(hspd);
        }
        hspd = 0;
    }
    
    if scr_place_meeting_floor(x,y+vspd){
        while(!scr_place_meeting_floor(x,y+sign(vspd))){
            y += sign(vspd);
        }
        vspd = 0;
    }
    
    x+=hspd;
    y+=vspd;
    #define draw
    // draw code here
    // draw player
    draw_set_color(c_aqua);
    draw_rectangle(x-width/2,y-height/2,
    x+width/2,y+height/2,false);
    
    //draw floor
    draw_set_color(c_black);
    draw_rectangle(floorX,floorY,floorX+floorWidth,
    floorY+floorHeight,false);
    #define scr_show
    // define scripts like this
    draw_text(4, 4, argument0);
    
    #define scr_place_meeting_floor
    //place meeting
    var xx = argument0;
    var yy = argument1;
    
    if rectangle_in_rectangle(xx-width/2,yy-height/2,xx+width/2,
    yy+height/2,floorX,floorY,floorX+floorWidth,
    floorY+floorHeight){
        return true;
    }else{
        return false;
    }
    
    
    
     
    YellowAfterlife likes this.
  13. HammerOn

    HammerOn Member

    Joined:
    Jun 22, 2016
    Posts:
    92
  14. YellowAfterlife

    YellowAfterlife ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ Forum Staff Moderator

    Joined:
    Apr 21, 2016
    Posts:
    2,434
    That's kind of JavaScript for you. Using primitive functions (d3d or not) requires the program to constantly create temporary objects to hold primitive data, which are then cleaned up by garbage collector, which causes a stall while it investigates, what values can be cleaned up. Using vertex buffers would solve the issue in this case, since you would be modifying existing memory instead of allocating any extra.
     
  15. HammerOn

    HammerOn Member

    Joined:
    Jun 22, 2016
    Posts:
    92
    Makes sense.
    But you can avoid allocations with a batching system that use and reuse the same vertex buffer for all primitive functions. Drawing apis usually do something like this behind the scenes (including GM and HTML5 canvas).
     
  16. YellowAfterlife

    YellowAfterlife ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ Forum Staff Moderator

    Joined:
    Apr 21, 2016
    Posts:
    2,434
    The issue is on GMS side - the program uses vast majority of GM's functions as-is (meaning that you get same results as with making the game in GMS+HTML5, including bugs).

    You can try replicating the problem on a blank GMS project and filing a bug about it.
     
  17. Joshua Allen

    Joshua Allen Member

    Joined:
    Jun 20, 2016
    Posts:
    46
    Thank you for making this, it is an amazing tool.
     
    YellowAfterlife likes this.
  18. Braffolk

    Braffolk Member

    Joined:
    Jun 20, 2016
    Posts:
    51
    That is really cool!

    There seems to be a few issues though, for some reason values are somehow disappearing from one of my ds_lists despite me only using ds_list_add, ds_list_find_value, ds_list_create and ds_list_size.
     
  19. juanchacon99

    juanchacon99 Guest

    Cooool!!! I can't wait to try it out! Finally a compiler/programming tool that works correctly in internet XD

    Oh and here's an idea, what if you allow people to share their codes? like in a new "upload" tab, that opens a menu with works of other people!? :D:D:D
     
    Last edited by a moderator: Oct 21, 2016
  20. hippyman

    hippyman Member

    Joined:
    Jun 20, 2016
    Posts:
    565
    This is insane, great work! This is my new favorite browser toy.
     
    YellowAfterlife and Galladhan like this.
  21. Salvakiya

    Salvakiya Member

    Joined:
    Jul 17, 2016
    Posts:
    84
    did you have to write your own parser for this to work?
     
  22. YellowAfterlife

    YellowAfterlife ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ Forum Staff Moderator

    Joined:
    Apr 21, 2016
    Posts:
    2,434
    If you can assemble a small[-ish] test case that triggers it, I can take a look at whether there's a bug or anything.

    Maybe when this gets sufficiently popular. Allowing user uploads means paying increasing costs for storing the data, not to mention spending up to few decades of hours developing the feature.

    Yes. You can see the linked blog post for a detailed breakdown.
     
  23. Misu

    Misu The forum's immigrant

    Joined:
    Jun 20, 2016
    Posts:
    659
    I finally found something i could use at my job while i am bored. Thanks, @YellowAfterlife . :D

    Although there are some things I need to ask regarding to your GMLive:

    1. How does one draw external sprites in this? I have been using mostly the draw_rectangle for everything but would love to know alternative ways of drawing art in this.

    2. Does any of the file functions work? For example, file_text_open_read or such like that. If so, I would like to know how to work with it.

    3. Ive tried using the share option and used the link with a url shortener. I dunno if it affected the cdes that was returned because i lost 12 lines of code from the bottom end. Does the url shortener has something to do with this? Is there any possibility to make the share link shorter?

    4. Will there be any new updates to fix most of the functions? I notice that d3d_set_fog does not work, and one of the sprite_create functions have the "remove background" argument not working. Would love to see a major update for this in the near future.

    I hope I get this questions abswered soon for tonight I have a long shift and would consider passing my time with this when I am not attending calls. :)
     
  24. YellowAfterlife

    YellowAfterlife ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ Forum Staff Moderator

    Joined:
    Apr 21, 2016
    Posts:
    2,434
    1. As the mini-manual mentions, you can load base64 encoded images.

    3. Depends on URL shortener used. Share URL is currently a base64-encoded string of the source code, so it'll always be just around 1.25x the size of it. An edge option would be to just put the code onto pastebin/equivalent while having a comment with a link to an empty GMLive snippet that has the desired settings on the first line.

    2, 4: Due to how this works (directly referencing engine functions), pretty much everything works exactly the same way as it does in GMS' HTML5 target. If you find some function that works on GMS-HTML5 but doesn't on GMLive, feel free to post a snippet.
    Since the process of patching dynamically changing engine code is complicated and time-consuming, the only GMS functions that GMLive "fixes" are a few ds_ functions (which return 0 instead of undefined on HTML5) and one internal function that was responsible for inability to load base64-encoded data.
     
  25. Misu

    Misu The forum's immigrant

    Joined:
    Jun 20, 2016
    Posts:
    659
    Thanks, @YellowAfterlife !

    Another question: I notice you can use instance_create() but how am I suppose to use that if I dont have an object index to specify in the last argument?
     
  26. YellowAfterlife

    YellowAfterlife ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ Forum Staff Moderator

    Joined:
    Apr 21, 2016
    Posts:
    2,434
    There are 10 blank objects defined (obj_blank and obj_1...obj_9, or just 0...9), which you can configure with object_ functions and use for game' purposes. E.g.
    Code:
    instance_create(32, 32, obj_1);
    #define step
    with (obj_1) {
    // step event code for obj_1
    }
     
  27. Misu

    Misu The forum's immigrant

    Joined:
    Jun 20, 2016
    Posts:
    659
    Thanks! I like to ask something else since I just encountered this... Is there a way to disable interpolation on sprites when they are resized? I tried using texture_set_interpolation(0) in create event but that does not work. How my sprite look when it was stretched 4x bigger:
    [​IMG]
     
  28. YellowAfterlife

    YellowAfterlife ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ Forum Staff Moderator

    Joined:
    Apr 21, 2016
    Posts:
    2,434
    You'll need to do it in the draw event. I had patched the texture_set_interpolation function to actually work on non-WebGL mode, but something periodically resets it.
     
  29. Misu

    Misu The forum's immigrant

    Joined:
    Jun 20, 2016
    Posts:
    659
    Ok, thanks!

    Btw, I would like to let everyone know that some url shorteners (websites) can cause your links to damage a little. I did some test runs with a few. However, there are two websites that work perfectly for shorteneing your links without damaging them: google url and tinyurl.

    Btw, At my job I could not pass down base64 images since lack of access to websites and storages. Therefore, I invented something that would allow me to do at least art for my projects while at work. Check it out:

    http://tinyurl.com/GMLiveTest
     
    YellowAfterlife and Wraithious like this.
  30. Wraithious

    Wraithious Member

    Joined:
    Jun 24, 2016
    Posts:
    1,165
    Wow that's a really cool testing tool!! very nice work! I checked outsome of the stuff people on here did with it and when I get time I'm definatly going to play around with it!
     
    YellowAfterlife likes this.
  31. YellowAfterlife

    YellowAfterlife ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ Forum Staff Moderator

    Joined:
    Apr 21, 2016
    Posts:
    2,434
    Wayfarer likes this.
  32. GMWolf

    GMWolf aka fel666

    Joined:
    Jun 21, 2016
    Posts:
    3,470
    Wayfarer likes this.
  33. Wayfarer

    Wayfarer Member

    Joined:
    Jan 3, 2017
    Posts:
    191
    Wow!! This'd be great for tutorials and answering questions in the Programming forum.
     
    Last edited: Jul 24, 2017
  34. YellowAfterlife

    YellowAfterlife ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ Forum Staff Moderator

    Joined:
    Apr 21, 2016
    Posts:
    2,434
  35. GMWolf

    GMWolf aka fel666

    Joined:
    Jun 21, 2016
    Posts:
    3,470
    I really don't get how a single guy can add better features faster than a whole team of veterans...
    I mean come on yoyo.... GML had be stagnating for years!
     
  36. Neptune

    Neptune Member

    Joined:
    Jun 21, 2016
    Posts:
    1,042
    Dope!
     
  37. Misu

    Misu The forum's immigrant

    Joined:
    Jun 20, 2016
    Posts:
    659
    I dunno if you interested or not but do you think it would be a great idea to, instead of defining the events using the key #define, have tabs that represent events for the codes?

    I dunno if you prefer it as a single program block like natural programming way but I think it would be good for others (who have OCD on sorting their code) program everything separately so it wouldnt be so confusing when browsing thru the long lines of codes.
     
  38. YellowAfterlife

    YellowAfterlife ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ Forum Staff Moderator

    Joined:
    Apr 21, 2016
    Posts:
    2,434
    I'm guessing that it's mostly because it's far more expensive for YYG to make any arguable decisions with implementations - e.g. arrays had that copy-on-write thing implemented as default in ~2013, and everyone have to live with that to the day because of backwards compatibility (and not breaking tutorials/examples intended for older versions of software)

    The decision to have one code editor instead of multiple tabs was made largely because the code editor component is heavily optimized in terms of rendering a singular view, but less so when you have multiple of them (since DOM is still around while a tab is inactive). I have worked on similar projects before and editor lag was always the thing hurting user experience the most, so the safest option was picked here.

    That said, however, GMLive has code folding, named arguments, and compact #define syntax, so you are able to structure your code much like you would with common programming languages:
    https://yal.cc/r/gml/?mode=2d&lzgml...0OPBAKA7phz5CL5K4D6lsJoAIwADAA08GGR1HSMLLacQA
    Code:
    #define main() {
        say("Hello!");
    }
    
    #define say(text) {
        trace(`Program says: ${text}`);
    }
    
    #define draw() {
        draw_text(10, 10, "Hello!");
    }
    There are also numerous keyboard shortcuts coming from code editor component
    and I'll probably fix it up to allow changing code editor theme via code editor settings bar later
     
    Last edited: Aug 9, 2017
  39. Samuel Venable

    Samuel Venable Time Killer

    Joined:
    Sep 13, 2016
    Posts:
    1,299
    There should be a game jam where the main rule is to use GMLive to make your game. That way, to see what contestants made, all they would have to do is copy and paste text from pastbin to GMLive, basically. I don't get involved with game jams, but it's still an interesting idea for one imho...
     
  40. GMWolf

    GMWolf aka fel666

    Joined:
    Jun 21, 2016
    Posts:
    3,470
    Feature request: compile straight to JavaScript, no GM required.
    Sorry yoyo, but at this point GMLive has so many advantages over GM...
    Just being able to do everything in one choice window alone is a huge advantage.

    Other feature request: inline scripts!

    Yeah, but what about code folding? And names arguments? These are both things that could have been added from the start of GMS2! (Heck, I bodged named arguments into GMS1 myself and it took me a day just to learn c#, write a preprocessor, and 'man im the middle' the GM compiler)
    The same goes for exceptions, etc...
    Instead we got a chain workflow...

    I mean: inline scripts is something YYG already said they wanted a while ago. Yet I'm willing to be it will take many months before we get it.
    Funny thing is I'm sure you could add it to GMLive in a single day.

    I understand decision making may get in the way at YYG, but then, what has been new since the release of GMS2? And what about since beta? Not that much...
    [edit] oops, we got gestures. I must concede to getting gestures.

    I'm sorry for ranting on about his. I'm a little disappointed is all.... Sorry.
     
    Last edited: Aug 10, 2017
  41. YellowAfterlife

    YellowAfterlife ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ Forum Staff Moderator

    Joined:
    Apr 21, 2016
    Posts:
    2,434
    It certainly is possible to have a minigame jam - the first screenshot in the first post is GMLive running Mike's game from the "one script game jam".

    Do you mean closures? If so, that's actually not too hard to do when compiling to JS (but far more hellish for VM and YYC), but I've no idea what the syntax is going to be like.

    It is entirely possible to make a custom compiler that would handle entire GM projects while supporting additional syntax (and maybe trimming unused built-in functions to reduce load times), but the question is: who would pay for that
    Certainly a bit too niche and with a bit too high maintenance costs for an "asset".
     
    Samuel Venable and Edmanbosch like this.
  42. FREAKING AWESOME!

    Why hasn't someone shared something like this sooner???

    This needs to be shared!

    WORD
     
    YellowAfterlife likes this.
  43. YellowAfterlife

    YellowAfterlife ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ Forum Staff Moderator

    Joined:
    Apr 21, 2016
    Posts:
    2,434

    Attached Files:

    • gif.gif
      gif.gif
      File size:
      225.8 KB
      Views:
      4
  44. randallized

    randallized Guest

    This is great.
     
  45. Simon Gust

    Simon Gust Member

    Joined:
    Nov 15, 2016
    Posts:
    3,213
    If you don't have openGL enable but want to do 3D ->
    upload_2017-10-17_12-20-8.png
    Unfortunately I tried it with vertex buffers but they don't seem to work in 2D for me, Idk why.
     
  46. tobi_matchup

    tobi_matchup Member

    Joined:
    Oct 17, 2017
    Posts:
    17
    Very useful tool ;)
     
  47. YellowAfterlife

    YellowAfterlife ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ Forum Staff Moderator

    Joined:
    Apr 21, 2016
    Posts:
    2,434
    "2D" mode uses a non-WebGL version of GMS HTML5 export, which in turn uses a HTML5 2d canvas+context, which in turn don't have a concept of vertex buffers because they were originally exclusively software rendered by design (it is only recently that browsers started offloading some 2d operations onto GPU where possible).
     
  48. Simon Gust

    Simon Gust Member

    Joined:
    Nov 15, 2016
    Posts:
    3,213
    Ah I see, thanks for the info.
     
  49. dazza_bo

    dazza_bo Member

    Joined:
    Sep 25, 2017
    Posts:
    21
    What a great idea. Well done mate.
     
  50. YellowAfterlife

    YellowAfterlife ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ Forum Staff Moderator

    Joined:
    Apr 21, 2016
    Posts:
    2,434
    Big update - GMLive[.js] now uses a GMEdit based UI, which means multiple code tabs, dark theme support, better syntax highlighting, and various GMEdit-related tweaks and features. Also updated to the current GM:S runtime.
    lw-18-06-12-1.png
    lw-18-06-12-2.png
     

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