Creating a Toolbar for Minecraft in Unity

The tutorial shows how to create a functional toolbar in Unity for a Minecraft-like game.

### Creating a Toolbar in Unity for a Minecraft-like Game
* 🎮 In this episode of "How to Make My Minecraft in Unity," the focus is on **creating a basic toolbar** instead of the planned lighting system due to **time constraints**.
* 🛠 The toolbar will allow players to select between nine blocks, similar to **Minecraft's creative mode**, although changing blocks in-game will be addressed in **future episodes**.
* 📜 The process begins by adding a new sprite variable called **"icon"** to the world script and removing unnecessary text display elements from the player script.
* 🖼 Icons for the blocks are prepared by slicing a texture atlas into **nine smaller images**, ensuring they are **sharp and appropriately named** for easy identification in the code.
* 📦 Nine blocks are set up in the world script to correspond with the toolbar, and each block is assigned its respective **icon**.
* 🖥 A user interface (UI) panel is created for the toolbar, with images for item slots and a **highlight feature to indicate the currently selected block**.
* 🔄 The toolbar script is developed to **manage item slots and handle scrolling through the blocks**, allowing players to **select different blocks seamlessly**.
* 💡 Future episodes will explore additional features such as a **full inventory system**, **lighting mechanics**, and other gameplay elements as the project progresses.

[Music] you oh and welcome to the how to make my Minecraft in Unity episode. We're going to be making a toolbar today. This was supposed to be the lighting episode, but well, basically, I haven't quite figured out how I'm gonna do that yet, and I run out of time to figure it out if I wanted to get this video up today, so we're doing this instead. I would have gone for the fully venturi system rather than just a toolbar, but there's quite a lot to get through, and I really don't like having these videos being longer than an hour, so I'm breaking it down a little bit. We're gonna do the toolbar first, and then probably in the next episode, we'll do the rest of the inventory system where you can absolutely drag-and-drop. What we're gonna do today is just gonna be a basic toolbar where you can select between nine blocks like you couldn't creative mode, and you won't be able to change the blocks until we do the rest of the Orangery system. I mean, you better

changes them in the code. We won't be able to change them in the game like you would in Minecraft, but we're getting there bit by bit. Straight off the bat, the first thing we want to do is go into our world script and want to scroll right down to the bottom to our block types, and we're gonna add a new variable in here. We will call this, it's gonna be a sprite, and we're just gonna call it icon. And then the next thing we want to do is want to go into our player script, and we're gonna get rid of the, now sorry, get rid of this. No, that's the one we're keeping, sorry. We're gonna get rid of this. That's the text that we have currently displaying what block we have selected. We're not gonna need that anymore, so we'll just get rid of it. And we don't need any of this because this is gonna be handled elsewhere from this point onwards. We get rid of that as well. We're gonna leave the selected block index value that we have here, and we're

Just gonna be setting that from a different location, from a different script. So, from the point where this value is set, it will all work the same way it currently does. We're just gonna create a different mechanism for setting this value. So, if we go into our game world and if we look under canvas, we still have text here. We can just get rid of that, and we need to create now our toolbar. So, I'm just gonna switch to 2D mode here. So, if we go into our texture folder, I've got a couple of new images in here that I've added since the last one. These will all obviously be available for download. So, the first one that we've got is our block icons. As you can see down here, there's a lot of blocks, but we just need to do a bit of setting up with this one. So, the first thing we want to do is set it to a sprite, and then we need to set this sprite mode here to multiple. And then, if we just quickly apply that, actually, while we're down here, we'll change these.

less than 120. Eh, it doesn't need any compression, and it wants to be set to point so that we don't get any blurred edges or anything like that. Minecraft is sharp edges, no anti-aliasing or anything like that. So once we've done all that, we want to go into sprite editor. So we have our block icons. I've only put in the icons for the blocks that we have in our texture atlas, not include you. I think we've also got the furnace in there, but we're not bothered about that for now. The order of this doesn't matter at all. Unlike in the texture out this way, we actually have to have a particular order, and that corresponds to the texture identification, like we're passing zero against the first texture and so on. This doesn't matter a job. So the first thing we're gonna do is go up here, and we're gonna slice it up grid by cell size. Each one of these icons is 32, so we'll just set that to 32, leave it in center. That's

fine. We don't know a method with it, offset or padding or anything like that, and just click slice. So, what that's done is that has taken this one image and sliced it into, as it turns out, 9 smaller images. So, all we need to do now is if we just go to each one and we want to give it a name. The name is in, it's entirely up to you what you call it, just wants to be something that you can easily remember or you can understand when you're messing around with your code or something. I'm just going to call them the block name underscore icon. Nice and simple. So, I'll just do that. You don't need to watch me type everything. Twelve seconds later. So, I've named all my icons now. As you can see, the last thing we need to do here is click apply up here, and then we can close this. And if we go to there now, we see we can expand it, and all of our sprites are here as individual sprites, as though we just imported them all as

standalone images. So, the next thing we need to go do is go to our world, and if we ignore our block, because obviously, you can't place an air block. It's not with bedrock. Now, we have this icon value here where we can drag a sprite in, and we're gonna do just that. So, this is bedrock. So, if we go down here, find the bedrock icon, and just drag that in there like that, and then the same for stone, the same for the rest of them. What we also need to do, because there are nine slots in a Minecraft toolbar, we're gonna need nine blocks to put in those slots. Now, we have nine icons, but we don't currently have nine blocks. So, I'm gonna go ahead and fill out the details for the rest of the blocks in here to get as nine blocks that we need, and then I'll be back with you shortly. A few moments later, and we're back. I've got all my blocks here, and nine blocks in total. Will I say we're not bothered?

with the furnace, but all the details are filled out with all the correct faces. All these blocks are solid. We have around two transparent blocks yet, but that will be coming. And all of the right icons are currently selected, so the bricks icon has a nice bricks icon and so on. But that's not the only new image that I've got here. So, we do have what I've called item slot 2 BG. So again, we need to just set this one up as a sprite 2D. This one is staying single because it's just one image. We don't have to cut this one up. And then obviously, we want to... We don't need it to be set to 2048 when it's only a 16 by 16 image. No compression point then. I'll apply that. And then we have one more, and this one's called toolbar highlight. All the same settings as the last one. So now we're going to make a toolbar in our UI system, and we'll start off with a panel. And this panel we are going to

anchor it to the center and bottom, so the width we're gonna want this to be is 218. I know that because I worked all this out beforehand. The height is 26. I think we'll get rid of the background image, and then we want this to be quite dark, not quite all black, a little bit transparent. And we'll just call this toolbar. And now the next thing we're going to do is, we're inside there, we're going to create an image, but I can't find it. There it is. So this image is going to be 24 by 24. So if we see, we just got a little 1-pixel border around the outside, and we're gonna set this to our item slot BG. So that's all that image is, just the background for our item slot. So we'll just call that item slot. And then what we're gonna do inside here is create another image, and this one is going to be what's going to have the actual icon image in it. So this one wants to be 16 by 16, no image colored.

fully no, not transparent at all, and set to white. And what we're gonna do by default is disable that image because otherwise you have this horrible white square when there's nothing there. So when we're not actually gone image in this slot, disable our image script, and we'll just call this icon. And then just because in when we get round to the actual inventory system, probably in the next episode, we're gonna need to use this slot, this at what grade here, this item slot quite a lot. So we're just going to create a little proof up there that we can use. And then we want to want to keep it anchored in the center, but we want it to be anchored from the left-hand side. This wants to be zero, that wants to be one, just so we keep this black border all the way around. So now we're just gonna duplicate this nine times, so zero tonight, yep. And then we're just gonna move all these along a bit, so this one wants to be 25, this one wants to be 49.

and you get the idea. Oh, I'll do always becoming a theme of this video, and I'll sort all these out in order, and then we'll rejoin you. Meanwhile, back again. So now we've got all our nine slots all nice and neatly laid out. We're gonna move this down because we don't want it in the middle of the screen. So what we'll do is we'll set our white pivot position to the bottom. So then we can just tell it we want it to be, say, five pixels above the bottom of the screen. So there, we basically got our toolbar. Now we need to make it work like one. So if we go back to our textures, we have that other sprite that are created, toolbar highlight. That will create one more image. We'll call it highlight, and we'll drag out all by toolbar highlight in there. This is 26 by 26, I think. Yeah, that looks right. I think, yeah. So 26 by 26 will keep it in the center. No, no, sorry. We want it aligned to the left. So there.

by default is highlighted over the first one. And one other thing we can do just to make things like a little bit easier while we work it. I mean, we'll make this controllable at a later date, but for now, if we just go to the toolbar and we change the scale, we'll just put make it two. We've double the size of this toolbar and everything inside it. So, it's just a nice quick way of scaling the UI, basically. It just makes things a little bit easier to see. So, now that we've got this, we're gonna need a new script. So, we'll call this script nice and imaginatively toolbar. I'm will open toolbar, and we're gonna need a reference to the Unity UI classes. And then in toolbar, we're going to need a reference to the world. We're gonna need a reference to our player script. We're going to need our highlight, and we want a rect transform because there's a UI element. And then finally, we need a we need an array of item slots. Now, on our item slots, nothing yet because we

haven't created them, so we're gonna create a class that we're gonna call item slots. It's gonna be serializable just for now. It doesn't need to be serializable in the grand scheme of things, but just to help us along while we're creating things. We're gonna make it serializable, and all it's gonna star for now is a byte that will be the item ID, which for now think of it as block ID. Obviously, as things progress, you'll add things like a pickaxe or torch or something like that, so it's not just gonna be blocks, but it's all the same system. So, we're just gonna call it add some ID for now, and a public image which will be called icon. So then, if we go back up here, we want a public item slot array, which we'll just call item slots. And then, if we go back here in our toolbar now - it will put our toolbar script on our toolbar object, and that should give us this array, and we know we want nine.

slots because that's how many we've got. I'll just open all these up. So, what we're gonna do now is we're going to drag each of these into here. So, all this, this icon is just referencing the image that we put in here that is currently disabled. So, I'm gonna drag all those in, and then we'll be back. Okay, so I've dragged all the image references into our icon image slot. And the last thing we've got to do is we need to set this item ID. Now, ordinarily, the ID, and to be honest, the icon image reference itself would be set through code, but we haven't got that far yet. So, for now, we're just gonna set it in here. And all we're gonna do is we're starting with one because zero is an air block, and we can't place an air block, and we haven't got an icon for an air block, so that will cause all sorts of errors. Anyway, we're just gonna start with one, and we're just gonna go up the item list that we have, so whatever order

I've got them in my block types array. That is the order that they'll be displayed in here. I'm sure you understand that you can put this in any order you want. It makes absolutely no difference if you want it to start with nine and have seven in the middle and whatever. It really doesn't matter to the script. So, we go back to our script, and we're gonna need a slot index reference, which is an integer. And if you remember how we set up a little scroll doohickey in the player script before, we just deleted it to start this video so we could scroll through the blocks. This is basically gonna work the same way. But before we get there, only the start method, and in our start method, we'll find our world of the find our world reference. You need to make sure you spell object correctly. And then we're just gonna loop through each of our item slots. And then in each slot, we're gonna set slot icon sprite. So, that's the actual image that this icon is displaying to world dot.

lock types, and then we're gonna get the item ID from our slot itself, item ID dot icon, and that's using that new icon reference that we put in our block types class. And then obviously, we want to enable it, otherwise it's not going to show anything. So what that will do now if we press play should populate our images with actual block icons. There we go, we have some blocks in our toolbar. Now, of course, we can't do anything with it yet, so we'll go back to our script. Um, we will get that cooking, and there's really not much to this. It's gonna be an hour update method, so much like we did in the player script before. Scroll equals import get axis mouse scroll wheel, and then if scroll does not equal zero, that means that it is moving. We are moving the scroll wheel, so if we are moving this, scroll is greater than zero, that means we're scrolling upwards. Although it feels a bit weird scrolling upwards and going to the right, so I'm gonna swap these around from how had it.

before slot index minus minus else and bearing in mind if we're in this code the scroll wheel is moving so there's only two options it can be moving up or down so if it's not moving up it's moving down it's not index plus plus and then we just do a quick check if slot index is greater than now we know we know what our items well you know what we'll just use our item slots length if it's greater than item slots dot length minus 1 then slot index equals 0 if slot index is less than 0 slot index equals item slots dot length minus 1 nice and simple and then finally we need to move our highlight position and the way we're going to set the position of that no parentheses there you know that the way we're gonna set our position is we're gonna get little item slots slot index dot icon dark transform dot position so we're just setting it to the position of the image that we're going to be using to display the icon and then there is

one last thing we need. We need to go play a selected block index equals, and then the I cut the actual ID of the block that's in this particular slot. Go back to our game, and now if we go to our toolbar, we'll just close that when you touch the drag in our player, and we need to drug in highlight. We're given as a few other errors, right, if we hit play, and now as you can see, we can scroll up and down our toolbar and select the different blocks, which hopefully will all correspond to the icon that they've got. Now the dreaded cobblestone, and that is pretty much it. As I say, I'm gonna try and get the lighting system that I was hoping to use working. If not, I'll have to abandon it and come up with a different lighting system. I'll just quickly show you why we're not using standard Unity lighting. So if I go to our materials here, go to our blocks, and I change this to standard, I'll just make it not shiny. This will actually have

lighting determined by the whatchamacallit, the Sun. So, as you can see, this the shadows, it actually looks quite nice. The problem is, for one thing, there's no way, well, there's no easy way of determining whether you're in the darkness or not. I mean, there isn't one. There is a way of determining whether you're in the darkness or not, but it's not as straightforward as it should be for Minecraft when you're dealing with things like mob spawning, whether certain plants can grow, all that kind of thing. You need to know specific values for the weather, you're in the darkness, and all that kind of thing. But there is another reason, and that is that the lighting is a bit weird with the way the chunk mesh is drawn. If you can see all these lines, the light is creeping through the seams, basically between where the weather, each voxel is drawn. And I'm not entirely sure how to fix that or if it even can be fixed. I think it's just an

artifact of the way. I mean, you could come up with your own custom shader that takes into account this, so you could use this nice Unity lighting with your voxels. But that's not what I want to do, because this tutorial series is meant to be how to code a game like Minecraft, and Minecraft doesn't do it that way. Minecraft has a very specific system that allows you to have light levels on a particular block, so it can say this block is below, I don't know, far in the line level, therefore stick a creeper there. So we're gonna be using a different light system. I just need to figure it out. What I'll probably do in the next video is the rest of the inventory system, so you can pull up an inventory, and you can drag blocks around between it, and get other rights, and reserve stuff. But there's also this, is the foliage that sort of thought I was gonna do next, but nobody seemed to won that one, and also some people wanted sound, some people wanted tools, so

there's plenty of stuff to get on. I just really wanted to get the lighting working, so we'll see what happens next. I am taking part in the Ludum Dare challenge, which is a game jam where you create a game within 72 hours next weekend, so there is a chance that I might not have a video out on Monday. I'm gonna get one out next week. It just reminded me on Monday, but I will try my best, and that is everything for now. So I will switch my shader back to the basic unlit shader, and I will see you next time. Bye-bye.

Make Minecraft in Unity 3D Tutorial - 09 - Scroll-able Toolbelt

Game related content!!!!11one

On this channel you will find mostly beginner-to-intermediate level tutorials for working with Unity 3D, typically using C#, with something different (but always video game or game-dev related) occasionally sneaking in. This channel is family friendly in language and themes, however the occasional low-poly bunny rabbit may get squashed in the pursuit of game dev shenanigans.

You have been warned.

b3agz

Creating a Toolbar in Unity for Minecraft

The episode focuses on building a basic toolbar in Unity, allowing players to select between nine blocks, similar to Minecraft's creative mode.

The tutorial involves adding a new sprite variable for block icons and setting up the toolbar in the game's canvas.

The block icons are prepared by setting the sprite mode to multiple and slicing them in the sprite editor, with each icon being 32x32 pixels.

Setting Up Sprites and Toolbar in Minecraft

The image is sliced into 9 smaller images, which are then named for easy identification.

The sprites are dragged into the world to assign icons to the blocks, with a total of 9 blocks needed for the Minecraft toolbar.

A UI panel is created for the toolbar, with a dark, transparent background and images for the item slots and icon images.

The image for the item slot is disabled by default to avoid a white square when empty.

Nine item slots are created and neatly laid out, with the toolbar positioned five pixels above the bottom of the screen.

A highlight image is added to indicate the selected slot, and the toolbar's scale is doubled for better visibility.

An "item slots" class is being created to manage item IDs and icons, initially set as serializable.

The toolbar will have an array of nine item slots, with each slot referencing an image for the icon.

The item IDs are manually set for now, starting from one, and the script will later loop through the slots to set the icon sprite.

The script populates a toolbar with block icons based on their item IDs.

It uses the mouse scroll wheel to navigate between items, swapping the index for scrolling up and down.

The selected block's index is updated based on the currently highlighted icon, allowing for seamless selection of different blocks.

Challenges of Implementing Lighting in a Minecraft-Like Game

The lighting in the game is determined by the Sun, but it's difficult to determine darkness for mob spawning and plant growth.

The chunk mesh drawing causes light to creep through seams, creating a weird lighting effect.

The tutorial series aims to replicate Minecraft's specific light level system for blocks, with plans to work on the inventory system and other features next.