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