Game development on .NET

Inventory and Store System – Part 3 (Creating the Store UI)

Inventory and Store System – Part 3 (Creating the Store UI)
5 (100%) 1 vote
(Video Transcript)
Hi, guys. Welcome to the next episode of .GAME. In this episode, we’re gonna continue our inventory and store system project by building out the UI for our inventory system. What were gonna really do any coding in this episode, this is all going to be UI focused. We’re gonna go over to different components, not all of them but a good amount of the different components. That unity the provides and gif kind of a foundational knowledge so you can go and explore the UI system on your own and build off of it. So, I guess with that list, go ahead and get started I have a project right here. Which the same kind of RPG project, of course that we’ve been working on. And what we really wanna do, I’m just gonna jump into when I start to build out the UI. So, I’ve already imported in some of the sprites and things that we’re gonna using. Nothing super fancy or anything I made a couple of coins for currency. And then, some background stuff. So, we’ll use that for now to kinda build it up.

So, to start building the UI, you can just right-click in your hierarchy. Go to UI and then you can see there’s a lot of different kinda options of game objects that have various components on them. For the UI to work, you always need a canvas. So, I’ll just start out by creating that. And you can see a few things happened. This weird white line popped up and more interestingly, if we pop this into 2D. Which I find to be very useful when you’re doing UI specific stuff and if I push the F button it will seem all too kind of you the whole area. So, this is basically our entire canvas, which as you can see is significantly larger than our little guys over in the corner. And that’s because when you’re doing UI stuff, you have a few different choices. You can act in world space, which would basically have us popping stuff up in front of our people down there. So, maybe if you did some damage or you hit something, you’d have a little damage thing that popped up. That would be more world space.

Or you can work in Screen Space- Overlay. And if you Screen Space- Overlay and Screen Space- Camera. So, right now this is setup for Screen Space- Overlay. And basically, what that means is that the canvas and the UI elements are gonna scale to fit the screen. So, they’ll be rendered directly without any reference to the camera, and they’re gonna be rendered over seen objects. So, if we were looking at our game window and say we wanted to have maybe some icons or an ability bar or something down at the bottom. We’d probably do Screen Space- Overlay, so that it’s always on top of everything that’s being rendered That’s the version that we’re gonna use for our store. We wanna guarantee that is alway rendered above. Under render mode, there is the two other that I kinda briefly mention, so there is Screen Space Camera. And this is rendered as if it was drawn on plan at an object some distance from the camera. So, it also scale with screen size, the resolution or the camera frustum, probably I pronounced that word incorrectly.

But once those are changed, this will also adjust it. And seeing objects that are closer to the camera than the UI itself, is will be rendered in front of the camera. So, this doesn’t have that guarantee of always being rendered over. And then, World Space I kind of described earlier. It’s very useful in the sense of like doing damage or things that you kinda want to pop up in the World Space. It doesn’t need to face the camera, you can orient it in any direction and seen objects can be behind it, in front of it, even pass through it. So, this offers a little bit more flexibility if you’re trying to display text, and kind of more of a dynamic game integrated type of way. So, I typically use either Screen Space- Overlay or world space. I was trying to think before the show of a time where I used concameron. I couldn’t come up with one. I’m guessing there’s a couple scenarios where I have but. Definitely Screen Space- Overlay and World Space are the more constant, or common ones for me.

Okay, so taking a look down. So, Pixel Perfect basically just enables rendering without anti-aliasing. Other stuff’s pretty self-explanatory. Sort order is if you had multiple canvases, you could basically order how they view, or order their sorting, I’m trying to find an explanation without the word sorting. You can basically provide the order in which they appear. So, you could say one is foreground, background kind of thing. So, you could say one is behind the other one type of thing. Okay, so looking at the next component,, we have Canvas Scaler. So, this one defines basically how the canvass is scaling. So, we’re actually gonna set this to a scale with the screen size. So, the consent pixel size, it basically means that UI elements will retain the same size in pixels regardless of screen size. Scale with screen sizes they’ll become bigger the bigger the screen is and smaller the smaller the screen is. And then, constant with physical sizes that basically maintains the same physical size regardless of the screen or the resolution.

So again, we’re gonna go to screen size, okay. So, what we’re gonna do is we’re just gonna set the resolution. So, this is our reference, so we’re gonna go 1920 by 1080 as our reference resolution. And basically, you can kind of set these different behaviors, the one that I find the most useful is match width or height. And basically, what that means is when the resolution is being switched, it’s gonna try to match the width and the height of the resolution to figure out what the right scaling is for the components. And when that happens, you can see this match property and so this is, how much each I guess try to match it. If you do 0.5 and it matches it equally, 0 and 1 have slightly different behavior. So, you really kind of just wanna play around with this to see what works for the resolution and the screen size that you’re working with. And then, guess that’s really the bulk of it, the last one is the Graphic Raycaster which was also added to this. And so, this is basically needed to do array cast against the Canvas, which we’ve already talked about.

So, I’m not gonna drive into the array cast, but if you’re unfamiliar go check out the first navigation, that’s where we introduced array casting and actually code one up. But basically, what it does it looks and all of the graphics on the Canvas and then determines if anything has being hit. So, just make sure that your Canvas kinda has really all three of these if you’re creating the game object from scratch for whatever reason. All right, so that’s a quick overview, actually before I forget so it’s an overview of the Canvas the other things is when I created the Canvas this event system got added. So, I might forget added the first time you I think create any UI component. I’ve encountered a time where it wasn’t there, I think it was just accidentally deleted by somebody who was working on the project. But, the purpose of this is that it’s basically required to interact with the UI. So, if for some reason you’ve started to build the UI. You’ve got your buttons hooked up, everything’s looking good.

You’re clicking, nothing’s happening. The very first thing that I check, is to make sure that the events system is in your project. Just because again, if it’s not, then things aren’t gonna work. And going down the rabbit hole of other troubleshooting is is kinda pointless. So, something to keep in the back of your mind. So, let’s get started. So, User_Interface, we’ll call this Canvas. Apologize, I’m having a bad typing day, apparently. Okay, so to start what we’re gonna do it’s we’re gonna add a Panel. I’m also gonna change this into a 16 by 9. So, you can see the Panel expand the entire height and width of my Canvas. And that’s why I’ve been looking at this game screen, you can kinda see that overview because again it’s over the entire screen. You don’t actually want it to be this big, so we can mess around with direct transform properties to get the behavior that were looking for. So, a Rect Transform is basically the UI or the 2D version of the transform component.

So, I think originally I had said all game objects have a transform. I guess the caveat to that is except for UI elements in which case they have a rect transform. But, there basically exists on all objects regardless, game objects if you will, regardless of if they’re UI or not. They’ll just have a different variation of it, so, Basically, what you have are anchors and pivots. So, I guess before I jump into that you’re got these settings that will change, the left, top, right, and bottom. And if we were to kind of mess with these, let me give you a bigger, you can see that bringing it in kinda pulls it. So, basically, if you define the left, top, right, or bottom, you can bring them in by a certain amount or even expand them technically by an amount larger than really what their border is for the entire component. Which has its uses. If we click on this area, I don’t know what you call that this box area over here, you see there’s a couple of difference. So, you can basically set the pivots and also set the positioning.

And so, these are really your positioning, and whether or not you’re defining the top, left, bottom, or right depends on how you’ve got your pivots Set, because we have this set to stretch in it’s entirety, we were working with those properties. But if we were change it to say this middle one, you’ll notice that its got position x, y, z, and then we have a width and height that we can define. So these will shift in how you define it depending on how you got really your kind of, your anchor presets set up, as well as, really, your pivot point. So just something to keep kind of in the back of your mind. Now, I’m sure you’re probably wondering what in the world anchors, and basically in Anchored is a way to kinda set up how something will expand. So if you see these let me kinda zoom in these little hopefully you can see that. Little triangle things, these are essentially the anchor points. You can kinda see a little bit of a oops, a little bit of an adjustment in these numbers.

So we’re kinda defining, hey parent of mine, this is the space in which I want to kinda live, and I want to adjust as you adjust. And I know that probably sounds confusing, so let’s put this into practice and you can kind of see what I’m talking about. So for our anchors what I want to do is, so we’re going to do .3, .15, I kind of see the things moving around here, .7 And 0.85. So we’ve kinda defined the area, but we can see the kinda gray window isn’t really fitting that. So that’s cuz you actually have to zero out these numbers to basically say I want you to fit in that area. And if we wanted it to expand, again we could kinda work with Adjusting it however we want. That does have some implications as you start to work with scaling, and it can have some behaviors, so just be careful when doing that. Now pivot, so pivot is interesting in that it primarily impacts the rotation point and It affects how the expansion can occur. So as I was describing, as the scaling shifts, the content will expand, so the scenario, let’s say, of the UI elements are automatically resizing to fit their contents.

If the pivot position was set to like the top left so all four of these things were up here, it was say to expand I think it’s down into the right versus, if you’re in the middle it expands each way equally. So the pivot can kind of affect that. So again it’s one of those areas where you have to play around with it, or really kind of go and read to make sure that you’re getting the right effect that you want. It doesn’t apply in all scenarios, or at least in my experience, it has to do with whether or not you have a specific component on your game object that’s handling how it expands. So, there’s weird little caveats to it, but just something to kinda keep in the back of your mind. Okay, so with the panel, what you’ll see as I go through and build up this UI. I like to start off with panels because they’re really basic name objects that come with just an image that’s set up right away. So I use it to kinda see what space it is that I’m interacting with. On the screen, and then a lot of times after I’m done I’ll just come back and delete this off, and have like an empty game object or something that’s kinda helping me buildup my hierarchy.

So I jump around a little bit, but I found that to be a very useful work flow. Now if you do actually want the image setup You can change the source image here, which I want a UI background, so I made this really a simple kind of background. You can see it’s semitransparent and that’s just because of the coloring. Remember, I think I showed this with the little circle thing, but you can kind of change the coloring. So we really just want the alpha to be It stays as white but the alpha to be up all the way, and then we’re gonna get a clear view of it. So that’s our panel and we’re gonna call this store. So I’m building this in a way initially where I can have For the user interfaces overall canvas, if I want I could have multiple things that we kind of toggle behind, or I could technically have multiple canvases. You can build it really either way, but for simplicity’s sake, I’m just gonna build it this way, where you kind of have one overall UI canvas. All right, so jumping into the UI, the next thing I wanna do is add a header.

And we can kind of do this, so you can drag these points around, which is useful. Sometimes they can be very difficult to pick up, though. The other thing is, if you hold down the Ctrl button, and you click on one of them, you can actually move the entire Range. So if you have your positioning a little off for some reason but you have the sizing right that can be super helpful. You just want to move the points, no Ctrl button, and just click and drag. I find that sometimes if they’re lined up with this you end up dragging the wrong one, so I’ll just move this off. And then be able to grab it and I just zero it out and I catch the rear thing, so I said that but I actually have numbers for these Let’s see. All right, so again zero, those are header. Oops. I guess my numbers were a little off. Whatever, that’s good enough. I end up getting a little carried away with this and that’s I will just kinda Try to design and design, so I pulled in a couple of fonts, you can change, I’m sorry.

[LAUGH] Apparently I did this so much I kind of forgot to talk through part of this. So when I added the text UI element for the header, it added a text component. You can change the text, you’re gonna pause at the font, I think the font I wanted was this one. And then you could change the cells, all the typical cells that you would run into. A couple of interesting things here though, is that you can define the overall layout. There just thing called, Best Vent, I’m gonna go ahead and click that, and basically define a mean and max side. So what does means is as the UI or a scale down for whatever reason it’ll pick the font, the highest amount of font that you can use while meeting your requirements. And your requirements are the over flows stuff. So if I bump this up to 50, actually 50, let’s go 100. I didn’t actually expect that, there we go. So if we go to 100, I don’t think it’s actually And if I do Overflow, Horizontal let’s try testing some stuff. So you can see as it overflows it’s able to go off of it, but if I change it to wrap then it knows that it kinda want to wrap inside of it, and it’s gonna scale it down.

So it will pick the best response in terms of best fit depending on how you have this setup. But again in certain scenarios that can look a little bit off For example, as we start to lay out the UI elements if we did the best fit for like our description tags, for the longer description they’re going to be smaller tags. And for the shorter description they’ll be a little larger, which gives us really weird feeling to UI of things just not being aligned. So it’s one of those errors that you probably use sparingly, but it can be useful. So that being said I think I forgot that 20, I’m just surprised that it’s letting me to go this high. Yeah, all right, we’ll just do 50, and then you can change the color of your font, of course. Some reason it’s not wanting to grab all right, all right. The other nice thing that unity has is a few, I’m using component I guess, so one of the miss outline, am, basically were does it gonna see it am, other like a block out line around it, we must we Useful in some scenarios for having a white outline.

And you can define the size of it. If you go in my experience anything larger than two You can see the edges of it start to peel apart, which is a nice effect in certain scenarios, but for most of what I’ve done at least it’s, the closer that you look or the larger it is just the worse it kinda gets. So again it’s one of those scenarios where you gotta play and see what works. Okay so I’ll change this to header, I think this looks a little off but that’s okay, so the next thing I want to add is a scroll view. Sorry I was thinking, yeah so the scroll view, so this is a very helpful Component that Unity provided. Before, you used to have kind of build this thing out on your own, and it could just be a pain. It was one of those things I had to go and look up every time, cuz I always missed one section of it and it wouldn’t work right. But basically what this is is it’s a scroll view, so you can set up the settings, there’s actually quite a bit. I’m not gonna go over them all, can’t make this thing small.

But you can work with the settings to get various movement types for scrolling. You can also provide different masks to affect what data is shown, so there’s a lot of different things that you can do to play with this. But the core behind it is It’s basically a window were you can add elements and it’ll scroll when there are more elements that what it can show on the screen. Which is what we want in this scenario of store items when each store keeper could vary in what they have. So for us there are a couple of things that we don’t need. Actually, I think I’ll keep these for now. So you can also theme this a little bit too, which we’ll do towards the end. We can change the bars to be different colors. We’re actually gonna end up hiding this bottom bar. But for now I think I’ll leave it how it is and we’ll just come back and clean it up at the very end. So, under the Viewport here, we can do a few things. So right now the way that it behaves, it’s not gonna tile anything, and that’s because it doesn’t really know that it needs to.

And so, there’s a few components that you can add to make this behave. So, the first is Content Size Fitter. And adding this to the Content Viewport, because this is the ultimate place that you’re gonna put the things that the Scroll View is looking at. So these are really just kinda general hierarchy things that help with it. These bottom two are essentially your scroll bars, and then Content is where everything goes that you want to show. So you can start out by adding a Content Size Fitter component, which basically controls the size of, Wait, No that’s right, I was thinking that I put that on the wrong spot. Yeah, so it basically controls the size of its own layout element. So for vertical fit, we want it to be Min Size. And then the other component that we wanna add is Vertical Layout Group. So this one is quite fun, it’s actually quite handy. So there’s Vertical Layout Group and there’s Horizontal Layout Group. And so for the vertical, because we want things to tile vertically, not horizontally, that’s why I’ve picked this.

But if you want it to go the other way, then you’d probably wanna pick the vertical and then you’d wanna probably swap your things around. But with this you can basically define, as things tile, how you want it to look. So I’m gonna leave these properties empty for a second so I could show you them. So we’ll ignore Padding for a split second and Spacing. And let’s take a look at the child element. So, basically what this does, it places them on top of each other, And allows you to kind of set the control size. So if we do the Width and the Height, this is basically saying that for the Child Control Size, that it will also control the children, essentially. For Child Force Expand, this is defining whether or not it’s going to cause the child object to expand in width and height for whatever the remaining elements are. And so that basically means if we had just one item here, and we had both of these checked, especially Height, it would make it as large as this, versus if we didn’t, if we said, hey, we don’t want you to expand the height, we’re gonna control that on our own, which is actually what we’re going to do, then we would be responsible for doing that on our elements that get added into this, which, again, we have done.

And then Child Alignment is basically, I mean, it’s where the child game objects or how they align within it, so we do want upper left. So that being said, so I’m gonna save. I went ahead and I created a couple of pre-fab UI elements. And I did this really just using the same techniques that we just went over in terms of the spacing and the components. So I think there’s maybe a couple components here that I’ll have to talk to, because we didn’t really cover them. But for the most part, it’s the same exact techniques that we just used that just kinda saved. You’re having, watch me play around with it. So if I drag this in, see, it even looks like it might be a little squished here. But that’s okay. So, it’s a little blurry, unfortunately. I think, Yeah, so one of the things with Unity and font, and UI and font is that sometimes it can be very difficult to get a crisp, clear looking font. And what I’ve noticed is this I can actually get to look pretty good. I actually ended up having to switch out the fonts that I used after going down this long path of trying a whole bunch of different little hacks to try and get it to look good.

What I’ve unofficially decided is how crisp your font looks, while other factors in terms of the different hacks play a part, it definitely seems like it has to do with the type of font that you use. So all of the settings being the same as they were, I used a completely different font for the header and then another font for this inner text, and it looked really, really bad, super blurry. And then I went and I found some different fonts, swapped them out. Changed nothing else, and it instantly looked a little bit more crisp. So that’s another piece of advice that I’d give you, is as you’re working with this, if you notice that your font is really, really bad looking and not crisp, but blurry, there’s a couple of different various hacks that you can try out there. One is you scale up your font or you set your font size really, really high, and then you set you scale size really low, and that will bring it down and make it crisp. The problem with that is, as you start to do your window resizing, it can have really weird behaviors.

So I personally try to stay away from that. Another one that people kinda talked about was PixelPerfect. I think that works more with pixellated fonts then it does with the, it was another one I tried. And then I think there was another kinda weird little hacky way to do it. But really, they all were not the most efficient and had pretty adverse effects on them. So like I said, I would just try and find a font that looks like it’s kind of rendering pretty well. And then you can still kinda layer some of those hacks on top if you want. Anyway, so that being said, I think I’ll probably end up building this out, or shifting the alignment of stuff a little bit more. But I mean, we ultimately have a few things that we’re working at. So let’s go back to the scene. Again, the more you zoom in, the worse it kinda ends up looking. So taking a look at our Container, we have an image. This is where the image of our scriptable object that we defined in the last one, last episode, is gonna go.

Then we have just the Name of the item, the Description of the item. And then we have this Currency section. So basically, this is just a game object that has a list. And inside the list, we’ve got the Vertical Layout Groups, the same thing that we just went over before. And then inside of that list, we have Currency Definition. And Currency Definition, as you can see, is another pre-fab item. In fact, when I go to work with this, I’ll delete the one that I have in here off of the store item container pre-fab, so that we have kind of a blank starting point. And basically what we’re gonna do is, we’re gonna loop through all of the items that the merchant has, list them, and then loop through all of the individual item’s currency and list those on their associated items. So we’ll basically do just kinda two loops to populate it. And so the Currency definition just has the notion of an image which we’ve defined again with our scriptable objects and then the amount that it cost.

So for every currency that exists in that data, we’re gonna add one on to the UI using that template. And that’s, might not make the most amount of sense right now. It’ll make a lot more sense in the next episode as we start to go and hook these things up and you kinda see the flow. So, just taking a quick look, I wanna make sure there’s no components that I used that we haven’t talked about. Actually we didn’t talk about this one. So, let’s talk about on this upper one. So, I also use Layout Element. This component is also super helpful in that, In that you can override the size of a Layout Element. So basically what I’ve done is I’ve said, hey, your minimum height is 130. You will not go any less than that. So that’s basically your min height and your min width is what it must meet. And then your minimum or Preferred are basically, hey if there’s more space, or I’m sorry, not your minimum or your Preferred. Your Preferred is, hey if there’s more space after the Min stuff has been allocated, go through and allocate my Preferred Height on top of that.

And then the Flexible Width and Flexible Height is even, basically it’s like a third stage. It’s hey, if Min has been allocated and Preferred has been allocated, do my Flexible next. So, that being said, the way that you actually define it, so the Min Width and the Min Height, you’re defining in regular units. Actually that’s your Min and your Preferred are regular units, and then your Flexible size is relative units. So basically what that means is, any amount that’s greater than zero when you go to define it, means that any space that’s left will be allocated. So usually you just either see zero, or not checked, or one. And zero means don’t do anything and one means just figure out what you’re gonna do and go do it. So that component is super handy. Let’s see, we’ve done image, we’ve done text, I think that’s actually it. And I didn’t do anything, anything weird with them. So, I think the less, last thing excuse me, that we’re gonna do is take a look at how we kinda theme this UI scroll wheel.

So, if we come back to our scroll wheel. Actually, let me show you something. I think I didn’t do the padding stuff, I missed that. So, I’m just adding a whole bunch. You can kinda see they’re off the screen, if we push play. Such a small window. I don’t know if you can even see that. Yeah, this is the bug that will do so, even with the UI open and we go to click on it, she’s getting her clicks to move. So, we will see her kind of moving around but we’ll address that in the next video. Same thing you can kinda scroll. If I go back to the scroll view, you have different settings you can do, you’ll notice something interesting happened, though. When we’re not in play mode we have both bars here. When we are in play mode we don’t have the bottom one, we only have the top. That’s because we have it set to auto hide and expand. So technically, this one here wouldn’t be here if we didn’t have enough IMs to fill the content. So, that’s some kinda the settings that I was mentioning earlier that you can go through in mass.

The other is movement type. I think this affects kind of the overall whereas elastic has a weird effect to it. So, you can just kinda go through and mess with the settings. Just to make sure you’re getting I think clamp doesn’t let you do that, what I just did with that weird movement, like this. So really just, oops, we’re gonna stick with clamp. I just recommend that you kind of walk through and play with a lot of these settings. Cuz it’s just gonna be very scenario oriented on what it is that you’re trying to build out. Okay, so, first thing that we wanna do. I actually wanna shut off the image all together. So, that all we really have is these ones indented. So, really technically I could delete this whole area. Actually, let’s just do that. That’s gone. So, again it’s kinda that panel thing where I like to have the background panel to see the space that I’m working in. But when I’m done, if it’s not needed and just get rid of it. The other thing is I want a vertical scroll bar, excuse me, I cannot talk.

But, I do not want a horizontal. So, we can just that out and then it will zero it out on its own. And then, the last thing is, you can dive into the sliding area. Actually, let me go scene. And change the coloring, you can actually change the images too. So, if you’ve got some fancy little scroll images for your, or you can also do that as well. Cuz really it’s just, again, it’s an image component that has a scroll bar component tied to it. So, to change the image, we really just need to find a color that we like. Where are we? It’s funny, when I’m on my home computer unity does not do this. I’m totally lost on what I’m looking I see, I see there we’re still on the left. All right we’ll just pick a color, I can’t find it. The one I post out, I’m gonna fix these layout issues. And then, we’ll have a little bit of better coloring. But you can basically, so that first one kinda colors the background. And then, the handle is the one that’s gonna basically color this thing that’ll grow and expand.

Just gonna do the same color picker. I do that lot I guess. Yeah, so you can kinda have that. The other thing or the last thing I wanted to talk about was patting stuff. So, if we’re going to scroll view coming back to this vertical layout group. So, this allows you to really define how each thing tiles down. So, you can define the patting. And this is, you can see. I’m gonna go with big numbers so you can kinda see what’s happening. So, the padding is really that same thing that we kinda described before when that RectTransform high, top, left, right, and bottom I think it was. Padding is the same thing where you’re defining the space in between. Can be super helpful in some scenarios. And then spacing, it’s pretty good to show. So, spacing is the null space between each elements. So again, if we go like drastically big numbers, no tends really not that drastic number. You can see that it’s spaced out each one. It’s basically padding or not padding, I don’t know maybe padding or margin I always get those two confused.

But, it’s the set of amount in between each one. So, you can really use both of these to create a decent look. So in fact, I think we’re gonna go, 5. Although I don’t need to extend. I didn’t pull that out. But, I wanna bring it in from this bar a bit. So, I’ll do 8, 0, 0 and then I’ll just do a 5, for spacing. So, I just want a little, subtle, space, and then things are all set and we’re good. So, that was a very, very kinda quick and dirty run through of, really of the UI stuff. So, like I said, the project, I’ll fix some of this padding stuff. I think I’d gone through and made it look a little bit better and I had a wrong version on this laptop. So, it looks a little off, but I’ll fix this so this stuff is aligned. In fact, I think one of the things, yeah I’m definitely on a older version. I actually did it, so we had an image inside of an image. So, this top image is the container. And then, inside of that is basically another image component that’s brought in by three pixels, I think it was.

So, that we still have this cool little indent effect, when we go to lay on the actual image that’s tied to the object. So the hierarchy, unfortunately, is gonna be a little different compared to what you’re seeing here. But Again, nothing different compared to the techniques and things that we’ve just gone over. The last piece of advice that I guess I’ll leave you with is, I found that UI stuff is very often trial and error, in terms of getting it to look right. The UI elements and components, and things that you see, were introduced, I think it was Unity 4.6. Which, I think we’re on 5.5 or 5.6 right now. I think 5.6 is in beta. So, I know that that’s quite a few versions away, but it still has some areas and problems, I guess, with it. So, It’s a lot better than how things were. I used to have to draw all of your UI with code which you can still do with like the GUI stuff. And you’ll see in some scenarios that will be common. But like I said, it’s, it ends up being kind of trial and error.

I’m playing around to figure out what works right and then the text is probably the biggest problem that I’ve encountered when trying to design out the UI stuff. So, yeah, I think that is it. Thank you guys for joining me, sorry for, I guess I’m not sorry but I kinda hit you with a lot of infrations. So, if you have any questions, feel free to reach out on the GitHub. The challenge for this episode is to come up with a storage design using the techniques that we talked about that kinda resonates with you, so. I’ll admit this one’s not that great, but it serves its purpose in that we’re gonna have a couple of things to loop through and we’ll be able to populate the data. So hopefully, that’ll kinda arm you with the information to go and build out an inventory and store system that you wanna build out. So, the things that I recommend is, If you do kinda go and design this to try and have an image element so that you can follow along in the next episode as we work with sprites.

And then, the currency listing type stuff, if you’ve built out the scriptable object stuff to match that, then build that out. If you went a whole different direction with your scriptable object. In the definition of our item stuff in the last episode. Then you will wanna redesign this ones so that you have the same properties that you wanna have surfaced to the person that will be in track here. So, like I said, everything will be posted out on GitHub, and then in the next episode we will start to hook everything up. Thanks guys.


Read the video

In this episode, we’ll continue our project by building out the store user interface for our player to interact with. We’ll go over the foundation needed to work with the UI system in Unity, including examining the Rect Transform and components such as; Canvas, Canvas Scaler, Image, Text and more.

Note: In the brief time between the recording of this video and the start of GDC 2017, Unity has announced that they have obtained an asset from the market called TextMesh Pro and made it free. This can significantly improve the text issues that I mention.



dotGame is a blog dedicated to game development with a primary focus on .NET technology. The episodes will focus on tutorials, tips and tricks and interviews. All tutorial project files can be found on the .GAME GitHub repository. Have a topic you'd like to see covered? Great! You can request a topic by opening an issue on the GitHub repository or by emailing General feedback can also be directed to

    Leave a Comment

    Your email address will not be published. Required fields are marked *

    1Code.Blog - Your #1 Code Blog