Advertisement
Archives

You are currently browsing the archives for the Web category.

Archive for the ‘Web’ Category

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.