Now, in the last lesson, we've prepared all of our assets, so that we can drag and drop them into our ARKit 1
app. 2
So you should have a video called Harry Potter in the MP4 format. 3
You should have a main image that you're gonna be using to recognize in your newspaper and you should 4
have your newspaper printed and ready for use. 5
Now, let's go ahead and Create a New Xcode Project and make sure you select Augmented Reality app. 6
And I'm just gonna call this MagicPaper and, again, make sure you're using SceneKit, and go ahead and 7
click Next. 8
Then feel free to save it any way you like, but I'm just going to leave it on my desktop for now. 9
So, now that we've got our brand-new ARKit app, first things first, I'm going to delete the ship.scn 10
file and the texture. 11
So let's just hit backspace and move that to trash. 12
Next, we need to add our resources to our project. 13
So the video I'm simply going to drag and drop into my main folder, the yellow one here, and make sure 14
that when you drag and drop it in that you check this part where it says. "Add to targets," namely that 15
the video should be accessible by our app called MagicPaper. 16
Make sure that this box is ticked. 17
This is really important. 18
And it will cause you a lot of headache later on trying to fix this if you didn't tick it. 19
Now, if you forgot to do it, just simply delete the aasset and drag it back on and make sure that box is 20
checked. 21
Now, the next step is to incorporate our images for ARImageRecognition. 22
So you did this in the last module, 23
so I'm going to leave it to you as a challenge and see if you can incorporate the main image that we're 24
going to detect. 25
All right. 26
So this shouldn't be too hard. 27
All we need to do is head into assets.xcassets and we're going to right-click in this white area 28
here, 29
and we're going to create a new AR Resources group. 30
And then, I'm going to rename this AR Resources group to our NewsPaperImages. And this is the area 31
where we need to drag in our image which is this one. It's called harrypotter, remember? 32
And when we drag it in, it will always complain because it doesn't have a physical dimension. 33
Now, the physical dimension depends on the size of the paper that you've printed out the newspaper on. 34
So once you've printed out the newspaper, you can use a ruler to measure the size of this image. 35
So mine turns out to be about 7.6 centimeters in height. 36
So let's put 0.076 and it'll calculate the width automatically. 37
And now that warning goes away and we've successfully incorporated the image that we want to detect. 38
Now, next we can head into our ViewController and we can start writing some code. 39
But before we do that, let's make sure we delete all of this part that relates to that ship.scn which 40
we deleted earlier on 41
and that's the rocket ship that gets included automatically in all the new ARKit templates. 42
Here's another challenge, because I know you've done it before and it's always good to practice, write 43
some code to make our image recognizable so that when you run the app you should be able to print something 44
into the debug console that says, "The image of Harry Potter inside the Assets.xcassets was recognized." 45
So, again, we've done this in the previous module. 46
So if you need to refresh yourself by looking at the previous lessons, then go ahead and do that. 47
But if you really get stuck, then come back and I'll walk you through the solution. Okay. 48
So first things first, 49
we are now tracking an image, so we need to change this to ARImageTrackingConfiguration. 50
And in between creating the configuration and running the configuration, we need to do a few more things. 51
We need to tell it which images to track. 52
So we need to create a object called trackedImages. 53
And this is going to be equal to ARReferenceImage.referenceImages and inGroup Named, so the 54
String that we put in here has to match the name of this folder. 55
So we called it NewsPaperImages, and that all the words are capitalized. 56
"NewsPaperImages." And the bundle is, of course, the main bundle, 57
so the current location of this app. This is, again, if you remember, going to be an optional, because this 58
might not exist, 59
so it might be nil. 60
So we need to either unwrap this or use optional binding to keep ourselves safe. Once we are certain 61
that there definitely are tracked images, then we're going to set our configuration to tell it that the 62
image as it should be tracking are the ones that we specified above. And finally, we need to say that 63
our configuration currently only takes a maximum of 1 images to be tracked simultaneously. 64
And now, we can check to make sure that these NewsPaperImages definitely do exist and they can be used 65
as reference images for tracking. And we're going to do that inside the "if let," 66
and we're gonna say "Images found," and let's go ahead and hit run. 67
But before we do that, let's make sure that we select a team so that we can successfully sideload our 68
app. And, remember, sideloading all ARKit apps requires a physical device. 69
So down here image is found. 70
That means that this "if let" statement was true and it was able to locate this NewsPaperImages group. 71
So, now that's done, we can delete that. 72
And the next step is we need to write some more code to create a plane to put our ARV content onto 73
the main image. 74
So, again, we've done this before. 75
We just need to generate a white rectangle that shows up on the location of the tracked image. 76
So, again, I'm going to encourage you to pause the video and try to complete this as a challenge. 77
All right. 78
So in order to receive the events from our scene when it detects a new image, we need to add a delegate 79
method, 80
and we're going to add it down here which are the ARSCNViewDelegate. And the one that we need 81
is the same as the one that we used before which is renderer nodeFor anchor. 82
So the anchor is the image that it found or recognized and we need to return a node to be displayed 83
in our scene. 84
So here is where we're going to be writing our code. 85
And first and foremost, we're going to create a new node which is a SCNNode, and then we're going to 86
check to see if this anchor is actually of the data type of ARImageAnchor, rather than just a generic 87
ARAnchor. 88
Let's go ahead and do an "if let" statement to check, if let imageAnchor equals the anchor that was 89
found as, 90
so casting its data type as a ARImageAnchor. 91
If that is true, then we can do some stuff using this imageAnchor. 92
And after all of that stuff is done, we're going to return on node. 93
So up here, we've created our brand SceneKit node, and then we're going to use the imageAnchor which 94
recognized the image on the scene to add our plane and our rectangle. And then inside here, we're going 95
to add some 3D content to our node. 96
And once all of that is done, we're going to return the node and render it onto the scene. 97
So, now inside this "if let" statement, we need to create our plane. Let's create a plane that is, of course, 98
of type SCNPlane, and we need to give it some dimensions. 99
So we're going to use the anchor's physical dimensions. 100
So we're going to say that the width is equal to imageAnchor.referenceImage.physicalSize.width. 101
And the same thing for the height, 102
so imageAnchor.referenceImage.physicalSize.height. Okay. 103
So, now we have our plane created and we're going to set its material diffuse.content to a new 104
UIColor, and it's just going to be a white square. 105
So we're going to say 1.0 for white, completely white, and then the alpha will just put 106
0.5 to give it a little bit of transparency. 107
And now, that we've created are SCNPlane, let's create a planeNode. 108
This is going to be of data type SCNNode and it has a geometry of the plane that we just created. 109
And now, remember, that our plane always gets rendered at 90 degrees to the image that was recognized. 110
So as we did in the last lesson, we need to change or rather rotate it by tapping into the eulerAngle 111
property, and we're going to change its x dimension to minus pi divided by 2. And that just rotates 112
at anticlockwise by half pi which is by 90 degrees. 113
And so that it's flat and flush with the image that was recognized. 114
And now, finally, we're going to tap into this node that we created right at the top. 115
We're going to say addChildNode and that is going to be this plane node that we created. And now, we're 116
ready to test our app and see if we managed to complete that challenge. 117
So as soon as we load up the newspaper, you can see that our white rectangle gets rendered onto the newspaper 118
and it's pretty much flush and matching the dimensions of that image. 119
And even if I sort of moved around and bend it around it's still able to keep track of the location. 120
So pretty neat, right? 121
Well done 122
if you managed to do this all by yourself. 123
Don't worry if you've forgotten how to do it and you have to look back at the previous lessons. 124
It's the repetition and the reminders that will really help you to turn this into your own. 125
And so that in the future when you need to build this feature into your apps, you'll be reminded of this 126
tutorial and of this challenge. 127
Now, up till now, we haven't really done anything new that we haven't done in the last module. But in the 128
next lesson is where we're going to start incorporating SpriteKits in order to render some video onto 129
that plane that we just created based off the dimensions of the image that we detected. 130
So all of that and more, I'll see you on the next lesson.