Unity에서 Minecraft용 툴바 만들기

### Unity에서 마인크래프트와 유사한 게임을 위한 툴바 만들기
* 🎮 이번 'Unity에서 마인크래프트 만드는 법' 에피소드에서는 시간 제약으로 인해 계획했던 라이팅 시스템 대신 **기본 툴바**를 만드는 데 중점을 둡니다.
* 🛠 도구 모음에서 플레이어는 **마인크래프트의 크리에이티브 모드와 유사한 9개의 블록** 중에서 선택할 수 있지만, 게임 내 블록 변경은 향후 에피소드에서 다루어질 예정입니다.
* 📜 이 프로세스는 월드 스크립트에 **"icon"이라는 새 스프라이트 변수**를 추가하고 플레이어 스크립트에서 불필요한 텍스트 표시 요소를 제거하는 것으로 시작됩니다.
* 🖼 블록의 아이콘은 **텍스처 아틀라스를 9개의 작은 이미지로 분할**하여 선명하고 코드에서 쉽게 식별할 수 있도록 적절한 이름을 지정하여 준비합니다.
* 📦 월드 스크립트에는 툴바에 대응하는 **9개의 블록**이 설정되어 있으며 각 블록에는 해당 아이콘이 할당되어 있습니다.
* 🖥 항목 슬롯에 대한 이미지와 **현재 선택된 블록을 나타내는 하이라이트 기능**이 있는 도구 모음용 사용자 인터페이스(UI) 패널이 만들어집니다.
* 🔄 툴바 스크립트는 **아이템 슬롯을 관리하고 블록 스크롤을 처리**하여 플레이어가 여러 블록을 원활하게 선택할 수 있도록 개발되었습니다.
* 💡 향후 에피소드에서는 프로젝트가 진행됨에 따라 **전체 인벤토리 시스템, 조명 메커니즘 및 기타 게임플레이 요소**와 같은 추가 기능을 살펴볼 예정입니다.

이 튜토리얼에서는 Unity에서 Minecraft와 유사한 게임용 기능 툴바를 만드는 방법을 보여줍니다.

[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

이 에피소드에서는 플레이어가 Minecraft의 크리에이티브 모드와 유사한 9개의 블록 중에서 선택할 수 있는 Unity의 기본 툴바를 만드는 데 중점을 둡니다.

이 튜토리얼에서는 블록 아이콘을 위한 새 스프라이트 변수를 추가하고 게임 캔버스에서 툴바를 설정합니다.

블록 아이콘은 스프라이트 모드를 다중으로 설정하고 스프라이트 에디터에서 각 아이콘을 32x32픽셀로 슬라이스하여 준비합니다.

마인크래프트에서 스프라이트와 툴바 설정하기

이미지를 9개의 작은 이미지로 분할한 다음 쉽게 식별할 수 있도록 이름을 지정합니다.

스프라이트를 월드에 드래그하여 블록에 아이콘을 할당하면 Minecraft 툴바에는 총 9개의 블록이 필요합니다.

어둡고 투명한 배경과 아이템 슬롯 및 아이콘 이미지가 포함된 툴바용 UI 패널이 생성됩니다.

인벤토리 시스템용 툴바 만들기

항목 슬롯의 이미지는 비어 있을 때 흰색 사각형이 나타나지 않도록 기본적으로 비활성화되어 있습니다.

9개의 항목 슬롯이 생성되어 깔끔하게 배치되며, 도구 모음은 화면 하단에서 5픽셀 위에 위치합니다.

선택한 슬롯을 나타내는 하이라이트 이미지가 추가되고 툴바의 눈금이 두 배로 확대되어 더 잘 보입니다.

아이템 ID와 아이콘을 관리하기 위해 '아이템 슬롯' 클래스가 생성되고 있으며, 처음에는 직렬화 가능으로 설정되어 있습니다.

도구 모음에는 9개의 항목 슬롯 배열이 있으며, 각 슬롯은 아이콘의 이미지를 참조합니다.

지금은 1부터 시작하여 항목 ID를 수동으로 설정하고 나중에 스크립트가 슬롯을 반복하여 아이콘 스프라이트를 설정합니다.

스크립트는 항목 ID에 따라 블록 아이콘으로 툴바를 채웁니다.

마우스 스크롤 휠을 사용하여 항목 사이를 탐색하고 인덱스를 위아래로 스크롤할 수 있습니다.

선택한 블록의 인덱스는 현재 강조 표시된 아이콘을 기준으로 업데이트되므로 다른 블록을 원활하게 선택할 수 있습니다.

마인크래프트와 유사한 게임에서 라이팅 구현의 과제

게임의 조명은 태양에 의해 결정되지만 몹 스폰과 식물 성장에 필요한 어둠을 결정하기는 어렵습니다.

청크 메시 드로잉은 빛이 이음새 사이로 스며들어 이상한 조명 효과를 만들어냅니다.

이 튜토리얼 시리즈는 블록의 특정 조명 레벨 시스템을 재현하는 것을 목표로 하며, 다음에는 인벤토리 시스템 및 기타 기능에 대한 작업을 진행할 계획입니다.