Get an introduction to the project.
- [Instructor] Okay, everybody, welcome to Project Two. We are about to embark on a bit of a different type of application now. In an attempt, as promised, to maintain the core focus of the course, we are going to try and create another real world commercial application. This time, it's for the real estate industry. if you're a marketing executive. So, what I did, was, I created a brochure, and I called it the AR Casa, found some decent resources and some good 3D models, which also had interiors. And, I created this brochure, which is a three-part brochure. The first page, here, what we're going to do, is, when you see this, which is the cover of the brochure, it will superimpose a video over the top, and we can use this as kind of a demonstration to showcase various properties, or whatever you want, really. The second page, which would be the inner side, will give you a little bit more information about the actual property. The text is just basically dummy text. In a minute, we can obviously change this, if you wanted to actually use it in the real world. Let's go and see somebody first, and when you see this image, on this page, what will happen, is the 3D Model Augmented Reality Experience. Now, it will be approximately three times the size of this paper. So, when you print this brochure off, and we can use it as an image target, then, basically, we can work to a scale that's about about three times larger to give a good impression. Now, the reason I've gone back to using an image target in this particular case, is, because, there's a lot of white space over this area, which you can actually place your hand on, and rotate the paper, which will easily maintain the tracking and rotate the model very quickly, in the real world. So, there'll be no shaking, and there'll be no sliding around in the augmented reality experience, when the user is actually looking at the property. The third image is going to detect this area here, and, what this will do, is, pop up a message on the screen, saying would you like to have a first person experience? And, at that point, if you click OK, we're going to jump into a different scene, which will show the model that we're looking at at the moment, and basically, take the person through using first person controllers, with a couple of joysticks over the top of the phone, and they'll be able to walk around inside the property. So, let's get going, guys. The first thing that we need to do, then, obviously, is, create a new project inside Unity, and, once again, after updating, we're, I'm now using the newest version of Unity, which is 2018, and everything that we've learned so far, can be integrated into this, and we should fly through this section a lot quicker now. Because, we've already learned all the fundamentals, into how to create and navigate through the UI, how to connect to Wit.AI, and everything, so, this project should run nice and smooth, now, from this point on. So, what I want you to do, is, simply write the name of your project, I'm calling mine AR CASA, and the reason I've written the word Live is simply for my own reasons, because, I obviously did this as a demo, for myself, before I decided to record it, so, it's just so I know which project to open. Now, it wants to be the 3D template, and although we're going to include a few packages, I'm not going to add them, now, because, it will slow down the conversion to the mobile platforms in a second, which I'll show you. As I've mentioned in Project One, it's always quicker to switch to a mobile platform inside Unity when the project is empty. and I'm going to scale it to fill the full canvas, like so. Then, I'm going to change the color to match the brochure, and if you come down to the color code down at the bottom, I have the color right here, so I'll just type this in, it's 3C616E. There we go. And that is the color code of the brochure from the online resource. Okay, the next thing that we're going to do, is, on the canvas, right click, and we're going to create a scrolling menu. So, I want you to come down and find the Scroll View down here. Then, I want you to click here, and align it to the right hand side, holding Shift and Alt, like so. The height will be 750. And, the width will be 466. Okay? Now, what we're going to do is, we're going to place buttons inside here, and we're going to have a menu of different properties that you'll be able to scroll up and down, and when you click on that that will take you through to a corresponding property in the AR scene. Now, because it's just going to be scrolling up and down what I want you to do is, come across where it says Horizontal and uncheck that, so that we can't scroll horizontally. Which also means, we don't need this bar, so if you click on the bar, you should jump inside the Scroll View to the ScrollBar Horizontal. I can just right click and remove that for now. Now, inside the Viewport, if you expand this, here is the content. Now, the content here, will, if I just, I'll tell you what I'll do, I'll just add an image for now, just to show you. Here we go. Now, normally, if I press play, I can click on this, and move it up and down, but can you see how it's limited? And, that's because of this content box here. Now, if I were to expand the content box to be bigger than that, so, actually bigger than the canvas, like so, for example, then this would be the entire area that I could scroll. Now, watch what happens now, when I press play. I can obviously move this around a lot more look. But, it's always a little bit tricky, because we normally have dynamic content. So, what I'm going to do, is, I'm going to make the content the same height as the canvas, which is 750. But, I'm going to add a component, and what I'm going to add, is a vertical layout group. That means that all the children inside will follow the rules of this vertical layout group. So, I can add a little bit of space in, for example, to the bottom like this, of 10, and then, if I duplicate the image it will evenly space these items inside the content area. So, look, watch what happens, look. There, look, and the content layout group is actually controlling the width and the, well, not the width, but the height, at the moment. Let's put it back to 750. What I'm going to also add, is, a content size fitter. Now, this is the golden rule, I want it to fit the minimum size, and that will automatically scale this content box dynamically, based on the amount of content that is inside. So, if I switch to minimum size, now look. Because I've only said I want 10 spacing, if I just zoom in for a second, then because the child items are only 100 in height, it's given me 100, 10 space in, and then, the second item of 100, and then, the content size fitter has counted the children and dynamically adjusted this height. So, if I just duplicate these for a second, watch what happens. Can you see how the content box is increasing dynamically? Now, this is an absolute nightmare for so many people, it never looks just right. So, when I press play now, for example, the content size look has matched perfectly to the size of the actual buttons, while the image is inside, as a demo. Okay, so, that's set up nicely. Now, let's remove what I've just done for a second, because it's time to import a goodie pack.
- Updating to Unity 2018
- Setting up a scene
- Creating image targets
- Creating a multipurpose house script
- Working with virtual buttons in Unity and Vuforia
- Setting up the first-person 3D view