Chapter 9
This chapter teaches how to add drag-and-drop functionality to your games. Clicking on an object, holding it, and dragging it across the screen until released.
To add drag-and-drop functionality a new helper class named DragAndDropActor which extends BaseActor is created. The actor contains a listener on initialization which overrides InputListener, and three touch methods are of interest:
public boolean touchDown(InputEvent event, float x, float y, int pointer, int button)public void touchDragged(InputEvent event, float x, float y, int pointer)public void touchUp(InputEvent event, float x, float y, int pointer, int button)
The float parametres of these three methods store the relative distance of where the mouse clicked on the object. E.g if an object that has a 200-pixel width and 300-pixel height is clicked in the center the x becomes 100, and the y becomes 150.
To calculate how much to move the actor in touchDragged the initial x and y values must be stored.
A DropTargetActor class is created to be the drop target.
The Interpolation class is used to create a more smooth movement when a DragAndDropActor is forcibly moved. In this instance, the beginning and end of a movement are slowed down as shown in the graph below.
Code in DragAndDropActor:
addAction(Actions.moveTo(x, y, .5f, Interpolation.pow3));
Read more about interpolation on LibGDX's wiki page.
As suggested by the book the following features have been added:
- Added sounds and background music
- Added a label which displays current time spent
- Added a label which displays best overall highscore
- Rotation of puzzle pieces by double tap
Bonus features:
- A restart button
- Random number of pieces
- A screen transition which slides to the left
- Puzzle pieces bounce in animation
The double tap algorithm in DragAndDropActor class's touchUp method:
// double tap
val time = TimeUtils.nanoTime()
if (time - lastTapTime > tapCountInterval)
tapCount = 0
tapCount++
lastTapTime = time
if( tapCount == 2) // double click detected
doubleTap()
When rotating an actor it's whole coordinate system is rotated with it, meaning that the x-axis becomes the y-axis and vice versa on 90 and 270-degree rotations. The algorithm below is a solution that works.
override fun touchDragged(event: InputEvent?, eventOffsetX: Float, eventOffsetY: Float, pointer: Int) {
val cos = cos(self.rotation * MathUtils.degreesToRadians)
val sin = sin(self.rotation * MathUtils.degreesToRadians)
val tox = (eventOffsetX - self.grabOffsetX)
val toy = (eventOffsetY - self.grabOffsetY)
var deltaX = 0f
var deltaY = 0f
if (abs(cos) == 1f) {
deltaX = tox * cos
deltaY = toy * cos
} else {
deltaX = toy * -sin
deltaY = tox * sin
}
self.moveBy(deltaX, deltaY)
}
addAction(
Actions.sequence(
Actions.moveBy(-800f, 0f, .75f, Interpolation.sine),
Actions.removeActor()
))
val randomDelay = MathUtils.random(0f, 1f)
addAction(Actions.sequence(
Actions.moveBy(0f, 620f, 0f),
Actions.delay(randomDelay),
Actions.moveTo(x, y, 2f, Interpolation.bounceOut)
))
As suggested by the book the following features have been added:
- Added sounds and background music
- Added a label which displays current time spent
- Added a label which displays best overall highscore
Bonus features:
- A restart button
- A screen transition which slides to the left
- Cards bounce-in animation
As suggested by the book the game "Crazy Eights" was added.
To win, all cards from the hand must be placed upon the pile in the middle. The card placed must match the color or value, eights can be laid down anytime.
No new imports