Scrolls and Masks

3D BUZZ Programming and Digital Art training
A free video tutorial from 3D BUZZ Programming and Digital Art training
4.2 instructor rating • 17 courses • 111,177 students

Lecture description

Masking elements from views using an image is a very common way to achieve certain effects. In addition, we can combine it with the ability to scroll elements around in a fluid manner.

Learn more from the full course

Modern UI Development in Unity 4.6/5.0

This series goes over the core concepts of Unity's UI system and also shows the creation of an entire game using the UI.

13:30:32 of on-demand video • Updated May 2015

  • Become familiar with Unity's UI system
  • Create an entire game using the UI for all of its visual aspects.
  • Apply all of what is learned in a real world scenario.
  • Learn to think like a UI developer.
English [Auto] Already in this video we're going to talk about masks and scroll views. So umask allows us to mask out certain pixels from being rendered by using an image which is known as a mask scroll views allow us to scroll around oversized content from within their parent rectangle scroll views are actually technically interactive components but I decided not to talk about scroll views or scroll bars in the previous video because they really only come to play once we start using masks. I also want to show a couple of techniques that we can use masks effectively to create some really cool transition effects anyway so let's go and get started. And first just talk about masks. I'm going to come up here just like always into my higher key and create a canvas switch over to an orthographic screen view by selecting the 2d button and zoom out so I can get a good view of my UI. Now what I'm going to do is I'm going to create a panel if I can UI panel that way and make a little smaller. I'm not going to worry about anchoring in this video at least not yet. Then what I'm going to do is underneath this panel I'm going to create another panel but this panel I'm going to oversize so you'll notice that although this panel is a child of the panel below it it is bigger than the panel that we can see. Let's go ahead and change its color. I'm going to give it a kind of reddish color so we can start to sort of differentiate between the two panels we have. So the gray panel is the parent and the red panel is the child. Now the behavior of allowing a child to overstep the bounds of a parent can typically allow you to do some really cool stuff like have like little elements you know popping in and out. Blah blah blah. All that fun stuff but it isn't necessarily always what you want. Sometimes you want to constrain the viewport of a child to the parents bounce. We can make this even more apparent or this demonstration even more apparent by introducing some more controls into the child panel. In this case I'm going to throw in some arbitrary buttons using Control D to duplicate the creating a nice little row of buttons here. So what we want to be able to accomplish is effectively making it so that this panel this child panel is constrained by this bounds of the parent panel as far as what is rendered and what is not a very easy thing to do because I can hop right into this parent panel. I can say add component I can type in mask and hit enter. Now I can click on the child panel and I can move him around. If you notice that he doesn't actually render unless he is within the image of the parent. Now there's a couple of really important things about masks to be aware of. First of all masks are going to be determined by the image component on the same game object. So in this case we have a source image of background. If I instead change the source image to pop up arrow or check mark even you'll notice we have this rather ugly sort of masks here. Obviously this pop up era was never intended to be used as a mask but we can see that we have an interesting shape being used here. You'll notice that the mask behaves like an all or nothing. Either the pixels filled and it's rent and the child is rendered or the pixels are not filled and the child is not rendered. You'll also notice another interesting aspect of masks and that is their fill center by unchecking fill Center. You'll notice that although the masking behavior or sorry I clicked on the wrong panel I meant to click on the parent and say show masked graphic. You'll notice by unchecking show masked graphic that we're still getting the behavior of the mask but it's no longer displaying the actual image. That's a part of that mask. Remember the image is determined entirely by the image component that is on the same game object as the mask component. So again I can go ahead and let me go ahead and show a mass graphic again and change my source image back to a background because it'll be a little bit more apparent here. In fact I can come up here and make the background of the parent blue further showing what happens when I uncheck show mass graphic coming back up into the parent. I can uncheck show mass graphic and you notice that the blue background completely disappears. You'll also notice that we do get this nice little rounded corner effect because the background image that he used on this panel does have around the corner. So M S can be used for a variety of effects and cool transitions and all that fun stuff. For example if I were to take the this panel right here and this panel if I were to take this and move it from you know zero pixels high and move it down. Notice how it kind of expands on that. So if I were to animate this motion for example we could have a pop down sort of just popping down on the showing the child element so yeah I mean that's really there's really not a whole lot more to talk about masks. They're just a really really really nice way to achieve certain effects and he can use them as pop downs you can use and popovers blah blah blah. It's really straightforward stuff. All you need to know is that the mask will prevent the pixels of the children from rendering if they do not fall within the opaque pixels within the corresponding image. So that's really cool but what about scroll views. So for example we have this panel right here and we have this child panel in here and the child panels oversized you can see those oversized very clearly. In fact it would be a little bit more obvious if we went ahead and even duplicated some more of these buttons and we can start to see how really big this child actually is. We want to be able to scroll around in this view to be able to access all of the content from within it but still maintaining our mask to do that. We simply use the scroll rect control. So if I come up here to the parent panel and add component and add in a scroll recked and then I take this child panel and assign it to the content of the scroll correct. Now when I hit play. Notice how I can scroll around by just clicking and dragging. So this would allow us for example to see a help window that has a bunch of text. I mean I can show that example as well by I want to go ahead and recreate this just so you guys can see the whole process of creating a scroll rect with the mask going to come up here to canvas create UI panel. This is going to be the parents panel then underneath the panel I'm going to create you I text. This will be the child the child I'm going to make very large then I'm going to bump up its font size and then I'm going to take this text. This is help text and I'm going to copy and paste it a bunch so we can see that this is truly an oversized child. So that's the first step. The next step is let's go ahead and scroll read the scroll recked before we add that mask so we can see what the effect of the squirrel recked has in the absence of a mask in the parent. I'm going to add a scroll recked component that on the scroll rack component I'm going to click and drag text into the content. That's all I need to do now when I hit play I can scroll this text you'll notice that I can't scroll horizontally but that's because this text does not overflow horizontally. If it did for example if I came up here to the child and increased his his wit and we hit play you'll notice we can scroll both horizontally and vertically you might be asking how I can make it so that the size of this text element is fit perfectly with the content that it contains we'll be looking at that in the next video. But for now we can see exactly how the scroll recked is being used. Then all we have to do is to complete this example would be to come in here to the panel Add component and type in mask. By doing that we have not only created an intractable scroll recked But we've also masked out the overflow. Now when we hit play we see that as properly Max. Max let's say we wanted to add some padding in here there'd be a variety of ways to add padding. But what I'm going to do here is I'm actually going to separate the concept of the scroll wrecked from the concept of the panel or sorry the concept of the mask from the panel. So what I do is I'm going to come up here and on canvas I'm going to create a new panel then I'm going to take this old panel dump it into that one this panel that has the mask on it I'm going to remove show most graphic then I'm going to make it stretch and I'm going to give it a padding of 10 in each dimension. Now you can see by nesting panels and removing the show mass graphic we can achieve some level of padding. All right. Some more interesting things we can do a scroll Rex. I'm going to go ahead. I'm going to select the panel as the score worked on it and I'm going to hit play then I'm going to play around with some of the parameters that we can use. For example we can disable horizontal scrolling entirely even if the child overflows horizontally we can still not scroll like that. We can also do the same thing with vertical scrolling by just unchecking vertical. We can change the movement type from unrestricted which just like it says means is unrestricted we can scroll as much as we want in any direction we can go to elastic which is what we saw before giving us this little iPhone type feel or we can go to clamped and clamp gives us a more traditional sort of clamped scroll. We also have our deceleration rate which we can set to zero which will prevent the ability to flick if we set the deceleration rate to one for example. You'll notice that I can flick and it slowly decelerates OK. So there's not a whole lot to talk about Sprong Rex there. There are very interesting very powerful but there's not a lot to them. The last important thing to understand about scroller Rex is how they interact with bars scroll scrollbars are really just special controls that can be plugged into a scroll recked. Now you can most certainly use the scroll use a scroll bar in the absence of a scroll recked but you would usually most likely be better off using a slider instead scrollbars are really designed for this sort of behavior. So let's go ahead and add in a horizontal and vertical scroll bar to do this. I'm going to take my padding and I'm going to increase the body bottom padding up to 30. This is to facilitate the existence of a horizontal scroll bar that I'm going to increase the right padding by 30 for the vertical scroll bar. Now in the parent panel I'm going to right click go to UI and select scroll bar. You'll notice that we get this. I'm just going to place this where I think it looks good maybe maybe nudge it. Down just a tad then I'm going to click and drag it over. So we have like that and now we have a horizontal scrollbar. Now what I'm going to do is I want to reichlich panel hit you I hit scroll bar and I'm going to change it to go from top to bottom. Right there just like we do with the slider then I'm going to position it in a similar fashion to my horizontal scrollbar. Doesn't look perfect. But again I'm not a designer. OK so now if I hit play you'll notice that they really don't do anything quite yet. They just act like scrollbars but they're not plugged into anything. Now we can most certainly click on the scroll bar and start playing around with it's event lists and all that fun stuff. Or we can come in here to scroll Brecht and associate each scroll bar with its appropriate parameter. So for the horizontal scrollbar I'll associate the horizontal scroll bar for the vertical scroll bar I'll associate the vertical with I believe I do have the vertical on backwards. So I'm going to change it from bottom to top. Now I'm going to hit play and you'll notice that the scroll bars actually respond to the scroll rect. They even let me control the scroll rect and again that association just comes from clicking on the scroll rect and setting the horizontal and vertical scrollbar properties. All right. So that's pretty much scroll bars or scroll racks anyway. Let's take a little deeper look at the scroll bar itself just because this is a selectable that we did not talk about in the previous video. You'll notice it completely messed up my layout because my docking isn't correct. Let's go ahead and fix my docking. We'll do that. And then for these guys we will talk to the right hand side and stretch. For these guys. We will dock to the bottom and stretch. So now when we change the size of our canvas those transforms behave appropriately. OK. So sway bar is made up of an image right here which constitutes the background. It's also made up of the scroll bar script the scroll bar script can be intractable or not. It has its transition which behaves the exact same way as the transitions of other elements. You'll notice its target for the transition is the handle subgame object it has its normal navigation. It has a handle recked which is very similar to our slider rect and it has a direction a value a size and a number of steps and that's really about it. Other than that we have the sliding area or the siding area is just an empty game object with no visual representation. And then we have the handle which is just an image and a canvas render. So really dissecting the scroll bar looks very similar to our sliders just visually a little bit different. So yeah I'm taking that pretty much is what I wanted to talk about again now that we've talked about transforms or talked about selectable and all that fun stuff most that knowledge just carries over into everything else in the system. So yeah I just want to point out again that the masking is very very cool technique and allows you to pull off some really cool transition effects. Just imagine animating this for example. But I think that's pretty much all I want to talk about. So we'll see you guys next.