Transcripts
1. Introduction: How's it going? My name is Steven Christian. I'm a full-stack AR developer and I specialize in visual illustration, visual arts, as well as visual storytelling. And I developed a lot of AR apps that make more immersive storytelling experiences on mobile devices and so on. In this course, we'll be learning how to take a illustration that you're hand drawing, turning it to the computer and also adding AR to it so that it's a one of a kind AIR art piece that is also interactable. And so on this course you will learn how to sketch. You'll learn how to draw a simple illustration. You will learn how to scan the drawing without a scanner and add that to the computer. Will work with image targets with augmented reality will set up Unity and Vuforia for the AR experience. Will also make a simple user interface. Learn how to code a little bit at some user controls to 3D objects animated in unity, and also build an export or own mobile app that you can put on the app store. And so this is a class for beginners that want to learn about AR. And not only that, but to fine tune your skills with Unity, live Vuforia with AIR, with simple illustrations and drawing. And really take your creativity to the next level. So I'll join me on this wonderful adventure as we embark on the journey of taking a drawing to an AR art piece.
2. Course Breakdown: So the agenda for this course is pretty simple. We learn tools that you'll need, will learn a little bit about what augmented reality is. Why augmented reality art is great. How to sketch on paper, how to draw the image and finalize that design. How to transfer the drawing to the computer. Setup the Unity game engine, set up the Vuforia engine for augmented reality, will also add user interface. As he music controls. Some 3D models, add some animation. And then we'll wrap it up by building an augmented reality experience for a mobile device through an app. The tools you'll need to get started. Our paper, pencil, a thick, an extra thick marker. Sharpies work great. But anything will work. If you would like to use crayons, anything would color that works as well. You'll need a phone with a camera and a scanning app, or you can use a regular scanner. And while the absolute I like to use is Adobe scan, you also need photo editing software. So Adobe Photoshop, maybe Adobe Acrobat. There are some free ones out there called Gump. We'll also need to download the Unity game engine. Will need a computer, will need the Vuforia SDK. And we need that for unity. And we'll also need a license key. There are some resources that you can download that will help you with all these things. Again, this class is for a bare-bones beginning. And so anyone that's familiar with just writing one paper, that's all you need. If you have some computer skills that works great as well, you'll be walked through this whole process from beginning to end. So the way this tutorial series works is I'll introduce what we're going to learn, what this bullet point list. And then after that, we'll go through the demo. And then some of these sections are going to have challenges for you. So that you can challenge yourself low bid, and take the creativity to the next level. And so stay engaged with, let me know how you feel, right and review this. Be active in the comment section. It's all about creating communities and being creative and empowering others to challenge ourselves with our creativity. And hopefully that will inspire everybody else to take that one step further with this section. Again, if you want to skip this section and just go on to the demo, you can do that. If you want to stick to the breakdown, you could do that as well.
3. How to Sketch: In this video, we'll learn how to sketch. Will figure out what we want to sketch. Start with simple shapes, maybe a circle, triangle or square. And if you want to diversify those shapes, you can cut the shapes and half reporters to achieve certain shapes. Basel combine those shapes to build an image. Play with proportions and scale. And we'll flesh out the image with multiple drafts of the sketch. And so you need to ask yourself, do you want to sketch a person, a place or thing? And so what does that mean? A person can be either a human. So we have our smiley Paris person right there. It can also be a cat or even a bird. So any anything that moves and lives, we have places. So maybe your home, a building, or maybe even the beach and things. Those could be anything that you could think of. Some maybe a car, a crayon, or even a TV. And so what I always like to think about is setting everything up into basic shapes. So we have a circle, we have a triangle, and we have a square. And those are the key foundational elements for creating all of these things. And so say if we wanted to make a person, we'll start with just a circle. And we'll just draw a circle. And that will be the head. For the eyes. We can have two more circles. Well, I have one circle there, one circle there for the eyes. One of the things that you could think about is if you have a circle, you could actually cut it into halves and quarters. And we'll do that with the, we'll do that with the nose. And so instead of drawing a full circle, would do a half circle or maybe a C. And that gives us our, our nose. And last but not least, we must have a mouth. And so we'll just do another half circle. And we have the smiley face. If you wanna take it to the next level, you can give it some ears, get have it cut in half vertically and will have. Half circle for the ear, and we'll flip it the other side and another half circle for the IRR. Next we have our body. And we could do that with our rectangle. And so we'll make a rectangle and connect it to the head. We could do another half circle. And that could be the hips. And two more half circles for the shoulders. And so one thing that makes things great is that we can also add lines to this. And we have our legs and arms. And so one shape that we did not get to yet, but we will get to now is our triangles. So for the hands, we could have two triangles. And then we can add lines for the fingers. And then for the feet. Instead of it being a triangle with sides, will have a triangle with one side being longer than the other, like that. And we'll do the same thing on the other side. And so notice how instead of it being equal on both sides, we have one side that is longer than the other. And using basic shapes. And we could also add some crazy here to him. And if you wanted to add a skirt, you can take this shape right here. And instead of it being having equal sides, it kinda bellies out a little bit like that. And so if we add that to our character, now the character has a dress or skirt. And so with simple shapes, you can do a whole lot. How about let's do a car? Because the car be pretty simple. And so a car, we have a rectangle for the body. We can have a half circle for the top. And we have two more circles for the wheels, will just color those in. And then for the headlights, we can't use triangles. And for the tail light as well. And if we want to give it a little bit of character, we can give some windshields in the back and the front, and a square for the door. Then we could add a rectangle or a triangle for the handle. And again with simple shapes, we have our car. And so now that we have an idea to create what simple shapes, now we can sketch on paper. The challenge for this is to figure out a finalized sketched idea. So come up with a sketch sheet with all the different ideas. Include a person, a place, and thing, and then share your sketch ideas in the project section.
4. Draw an Image on Paper: In this video, we'll learn how to draw the image from the sketch onto paper. So we'll use a pencil to sketch the image. You get it started off with the square and turn that square into a cube. Give it a smiley face and some character. And you give it a name. And then we'll use the Sharpie to trace over the sketch, add some bold lines that can't be erased. And then we'll take the thicker pen and give it a little more contrast and make it pop. And this video, we'll learn some crosshatching techniques that allow the sides to have low, more depth and texture. Again, if you want to add some color to it, definitely do that. Ok, so in this video, we will be talking about how to actually draw our image that we're going to be making into an augmented reality. Rps. Have you seen with all my other videos, I go into detail about how to draw. This is really about making augmented reality stuff and really making original augmented reality stuff using the tools that we have in front of us. Instead of it being a wonderful masterpiece, which we could get into that later. This is just going to show you the process of it. And so you won't be coming doubted this video learning how to draw a masterpiece. Because I've been there courses for those. But you'll understand sort of the process with a very simple illustration. And so with that, if you want to see more, you can check out my character design course. You get to check out my how to draw what stickers course. You could check out a lot of the other courses that I have available. And so with this, we will really just focus on the core concept. And so in this tutorial, I want to focus on the cube because the cubes is really, really great for allowing us to do a whole bunch of different things. Sorted the building block for everything, whether it's lego blocks, whether it's bricks, we can do a lot of stuff with the cube. And so what I'm going to talk about essentially demonstrate is designing a cube that will work for this, given it a little bit of character. And so I have my pencil, as you can see. And so what the pencil, I'll just go ahead and design a cube. And so one thing to note is that a cube is made out of multiple squares. And so we're not going to be, we're going to start off with a square, but we're going to move on to the cube. And so what the square? Because I have these lines here on the line paper, I could just use these to drive down my score just like that. And so now that I have my square, I'm actually going to add some extra lines in an angle, about three, about three lines in an angle. And then I'm going to connect those and actually make this a little bit longer and bring this down. And because I have these lines for the line paper, it acts as a guide for me. And so now I use multiple squares or parallelograms or ROM buses, things with four sides. And I have mine. My cube. Now, what I can do is I could give it a smiley face. So give it give it two eyes and then give it. And I'll give it a little tongue just to give it some character just like that. So we'll call him and some little boxes just to give it some character. So we have our sketch called QB, and we did that just with the pencil. So the next thing that we're going to do is we're going to take our Sharpie and we're going to add some very, very big bold lines to that. Because one of the things that we need to do is we need to scan this into the computer. And so even though we have a pencil, we wanna finish the design. And plus, we want to make sure that the design last because you can erase pencil, but it's really, really difficult to get rid of the ink pen. And so all we're gonna do is just go over this with our independent. And so I'm using a Sharpie. You can use any sort of markers and stuff that you like. But I like a Sharpie. And I'm just going to trace over the lines. It doesn't have to be perfect. If you want to be perfect, you can make it perfect. But for me, I tend to have a lot of imperfections in my art. And that's what makes it special to me. Having those imperfections for me gives it some character, gives it its uniqueness. It's really hard to recreate those mistakes or recreate those approaches. So every RPs that I have ends up being one of the time, even if I make multiples of it. And so the output of the outline now. And so now that I have the outline of it, I will go ahead and trace over the ice. I'll trace over the top so I can go ahead and color. And the ice just like that. So the last thing is the finishing touches. It's adding the lines to the word. So that you can see those. And I'll add those to the cubes like that. And then I will take a thicker pen and I'll go over all the outlines around the outside just to give it a little bit more cues as to what we call contrast. And contrast really makes the art pop. So even though it's a very simple design, you can make it pop by adding contrast to it, color contrast, and a few other things that I often go over and all my other art classes. And we're getting into art theory here where artists objective and to manipulate that subjectivity. You're able to do certain, use certain techniques. And so what? Now that the outline is a lot bolder, it allows the actual art piece to pop out a little bit more. And so now that I have this, it's fully inked. I'm going to actually just use some crotch crosshatching. And all cross hatching is, is you add some lines to the side and then you'll add some lines to the other side in a different angle to give it a little bit more texture. And so I'll cross hatch the bottom row. And o cross hatch the side. So that we know that there's, there's multiple sides and they're all facing the same direction. And then I will cross hatch the other side to give it a little more texture on this side. And I'll just do it another time as well just to sort of seal the deal. And so I did crosshatching going from left to right and right to left. Now I'm going top to bottom. And so now I have a Ford face, then I have a face that has a little bit of shadow. And then the underside face that has a lot of shadow, and that is our cube. In the next video, we will be talking about how to make a digital version of this. So we could put that into our app and allow the app to recognize this. The challenge for this project is finalizing that design. So we're gonna finalize the design. If you made a cube like me, add some color and some personality to make it really stand out. Make sure it is a 3D structure and not a flat 2D structure. Instead of having a circle, make a sphere, instead of having triangle. Let's go with the cone and then pulse your design in the project section below.
5. Transfer Image to Computer: And this, we're going to learn how to transfer the image from the paper to the computer without a scanner. And so making a scam without a scanner, or we're gonna do is use our smartphone, what the camera, take multiple pictures so that we have different wants to choose from. And if you don't want to use the camera, you can download a scanner app like Adobe scan. There's other ones out there as well. And you scan the document. And then we'll edit the borders of the scan if you need to, to make sure it's a cropped very nicely. And then we're going to save it as a PDF or a JPEG. And the last thing is that we're going to send our files to the computer. I personally use Dropbox to send all my files, but you could email it to yourself. You could connect it to a computer, your phone to a computer to transfer the files directly. It's up to you. And so this I am going to be showing you how to make a scan without using the scanner, All you need is your actual phone. And so I have a Android device right here of a smart smart phone. And what the smartphone, I can either take a picture which I'll show you, or I could take a scan. And so I'll show you both of those. And this will show you how to take your artwork from your paper and convert that to a computer. Until now that I have my smartphone, I will actually open up the camera out in Iwill, pointed in front, make sure there's no bad shadows. And make sure it's facing above. And we'll just take a image like that. And the big thing about the images that it needs to be, needs to be parallel to. The phone, needs to be parallel to the actual image so that you can get a really good image until I'll take another one. It's always good to take multiples. And then you send that. I'll send these all at the same time. And so another one is, I use Adobe scan. And Adobe scan works very, very well because it will trim the edges so that I don't have to. And so I will just scan it over the document. Hold it steady. And now that I have the document scanned, you'll notice that it has a lovely little border around it. And so I'll have to do is say, okay, this is, this is what I want. I could modify it a little bit more so that it lets me get some sides. No, on that side. And I'll go on that side right there. And then I'll click continue. And from there I have my image QB. And I can save it as a, so I will just name it QB cabbie, QB, QB image. And then I can save it as a PDF. And I will actually share it. Click share. Share it called beating. I will share edit to my Dropbox, banana to my Dropbox. So I just click Add and it will automatically send it all complete and it just sent. So now I will actually do that with the images that I have. So click images and I'll go through, click those two images, share. Again. I'll go to Add to Dropbox. And I'll click add. And I will wait for them to share. And now that those are done, I have sent my images now. And so now we could leave our QB image where it's at. We don't need it right now. And we can move on to our preparation of our image.
6. Prepare Image for AR: In this video, we're going to learn how to prepare the image for an AR experience. And so we're going to send the images to the computer. And we're going to open the PDFs if you have them in Adobe Acrobat Reader. And we're just going to modify them. If you have the images, you can use a photo editor like Photoshop. You get cropped the image. You can modify the image so that is flat and using the Transform tools to fit the image to the right specs. And so if you have a 8.5 by 11 piece of paper, you want to make sure that it's an 8.5 by 11 piece of image. Because that's going to work great for the AR experience. And then edit the image to have Macs contrast, you want to make sure that the black lines are very black and the white is very white. And then lastly, say the final image that you're going to use in our AR experience as a jpeg. Okay, so I have my images here. I'll actually open up my image, which is a PDF. I will just open that in Adobe Acrobat. And once I have Adobe Acrobat open, as you can see my image. And you'll notice that it's really hard to see the lines that I had with it and the pencil lines. So that's why I wanted to make sure I inked it, because I wanted to make sure it will be recognizable. And so what we'll do is we'll take that image and we will export it out as a JPEG. And so I'll just say Jpeg QB image. And then we don't need that anymore. And we have our image right there. And so what you could do if you don't have a PDF, if you didn't use a scanning software, is you can open this up in Photoshop. And Photoshop is where it is at. So I'll wait for Photoshop to open. And so now that we have Photoshop, I will actually come out of that and notice how we have our image. So with Photoshop, you actually click the EMOC button or click the lock button to unlock it so that we could actually edit this layer. And then we are going to click Control T to transform it. And we're going to use are aligned tools. And so I like to pull down a, so what? I would like to pull down a ruler to make sort of a bounding box. And so a really are at the bottom, at the top Print image, making sure that it cover, it touches the top and the bottom. And then I'll add a, add one right here for the vertical. And then I'll add another one for the other variable. And just have it about right there. Just like that. So now we have our bounding box for our image. And it's all we have to do is just use the transform tools to fit the image to it's, it's bright specs. And so I'll do Control T or Command T. Or if you want to go up to edit, transform will do free transform. And what free transform you can grab. You can hold Control or Command on a Mac. I think it's command on the PC, it's control. And you can just move it up to the side so that it, that the top corner touches the top corner of the white paper, touches the corner that we made. And then we can do the same thing on the other side. And then we will and then we will have the bottom corner touching. And then we'll have them bottom corner on the other side touching. And so again, you may have to play around with it a little bit. Doesn't have to be perfect. It just needs to be recognizable as a piece of paper. And good thing is we have plenty of other images that we use as a backup as well. But for the most part, this looks pretty good. So I'll go ahead and click OK. And I will actually crop this so that the crop only shows books. I don't want to have multiple, multiple rulers k, So I will crop this so that it butts up with the actual rulers right here. And we get rid of some of the, some of our grid that we had. And then I'll click OK. And then I'll hide my rulers so I have a better view. So I'll go to show and then where it says rulers, actually, not, whoops. Honestly, I'll hide my guide. So I'll hide my guides. And now we have image like that. Just like that. Then we can go through, we can save it. Don't want it to save as a PSD, wanna save it as an actual image. And so we'll go into JPEG. And we'll say that this is underscore cropped. So just in case we need to go back to it and we'll save it as the maximum. So now we have that and we'll see our crop damage. And then we'll see QB image, which is the one that we scanned. And so now time to set up Unity.
7. Unity Game Engine Introduction and Walkthrough: So in this video, we'll learn how to install Unity game engine. Will visit unity.com, will select new or returning user, will download the unity hub, installed the application, our computer. We'll also open it. Download the latest version of beauty install. You'll probably need Visual Studio and maybe some iOS build support or Android build support for mobile AR. And then we'll select a folder for all the Unity projects and make sure that we have the right versions for all the projects. So in this video, I'll be showing you how to download and set up the Unity engine, which will be using for a lot of our Augmented Reality stuff and some of our gamification stuff. And so at first, you just go to unity.com. Once you have unity set up on your web browser, go to get started. And then it'll say business plans. Uh, you probably don't need one right now. Obviously, you're probably not a business and you're probably not making money in games. And so you can go to individual. And then for individual, you get sign up as a student. If you have a.edu or a student account, a student email address. But if not, you could do a personal account. We have our personal plan. And so again, it's free. And the eligibility is that as long as you're making less than a $100 thousand each month with game development and everything. You could pretty much play around with it and do all the development you want for free. And so go ahead, get started. And then from there, all you have to do is say, for me, I'm a returning user. But if you're a first-time user, you just click here. And then you could go to agree and download. For me I'm a returning user, so I go here and then I could download my Unity hub. If you download the indivi hub, then this is if you're not eligible. Yeah, you download the hub. And with that, I'll go into my folders. And it's this thing right here. So you go ahead and double-click it, install it. If you're on a Mac, it's a different situation to install it, but go to agree, install all that stuff are you haven't installed, so I'm not gonna do that. And then from there, you have the NAT hub right here. Go ahead, click it. And once you click it, you need to go to installs. And after you have installed done, you go to add. You can see I have two different versions already, and we'll go into that another time. But essentially, you'll notice I'll have 2.3.2 is available. So I'll actually go ahead and restart now. And actually go ahead and restart it. Then allow access. And I have my ED hubbub. And so go ahead and refresh it. These are so the way it works is when you come in, you have all your projects. And so these are all the projects that I'm working on in unity right now. So you have the project name, it gives you the folder that it's in, and it gives you the unity version. And this is important because you want to make sure that you are using the right Unity version for your apps. And so when you go to unity version, you could choose different ones. I have to make sure that with each each one, you want to make sure that you have the either the exact one or a one higher. And so this is 3.7. That means that it won't work on 3.6. It could work on 3.8, but he won't work on 3.6. And so that's just one thing to pay attention to, where the current platforms, target platforms. That's just like what device you're about to use it on. And so I have Android, iOS, I do most of my development in Android and so would have to worry about that. And then Last-Modified as I've worked on these over the course of the week or over the course of the month. And then if you want to show the actual project folders in the Explorer, you could do that. And so these were my actual projects. Are the actually live on a on an different hard-drive space. And so that's the project tab and the Learn tab. These are all the beginner projects idea. And so these teach you or walk you through how to make games. How to make different apps, mainly gains because Unity is a game engine. So easy, we'd like beginner projects that you can play around with. And then there's tutorials that you can take a look at that allow you to learn more and more about Unity and scripting in animation and all those different things. And so they're, they're really great. Then there's a community. This just shows you where all like the Unity forums and answers and helps in blogs and all that stuff is. I don't release that much, probably should, but I just find that Google is really much better for my workflow. And then installs. You'll see I have two installs already, but you can go to Add. And if you go to Add, you'll notice that there's unity official releases. So we have the beta releases and the pre-release is that they're still working on, I would say shy away from those right now because you probably don't need to do use these for any of the stuff that we're talking about in the videos. But, you know, there's 2017, there's 2018. These are long-term releases. These are for like the evangelists. A lot of the augmented reality stuff is only available for 2019 because there's a lot of new stuff that has been updated with 2019. And so I tend to go with the latest official release unless I already have a release that I'm working on. And so what 20 19.3, anything after 23.7729 is really good for all the projects that we're doing. And so I'm working on three dot sudden until you could do 14 or 15 or anything like that. Even if there is a 20.419, you could do that as well. And so select it as it tends to be the first one that's selected already. They can go to next. And so, and so this is where all the important stuff is. You wanna make sure that your development tools are selected. So you want to use Visual Studio if you have community or if you don't have community out suggesting getting that, I use Visual Studio Code. And we will go into that in some of my tutorials where it's a, it, it looks different, but it pretty much does the same thing. A code editor. And so make sure you have Visual Studio installed. Then after that, you want to make sure that for all of the mobile development stuff that we do, you want to have Android build support installed. And so you will want to select this and you want to make sure all of these are selected. Quite often. You can select one of them and then these won't be selected. So make sure you install all of this stuff, because all this stuff is really important. If you do an iPhone building, then you get how that selected. If you're doing any of the other stuff like magically or HoloLens or any of those. And you wanna make sure that you have like Windows build support, select eight or documentations are mac or anything. You just want to make sure all that stuff is selected. And afterwards you click next and then it will start downloading all of those packages. And after they download all those packages, then it will install on your computer and it will show up just like another box right here next to all of these. So one of the things you want to pay attention to is that when you have a whole bunch of installs, it will take up a lot of space on your hard drive. If I go back to it and I select next, notice how just just the bare basics with nothing on it, that takes up five gigabytes. And so if I add Android support and iOS support now I'd taken up 17 gigabytes. And so I have enough space. But for computers, I don't have enough space or don't have a lot of space to sort of give to these. Each one of these are going to take up at least 15 gigabytes. And so these two right here, already 3030 gigabytes. And so something to pay attention to where I used to download the latest and then I would actually delete the more recent one. And so you'd go through and uninstall or you would do all that. But if you want to add a module, so you can go through and you can add another module. So say Android build subordinate, I've iOS, so say I wanted to have Mac build support. I can add that by just clicking that. And then I will add to my total space that I need for it. And then I'll click Done, and then it won't download all that stuff. And so right now, I will go ahead and create a new app. So I'll just go to Download. And we'll just say that this is a unity tutorial. You wanna make sure that you're clicking 3D. 2d is for 2D stuff. But since we're doing AR and 3D stuff, you want to make sure that it's 3D. High-definition render pipeline. This is for very high definition games or anti definition animation. We don't have to worry about that because mobile development does. Work in high definition and universal project template. Those are typically, you're better off just using 3D. S is what it comes down to. And then 3D with extras. I haven't really played around with that too much, but I wouldn't worry about it too much. And so you go ahead and create. And then we will have the unity screen and we'll just set up our project. And so now we have unity. One of the things that you'll notice is that the layout is a little different for me. And that's because I'm using a custom layout. And so what I'll do is I'll actually save my layout. We'll just say Stephen, layout right there. So I'll just click Save, boom. And you'll notice that it says Steven's Layout right here. So if I click default, this is typically layout that you will have and you'll have the projects right here. So this is where all your project assets are. And so say you have images or 3D models or scripts. This is where they would go. And you'll notice that we have seen the scene wherein a sample scene and in the hierarchy that shows you everything that's in your scene. And so when we're building out our animated stuff, if we were building out our Augmented Reality stuff, all that stuff will be built in here. And you will be able to see it right here until we ever main camera, we have our light, all that jazz. So if I go ahead and take look over here, we have our Inspector. And the inspector is only used when we want to manipulate any of the objects in here in our scene. So if I click Main Camera, you'll notice that stuff appears in the inspector. The camera that transforms all that stuff. And the same with my directional light. We have a lot of different stuff that is specific to this game object and they will change. The game view is the view that we see with our, through our screen. So if we're playing a game, this is what we're going to see as we're playing the game. We're not going to see this. This is the behind the scenes. This is the actual game view that we're going to be looking at. The Asset Store. That's it. Store is going to be your best friend. The Asset Store is where you get all your different assets. So say you bought something from the store, you bought some models, you bought some effects, some scripts. You can add all that stuff from the Unity Asset Store to your game without having to download it and import it and all that stuff. You know, they make it really, really great to do this. And so one of the things that you need to do is look for the free assets that are available. There's tons of free access that think there's 5,986 free assets. Looked through all those things and see what stuff you could use in your game. For example, you could get some platform game stuff, some sunny land 3D models, some basic motion. You could do a whole bunch of stuff with this. Definitely, you know, I can't stress enough how how great these assets are. And so we'll look at the user interface. And so with, with unity, we have new scene. We could do open saying add new project, all that, build settings. These are very crucial. So say if you want to build for Android device, you have to click the Android device, any switch platform, and then you'll be able to bill for same with iOS. Then we have our grid snapping our preferences. And so our preferences are really great and, you know, it allows us to set up different colors for different things. Servers just stole a bunch of stuff that, uh, that we won't get into and we probably won't need to get into. But if something breaks or something's bugging down your system, it's probably because your preferences. And then assets. This allows you to create assets, whether it's an animation controller, a folder, a script, all those different things. Gameobjects. This allows you to create game objects within your actual sane. And so cube spears, capsules, cylinders, even audio sources, videos, text, all that components. These are components to add to your game objects. And so whether it's a rigid body, a video player, a mesh, animation, augmented reality stuff that these things are the things that you would add to your game objects. And then when you come to window, you want to make sure that again, you can access the Asset Store, but you can also access the package manager. And one of the package manager is, is, is allowing you to actually look at the packages you can download. And so say you want to use the Vuforia engine. You could do that. If you want to do some of the XOR stuff, you can do that. If you want to try AR foundation, you could try that. You could do some add stuff. There's just a lot of stuff you can do. And so if you go to the Advanced tab, you can actually show preview packages and these are things that are up and coming. And so you'll notice how it says preview here. And these are the things that you should be looking out for because these are the, the best parts, the new, the new bells and whistles for all the augmented reality stuff, and all the user interface stuff, and all the game development stuff that Unity has coming down the pipeline. And so we have stuffing your projects. And so if you have certain packages in your projects, this is where you would go to find them. You'll notice that there's a check mark here. And that means that this one is up to date. And if there's a downward arrow, that means that you can download it. And so you can update these by going through, clicking it and then San okay, I could update this to the latest version. If you want to remove it. You can't as well. And then if we go to my asset, this is connected directly to your Assets Store. And so I have a whole bunch of assets because I do a lot of development. And so this probably won't be as long for you, but having a whole bunch of assets allows you to create a whole bunch of different things with water simulation, with to1 effects, with Animals, all of those things. I think I have a low poly animal set. I have a cute x2 Pet set. Cute pet set with cats and horses and all that stuff. You know, the Asset Store is really great. And all I have to do is just download those things and then import them in. And so if I go in and I go to Build Settings, I can go to Player Settings. And player settings allows me to set up all the stuff that I need to export my app and setup all the physics and all the different settings that my app will be running off of, quality, all that. So if I wanted to add icon for specific app, I can add that here. I wanna change the name of the company and the name of the app. I could do that at. There's certain versions I could do that as well. So what are seen? Some of the things that we need to look at is how to navigate the scene. So I'm using a three button mouse. And that means that I have sort of a scroll wheel in the center, in the upper left and right-click. So what the left hand, the left click. I can click around or I could click on an object and move it around with all these arrows. So if I click on the, actually I will create a, I'll do that later. So I will click on this camera and then these arrows show up so I can click with my left mouse and move it around, side, up, down forward. And I could do the same thing with the light that's here. Up, down, and Ford. If I use the right-click, I can actually right click and move around our actual viewer camera. If I use the middle click, I can pan it up and down. And if you notice over here, we automatically go to these different perspectives. So what this, this is the X perspective. So go along the x axis by clicking that. Yeah, if I wanna go along the z-axis, could do that. Wanna go the Y axis, I could do that. And so these make it easy to navigate. And it gives you the orientation. So this is to the right, this is to the back. This to, this is on the top. This is on the bottom. So it really allows you to do a lot of cool stuff. For this. This is 2D mode, so you probably don't wanna do this if you're not in Dojima, which we won't be in. And so over here we have the hand tool. And you can access this by pressing Q. And this just allows you to pan much like the center month mouse button. Then we have our Move tool. So you can access that with w. And this allows you to move an object. The rotation tool, which is actually E, and allows you to rotate the scale tool, which is actually are. And that allows you to make things bigger or smaller. The rec tool allows you to modify its topology. So modify a lot of the form and shape of it. And I can get into that a little bit more with if I, when I add a square here. But you could access that with a T. And then the rest of the stuff, like the all objects thing, this one you could do all the rotation. Premise combines all of these into one tool. I don't really like to use it and you can access that. What why? Because yeah, and you can access that. Well, why? So in our scene view, you could go ahead and you can right-click. And you could add an empty. And so an empty is just an empty game object. All it is is just a container. I tend to use these to make things organize. And so if I have a whole bunch of assets, so say I have like 20 different cubes. Some of them are blue, some of them are red. I can make multiple game objects. I can name this read, and I can name this blue. And by naming these red and blue, I could use these as folders are containers to actually have all the different colors of squares or circles or whatever and put those in there and Kindles organized. So let's just really to keep things organized and it makes navigating with a lot of assets a lot better. Go ahead and delete those. So with game objects, we have access to 3D cubes, 3D spheres, capsules, cylinders, planes, quads, trees, terrain, the whole shebang. If we add a cube in, you'll notice that there's actual cube radio. And so FI actually rotated around. You can see that there is a cube there. And because we have a light source, the light will actually change based on how it's oriented. Like that. And so again, we can rotate it and do some rotations. We can move it. And we'll just scale it. And that works across the board for all of the different like spheres. Or it's across the board for a capsule cylinders, I'll type stuff. And so one thing that you'll notice is that we can also control everything from the transform. So this is along the x, this is along the y, which is up and down. And this is along the z, which is forward and backwards. We can do the rotation as well. So rotation around the x, rotation around the y, and rotation around the z. Again, you, you can only work with these individually. And that's really crucial when it comes to the scale. Because if you scale with one, you have to make sure that all the other ones are scaled to the exact same as well. So notice how these are all, it's all wonky now because the scale is off. And so if we move it back to, if we go to two, then the perspective is a lot better. But this is how you can navigate if you don't want to use these tools. And for the most part, this is all that you need to know right now. Another thing, maybe two. You can create new scenes by right-clicking and going down to all the different new scene. So a new scene would be right there. If you wanted to add a script, you can add it here. If you wanted to add in order to just keep yourself organized, you could do that as well. But other than that, that's pretty much all for how to use Unity. Again, we'll dive deep into this with a lot of the tutorials that we're doing. And so you'll get more familiar with it as you use Unity a lot more. For me, it took a little while to get used to it and get used to the interface. But now I know it like the back of my hand, at least for a lot of the stuff that I tried to do. And so what that will call it from there. And let's move on to in the next videos.
8. Vuforia Engine Introduction: And this video, we'll learn how to install Vuforia and learn a little bit about it, will go to developer dot vuforia.com will also download the SDKs for it, will register for an account if you need to, um, also good development key. So one of the things that we need to know about is Vuforia. Vuforia is the AR engine that we're using. And it's an SDK that you can download. And it pretty much works with unity to bring about augmented reality. Vuforia is really great for image tracking. Vuforia is great for a lot of different things. And that's mainly what we're going to be using for a lot of our Augmented Reality stuff. There's others out there like AIR foundation, AR Core, a market. Vuforia actually utilizes air corn market because air corps for Google, Android, and air kid is for Apple in iOS and they use a utilizes it so that you're able to take advantage of these different technologies across multiple devices. And so with Vuforia, the great thing about it is that you could have one project that you're working on and you could, you could end up building it on an Android device at the same time. You wouldn't have to change much. And that's really great because you can't control what devices your consumers are, your, the people around you are using, but you can control how they are built and that experience. And it's really great. And so what we'll do is we'll go to vuforia.com. And it will take you to the Vuforia site. And so this looks kind of crazy. It's made by a company called PTC. And what we can do is we can go to join developer program. So what we do is we go to developer dot vuforia.com. And you'll see the first thing that shows up is that where you need an engine, 9.1 is available and has resolution on popular Eric or devices. Add some more models, stability and tracking. If we go to the homepage, which this is just gives us a little bit more stuff on, on what we could expect. We'd go to pricing. One of the things to pay attention to is a Vuforia. Can they do have pricing available? Fear start to expand out. So for now, we don't have to worry about that. But if you're running a small business or for students and you're trying to develop apps for yourself. And you're trying to put them on the app store. It's good to look into their pricing plans because there are different than unity, but they allow you to develop up until a point. And so when you start making money. They're gonna start knocking. But other than that, you know, we could play around with a whole bunch of different cool apps. And they have different licenses and all that stuff that you can play around with. In order to download the SDK, you can do so by choosing either Vuforia engine for Unity project or if you're only doing Android development and you used that for iOS, right now we're only going to use the engine project for this. And there's a virgin of the package that is available in the resources for this project as well. And so you can go ahead and check that out if you'd like, or you can download it from here. And so what you're going to need to do is you need to register. And so go ahead and register. If you aren't of age or you don't feel comfortable registering. I do have a development keys and all that stuff available. And so if you don't register, it's not the end of the game. If you're just trying to learn all that stuff. But if you'd like to, you know, your own development can everything you can do. So once you click all that stuff, you create an account for me. I already have an account and so I'll go ahead and add to it. And so when you do that, it brings you up to your licensing manager, and this is in the Develop tab. And so in order to get a development key, you can go ahead, just click Get development key, you label the key. So say this will be testing device. And then I click the checkbox. It gives you, you know, you could do 1000 downloads per month, all that stuff. And you could click OK. Right now I'm using my Air Test feature key for a lot of my development. And then when you're ready to actually deploy an app, you can actually buy a key. And by buying that key, it allows you to go home into difference out. So target managers, this is where like the databases come in into. We won't be using any of this stuff. And so I'm not gonna go too deep into it, but just understanding how Vuforia works. This is how you do cloud recognition and this is how you do a database recognition for image targeting. Outside of that, you don't really have to worry about it. So you can go to Add database and you can do for a device, we can do for the cloud, or it could do for Vuforia, or for the blue marks. And the boom arcs are just sort of like QR codes that are special to, of euphoria. And so outside of that, that's pretty much all the stuff you need to know about what Vuforia. And for this we'll mainly be using image targeting and ground planes. And with image targeting, we will be doing user or instant image starting. So we won't actually be using a database. We'll be creating stuff and then downloading it directly into the app and working with those images. And so now that, that is now that we have covered Vuforia and the engine, feel free to use the development key that we have and add those to your projects and download the packages, get those packages ready and kinda go from there.
9. Unity for Vuforia and AR: So we're going to set up our Unity game engine for our AR experience. So again, if you're familiar with the last video, we're going to open up community has set up a project by naming the project using the 3D settings and make sure to use it at 20.319 or above as a version of Unity. When we opened up Unity, we're going to set up the build settings. We're going to switch the platform to iOS or Android. If you're building for an iOS device, like an iPhone or iPad, use a Mac computer to export that build and choose iOS and build settings. One thing to note is you cannot build iOS apps to an Apple device from a PC. So you're going to need a Mac. But if you're only working on Android, just choose the Android platform and the build settings. And you could build Android apps from Macs or PCs. Be sure to switch your build settings before you begin the project because it will really, really save you some time. So we have the unity hub open right now. And so if you're not familiar with how the unity hub looks, make sure to check out one of the other videos that goes over unity and how to install it in the unity hub. But once we have that, we'll open it and then we will go to new. So I'll just select new. Right now I'm running 2019 dot three, dot seven, F1. And so if you're using any other project files that I have, make sure that you're using. At lease between 19 dot-dot-dot F1. You can use a later version, but you can't use a version that came before the so you can't use six or five or 2019 or 20182017. So I'll go ahead and set up. We're just gonna have to wait a little bit. And we open up our unity. So now that we've got Unity open, one of the things we need to make sure that we have ready is before you start adding packages and before we start adding or images and stuff, want to make sure that we're using the right BuildSettings. And so we'll go over to File or go over to build settings. And the build settings menu will pop up. Right now it says Working on PC, Mac, Linux standalone, I don't want to use that. And so for me, I use a lot, do a lot of app development where Android, you could also do iOS, but with Android will go ahead and click Android and we'll go ahead and switch platform. Again, if you're using iOS, make sure you click iOS and switch platform. Only thing is that if you're working on a PC, you won't be able to develop an iOS app for Apple devices. On a PC, you can only build to a iOS device with a Mac. I have a Mac Book. I don't do that for a lot of my development, but I use it specifically for iOS development. And I've iPhone as well as a development device. And so for this, I'll be focusing mostly on Android, but the process is exactly the same in unity. And so don't think that you have to choose one or the other. Now, quite frankly, i will do a lot of development in Android. And then when I'm ready to push out a build to IOS, I'll just go to iOS and OS click Switch Platform. And so other than that, things are things that are about the same because it's the platform you will be using or the end. The engine that we'll be building Guard. Augmented reality stuff on is called Vuforia and it's cross-platform. And so pretty much works the exact same. But if you're curious to know the differences, make sure to check out some other videos on this that talk about the differences between IOS and Android and AR kit and AR Core and all those different things. And so with that, we will use Android and we'll click Switch Platform. Again. You could use iOS and click Switch Platform as well. And so it'll be importing all its settings. And the reason we're doing this right now is because we wanna make sure that it doesn't take forever to import the settings and switch it over. As we start adding more stuff to it. It will cause it'll just take a, it'll take forever until we don't wanna do that. And so as you notice, we have our little unity symbol right here. That means that we're actually on the setting and it says bill. And so if we wanted to go switch platform, we'd have to do that. What we want to go back to PC and Mac would have to slog switch platform.
10. Setup Vuforia for AR: In this video, we're going to dive deeper into the Vuforia SDK and how to use it for AR. In our Unity project. We're going to import the package from the resources or from the Vuforia website that you downloaded from. And we're just going to use import asset, Vuforia package and then update. We're going to open the package manager and update the Vuforia package to the latest version. Because sometimes the latest version comes out. After you downloaded that package. We're going to create a new folder for saints, were going to make a new sane and named the Seine and enter the same. By double-clicking, it typically will have a sample same. So you just want to make sure it's not in the sample scene. I'm going to make your own news saying, we're going to create a new folder for our image. We're going to import the drawing image into that folder. We're going to select and change the texture type to 2D sprite type. And the inspector, we're going to set up the license key by going to window before your configuration. And you can copy and paste the license key from your license key section. And then we're gonna make sure to turn off track device pose because it doesn't necessarily work for image targeting. If we're using ground plane, that will work, but not for this. So now that we have that done, we will actually add our Vuforia package and so on. The resources you should be able to find the Vuforia package, as well as the QB image which will be using. If you have your own images, feel free to do so as well. But if you have your own Vuforia account, you can use your own app license key, and you could download your own packages. I provide them in the resources just so it makes it easier for you to access this stuff just in case you have problems. But again, treat this as sort of practice in development. I do have a video that you can check out to follow how to set up your vuforia stuff. So now that we have unity set up for our Android development, we will go ahead and go to assets. And then we're going to go to Import Package and we're going to go to custom package. So after you do that, you click custom package. I will go to my augmented reality augmented drawing and I'll go to my folder that has my before you package, and I'll click OK. And it will pop up with a screen that talks about these are the packages and stuff that you need. It's gonna import the Vuforia engine. And so I'll click import. Then it's gonna say update. So I'll do that. Okay, and so now that we have that, you'll notice that in the packages we have Vuforia engine AR down the packages. And if you go to Windows, you'll notice it says Vuforia configuration. And if you really wanted to check, you can check in the package manager. And we could scroll down where it says Vuforia engine AIR. And notice how we can actually update this. And so I will go ahead and update that right now. So if you're using the package that I provided in the packages, make sure to update it to the most recent Vuforia package. So we'll go to update and we'll just update to 1.79.1.7. If you're looking at this at a later date, then it might be further along. So it might be at ten or it might be at 11, or might be at 9.5. at the current date. This is published on March 18th. So we'll go ahead and we'll just click Update. And so now that we have that, you'll notice how it has a check mark right there. Again, nothing should change except for it's updated a little bit more. And you'll see that a Vuforia AIR is right there. And so now that we have all that set up, what we're going to do is we're going to actually create a new folder. So we'll go to our assets, will minimize this because we don't want to touch the packages. He touched that end, you mess around with it. It might mess up the whole thing. And so before we do that, we'll make sure to save. And so we'll go to Save and then we'll also save our project. Not really sure what the difference is between Save and say project is, but I always just try to make it have it. And so in this will create a scene, go into scenes. And we'll right-click and we'll go to Create, will go to create sane. And it says new scene right there. We will actually label it, will turn it into a drawing. So we'll call it AR drawing. I'll just double-click it to get out of our sample scene. Because it always comes up with simple things, but you wanna make sure to double-click it. Notice how it says. Ar drawing right here. So if we were in the Sample St. still, it would still say sample saying. So we'll double-click and we'll go into our AIR drawn. One more thing that we wanna do before we get started is we want to create a new folder. So create a new folder. And we'll call that folder images. And then we will. Yeah, so that's what we'll do. And so one thing that we can do now is we can go into images. We have our all of our stuff right here. And so we'll go ahead and use our QB image because I really like how that one looks and I feel like I'll get the best results because it's, so there's a lot of contrast with this one is cropped. There's a few problems with the wider, but I think the QB image might be the best way to go. And so what I'll do is I will actually just drag and drop and add that to the folder. And so you'll notice we have our QB image, the image this QB. And so what we'll do is we'll click it. And we want to go into our Inspector, which I have right here. And instead of it saying default texture type, we're going to change it to 2D sprite right there. And once we've finished that, we're going to draw, we're going to scroll all the way down and click apply. And notice how it changes it so that we have a arrow. And that is actually our 2D image. And so now it's a 2D image UI, 2D sprite and UI. And so what this one it says sprite, it means typically for 2D stuff and for user interface stuff. And we can talk a little bit about the user interface stuff a little bit because we will be making that stuff as well. So one last thing that we want to do is set up our license key. And so we'll go to Window, we'll go to Vuforia configuration. And you'll notice how we have a section for our license key, App license key right here. And so what we'll do is we will, if you already have Vuforia set up with an account and everything, cool, you go into your vuforia, you could set that up and I will show I show you in other videos. But with this, we have a Vuforia license key. We'd go ahead and double-click it. And I have a development license key that I use for all of my teaching courses. And so this allows me to actually do some of the features that have been 40 house. So I will actually copy and I will paste it right here. And if you needed to actually add a license key, you can just click this button and it'll take you to a bison ski button. And so one thing that I wanna do is make sure that I turn off track device pose. By turnout track device pose, it will disable some of the functions that are needed for the ground plane, but we won't be using the ground plane, will actually be using image targeting. And image targeting doesn't necessarily work well with a ground plane. Optimize functions. So outside of that will keep everything the same. And we will move on.
11. Setup AR Workflow: So now that we have unity setup and we have Vuforia in our project, it's time to set up our AIR workflow. And this is crucial to begin with because this is going to be the foundation for your AR experience. So we're going to set up your sane to build our AR experience. First I'm going to add it AIR camera. And all you need to do is just right-click the Hierarchy, select Vuforia engine, and then select AIR camera. Delete the main camera and the same. Add an image target by right-clicking the Hierarchy. Select Vuforia engine, and then select image target. We're going to set the type of the image target to from image and the image target Inspector. Then we're going to select the drawing image from the image selection box. Make sure that the image that you have for the drawing is a 2D sprite. Otherwise we won't show up. There. We're going to set the dimensions in the Advanced tab and make sure that it's in meters. And so if it's 8.5 by 11, that's an inches. Find a way to convert it to meters. It's typically going to be a lot smaller. And finally, we're going to add a 3D queue. We're going to make that a child of the image target game object. So in this video, we'll be talking about how to set up our Augmented Reality workflow. And so again, we want to make sure that we're in AR drawing. That's our scene. If you want to delete the sample senior, can, I tend to not want to do that, but that's just personal preference for me. And then from there, what we're going to do is we're actually going to start working in our scene. And so give yourself a good space in the scene view. I tend to have my game view off to the side. I work with a lot of animation. So the animator and the timeline, you're always there. And the hierarchy is always something that I need to make sure to have full access to. So our tend to have it in the center where you can always change your layout if you like. And I'll actually Right-click. I'll go to Vuforia engine and I'll add a AR camera. So when I do that, you know, this at a GameObject appears and that we have an air camera. So looking at their camera, we have it, we have a tag of a main camera and we have some other stuff like the device, the target I, all those things, we won't really need to worry about that right now. But I could go into this stuff a little bit further if if need be. But for the most part, you just need to know that we have AIR camera. So one thing that you need to make sure to do before you move on, you need to get rid of the main camera because you don't want to have a main camera and an AR camera. So it will do is we will get rid of the main camera and by right-clicking and delete. And now we have our main camera gone. And since the we have a tag of main camera here, this is going to act as our main camera now. And so this is actually the Device camera that we will be using for augmented reality stuff. And it gets really interesting when we start deploying builds. But yeah, we'll be using our air Kamer. Next thing that we need to do is we need to add an image target. And so in order to add image target, we just right-click. We go to euphoria engine and we do. Image target. And Vuforia has a lot of interesting things that you're able to do with image targeting. One of the things is that you can use your own images to essentially call upon them for augmented reality stuff. And so you'll notice that when we have image target behavior script and we have our type. And so we could use a database which are images that you upload to the Vuforia database that recognizes them. And then it allows you to call on those images from a downloaded downloadable data base. And we go over that in a, in another video. Or you could have user-defined images, which are images that you define upon Runtime. And so instead of us making our drawing and then scanning come in, you could actually make that drawing and then not scan it in. And then when you have a phone, we have the app build ready. You can use the user-defined to scan it on your phone in real time through the app rather than through unity. And then cloud rico is if you have a database of images that you upload onto a cloud service like the Vuforia cloud service. And so you don't have to go through the process of creating a whole bunch of images and uploading them into the app. You can upload them to a cloud service and then through the internet you can call upon those apps and call upon those images. And so with this, we're just going to use from image. And, and then the next thing we're going to do is click select. And then we're gonna go to QB image. So double-click that. And then one of the big things you need to pay attention to as an advanced, we'll click Advanced and you wanna make sure that the height and everything is the right way. And so the width and the height are going to be in meters. Make sure you understand that because if I were to click five by seven, that will be five by seven meters. And that's a very, very big image. We don't want that. And so this will be about 0.1 to point to say yeah. And so with that, we can double-click. Our target image, will just double-click that and will click f. I guess I didn't work. I guess we'll just scroll into the image right there. And I'd like to press ALT and just rotate that image around. And so I'd like to have a better image. So now that I look at it, I'm able to zoom out. If you want to get rid of this camera icon, you go to gizmos and you just select yes, nos, and it gets rid of it. If you want to bring it back and just select gizmos as well. Get rid of it by selecting it again. And so use the navigation buttons and you could make a little bit easier, just like that.
12. Add 3D Object to AR: So now we're going to add a 3D object to our image target. We're going to do that by adding a 3D cube to the image target, by right-clicking image target in the hierarchy, we're going to select 3D object, and we're going to select Q. Once we have the cubed, we're going to scale the cube down to 0.08. And that's going to be a meters. And so 0.08 wisely be to scale that we actually want. Next, we're going to raise the cube up to half of its size. So because it's 0.085.08 is 0.04 and we're going to raise it 0.04. And you'll see why once we begin the project. So what the image target, all of this is going to be as our ground plane. This is something that we're referencing. So when you use this in the app, the app is going to recognize this image and it's going to call upon whatever it 3D structures we are instantiating are putting on top of this. And so it's not actually going to show this, it's going to show the 3D stuff on this. And so in order to do that, first, you wanna make sure that you're saving it, saving and saving the project. The second thing is you're going to right-click. And because it's QB, we're just going to add a cube. So we're going to right-click. We're going to add a 3D object called cube. And we're just going to put the cube there. And so when we zoom out, notice it's huge. And so all we're gonna do is we're going to scale it down. So scale it down, scale it down, and scale it down so that it's not that big. So I'll go to a different perspective. And I will actually lift this up so that it is sitting on top of it. And so as you can see, we have a cube sitting on top of our thing. And so with that, I'll go ahead and save and save the project.
13. Test AR Image Target: Now that we have our base for our AR experience, it's time to test our app. And so first we're going to set the aspect ratio to the proper size and our game view because we want to make sure it matches the screen size on our device. There we're gonna select Play to test out the AR. If you have your webcam, all you have to do is just place your camera over the image that you drew and the AR should appear. And so now that we have that, we can actually test out how we're doing with our augmented reality. And so I'll go over and before I tested out, I want to make sure that I have my aspect ratio. And so I tend to do 1920 by 1080. You could change it to a whole bunch of different things. But I like to have 1920 by 1080. I will just make this a little larger right here. And when I click Play, I should have an option to see if my augmented reality is working right now until I'll go and click Play. And they should be able to see me. Hello, hello, hello. I will take this and I will shine it over my drawing. And what do you know? We have QB are excellent drawing. And it is, it has a cuboid. And you'll notice that in the scene view, we have, every time we move the Q or move our camera, we're able to look at the queue. It's crazy that you that we have VR augmented reality. I can rotate it around. It notices all this stuff that we wanted to notice. And so I'll go ahead, click Play again. And so far that was a success. It's all now that we have our cube, we are able to, we created a image. And after we created the image, we added the Q2. And we were actually able to instantiate that. And all instantiate means is just making it appear. That's all it means is kind of buzzword. Sounds pretty fancy. And all that ball it is saying is that there's a 3D model or a 3D object or game object is just going to appear. And so that's what instantiate mates. So again, we will say that we will save the project. And now time to add some, some nice bells and whistles to this, because this should be fun.
14. Make a User Interface: Now we're going to make the UI for the app. We're first going to start by adding a canvas and some panels. And that's just a simple as right-clicking on the hierarchy, selecting UI and this selecting Canvas and panel. We're going to set some canvas scalers to scale with the screen. We're going to set the reference resolution to 1920 by 1080. We're also going to set the panels to the bottom of the screen. Set the alpha color too opaque gray. Set the center anchored to the bottom. Add some sliders for rotation and scale. And then we're going to add some text to label the sliders. Okay, so now that we have our cube and actually make the smaller again, give myself a little bit more room to work with. So now that we have our queue working on our image that we drew, the next thing that we wanna do is we want to add some functionality to it. Because what's the point of having augmented reality with 3D models if you can't play with it, right? And so we're going to add a function to make the, the cube rotate. And so in order to do that, we're going to need some, we're going to need to use some code. But a lot of it is drag and drop. But before that, what we're actually going to do is create the actual user interface for. And so we'll create the user interface. So when the user shines the phone over the screen, buttons are gonna pop up for you to actually interact with it. And so we'll do that by right-clicking. And we're going to go to UI, and we're going to go to Canvas. And this is the only way that you can have UI buttons in Unity is by first creating a canvas until we could actually close that, shrink it. So we don't get confused because I often get confused. And it comes with the event system. And so what I do is I'll right-click, not right-click, but after we right-click and we have our canvas, and then we'll right-click under that. And we will have a panel like so. And in the Canvas will change the canvas to scale with screen. And we'll change that to 1920 by AT. And we'll add our gizmos back on so that we could actually see our canvas. And you'll notice we have a canvas there. And so what we can do is we can match it. So I tend to match it at about 0.5.5 right there to be safe. And so that's the height and everything. So 1920 by 1080 scale with screen. So just in case you have multiple screen sizes, often I forget that. And so I want to make sure that asks a different devices have different screen sizes. And so you just wanna make sure that you are able to scale up the screen. What did we added a panel. So we'll have that panel and I will actually drop this panel down. So we'll click this a rec tool. The rec tool allows us to do some modifications. And so we'll bring the rec tool down like so. And I will actually make the panel, we'll go over to the color section right here for the panel, go to the color. And you'll notice how there's this black bar here. That just means that all the white up into your, this is what their capacity is. So actually double-click that and we'll go over here to where it says a is a 100, this is the alpha. And so alpha is just opacity. So the closer it is to 0, the more transparent it is. And you'll see it over here in the Game view, which is the view that we see on our screen, on our phone. And I will actually turn it to 255. You don't want it to turn it to a 100 because it's not. The values don't go up to a 100, they go out to 255. And so if you go to a 100, it's still have some transparency. So I'll go all the way to 255, and I will actually give it a grayish color, a grayish color work. And so after that, we have our lovely little panel right here. And so again, with the panel, I will actually press Shift and Alt. And this will allow me to sort of anchored down at the bottom. Shifting what will anchor it to the bottom? When I go to this right here. So click that, I'll press Shift and you'll notice how changes. And then we'll have this center anchor. And this center anchor is exactly what we're looking for. So we'll click that and it'll go from side to side. So depend on, it doesn't matter what device you have or that a user is using. This will always go from side to side on their screen, and that's exactly what we want. And so from there, we have our base for our UI, will go ahead and save it and say the project. And again, you can reference it over here in the Game view just in case you want to make sure that everything is looking good. Until now that we have our base, our panel. We want to add some sliders. So you want to add a slider for our rotation and we want to add a slider for our scaling. So actually, Right-click on panel will go to UI and we'll go to slider. And what? If we double-click? And notice if I double-click on something, it will allow me to zoom in on it. And so when I double-click, I see that's very small. So what I'll do is I will actually do the scale tool and I'll scale it as big as I can get it. But understand that I need to have room for another slider and sell it. Then I'll move it down and move it to the side. And again, make sure to use this area right here to see if you have room. And so one of the things you need to pay attention to is because the slider is inside the panel. When we come over here, it is centered, which you'll see what this sort of clover. So it is centered on that. And so if I click Center or clicks Shift and Alt and I click that, it will re-center it. If I click Shift and Alt and press to the right, it will move to the right. And if I move to the left and to the left, left corner, right corner, so on and so forth. Right. If I wanted to scan across, you can do that as well. But what we're doing is just the center. And I'll actually undo that because I do not want it to be that big. And we will recenter undo all of that. So so again, it all should be, it all should be set up already, but just in case you didn't know it until actually with this round, make that available. And I'll call this, I'll call this skill slider. So now that I have that, I will press Control and D, Or you could do right-click duplicate. It's a skill slider. One will actually do this rotation slider. At that. Now that we have a rotation slider, okay, actually lift this up or better yet, because it's at the bottom. I'll actually lift the scale slider. And that one will be the one at the, one at the top. Last thing that we can do is we can click scale slider. And we're going to right-click. Go to UI, will go to Text. And now we have text. So we can move the text over. We can go into the text settings in the Inspector. I like to have the text go to the side. So it'll be right aligned and it'll be in the center. And then I will use the rec tool to sort of butted up against the edge of the slider. Make it a little bit smaller. Increase the text size a little bit. And again, keep it at rich text. And also best-fit, I guess bet best-fit always works. And then we're going to change this to scale. So I have my scale. And then I'll actually duplicate this. Drop that right there. You'll notice how the scale is still there. It doesn't actually move up against the side of this. So what we'll do is we'll just click 0 and adjusted down. So we don't have to change anything else because we already duplicated. Well, we can click rotate and we can label it rotate once and now we have scale and rotate right there. And so the rotation cider, that text is for rotate. And then for the scale slider, we have scale cider. And so all this stuff should be aligned and this is argued of user interface. So again, We'll go ahead and save it. And for the most part, this is our user interface. So all we're gonna do now is we're going to go to our qc. What you see. And we're going to start adding some, adding some bells and whistles to it. This is where the interesting part goes. The challenge for this section is spruce and GSC, your UI design. So feel free to play around with colors and custom icons. Maybe out of full screen overlayer, add an image to the slider buttons. Turned the boring into the awesome. So make sure to post your UI to the projects section so that we all can take a look.
15. Coding Make a Scale Script: Now this section is where it all begins. So this is what we're going to learn how to code. So first we're going to create a C-sharp script to add some scale to our AR content. We're going to start by creating a new folder and calling get scripts. We're going to create a C-sharp script and call it a scale slider. And that's gonna be two scalar slider. We're going to open the input script. We're going to open the script to input the code. And you can feel free to copy and paste the code from the resources. If you want to make the code yourself will first add code using the namespace. Using Unity dot UR. We're going to add three spaces under the public class. And within those three spaces, we're going to add a public slider and then slider, scalar. And again, you want to make sure that the capital letters are exactly how they are. And then we're going to add code under the void update section. And it's just going to be a transformed out local scale. And then it's going to equal new vector three. And then we're going to add slider scale and values for all three of those. Last but not least, we're just gonna save our code. Okay, so in this video, I will be talking about how to make the scale and rotate actually work on your cube. First, we need to do the scripts so that we actually have those functions. So what we see is that we are in our game view. It's all we're gonna do is first, we need to make sure that we stay organized. So make sure that you click acids so that you see of all the folders for assets. Then you're going to click create, right-click. We wanna click, right-click Create and folder. After you do that, we'll just name it Scripts. Technically you can name it anything you want, but I like to name it scripts so that I know that there's actually scripts in it. And so we'll go ahead and double-click that. And then from there, we're going to right-click, go to Create. And we're going to go down to create our C sharp script. So the sea with the pound sign and then script, that's C-sharp. And we'll call this scale slider. Until when you're naming your scripts, you always wanna make sure it's one word. And what I like to do is I'll have the first letter of each word capitalized. And if I do that, then I'm able to distinguish which words are in it. But you wanna make sure that it's one word. And again, you want to make sure that you name it right the first time, because if you don't, you're going to have to redo it because it messes up the script. And so we'll call it slider script and we'll name it right the first time. And then we will double-click it. And now that we double-clicked it, we open it up. And I'm using Visual Studio Code. You might be using regular Visual Studio. I wouldn't worry too much about it. They all do the same thing. I just like this one better because it has a cool interface and cool colors. And so one of the things that we're going to do is we're going to look at our namespace. So in our namespaces, which is this area right here, we want to add a new namespace. And so what we're gonna do is we're gonna type man using Unity engine. And then we'll do period would do u i. And then we're going to have a semicolon. And so what this means is that because we're using the slider UI, if you, if you recall, we did right-click and we went to UI, we did slider. We actually need to use the Unity UI, essentially library that is in unity. And so in order to do that, you actually have to call upon it specifically what the namespace. And so all this does is say that, okay, what this Grip, we're probably going to be using the UI elements in Unity because there's like hundreds of different things. And in order for you to, in order for humanity to process that, you have to call it directly. From there, you'll notice how it says public class, and this is the exact name as the script that we have. And so if you misspelled it, and then this would be a different name. And this will be a different name. And you don't want that because it's gonna mess it up. And we could go through, I think, of other videos talking about how C-sharp structured and laid out. We're not going to go over that because we don't really need to know because we're only doing one line of code for this. And that's the best part about it, is that it's only one line of code and it gives us a lot of great functionality. And so with that, we are using the scale slider. And we're gonna do that in the void update. The reason we're doing the void update is because it refreshes once per frame. And so normally this is running at about 24 to 30 frames per second. Maybe 60 frames per second. Probably doesn't need to, but maybe 60 frames per second. So every frame this is going to update, whereas in the Start it only updates once and it updates at the beginning. And so if we put in the start, we will lose all our functionality because it's in the update. It's constantly calling for this to see if there were any updates. And so that's how we're able to see things in real time. Because we are adding a value and then that value changes. And so what? We're going to go up to the top, I like to do three plus signs. Again, we're gonna go up to the top under public class. And I like to press enter three times so that I have a little bit of space on the top and the bottom. And what we'll add is public. And then we'll do capital S, LIDAR. Oops, and I don't want that slider. And then I want lowercase l. I'll do lowercase S, LIDAR, and then I'll actually uppercase the next es, a l. And then I'll do a semicolon. Again, you wanna make sure that every line of code that you do, you wanna make sure to have semicolon on it because that tells me when to stop. And that allows you to now have errors in your code because that often happens, especially for me. And so we're using public because we want to be able to access this as a public variable. And so this public variable is something that we're going to utilize in very explicitly in our code in order to get the functions. And then the slider, that's just saying that we're using the slider. And then this is, we're going to call this slider scale. And so sliders skill allows me to reference this for our slider, which is accessible as public. And so from there, I'll go down to void update. The first thing we're gonna do is use Transform. And we're gonna use dot, local, locale but local lowercase and then capital S CALEA. We're going to use the equal sign and then new vector three. And then we're going to use quotation marks. Quotation marks. Then we're going to use parentheses and are going to say slider scale, which is what we're referencing right here. So slider scale, value, which is the value that we have for that specific variable. Then we're gonna use slider scale again, dot value. And then slider scale again. And then outside of the parentheses, we have a semicolon. So all this means, and I'll make this a little bit bigger so that we could actually say it. So all this means is that when this is modified, it's going to be modified in the transform scale position, which is just scaling. And we're gonna do a new vector three, which means that there's going to be a new value for the x, y, and z axes. There's gonna be a new variable or a new value for the x, y, and z axes. And that's going to be updated in real-time. And so because we have a slider scale value in the X, the Y, and the Z. And they're all the same thing. It's going to scale in all those different directions at the same time. So if I only had a scale in the y direction, I would have a 0 here and 0 here. Only scale in the y direction. Well, you don't want that. We wanted to scale in all directions. And so new vector three would just be, you know, it's going to be a new X, Y, and Z based on the transform. So from that, we're going to click save. And that is our first coat.
16. Coding Make a Rotate Script: In this video, we're going to learn another C sharp script, but this one is to rotate our air content. And so like the last one, we're going to create a C sharp script. We're going to call it rotation slider. And we're going to add that to the Rotate slider. We're going to open the script and input the code. You can feel free to copy and paste the code from the resources. Or you can write it out. If you write it out, we'll add the namespace using Unity engine wi. Don't forget that semicolon. And we're going to add three spaces under the public class. We're going to add public slider with a capital S And then rotation slider what the lowercase r and a capital S. And then we're going to add the code under the update method. And it's going to be transform local Euler angles where the e and the a are capitalize. And that's going to equal a new vector three in parentheses, 0 comma rotation slider value comma 0. Different. Gonna finish that with a closed parenthesis and a semicolon. After you're done with that code, I'm just going to save it. So the next code that we're gonna do is our rotation slider. And so we're gonna do the exact same thing as we did for the scale slider, except we're gonna do it for a rotation. So there's gonna be some slight modifications, but this one should go by a little bit quicker. So again, we will right-click create new C-sharp script and we'll go rotation. Slider. Again. You wanna make sure that you label it the right way first. Before you try to open it. If you mess up with any spelling or anything, just delete it and start over again. Again. We're gonna double-click and we're going to open up our script. And Visual Studio. So much like the scale slider script, we're going to go using unit T, engine and semicolon. And then we're going to go down on your public. I always like to add three interspaces. And I will go to the center one. And I'll go public. Slider again because we're still using the slider. And it always wants to you that we are using a slider. And then I'll call this rotation all lowercase rotation, and then uppercase S LIDAR. And then we'll go to our void update, which is gonna update every single frame. We're going to go transform dot local. And this is where it gets different, where it's local Euler angle. So E U, L, ER AN LES Euler angles. We're gonna go equal. And then again new vector three. And we're going to have our parentheses. And so this is where we are only going to be rotating in one direction. And so like the skill, I mentioned that when we're scaling, we can scale in all different directions. But when we're scaling, we want to make sure that all the directions are scaling at the same time so that we have a good proportion and our scaling. But with this one we only want to rotate around one axis. And that one axis is the vertical axis. And that vertical axis is actually the Y axis. So we have our x-axis which goes left and right, or side to side, we have our z-axis was goes forward and back. And then we have our y axis, which goes up and down. And we want to rotate around the up and down axis. And so what that will go 0 for the x axis clue don't wanna rotate. There. Will go rotation. Slider value because that's the value that we want. So rotation slider value for that one. And then we want 0 in the z. And then from there we have our semicolon. So we'll go ahead and we will save it. And that is our second script. That is all the scripting that we need. And so once we're done with that, go back to our scripts. And you could always check the console to see if there is any bugs. If there were any bugs a, they will show up as either as red. But we don't have any bugs because we are doing good with our scripts. So that's great. And so now we'll go ahead and save our project. Save our project, and save.
17. Test Sliders and Scripts: Now that we have our code, it's time to add the scripts to the sliders and test our UI. So what we're gonna do is we're gonna create an empty game object. We're gonna set that as the container for a 3D object and our sliders. And now we're gonna do is just right-click it under the image target and select Create Empty. We're gonna name it whatever name you want. To place the cube and the empty container. There. We're gonna drag the slider scripts onto the empty container in the inspector. After you do that, we'll add the scale slider and the rotation slider game objects into the reference area of those sliders scripts. Then we'll make sure to change the default slider values. So for the rotation slider, it makes sure the minimum value is 0 and the maximum value is 360, because that's for degrees. For the scale slider. The minimum value will be 0.4 and the maximum value will be three. Feel free to play around with the scale of those if you'd like. And then after that, we're just going to save our project. Okay? So now that we have our scripts done, time to put everything together, we're almost there, almost there. And so what we're first going to do is now that we have a rotation and our cider script, we have our text, we have our slider. We will go to our image target M1. Of the things that I often do is I don't try to put scripts or anything on the actual 3D models. What I'll do is I'll actually create a container and I'll put the scripts on there. And by putting the scripts on the container, I'm actually able to manipulate the models a little bit better. It makes things a little bit easier because when you actually have 3D models that have animation on it and all those things, it gets really dicey. And so what I'll do is I'll go right-click on the image target. I'll go to Create Empty, and I'll just call this 3D container. Just like that, three in container. And I will put that on the duty container. There you go. And so when we look at the inspector, willing at the queue, will actually do 0 that out. Excellent. I don't wanna do that. Keep everything exactly how it is and just make sure this is 00. And then we will actually go and drag the rotation slider script up, add that, and then go to drag our slider script o. So you'll notice some interesting things. So our rotation slider, there, it says none for the slider and for the skill slider and says No for the slider, Those are the public variables. And so if we go back into the rotation script, because it says public here, that is why we're able to see. That rotation slider. And so all we have to do is go to wear a rotation slider is, which is this one. And if you turn it often on or a look back up. So if you turn that off and on, visitor rotation slider will go to our 3D container, will just move the rotation slider, drag and drop. And now we have a rotation slider will do the same thing with their scale slider. So drag and drop. And we have our skill cider setup. And so now we have all the components done that we need for it will go ahead, save it, save the project. So before we could actually get the sliders and everything set up, we need to make sure that we change the variables for all the sliders. And so we'll go to the rotation siding. And normally we have our values from 30 to 360. So with a rotation slider will actually change it to 360 as the max value. And we'll have it at home numbers. And so we go to 360, or it can go to 0. Just keep that at left to right. Then what the slider, this is where it gets really interesting. So we want to have it at, wanna make sure it's at one right now. And we can bring it up to about five. Let's say, let's say we wanna 0.4, okay? So we can go from 0.4 all the way to five. That's pretty big. So you, so we might say, we'll say three. So 0.4 to three. And we'll just say this stays at one. Like so. And so now that we have our slider scales and everything, these are the values that the script is going to be calling upon. And so when it says for the rotation, we're looking at the value of this, that's going to be the slider rotation. And so because it starts at 0, we'll say it starts at 115 degrees. So that will be the value that shows up for this right here. For skill, you'll be a little different. What scale? Because it's going from 0.4 to three, we're starting at one. So all the values for the slider scale would be at one. Okay, so before we get everything set up, we will go ahead and make sure that the scripts are actually on. And then we'll save say the project. So make sure that the scripts are on. And you'll see that by this checkbox, X only had them off. And then make sure that the cube is under this 3D container. Because if it doesn't, if it's not under it, then you won't see any of the sludge scripts. And after that, we'll go ahead, click play. We'll get our camera. Shine over image. Like so. It'll show up. And then we could play around with the scale. As you can see, it gets big and small and rotate. So actually make it bigger and big and small with the scale. And then rotate it. But the rotation slider, just like that. And so now we look away or you can see where you can see the image here. So we look over here, big and small, but the skill level of rotation.
18. Add Animation: In this video, we're going to learn how to add animation to our AR content. And so we're first going to add a timeline by just going into Windows and sequencing. And then timeline. We're going to select r cube and the hierarchy, and we're gonna create a timeline on it. I'm going to name it. And we're going to lock the timeline by making sure to hit that lock button at the top right corner. And on that timeline we're just going to select that record button. And this is where it gets really fun. We're going to move the model and add our first keyframe using the Transform tools. And we're gonna go to the last key frame, and we're going to place that same keyframe on it. And that's just going to be on the timeline. And then the other key frames you can position on the timeline and create movement using the Transform tools. You get add rotation, could add movement on the z axis, x axis, or y axis. Just have fun with it. And when you're done, you select that record button again and we stop recording the animation. And so one of the final things that we can do when we're talking about adding features to an app. I like to approach this from a Creators perspective. Creator. You know, we're talking about using art and using augmented reality and using technology. And so how can you be creative with augmented reality and add extra features that make the experience more interactive, more engaging. One of the things is adding animation. And so we have user controls already. So the last thing that we could do is add some simple animation in Unity does really, really well with simple animation tools. And I'll tell you about this. First thing that we wanna do is we want to make sure that we have access to our timeline. And so what we can do is we can go to window, we go to sequencing, and we select timeline. And we will actually go to the timeline. And we can click on the 3D Q. And from the 3D cube, we can go through and click Create. Someone will click Create. It allows us to create a new Timeline. And we'll go ahead and do that. And you'll see we created timeline called two-time, called cube timeline. And so from there, we don't need to pis to be that big. Scoot this down a little bit more. And when we create a timeline, it will create a cubed 3D model. It creates a Animator. And that animator right here allows us to animator object. And so what I'll do is I will actually lock that. And so if we click out of it, it doesn't go away. And so from there, we want to make sure that we have I think we think we're good right now. I think we get I believe we're good. So the next thing that we need to do is we need to actually animate some stuff. So I'll give myself a little bit, a little bit more wiggle room, zoom out a little bit. And so the way this works is this works on a timeline if anybody's familiar with animation. And so all we will do is we have our cube selected and we have the Q animator. And so what this, so the next thing that we wanna do is with r cube animation track. We want to essentially start the animation first. And so this is how we're going to be recording live. So go ahead and click the record button and it will say recording. Wanna make sure that we have our cube here. We're going to select it. And then the first thing that we'll do is we will just put, hit 0. And the first thing that we're going to do is we're going to actually do a little bit of, do a little bit of motion. So we'll just move it to the side. And then we will click 0, just so we set an anchor point right there. And what we'll do is we'll go to about 360, frame 360. And we can add a, just another, we just add another keyframe. And so what we can say is go to the side. Oops, go to 360. Click 0. We go to the side, and then we click 0. So we have our start and our imposition. So with animation, we want to have our start position and our imposition. So now we have that will go to frames, so we'll say frame 90. And we will move this to the side. You'll notice it creates another keyframe. Then we'll say, we'll go to frame 110 will go up. And we'll go yeah, we'll go, we'll go about we'll go there. And then at frame, now about 300. We'll have it go to the site. And we can always change these when we're done recording. But essentially, this is our animations starting, goes to the side, up, down, and the backup just like that. So now that we have our animation, we'll go ahead and just click that to stop it. And if you wanted to modify any of it, you go through Double-click. And after you double-click, you're able to change any of the keyframes. So if we wanted to move the keyframes forward like that, wanted to move these keyframes over to the side a little bit more, space them out. Give it a little more breathing room. We could do that. And then we close it and notice how it updated. So if we wanted to actually move the keyframes out a little bit more, we can do that like so. And now there we go. So the next thing that we can do is we could actually apply transforms to offset. All that should be good. Yeah, well that should be good. And so actually I'm going to delete this and to actually delete this. So when we click, play, goes up, down, and back to the other side. Perfect. Just like that, I like. The challenge for this section is, have followed that animation. See how complex you can make that animation. Explore the Transform tools and the timeline to make a one-of-a-kind animated asset for your 3D model. It can be as crazy as wild as you alike. Even play with the scale because actually be really, really interesting. And then pulse your animation to the project section so we can all take a look.
19. Add Controls for Animation: In this section, we're going to add some UI controls to the animation so that we could have done with it. You're going to first start by adding a UI button to the Canvas, just right-clicking that panel, selecting UI, and then select a button. Position it in the perfect area for you. And then we're going to name it. Then we're gonna format that button to make sure it's interactable. Because if it's not, it doesn't matter if we have a button or not if we can't use it, we're gonna give it some color when it's pressed. And we could do that in the Buttons section of the EM spectrum. And then on the cube. On the cube, we'll disable the play on awake so that when we set up the error experience, it doesn't start the animation. And that's in the play director. On the button, we'll select the plus sign on the onclick section. Will drag the cube to the button onclick area. And then in that function drop-down menu, we're going to go to playable director, and then we're going to select play. And it should have parentheses around it. And that's all we need. So the next thing that we will do is we will add a UI button and so on. Or to add a UI button again, will go back to our canvas. And we'll just add a UI button down here. So again, We'll go to click panel. We will right-click UI. We'll add a button. And then we'll just move that up. So let's kinda small. So we will go ahead and make it much bigger. And you can see how big it is on the side. But we'll make it big. And now that we have a big, we will go into the button. And we'll go into the text. And we'll call this play. Just like that. It's called Black something symbol. So one thing about the Button is that you can add a little bit of reactivity to it, which is great. So what the color tint. We will make sure that it's interactable, which should be by default. And when we have it pressed, we'll say that we wanted to be like pink or whatever. And so when I expressed, it will turn red or pink. And so we'll go ahead and save it. When we click play. Not going to test any of the AR functions, we just want to click that it plays. And then we'll click OK from there. So now that we have that setup, now it's time to pair r cube button and our animation. So we'll need to go to cube, will need to say one awake. We don't want it to play. So we'll click that off. But we wanted to play the timeline. And we want to press play on the timeline. Once. So we'll go to our button. Once we click our button. If I can lower the timeline, we'll get some more room to see things. So when we have our button, we'll click button and then we'll scroll down to onclick and we'll click a plus. So what the onclick? We'll take r cube a. Don't want to click it because it goes away from it. But you want to click and hold so that it holds. Don't release the hold. And we're going to just drag it over to where it says none. And so now in the NOW function, we can go down to animator and we could go to play. And we want to click start playback. Right there, click start playback. So we'll click start playback. And notice how three much play the timeline, essentially. So we don't want it to play, we just want the animator to start playback. Or actually now. So I actually made a mistake. So one of the things that we, so once we click, once we move the button over, we have our queue button. So we're gonna go down. And even though we have animator, there's nothing in the animator, there's no animator controller. We're actually going based off of the playable director, which is the cube timeline and timeline asset, because that's where animation is. And so what we're going to do is if you're not familiar, you go ahead and click play. And it plays based off of the play directory. Not any other animation. And you'll play ones would digit. So from there, we wanted to play it again. So I click Play does. And we're pretty familiar with animation. On the button, we have the cubic centimeter. We wanna make sure to go to the play director. And then we wanna go to play right here. So we'll click play and it'll be playable director dot play, which should be this right here. And so we'll go ahead and test. It, will just click Save, Say project. And so if we click the play button, that should play right there. You'll play once and they'll go back. So now that we've tested that, now let's try that in real time. So we should have it there. And then when I click play, what do you know? Goes up, down and around. So how about we rotate it and then we click Play. Oh man. So how about we scale it, so we make it smaller and we click Play. And then we've rotated to. So now this is ultimate interactivity. He would go up, down. And last one to play with it. We'll do a little bit of scale and rotation like that. And so with that, we turned our amazing art piece into a interactive art piece using scale, animation and rotation.
20. Build the Final AR App: Last but not least, it's been a long journey, but it's time to build that augmented reality app. What we all been waiting for it. So we're going to open our BuildSettings by just go into File and build settings. We're going to add the ARC and that we're working in to the scenes. And Bill, you've got to make sure to do that. Otherwise would have we built, we won't have our error saying we're going to select Player Settings. And the bottom left-hand corner, we're going to change the company name. We're going to add an app icon. And you could do that if you like. Otherwise you have the default icon, but I kinda like my own. Then we're going to set the resolution to portrait mode. We're going to add a logo and the splash screen. And we're going to preview it to make sure it's nice. And they, if you have an Android device, you want to set the minimum API to 26. And for iOS, you want to set the minimum version to 11. And that's because augmented reality on mobile devices is not supported on every device. And so there's a minimum level of device application that these phones actually support. And so 26 for an Android and 11 for iOS is the best way to go. Lastly, drawn an Android device, make sure to set the memory to external. And then when you're ready. And to build to the device. For Android device, you'll have an APK. And then for iOS, you build directly to that device using Xcode. And so more going you're naming conventions if you like, and kind of go from there. So in this, we learned how to code a little bit. We learned a little bit of animation. We learned a little bit about the UI and user interface. We learned about drawing. We learned about how to combine all that with augmented reality. And now we'll learn how to actually make an app. So what this demo, we will be learning how to build an app with Android. And so one of the things that we need to do is first go to Build Settings, see which one that we're using. Again, we're using Android. One of the things that you need to do before is that you need to add the open scene. We don't add the open scene. There won't be any scenes built and you won't see that experience. And so what we can do is we'll add open scene. And you'll see it says a drawing. And so from there, we'll go to player settings. We'll click our player settings. And those will come up with the project settings that we want. And some of the things that we need to do. So for this default company, utopia Studios, if you have a chance, make sure to check out Utopia studios if you'll like. Utopia studios. I also have a specific app, APK icons. So I'll actually just drag one in to the project file. And if you remember, I need to turn that into a 2D UI. And I'll click Apply. And then I'll go into 2D textures. And there we go. So ER, drawing app for by Utopia studios. And then I'll go through and you kid play with the presentation a little bit for this one, I want to make sure that it's a native aspect ratio and that I want it to be in portrait mode. I don't want it to be on landscape because my UI is in portrait mode. So I only wanted to be in you in portrait mode, so I'll do that by resolution presentation in orientation, default orientation is portrait mode. From there, I can add a splash image. And so if I wanted to have app icon, I can do that. And so we can preview it by looking over to the side and say, okay, whoops, actually don't want that wrong situation. There you go. So if I wanted to have a logo, I can do that by clicking the plus here and the draw mode and under logos. And then I can click that like that. And you change it from dark on light, light on dark. You click preview. And it will show that if I wanted to be a little longer, I could do that as well. Wanted to change the background. It's the background to white. And we'll see how that changes. So it's white, black background, boom, boom, boom. And then from there, we can take a look at some other settings. One thing you want to make sure is that you have it at, I wanna say API level 26 is the lowest dot UK that you could have. And you want to make sure that that is the lowest API level. Target API is what we'll say. Automatic installed the highest and the minimum API. So you don't, you don't want to change the target API. It will keep that as the highest. And then for this you want to say, I want to say 26 is the lowest to make sure that there aren't any problems. And then for prefer, for install location, you want to make sure it's prefer external and write permissions. You want to have external for the SD card. Everything else should be good. Publish settings, all that. If you are pushing it to the app store, you would probably want to look into the default KeyStore stuff. But because this is a development app, we won't worry about that right now. And so now that we have all our settings, it's time to build. And so before we build, again, you wanna make sure that all of your stuff is saved. So save, say project. And then we'll go to File, will go to Build, Settings, will go to Build. And in this, I will save it to my drawing gap. And so I'll say AIR drawing out. And then what I like to do is I like to do underscore 0, underscore one, because I tend to do a lot of AppBuilder. And so it's good to start getting your naming conventions right. And so this will be like pre-baked a one of this series. And so I can go up to a 100 for this, and it will be under this series if I do a new update after building or if I do a successful build and push it to the app store, then it will upgrade to one. And then all the next updates will be 1-2-3-4-5, but this will be one. And so that's just one of the things that I'd like to do. But we'll go ahead, click save. And then it will start building. So now that we have our app, you'll notice right here. So we can go ahead. I like to copy, connect my phone to go to my SD card and I'll just drag and drop right there. Not a problem at all. It has it right there. And so then I will disconnect my phone. So now that I have it on my phone, I'll go through, I'll click the APK. I'll click Install. Now that it's open. Go ahead and open it. Again. It wants to get all the permissions to record and take pictures and all that stuff. And I'm fine with that because I said it it myself and voila. Well, you know, I have the app working. So what we'll do is we'll take a look, oh man, look at that. So we have our app actually working on our phone. So we could scale it, make it big, we can make it small. Wick, rotate it. And we could click Play. So if you click play, they get big small, big small, and we can rotate it. Let's try that again. Rotation, rotation, rotation, rotation. And there we go. So we went from having a drawing that we started off with. And now we have an interactive augmented reality. Animated. Just from regular to look at QB. He's doing well. And there we go. That is how we create note. So our final challenge of this course is making that final app. So it's time to personalize your app. Give it a unique name, add a custom logo, custom app icons, and even some splash screens. If you really want to take it to the next level. Let's try adding multiple splash screens. Maybe a story at the beginning. We all want to know how QB came to be. Isn't a triumph of rise from the ashes? Or is it like Rocky? Where you're struggling to make ends meet? Have little bit of fun with that. And then once you're done, post your app's screens and the icons in the project section. And if you ask them videos of your app with your cube or you're drawing, make sure to post those as well.
21. Course Wrap up: And so we finally made it, finally made it through the course. And it's, it's been a long time coming. And I really hope you all learned a valuable lesson on how to take your creativity to the next level. And we took a very, very simple cube drawn and we turn that into an AR masterpiece. When learn tech, we learn art. We learned pure creativity on its bare bones form. And so to recap, in this course, we learned how to sketch. We learned how to draw simple illustrations, were learned how to scan a drawing without a scanner. How to work with image targets. How do you set up Unity game engine and a Vuforia engine for augmented reality. How to make a user interface, how to code a little bit, how to add some user controls to 3D objects, how to animate in unity, and also how to build an export, a mobile app. The foundations that you learned in this, the skills that you learned in this, we can translate to anything. Now, if it's a comic, if it's a sticker, that's anything that you want. You have a foundation to build on and be in emerging technical and creative artist. I'm really excited to see what you all can come up with. As you get further and further down this road of XOR, creativity and immersive storytelling. For me, I'm a comic books. I make animations, I make all these things. And I really, really enjoy having the opportunity to combine the digital world with the physical world through augmented reality. It's a wonderful opportunity to make things more immersive so that we can change the way that we interact with the world and we interact and creativity. And so feel free to follow any of my other augmented reality courses. If you are so inclined, hit me up and let me know how you liked this class. Feel free to write and review it, share it with your friends, and look out for more stuff for me. Again, my name is Stephen Christian. I am a full-stack AR developer, a visual storyteller, and your instructor. And I thank you for the time and hope to see you again for another wonderful tutorial series.
Steven Christian, Create & Conquer!
