Making game display objects draggable in phaser
Making a display object such as sprites, graphics objects draggable in phaser is pretty easy. I just need to make sure that the inputEnabled,a and input.draggable Booleans are set to true. There is a bot more to it than just that of course when it comes to some Signal instances, and other properties when it comes to snapping sprites to a grid and so forth. So in this post I will be covering many topics when it comes to dragging a sprite with a mouse or touch device in phaser ce.
1 - What to know
This is a post on making sprites draggable in phaser ce. I am not going to cover everything there is to know about sprites, signals, and input in phaser ce here as I have many posts on those subjects. If you are new to phaser I have a post on getting stared with phaser ce as well.
1.1 - This is a phaser ce 2.x post
The version of phaser I am using in this post is 2.11.1, which is a late version of phaser community edition 2.x, and not the newer 3.x major release. As such the code in this post might break with newer major releases.
2 - Draggable simple hello world example
A basic example of this will involve just creating a Sprite, Graphics object or any display object in phaser ce that supports this, and just set the inputEnabled boolean of the display object true, and do the same for the input.draggable as well.
So if you are looking for a simple getting started example it might look something like this.
|
|
When this example is up and running it will result in a simple red box at the center of the screen that can be dragged across the screen with a mouse or touch screen device. If that is all you care about mission accomplish, however chances are you also want to do more than just that. There is having the display object snap in place on a grid, or have an event fire when it is placed in a certain location. So lets take a look at some more examples that get into these other related topics when it comes to dragging sprites with phaser.
3 - Getting started with snap values.
There are a lot of other things that are of interest once I have started with draggable display objects. Such as setting some values that have to do with setting snap values, and adding event handlers. This is a simple example that makes use of the input.snapX, and input.snapY properties as well as the onDragStop event that can now be used with a draggable sprite or graphics object.
|
|
The snapX, and snapY properties can be used to define the width and height of a snap grid, and then I can make it so that the display object will snap to a location in that grid when release. In addition now that input is enabled, I have event handlers that can be used in the events property of the display object including events like onDragStop. Here I am using that event handler to set the display object back to a certain location when it goes out of bounds.
4 - On drag start, update, and end.
There are a few events that can be used when dragging is enabled for a sprite. Handers can be set to define what to do when a drag event starts, updates as it moves, and of course when it ends.
|
|
In this example I am using the snapOnDrag boolean rather than the snapOnRelease boolean. This means that the sprite will snap as it is dragged so that it will never be out of the grid, rather than the effect that happens when the alternative snapOnRelease is used.
5 - Groups
Groups can be used in conjunction with the various properties that have to do with dragging sprites. There is an dragOffset property but that has to do with the offset from the Sprites position that dragging takes place from, and not the actual location. So groups can be used in place of or in conjunction with that property.
|
|
6 - Drag Offset
The drag offset property can be used to change the offset location from which dragging happens. For the most part this property should remain at the default value of 0,0. This means that dragging will happen from the point at which the touch or mouse clicked started, which is what I would want to happen in just about any situation in which I would use dragging and snapping. When it comes to changing the offset of the grid that is something that should be done with groups.
|
|
7 - Drag and drop sprites on top of each other
Another common task when it comes to dragging sprites is to have it so that something happens when one sprite is dragged and dropped onto another sprite, or for whatever the situation you have more than one sprite in the same location and they overlap ontop of each other. In this example I have a group of box sprites and I loop over all the spites in the group whenever a drag event has ended to check if the box was dropped overlaps one or more other sprites in the group.
|
|
8 - Conclusion
So setting up dragging in phaser ce is not all that complected once you are familiar with the properties that are available in an instance of the input hander, and the events components. I hope this post helped you get at least a basic idea of how to get started with dragging sprites, and graphics in phaser. There is a lot more to write about when it comes to the input handler, events, and so forth.
If there is anything that you think I might have missed or if you have any questions about dragging sprites in phaser ce, please let me know in the comments, and thank you for reading.