HTML5 Mouse Extension for GML Devs

html5 game maker studio extension

Game Maker: Studio is a fantastic cross platform framework, especially if you’re getting your feet wet.  But you’ll encounter some quirks and limitations on the HTML5 module.  Notably, you can’t detect mouse position or button presses outside the canvas.

Don’t worry, Alex has your back.  I’ve searched the internet far and wide and have coded/compiled an extension that will do all that for you and more.

Download Here

To install just drag the .gmez file into your GMS project’s resource tree.

Methods

HTML5_mouse_check_button(mouse_button)

Parameters: “mb_left” “mb_right” “mb_middle” or “mb_any” must have quotes

Returns true if the mouse_button is pressed, otherwise false.

Example Script:

/// scr_mouse_check( mouse button )

if (os_browser == browser_not_a_browser)

//regular mouse check for non-HTML5 platforms
{ return mouse_check_button(argument0); }
else
{
// Find the correct string to use.
switch (argument0)
{
case mb_left:
i = “mb_left”;
break;
case mb_middle:
i = “mb_middle”;
break;
case mb_right:
i = “mb_right”;
break;
case mb_any:
i = “mb_any”;
break;
}

//HTML5 friendly function
return HTML5_mouse_check_button(i);
}

Unfortunately there’s no pressed/released variants because JavaScript cycles much faster than whatever your room_speed is.  If you want that functionality you can do it pretty easily yourself by calling this function each step for each button, caching the state for the last step and comparing it to the current step.

 

HTML5_mouse_x(relative)

HTML5_mouse_y(relative)

Parameters: bool

Returns the mouse_x/mouse_y coordinate.  Pass in ‘true’ if you’d like it relative to the canvas, or ‘false’ if absolute (relative the document).

This can be used to detect whether the mouse is outside the canvas:

///scr_mouse_outside_canvas()

var tmp=1;
if (HTML5_mouse_x(1)<0) { tmp=0; }
if (HTML5_mouse_x(1)>room_width) { tmp=0; }
if (HTML5_mouse_y(1)<0) { tmp=0; }
if (HTML5_mouse_y(1)>room_height) { tmp=0; }
return tmp;

 

Caveat: If you scale the view port for aspect reasons you’ll want the scale these values too.  If you center the window with some prepended JavaScript (see below) you’ll want to adjust for that too.

game maker settings

document.getElementById(‘gm4html5_div_id’).style.textAlign=”center”;
document.getElementById(‘canvas’).style.display=”inline”;

Bonus: The JS snippet above will horizontally align the canvas, as opposed to the vertical & horizontal center flag GMS offers.

Taking all the above into consideration, here’s what a position script for HTML5 might look like:

///scr_HTML5_mouse_set_xy()

html_mx = HTML5_mouse_x(1) * GAME_W / PORT_W;
html_my = HTML5_mouse_y(1) * GAME_H / PORT_H;

 

Prefer Pointer Locking?

Pointer locking is what first person games tend to use (think MineCraft or CounterStrike),   The mouse is locked to the window.  If you’d prefer that, a gentleman has kindly put together an extension for it here.

 

 

Sources: 

http://gmc.yoyogames.com/index.php?showtopic=639277

http://gmc.yoyogames.com/index.php?showtopic=529319

 

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published.