Game Development Reference
In-Depth Information
(Ctrl+A). Moreover, on mobile and tablet, you usually want your application (your game) to look like a real
native application. Imagine playing a real-time game and accidentally triggering the text select mobile user
interface! It will rudely interrupt the game, most likely leading to a dead player and an angry user. Hence,
you have to prevent the default behavior of text selection.
To do this, you have to use the
user-select
property, which can be set to
none
to disable the text selection
feature on selected elements.
If you want to prevent all elements from user selection, use the following code:
* {
user-select: none;
}
Let's now introduce two further properties that disable some unwanted default behaviors on smartphones
and tablets:
The
-webkit-tap-highlight-color
property, which allows us to set the color of the default
highlight feature when you tap on some element (like a link, a canvas, etc.). Set it to a transparent
color to disable it.
The
-webkit-touch-callout
property, which when set to
none
, disables the default callout shown
when you touch and hold an element.
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
}
The cursor
To get closer to a desktop game experience, you usually want to change the mouse cursor when hovering
over particular elements; you do this by using the
cursor
property. There are already default cursor
changes on some elements like links and inputs, but you can override them.
The value can be taken in a set of specified cursors; the most used are as follows:
move
: usually used for draggable elements
help
: indicates that help is available
pointer
: the default cursor hover links
text
: the default cursor for inputs and texts
crosshair
wait
details.
