Preparing message triggers - Unity Tutorial

- [Narrator] In this chapter, we're going to focus on area based interactions. Simply put, this is the ability for our visualization to respond in different ways, depending on where the viewer is standing. So one common interaction we'll need, is to display messages on the screen when the viewer enters different areas of the lobby. For example, if the viewer is standing pretty close to here by these tables and chairs, we might want to display some helpful information about alternative ways this area could be furnished, different ways this space could be used and some other helpful suggestions about how to furnish this area. Then when the viewer moves over to this area for example, we might want to display a different message again about perhaps the costings of materials or design considerations or construction ideas, different suggestions and different things that we want to showcase to the viewer depending where they move to. So we're going to be setting up a scene here to create a message system that allows us to display different messages depending on where the viewer is standing. To start, I'm going to create our very first message and I'm going to be using the Unity UI system to do this. So I'm going to start by moving to the menu here, choosing game object UI, and then I'm going to select canvas. This represents a surface on which our messages will display. Going to to select canvas from the menu to add a new canvas object to the scene. Now I'm going to to switch to the two D mode here to get a better view. And I'm going to just toggle off the lighting here just so I can see the canvas a bit better. So by zooming out and I had to zoom out quite some distance here. You can see the entirety of our canvas and this represents right now the dimensions of the screen as they're presented here inside the game window. Going to switch back to the scene tab, moved to the canvas and I'm simply going to rename this canvas messages like so. In selecting this, I'm going to make sure I move to the canvas object here and moved to the canvas scalar component. Slightly further down here to the UI scale mode dropdown. I'm going to change this from constant pixel size to scale with screen size so that this interface and this message can adapt to different resolutions. Inside the reference resolution, just type in 1920 by 1080. And that is full HD resolution. The aspect ratio of that is 16 by nine. And that matches up exactly with the 16 by nine aspect ratio set here to be the screen size in the game tab. Great, we've now set up the size for the canvas. That's great. I'm going to select the canvas here and I'm going to right click and I'm going to choose UI. I'm going to select panel. I'm going to be adding a panel, to create a drawing surface inside which the message will show. Select panel to add that to the scene. Once we've added the panel you can see that it's a pretty bright white surface. It's already filled in with color. You can in fact, by selecting the panel here from the inspector in the image field, we have the color swatch by selecting that you can see the properties for this already set up. Actually I can tweak the A the alpha value to control the transparency of this surface, by moving it fully to the left to zero, it's completely transparent. I'm going to move that to maybe something about here to a value of about 50. And then in doing that, I'm going to to move to the translate tool, the transform tool here and then simply click and drag to resize the panel area. So I think probably, maybe something about there I can even take a look inside the game tab and you can see the panel stretching with its partial transparency across the screen. I want some transparency to give a background or a backdrop to the text that's going to appear in front of it. So I think that's looking pretty good. I'm going to go back to the scene tab here select the panel and right click and choose UI and then select text to add text to the panel. And I'm going to zoom in a little bit. You can actually see that text is already added here but it's pretty small. So I'm going to increase the size to maybe something about that here. Now, before I move forwards any further with the sizing of the text or the sizing of the panel I want to make sure that I get the anchor points right for each of these different UI elements because if the screen ever resizes or the screen ever changes width or height, I want to make sure that my UI elements are always going to be in the right place on the screen. So I'm going to select the panel object and move to the anchor point section on the top left hand side here, click on the preset. And I want that anchor the panel here to the bottom center of the screen. So I'm going to click here where the dot is centered at the bottom center, to create the anchor point for here. Now in the case of the text I want to align that to basically the top center of the top left point here of the panel. So I'm going to select the text here. And right now it's aligned to the center, but I'm going to change its alignment to the top left section of this panel here. That's great. We go back to the game tab, everything is appearing as should do. Now, the text is still pretty small but I can easily fix that. I'm going to select the text here and rename this to message. This is the message that I want to display, when I enter a particular area or region of the lobby. I'm going to change the new text here too... I'm going to begin by creating a message that simply says lobby area, and then I'm going to say here connects to offices. This gives the viewer an indication about one, where they're standing right now in relation to the rest of the building. And also some idea about what different regions of the building connect to the space they are currently in. Now already that text is still way too small, not a problem I can move to the font size and change this. I'm going to select an initial size of 40. That's looking pretty good. I'm going to change some of the styling. So right now it's set to normal. I might change that to bold on that text. And actually I might even change the color of the text from this kind of dark gray, moving it up into the swatch hand to the top left hand side, to move this to white. If I go back to the game tab you can see how that's looking pretty good here. I can even select the text here and move to the compounded field. And we have a range of different options that we can apply to this in terms of effects. I can select effect and then select shadow to add a drop shadow to the tanks. By scrolling down a little bit further here, I can tweak some of the properties. For example, I can move the shadow down a little bit further and maybe to the right bit more here and also maybe move here to increase the boldness of the shadow. And actually you can see underneath the text, if you look carefully we have this kind of bold drop shadow for the text. I can tweak this Ponant here, the shadow component to get a before and after effect for this message. Now that's great. And that's almost set up to be just what we need it to be. But of course, I don't just want the text to always display on the screen. I wanted to display only when we enter certain regions, and when it does display, when it appears and when it disappears when we move out of the region, I don't just want it to pop in and out of existence. I want it to fade in and out smoothly. Well, I could try to do that by animating the alpha component of the panel here, by selecting the panel moving to the image component and I could try to animate the alpha value. But of course, by animating the alpha of the panel here it's still going to leave the text in tact. I want to animate the text and the panel together as a single unit. So to have the text and the panel fade out together I want to make sure that I select the panel object and I move up here to the menu and choose component. Now, most of the UI options are clustered under this UI menu here. But you won't find the canvas group component that we need to add in this section. Actually, you're going to find it here, inside the layout section. So I'm going to move to layout and then choose canvas group, to add a canvas group component to the panel here. And if I move to the inspector, you can see that I can tweak the alpha value here to set this to be transparent or not. By default it's set to one, everything's completely visible but I can click and drag that to the left, to fade this out as a group. And obviously zero here means completely transparent. I'm going to leave this for now set to one, so the message is fully visible. Great. In the next movie, I'm going to create the animation data. That's going to fade this panel in and then out, and then having created the animation. We're going to create a script file, to choose when this message should show.