All right. 1
So in the last lesson, we managed to put our dice onto the detected plane and make it flush with that 2
plane. 3
And look, as if we have a real dice on our table. 4
So in this lesson, we're going to make it even more realistic by throwing down the dice and give it a 5
rotational animation, so that our dice behaves like a real dice and gives us a random number that we 6
will be able to use. 7
So in order to roll the dice randomly, I will need some random numbers. And you might remember this when 8
we did dice, one of the first apps that we built in this course, 9
we were able to generate two random numbers that changed the face of two dice. 10
Now, it's slightly more complicated in 3D, because in our case, we actually need to rotate our dice along 11
two axis: the X axis and the z axis. So to do that, I'm going to create a random number called randomX 12
and it's going to be equal to arc4random_uniform, and the upper bound is going to be 4 and shifted 13
up by 1. 14
Now, the reason is because I need to be able to rotate it along the x axis and have all four faces showing 15
up equally likely. 16
So that's why I'm using this line of code to create a random number between 1 and 4. 17
Now, the next thing is I'm going to use the result of this random number generation and I'm going to 18
multiply it by pi/2. 19
Now, as you remember, we said before that half of pi is 90 degrees, and on our dice, every time we turn 20
it 90 degrees, it means that we show a new face for the top of the dice which is exactly what we want. 21
Now, X code is angry because arc4random_uniform, as you remember, creates a integer data type. 22
It's in fact a UInt32. 23
So we have to cast this into a Float for this to be able to work. 24
So, now that we've created randomX, I'm going to go and create randomZ. 25
So I'm going to use exactly the same code randomZ = arc4random_uniform, upper bound is 4, 26
shifted up by 1, and then cast all of this into a Float and multiply it by half pi. 27
So the next thing you might wonder is what about the y axis? 28
Why are we not specifying a rotation for the y axis? 29
Well, let me explain. 30
Now, in order for my dice to be able to show all six faces, I need it to be able to rotate in the x axis, 31
as well as the z axis, but I don't actually need it to rotate in the y axis because it won't change the 32
face that's shown at the top. 33
All right. 34
So, now we've got our random degrees of rotation along the x and the z axis, 35
all we need to do is just to run it as an animation, and SceneKit has the special method called runAction 36
that we can use, and we're going to put it onto the diceNode that we've added onto the sceneView. And 37
we're going to say diceNode.runAction, and we're going to use the simplest type where we just 38
specify a SCNAction. 39
So we're going to say SCNAction.rotateBy, and I'm going to specify the rotational angle on the 40
x axis, the rotational angle on the y, the z, and the duration of this animation, 41
so I'm going to choose this one. And I'm going to make this a little bit easier to see by formatting 42
it like this. 43
So the rotation on our x axis, we've already specified. It's randomX. Rotation on the y axis is going 44
to be zero because it's not going to change our end outcome. And the rotation on the z axis is going 45
to be randomZ. And the duration, 46
let's just say, half a second. 47
So let's use 0.5. And rotateBy is expecting CGFloats, whereas our randomX and randomZ 48
are simply normal floats. 49
So we can cast that into a CGFloat 50
and do the same to randomZ. 51
Okay. 52
So shall we give it a spin? 53
I hope you won't mind the pun. 54
All right. 55
So that wasn't bad, 56
but don't you think that the rotation seemed a little bit too slow? 57
So one way of doing this is we can actually decrease the duration of our animation. But, actually, if you 58
think about it, the problem is that we're only rotating our dice with a random degree either by 90, 59
by 180, 270, or 360 which at maximum is only one full 360 rotation. So that doesn't look like a spinning dice, 60
right? 61
So we can make this look a lot more realistic by simply multiplying of random angle by 5 or by 10 62
if you really want it to be extreme. And this way, it means that we'll get 5 times 90, or 5 times 63
180, or 5 times to 270, and we will still be able to generate all of the numbers on 64
the dice, but we will go through many more revolutions during this animation and it'll look a lot more 65
interesting. 66
Let me show you. 67
All right, so we're steadily making progress on our dice app, 68
but I want to be able to roll all of the dice that I placed on the table with a single button, 69
and I want to be able to roll the dice when I shake the app. 70
So that's what we're gonna be tackling on the next lesson, 71
so I'll see you there.