Making game display objects draggable in phaser

Making a display object (sprites, graphics, ect) draggable in phaser is pretty easy, assuming it allows for the enabling of an input handler (Sprites, and Graphics do at least). In this post I will be should how to get started with doing this.

If new to Phaser

If you are new to phaser you might want to check out my post on getting started with phaser, I also assume that you have at least some knowlage of html, css, and javaScript as I do not have any posts on how to get up to speed with that at this time. This is my standard hexo tag for all phaser posts where I want to inform readers that this is not a post for beginers.

Draggable simple hello world example

So if you are looking for a simple getting started example it might look something like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var game = new Phaser.Game(320, 240, Phaser.AUTO, 'gamearea',
{
// create the sprite
create : function () {
var bx = game.add.graphics(game.world.centerX, game.world.centerY);
bx.beginFill(0xff0000);
bx.drawRect(-50, -50, 100, 100);
bx.endFill();
bx.inputEnabled = true;
bx.input.draggable = true;
}
}
);

First I want to enable the input handler for the display object, by setting it’s inputEnable property to true. Once that is done the input property of the display object will be an instance of inputControler rather than null, and as such I can now set the draggable property of the display objects input control to true. The display object should now be draggable.

Whats next with draggable display objects

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var game = new Phaser.Game(320, 240, Phaser.AUTO, 'gamearea',
{
// create the sprite
create : function () {
var bx = game.add.graphics(game.world.centerX, game.world.centerY);
bx.beginFill(0xff0000);
bx.drawRect(-160, -120, 160, 120);
bx.endFill();
bx.inputEnabled = true;
bx.input.draggable = true;
bx.input.snapOnRelease = true;
bx.input.snapX = 160;
bx.input.snapY = 120;
bx.events.onDragStop.add(function (bx) {
// snap back to center
if (bx.x <= 0 || bx.x >= 480 || bx.y <= 0 || bx.y >= 360) {
bx.x = 160;
bx.y = 120;
}
});
}
}
);

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.

Conclusion

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, when I have more relevant content elsewhere I will update this post.