In the previous tutorial, which I will admit… some time has elapsed since I wrote it, sorry about that… anyways, in the last tutorial we looked at handling keyboard input using Phaser. In this tutorial we are going to look at handling mouse and touch events. Just like the last part, this one is going to be relatively light on explanation and high on code.
Ok, let’s jump right in. The first example shows how to poll for mouse/touch information:
/// <reference path="phaser.d.ts"/> // This code demonstrates polling for touch or mouse clicks class SimpleGame { game: Phaser.Game; jetSprite: Phaser.Sprite; constructor() { this.game = new Phaser.Game(640, 480, Phaser.AUTO, 'content', { create: this.create, preload: this.preload, update: this.update }); } preload() { var loader = this.game.load.image("jet", "jet.png"); } create() { var image = <Phaser.Image>this.game.cache.getImage("jet"); this.jetSprite = this.game.add.sprite( this.game.width / 2 - image.width / 2, this.game.height / 2 - image.height / 2, "jet"); this.jetSprite.pivot.x = this.jetSprite.width / 2; this.jetSprite.pivot.y = this.jetSprite.height / 2; } update() { // You can poll mouse status if (this.game.input.activePointer.isDown) { // This will be set to true if any mouse button is pressed or a finger is touched this.jetSprite.position.set(this.game.input.mousePointer.x, this.game.input.mousePointer.y); // You can test if the user is using a mouse if (this.game.input.activePointer.isMouse) { // In the case of a mouse, you can check mouse button status if (this.game.input.activePointer.button == Phaser.Mouse.RIGHT_BUTTON) { // We just want to clear it, so this doesnt fire over and over, dont do this in production this.game.input.activePointer.reset(); alert("Right button pressed"); } } else { // On the other hand, if you are dealing with touch, you can have multiple touches/pointers // By default there are two pointers defined, so you can have up to two touches. // You can add more pointers using input.addPointer(); if (this.game.input.pointer1.isDown && this.game.input.pointer2.isDown) alert("Multitouch!"); } } } } window.onload = () => { var game = new SimpleGame(); };
Pointer is an abstraction for both touch and mouse. As you can see above, there are multiple pointers ( input.pointer1, input.pointer2, etc… ) but by default only two will be enabled. If you want to handle multitouch with more than 2 fingers you need to register more using addPointer(). You can add up to 10 pointers total. pointer1 is the first finger to touch the screen, pointer2 the second, etc.
Now let’s take a look at handling mouse input using callbacks instead of polling:
/// <reference path="phaser.d.ts"/> // This code demonstrates polling for touch or mouse clicks class SimpleGame { game: Phaser.Game; jetSprite: Phaser.Sprite; constructor() { this.game = new Phaser.Game(640, 480, Phaser.AUTO, 'content', { create: this.create, preload: this.preload }); } preload() { var loader = this.game.load.image("jet", "jet.png"); } create() { var image = <Phaser.Image>this.game.cache.getImage("jet"); this.jetSprite = this.game.add.sprite( this.game.width / 2 - image.width / 2, this.game.height / 2 - image.height / 2, "jet"); this.jetSprite.pivot.x = this.jetSprite.width / 2; this.jetSprite.pivot.y = this.jetSprite.height / 2; // You can handle mouse input by registering a callback as well // The following registers a callback that will be called each time the mouse is moved this.game.input.moveCallback = (pointer:Phaser.Pointer,x:number,y:number) => { this.jetSprite.position.set(x, y); } // This one registers a mouse click handler that will be called this.game.input.onDown.add(SimpleGame.prototype.mouseDown); } mouseDown(event:MouseEvent) { alert("Mouse is down " + event.button); } } window.onload = () => { var game = new SimpleGame(); };
In this case we register a function that will be called whenever the mouse moves. In this case I am using an anonymous delegate. You can also handle mouse down or touch events. The format is slightly different as onDown is a Signal instead of a callback. That said, a Signal is basically a wrapper around a callback function, so it’s not really all that different. Except of course with Signals, you can register multiple for the same event.
Finally, in the previous two examples, we handled the input at an application level. If it makes sense for your game, you can actually handle input at the Sprite level. Like so:
/// <reference path="phaser.d.ts"/> // In this example we illustrate input events can be applied to Sprites class SimpleGame { game: Phaser.Game; jetSprite: Phaser.Sprite; constructor() { this.game = new Phaser.Game(640, 480, Phaser.AUTO, 'content', { create: this.create, preload: this.preload }); } preload() { var loader = this.game.load.image("jet", "jet.png"); } create() { var image = <Phaser.Image>this.game.cache.getImage("jet"); this.jetSprite = this.game.add.sprite( this.game.width / 2 - image.width / 2, this.game.height / 2 - image.height / 2, "jet"); this.jetSprite.pivot.x = this.jetSprite.width / 2; this.jetSprite.pivot.y = this.jetSprite.height / 2; // First enable the sprite to receive input this.jetSprite.inputEnabled = true; // Then add an event handler for input over this.jetSprite.events.onInputOver.add(() => { alert("The mouse passed over the sprite!"); }); } } window.onload = () => { var game = new SimpleGame(); };
First thing you need to do is tell Phaser that your Sprite will handle input by setting inputEnabled to true. Next we add an input handler for onInputOver, which once again is a Signal. There are a number of events that Sprite can respond to, all predictably enough in the events class.
As a side note, part of the delay in updating this tutorial series is I was actually intending to write one about using GamePads. First I started writing code and my XBox 360 wireless receiver died horribly. Apparently this is a very common problem with them, a tiny little fragile fuse broke. I then ordered a replacement from Amazon and it took three weeks to arrive. Then when it did arrive, well…
Let’s just say Gamepad support in HTML5 is complete and utter garbage. There are a bunch of projects in the works, but they are all a far way away from being actually usable. If you are looking to add gamepad support to your HTML5 project, expect it to be very browser specific. By this I actually mean exact version of the browser… The APIs are changing constantly and are breaking just as often. In my opinion, it’s simply not worth it at this point.