The mouse pointer in phaser
When making a phaser ce project, unless I am making some kind of true idle game, will often need to accept input from a user somehow. When making a desktop game, the mouse is often something of interest. As such this post will cover how to work with a mouse pointer object that has current values from the mouse via game.input.mousePointer.
1 - what to know first
It also goes without saying that this is not a getting started post on phaser ce, I am also not going to cover many of the aspects of phaser that I am using in this post such as the main game constructor, and state objects.
1.1 - This is a phaser ce 2.x post
In this post I am using phaser ce 2.11.1 of phaser.
1.2 - The mousePointer pointer object
The current pointer object for the mouse can be found at game.input.mousePointer. On a desktop system this is always there to work with when you want to do something involving the mouse.
2 - Phaser mouse pointer hello world
The debug feature of phaser can be used if you just quickly want to know what is up with the current values in the pointer object at game.input.mousePointer
just playing around with this simple demo, you should notice some values of the pointer object such as the position, and duration if the mouse button is down.
3 - Follow the mouse pointer example
In this example I made a sprite follow the mouse pointer. This makes use of the withinGame property of the mouse pointer object so that when the mouse leaves the canvas the sprite goes back to a home location else it follows the mouse pointer. In this example I also make use of some very important Phaser.Point properties as well, mainly Point.angle, and Point.distance. These point methods are used to find both the angle and distance to the mouse pointer, or the home location for that matter.
3.1 - The Follow Pointer method
Here is the method that sets the velocity of the sprite based on the angle and distance to the mouse pointer, or a fixed home location depending if the mouse pointer is in the canvas or not. In this method I am using a physics enabled sprite that has a physics body property, this is enabled in the create method of the state object later.
3.2 - create a sprite sheet with canvas
For this example I added a simple sprite sheet very quickly using a canvas solution for doing so.
3.3 - The Phaser.Game instance
Now it is time to pull everything together in the create method of a state object. In the create method I call my createBallSheet method that gives me the sprite sheet that I will then use when creating the sprite that will follow the mouse pointer.
4 - Mouse is down
Now that I know where to look for current mouse values, I would like to do something with that data. Maybe just another quick demo where I am just testing things out with a mouse pointer object. Something like changing text data when the mouse button is down.
I will not cover pointer objects in detail here, that will be fore another post. However in the above example I am using pointerObject.timeDown to help me find how long the mouse button has been pressed down, a common value of interest in a lot of games.
5 - Conclusion
The mouse pointer object is fine to use in situations in which I just want to reference the mouse pointer, and only the mouse pointer. Also it is useful for pulling the current state of the mouse pointer, so if I want to attach an event instead it is not going to help with that.