Now, in order to add a video into our scene, we actually need the help of SpriteKit. 1
This is the 2D gaming technology that Apple has developed. Because if you think about it, videos are not 2
exactly 3D content, right? 3
So there's actually no native implementation of creating and placing videos into 3D using 4
SceneKit. 5
But no matter, SceneKit and SpriteKit actually play really nicely together. And it's time that we 6
show you how you can combine the powers of SpriteKit and SceneKit and a ARKit altogether to create 7
something pretty magical. Before we get started, 8
I recommend just having a quick read of the documentation for the SceneKit Video Nerd Class that we're 9
going to be using to render our video. 10
I'll include a link to it in the course of resources list and you can just check it out before you head 11
over to start coding. 12
All right. 13
So, now that we've read a little bit about SKVideoNode, it's time to put it into action. 14
Now, I'm gonna create it right at the top of our "if let" statement 15
once we're sure that we found an imageAnchor in the 3D scene. And first of all, I'm going to create a 16
constant called videoNode. 17
And this is going to be of type SKVideoNode and we're going to initialize it with the initializer 18
that allows me to load up a video with a name. 19
So the one that's a fileNamed with a data type of String. 20
And this initializes a video node using a video file stored in the app bundle. 21
And that's exactly what we have when we incorporated that video into our project. 22
So let's hit enter and the string that I have to provide is the full name of 23
harrypotter.mp4. 24
And there we go. 25
Now, I know that when we incorporate images, we tend to ignore the extension. When we're using 26
SKVNode, 27
It's really important that you include the full name of the file including the extension, and make sure 28
you don't have any typos between how it's spelled over here and how it's spelled over here. 29
So now that we've created this brand-new videoNode, we're going to let it start playing immediately. 30
So all we need to say is videoNode.play and that runs the play method. 31
Now, this videoNode is a SpriteKit videoNode, and we need to add that into a SceneKit element, so that 32
we can place the SceneKit element into our sceneView session. 33
To do that, we need to create a new scene. 34
So we'll call this a videoScene. 35
And this is going to be initialized using the SpriteKit scene. 36
And this is a node that allows us to display SpriteKit objects. And we can initialize it with a size, 37
and the size that it accepts is of type CGSize. 38
So let's create a new CGSize using a width and a height. 39
Now, this width and height doesn't have to be precise. 40
It's just a guess of the width and height in pixels of your video. 41
So, say, if you have a 720p video, then it would be 720 in height by 1080 by width. 42
So in our case, our video is actually a lot smaller than that. Now, because we're using a 360p video in 43
resolution, 44
that means that it has a width of 480 by 360. 45
So that's what we'll put as the size for our SKScene. 46
Now, once we've created this videoScene, then it's just as what we did with SceneKit. 47
We can add our videoNode to our videoScene. So we can say videoScene.addChildNode, and that is 48
going to be the videoNode. 49
And this is ready for display in 2D. 50
Now, at the moment, we're not really displaying anything in 2D because we're working with a 3D environment. 51
But in our 3D environment, all of our 3D objects have materials that can be used to cover our 3D objects. 52
So for example, if we had a sphere that we could add a material of the textures of the moon to make that 53
sphere look like a 3D moon object. 54
Now, in this case, we're going to change the material of our plane. Instead of having a UIColor or 55
UIImage, 56
these are all 2D objects, we're going to add our videoScene as the 2D object that we're going 57
to cover our plane. And this will make it display when we render our newspaper in AR. 58
So let's go ahead and test it out. 59
So our image is being recognized and our video is playing, but you'll notice that it's only playing one 60
portion of the video and it's not correctly positioned in the middle of our image. 61
So we need to fix that and move it so that it's centered on the image that was recognized. 62
And to do that, we have to change the videoNode's position. 63
So just before we add our videoNode to our videoScene, 64
let's tap into the videoNodes position property, and change its position in its parent. So we can change 65
the position by using a CGPoint, 66
and the point is going to be consisting of an x and a y value in CGFloat. 67
Now, the position of our videoNode that we want to set is banged in the middle of the videoScene, so that 68
our video is scaled and positioned precisely in the center of the scene. 69
So that means that the x position will be our videoScene.size.width / 2, 70
so half way in the middle. 71
And, again, the same with the height. 72
So videoScene.size.height / 2. 73
So that's also banged in the middle on the y axis. 74
And now, if we run app, we'll see the size update. 75
And there you go. 76
So our video is now taking up the entire space of the scene and it's centered on the scene. 77
But there's one more problem, 78
it's flipped vertically. 79
And that means that we need to rotate it along the y axis, so that we can see it the right way round. 80
And to do that, we need to tap into another one of videoNodes properties, 81
and this one is called the y scale. 82
So we can use this property to scale up the video on the y axis, 83
and there's a property for xScale as well as zScale. 84
But in our case, our video is flipped along the y axis. 85
So what we can do here is we don't want to scale our video, 86
we don't want to make it bigger or smaller, so we're going to keep it as one. But we're going to make 87
it minus one. 88
And if we change the scale of our video along the y axis negatively, so reverse it, then it will also 89
reverse the image to make it flip in the vertical axis or in the y axis. 90
So let's try this again 91
And now, you can see that our video is the right way round, 92
and it's like as if it is on the newspaper because of the tracking abilities of ARKit. 93
So that's pretty awesome, right? 94
Given how few lines of code we need to write in order to do this. That's all for me. 95
I hope you enjoyed making this magical newspaper app with me. And I'll see you on the next lesson.