Advertisement

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.

2 Responses to “Quick Tip: LibGDX – GWT – Mouse Pointer”

  • badlogic says:

    I wonder if we should integrate this either in the template or throughsome other mean

  • admin says:

    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.

Leave a Reply