All right. So I'm going to be using the latest version of Xcode 10 which is currently Beta 3. 1
And as you can tell, I'm using the beta version of Xcode because I'm recording this far ahead of time. 2
So Apple tends to release the grandmaster or rather the official version of the latest version of 3
Xcode. 4
So in this case, Xcode 10 usually sometime in late September. 5
So if you're watching the course in October, then you should be able to download Xcode 10 straight off 6
the App Store. 7
But if you want to get in ahead of the curve and already start making out for iOS 12, then you can 8
follow along with me. 9
And in the last lesson, I will have instructions for how you can download the beta versions of Xcode 10, 10
so that you can follow along with me. 11
Now, once you've got Xcode open, we're going to create a new Xcode project. And we're going to be choosing 12
iOS and Augmented Reality App. 13
So I'm going to call my app Poke3D, and just check to make sure that the Content Technology is selected 14
as SceneKit, and then click Next. 15
Now, I'm just going to create it onto my desktop, 16
but feel free to place it anywhere you wish. 17
And here we have our brand new ARKit app. 18
So first things first is we're going to go into the art.scnassets folder and I'm going to delete 19
this ship along with the texture file for the ship because we're going to be using our own 3D assets. 20
And now, we need to add our image that we want to detect. 21
Now, in terms of the tracking image, you can use any sort of image or card that you have lying around 22
the house, for example, your business card, somebody else's business cards, playing cards. 23
Now, in my case, I'm going to be using the Pokémon cards that I own. 24
But if you don't own them, you can also just print them out in order to follow along with me. 25
So if you head over to this link, which I'll include, again, in the course resources list, and it'll take you 26
to a place where you can print out proxy Pokémon card. 27
So the cards that I'll be working with in this tutorial is the Eevee (UPR104) 28
and also I'm going to be using the Oddish (BUS4). 29
So these are the two cards that I have that I'm going to be using in these tutorials. 30
Now, if you want to follow along with me step by step you doing exactly what I'm doing, then just go ahead 31
over here. 32
Search for these two cards and just print them out so that you will have a version, and then tape them 33
to a playing card. 34
So I'm just gonna go ahead and use my phone camera to take a picture of my Pokémon card. And you want 35
to try and get it as big as you can and to line it up squarely. And then I'm gonna use airdrop to send 36
it over to myself. And now I should see that show up over here, and now I can open it inside preview. 37
Now, there's just a few things that you need to do when you're taking a photo of your image. 38
Just process it a little bit inside preview to make it easier for the image recognition to work. 39
So the first thing you notice is that on the latest versions of iPhones, the format of the images is 40
something called HEIC, 41
and we need to change this to a PNG. 42
So head over to file export, and I'm going to change the name to Eevee and also the format to PNG. 43
And I'm gonna go ahead and save that onto my desktop. In order to edit our photo inside preview, 44
I'm gonna click on this edit button and I'm going to click on this sort of prism icon to bring up the 45
adjustment bar. 46
Now, over here, I'm going to increase the exposure a little bit so that it's a bit brighter and also increase 47
the contrast so that the images look a little bit more clear and we're getting as much detail as you 48
can see with the human eye. 49
I'm also going to bring up the highlights and the shadows just a little bit. 50
And I'm also gonna push the color saturation just a little bit brighter and maybe the sharpness can 51
go up a little bit as well. 52
And once you're happy,, then we're gonna go ahead and export this file. 53
You can see that with the later version of iPhones, the format that the images get saved in is something 54
called HEIC. 55
And we want to convert that to a PSG instead, so we can use it in our app. 56
And I'm going to rename my photo to eevee-card and I'm going to save it onto my desktop. 57
And there you can see it. Now that we've got that photo ready, 58
then we can head over to the assets.xcassets folder. 59
Remember, we're not going to the art.scnassets because this folder is going to be for our 3D image 60
assets. 61
And this one is gonna be for our 2D image assets. 62
So once you've got this folder open, you're going to right-click inside this section here, 63
this white section below the app icon, and we're going to create a new AR Resource group, 64
and I'm gonna change the name to call it Pokémon cards. And now, I can drag and drop my new Pokémon card 65
into this section. 66
So here's my eevee-card and I'm going to just drop it into here. 67
So, now immediately, the first thing you notice is that we get a new warning and the warning says that 68
"AR reference image 'eevee-card' must have non-zero, positive width." 69
And this is because whenever we add a new AR asset, we have to specify a physical width and height 70
for it. 71
So this means that when theA R app is running, it'll be able to roughly know how big this card should 72
be, 73
so that it'll know what to recognize. 74
Now, the size I've measured for the card is around 6.5e centimeters in width, 75
so I'm just going to add in 0.065, 76
and you can see the units here are in meters. 77
And once you hit enter, it automatically calculates the height based off the dimensions of the card 78
so you don't have to enter that in yourself. 79
So, now that we've gotten rid of our warnings and we've incorporated our new AR asset, the eevee-card, 80
this is what we're going to be telling our app to look out for and to track. And to do that, we need to 81
go into the ViewController. 82
Now, in the ViewController, we're going to delete this "Create a new scene" and "Set the scene to the view," because 83
as you can see, this is just using that ship scene that it had before in these template projects. 84
So we don't need that and we're going to delete it. 85
The next thing we're going to do is we need to change the session configuration of our ARSession 86
from world tracking configuration to AR aImageTrackingConfiguration, 87
and this is because we're using a different modality. Instead of looking for planes in the real world 88
in the vertical or the horizontal plane, 89
we're actually looking for a specific image that we provided. Now, after we've set the configuration, the 90
next thing we need to do is to tell our app about the images that it should track which are located 91
in here. 92
Let's create something called image to track and let's set it equal to a brand-new object of the type 93
ARReferenceImage. 94
And this is an image to be recognized in the real world environment during a world tracking ARSession. 95
This is a new reference image object and we're going to tap into the referenceImages method so that 96
it loads all over the reference images in a specified AR Resource Group, 97
and that's the one that we created just now. 98
So let's hit enter to insert that method. And the group name that we have to provide here is the name 99
that we gave to this folder here, which as you can see, is Pokemon Cards with a space in between. 100
So let's copy that over to make sure we don't make any typos. 101
And let's go ahead and add that as a string. 102
Pokemon space cards. 103
And now, we need to provide the bundle. 104
So that's basically what is the location of this group. 105
And we're going to say that you should look inside the main bundle which is the location of the current 106
project or the current file that were inside. 107
Now, once we've created those ARReferenceImages, then we can set our configuration's tracking images 108
property which is the set of images to detect for our current AR configuration to be equal to these images 109
to track. 110
And now, you can see we come up with a slight problem. The images to track is an optional. 111
And that's because it might just be that when our app looks through the current bundle for something 112
called "Pokemon Cards," it might not exist. 113
We might have accidently made a typo here or we might have actually forgotten to add any cards. 114
Well, in that case, we don't want to crush the app. So let's turn this into an "if let" to check to see if 115
there are in fact cards, and only if there are, 116
do we actually set it to the configuration. 117
Now, the final thing we need to do is to tell the configuration how many images to track, so the maximum 118
number of tracked images. 119
So this is the number that it's going to simultaneously look out for. And in our case, we're just gonna 120
set that to 1 because we only currently have one image that we're playing with. 121
And now, we're going to add a print statement and we're going to print "Images Successfully Added." Because 122
if this part gets called, then that means that we've actually managed to find our Pokemon Cards inside 123
the current working directory and we've managed to turn it into ARReferenceImages. 124
So let's go ahead and run this app and see if it works. 125
Now, remember that for any AR app, we need to make sure that we're running our app on a physical device 126
because AR apps don't work in the simulator. 127
So let's choose a physical device and let's add a team and go through all of the steps for sideloading. 128
Now that I've run my app, I'm going to keep an eye out 129
down here in the debug console. 130
Okay. So there's a number of things that have been printed into here. And, usually, what I find is that when 131
you're using the beta versions of Xcode, there's usually more log images that are not related to your 132
app. 133
So, for example, here it's telling us something about the configurationprofiles 134
path is at a certain location, which is not very interesting, and something about reading from public 135
effect of user settings. 136
And another one that says a method contentsFromCatalog: usingRenditionKey couldn't find the object. 137
This happens in the official versions of Xcode as well, but you see more of these in the beta versions. 138
But I want you to ignore these for now because they don't affect our app at all and they are not errors, 139
and they are not warnings, and they are merely just information that's being spat out by Xcode. 140
The important thing to see here is that our images successfully added statement 141
got called, which means that this was successful, and we were able to find our Pokemon Cards group and 142
to add it as an ARReferenceImage. 143
So in this lesson, we procured the image to be detected. 144
We took a photo of it and uploaded it to the assets folder and we provided some physical dimensions 145
for it. 146
Now, if you're using the proxy cards, then you don't have to go through the hassle of taking photos and 147
uploading it. 148
You can simply just right click and save this image to add it into your assets folder. 149
But, usually, when you're working with cards or images, you might need to go through this process of taking 150
a photo of it and uploading it 151
which is why I wanted to show you the full workflow. Now, in the next lesson, 152
we're going to be using that image to detect it in AR, and we're going to use the detected image to 153
start projecting our Pokémons. 154
So for all of that and more, I'll see you on the next lesson.