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

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
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:





Feedback is welcome.
 
A

Arturo

Guest
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
 

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
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
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.
 
P

PWL

Guest
Amazing.

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

Bingdom

Googledom
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
 

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
This is really useful. Thank you!

Bug:
Type in 'spe', then hit backspace.
The word variable and function gets cut off.
View attachment 3567
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.
 

Ehsan

Pirates vs Clones
As an example, I made a small demo with slopes and smooth movement recently.
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:

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
I was hoping the share button would share your gameplay. Maybe a suggestion to implement for the next update? ;)
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.
 
T

Tirous

Guest
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
 

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
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
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?
 

Conbeef

Member
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

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
Test in 3D.
It works great using 2d drawing functions but when I try drawing some lines with d3d functions the fps kind of stop in constant intervals. Try setting use_3d_objects = true
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.
 
H

HammerOn

Guest
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).
 

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
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 does something like this behind the scenes (including GM and HTML5 canvas).
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.
 
B

Braffolk

Guest
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.
 
J

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:

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
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.
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.

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

did you have to write your own parser for this to work?
Yes. You can see the linked blog post for a detailed breakdown.
 
M

Misu

Guest
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. :)
 

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
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. :)
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.
 
M

Misu

Guest
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?
 

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
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?
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
}
 
M

Misu

Guest
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:
 

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
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:
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.
 
M

Misu

Guest
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
 
W

Wraithious

Guest
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!
 
W

Wayfarer

Guest
Wow!! This'd be great for tutorials and answering questions in the Programming forum.
 
Last edited:

GMWolf

aka fel666
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!
 
M

Misu

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

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
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!
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)

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.
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:
S

Sam (Deleted User)

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

GMWolf

aka fel666
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!

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)
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:

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
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...
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".

Other feature request: inline scripts!
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.

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.
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".
 
S

Silicon Sorcery Studios

Guest
FREAKING AWESOME!

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

This needs to be shared!

WORD
 

Simon Gust

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

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
Unfortunately I tried it with vertex buffers but they don't seem to work in 2D for me, Idk why.
"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).
 

Simon Gust

Member
"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).
Ah I see, thanks for the info.
 

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
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
 
Top