Quick Tip: LibGDX – GWT – Mouse Pointer
Today, I was working with the GWT backend for LibGDX and in this particular game I was using mouse drag. I was met with an unsightly text-selection cursor on my mouse. It made me sad, and I bet it’d make you sad too.
Here’s one way to fix that…
The default index that the LibGDX Setup creates is pretty basic, which is good as it makes no assumptions as to what you want. Here’s an example:
<!doctype html> <html> <head> <title>lines</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <div align="center" id="embed-com.mobi.lines.Lines"></div> <script type="text/javascript" src="com.mobi.lines.Lines/com.mobi.lines.Lines.nocache.js"></script> </body> </html>
Unmodified, this allows the aforementioned text-selection cursor to appear upon drag operations. If you don’t want that, you can add the following style (to the head) and script (at the end of the body) tags to your index.html:
<style>
canvas { cursor: pointer; }
</style>
and
<script>
function handleMouseDown(evt) {
evt.preventDefault();
evt.stopPropagation();
evt.target.style.cursor = 'pointer';
}
function handleMouseUp(evt) {
evt.preventDefault();
evt.stopPropagation();
evt.target.style.cursor = '';
}
document.getElementById('embed-com.mobi.lines.Lines').addEventListener('mousedown', handleMouseDown, false);
document.getElementById('embed-com.mobi.lines.Lines').addEventListener('mouseup', handleMouseUp, false);
</script>
In the end, you should have something like this:
<!doctype html>
<html>
<head>
<title>lines</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
canvas { cursor: pointer; }
</style>
</head>
<body>
<div align="center" id="embed-com.mobi.lines.Lines"></div>
<script type="text/javascript" src="com.mobi.lines.Lines/com.mobi.lines.Lines.nocache.js"></script>
<script>
function handleMouseDown(evt) {
evt.preventDefault();
evt.stopPropagation();
evt.target.style.cursor = 'pointer';
}
function handleMouseUp(evt) {
evt.preventDefault();
evt.stopPropagation();
evt.target.style.cursor = '';
}
document.getElementById('embed-com.mobi.lines.Lines').addEventListener('mousedown', handleMouseDown, false);
document.getElementById('embed-com.mobi.lines.Lines').addEventListener('mouseup', handleMouseUp, false);
</script>
</body>
</html>
I know, it’s not exactly earth-shattering stuff here, but I hope it can help someone.
Posted in 
Tags:
I wonder if we should integrate this either in the template or throughsome other mean
I’d imagine there are not many circumstances where someone would actually want the text-selection cursor over their game, so I thing it’d be fine to put it in the template.