Dice Duel 4 — the roll animation

The difference between working and good

Play chapter 3 for a minute and you will notice something. The game is correct. Every rule works. And it is completely flat.

Tap. The number is 4. Tap. The number is 1. It reads like a spreadsheet updating.

Compare that to a real die. You shake it, you let go, it tumbles across the table, and for about half a second nobody — including you — knows what it is going to be. That half second is the entire game. The number is just what is left over afterwards.

This chapter buys that half second back. It is the difference between an app that works and an app a kid shows a friend, and it costs about thirty lines.

Three ideas, and that is all

Everything in this chapter is one of these:

1. A counter that only goes up. rollId starts at 0 and rises by one per throw. Feed rollId * 360f to a rotation and every throw adds a full extra turn — and because the number never goes down, the die never spins backwards.
2. A shuffle that is theatre. For just over half a second the face changes every 60 milliseconds, showing nine random values that mean nothing. The tenth one is the real roll, and only it touches the score.
3. Moving pixels, not layout. graphicsLayer rotates and scales the die without the Column around it being measured again. Nothing else on screen so much as twitches.

New imports first:

1import androidx.compose.animation.core.FastOutSlowInEasing
2import androidx.compose.animation.core.animateFloatAsState
3import androidx.compose.animation.core.tween
4import androidx.compose.runtime.LaunchedEffect
5import androidx.compose.ui.graphics.graphicsLayer
6import kotlinx.coroutines.delay

The animation state

The throw itself

Here is the important shift. In chapter 3, roll() did everything: pick a number, score it, change turns. It cannot do that any more, because a throw now takes time — and an ordinary Kotlin function cannot wait.

So the work moves into a LaunchedEffect, and roll() shrinks to a starter pistol.

Moving the pixels

The die now needs to spin and swell. It must do that without shoving the score panels or the bottom hint around, and graphicsLayer is exactly the tool.

The bottom line reports the throw

1@Composable
2private fun TurnHint(turn: Int, rolling: Boolean) {
3    val scheme = MaterialTheme.colorScheme
4    val who = if (turn == 1) "PLAYER 1" else "PLAYER 2"
5    val tint =
6        if (turn == 1) scheme.secondary else scheme.tertiary
7    val message = if (rolling) {
8        "$who IS ROLLING"
9    } else {
10        "$who - TAP TO ROLL"
11    }
12    Text(
13        text = message,
14        color = tint,
15        fontSize = 15.sp,
16        fontWeight = FontWeight.Black,
17        letterSpacing = 2.sp
18    )
19}

One new parameter, one new if. The call site becomes TurnHint(turn = turn, rolling = rolling).

There is a subtlety worth catching here. turn does not change until the very end of the effect, so during the whole throw the hint still names the player who threw — "PLAYER 1 IS ROLLING". The instant the number lands, both values change together and it becomes "PLAYER 2 - TAP TO ROLL". Two pieces of state, one moment, no coordinating code.

The choreography

Here is exactly what happens in the 820 milliseconds after a tap:

Nothing else on the screen moves for the whole of it. That is deliberate. One thing in motion reads as an event; three things in motion read as a glitch.