Mouse

The Mouse object allows projects to respond to mouse input.

Note on the modern web it is naïve to assume all users have a mouse. Many users now browse the web with touch-screen devices that have no mouse. Therefore if your game uses exclusively mouse or keyboard control, it is impossible to use on touch devices. See the Touch controls tutorial for an alternative control system.

If you only use left clicks, consider instead using the Touch object with Use Mouse Input set to Yes. This will allow your game to work on touchscreen devices without any further changes.

Selecting elements in the page

By default the browser selects elements in the page when the user clicks and drags. Construct 2 blocks the canvas itself from being selected so the game is not affected by rapid clicks and drags. However, if your game is embedded on another page, the user may accidentally select other page elements. You can add the following attribute to any HTML elements to prevent them from being selectable:

onselectstart="return false;"

You can add this to the <body> tag to prevent selections on the entire page, but be warned this can cause difficulties for users if there is anything the user may want to genuinely select on the page.

Mouse conditions

Cursor is over object
True if the mouse cursor is hovering over an object.

Mouse button is down
True if a given mouse button (left, middle or right) is currently being held down.

On any click
Triggered when any mouse button is clicked. Useful for title screens or cutscenes.

On button released
Triggered when a given mouse button is released.

On click
Triggered when a given mouse button is pressed. This can also be used to detect double-clicks.

On mouse wheel
Triggered when the mouse wheel (if any) is scrolled up or down a notch. Note: adding this trigger anywhere in your game will prevent the mouse wheel scrolling the page in the browser, so use this with care.

On object clicked
Triggered when a given mouse button is pressed while the mouse cursor is over an object. This can also be used to detect double-clicks on objects.

Mouse actions

Set cursor from sprite
Set the cursor image from a Sprite object. This is preferable to setting a sprite to the mouse co-ordinates, because the input lag is significantly lower. Various limitations apply: the sprite image is used as it appears in the image editor, not taking in to account size or rotation in the layout; the image cannot be too large (64x64 is usually the limit); and support varies depending on browser and OS.

Set cursor style
Set the type of mouse cursor showing for the canvas in the HTML page. The cursor can be hidden completely by choosing None.

Mouse expressions

AbsoluteX
AbsoluteY
Return the position of the mouse cursor over the canvas area in the HTML page. This is (0, 0) at the top left of the canvas and goes up to the window size. It is not affected by any scrolling or scaling in the game.

X
Y
Return the position of the mouse cursor in game co-ordinates. This is (0, 0) at the top left of the layout. It changes to reflect scrolling and scaling. However, if an individual layer has been scrolled, scaled or rotated, these expressions do not take that in to account - for that case, use the layer versions below.

X("layer")
Y("layer")
Return the position of the mouse cursor in game co-ordinates, with scrolling, scaling and rotation taken in to account for the given layer. The layer can be identified either by a string of its name or its zero-based index (e.g. Mouse.X(0)).

Tags: