Build Procedural UI with Callbacks and Manipulators

Рет қаралды 10,942

Күн бұрын

Learn how to use UI Toolkit like a BOSS in this step by step walkthrough of building a Drag and Drop Inventory System procedurally in Unity using UI Toolkit and some of it's more advanced features such as Activators and Manipulators.
🔔 Subscribe for more Unity Tutorials / @git-amend
UI Builder Primer: / @uimotioneffects
Discord: / discord
#unity3d #gamedev #indiedev
▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬
0:00 Setup
05:40 Procedural UI
14:15 Styles
18:40 Drag and Drop
23:20 Manipulator
Source code: github.com/adammyhre/Unity-In...
Assets Shown In This Video (Affiliate Links)
Misty Fantasy Village : assetstore.unity.com/packages...
Cartoon Fantasy UI: assetstore.unity.com/packages...
Eole Foliage Shader: assetstore.unity.com/packages...
Dungeon Mason Tiny Hero Duo: (FREE): assetstore.unity.com/packages...
Kronnect Beautify: assetstore.unity.com/packages...
Follow me!
linktr.ee/gitamend

Пікірлер: 101

@git-amend 4 ай бұрын

Hey everyone, welcome to the first of a few videos on building an Inventory System! As this topic will span several videos, feel free to bump the channel here with your comments, or join the conversation on Discord (or both)! 👍

@roxforgegames4548 4 ай бұрын

I have more than a decade of experience in game dev, but your channel can still teach me something new. Keep up the good work!

@git-amend 4 ай бұрын

Love to hear it!

@toastyshrimp1882 4 ай бұрын

just got recommended your channel through a game dev discord. What an absolute gold mine. I can already tell where the next few weeks of my free time is going.

@git-amend 4 ай бұрын

Glad to hear it, welcome aboard!

@mypaxa003 2 ай бұрын

@phoenixfire6559 4 ай бұрын

This was amazing, looking forward to the rest of the videos in this series. I would also love it if you developed similar videos on topics like levelling system, character creation, enemy AI etc i.e. core gameplay elements that people can implement in their own game. Keep up the great work, this is by far the best Unity/ Game Dev videos with code that employs best software practices and designs.

@git-amend 4 ай бұрын

Thank you very much! Those are all great topic points ideas!

@davitheking024 4 ай бұрын

Your way of explaining things is always so interesting to watch, so a tutorial on inventory is something I never knew I needed from you.

@git-amend 4 ай бұрын

Thanks! Glad to hear that!

@vladtempest7506 4 ай бұрын

O my... I am looking at UI Toolkit with different eyes now, man. You're awesome! Thank you!

@git-amend 4 ай бұрын

Great to hear!

@umoyGC Ай бұрын

I was searching for a tutorial for creating UI Toolkit via code... finally find my rescue spot :D thanks a lot. this is exactly what I needed. I love the quality of your videos. This get's a self taught indie to really the next level of code quality and stability. Great work :)

@git-amend Ай бұрын

You're welcome!

@BashBoundGames 4 ай бұрын

Your videos are amazing. Further along than beginner tutorials but certainly still understandable!

@git-amend 4 ай бұрын

Thanks!

@franciscooteiza 3 ай бұрын

OMG, this video it's a blessing, exactly what I need for my game! Thank you very much Sir!

@git-amend 3 ай бұрын

Glad to hear it!

@anasmostefaoui3027 4 ай бұрын

you always exeed expectations, thank you so much for all the efforts you put in these videos.

@git-amend 4 ай бұрын

Thanks! Appreciate that!

@AnotherGameDev2411 3 ай бұрын

I don't know who you are or where you came from, but I love you and your videos. Just wanted you to know that.

@git-amend 3 ай бұрын

Thanks so much!

@jacobs.7925 4 ай бұрын

Great video!! Damn, I'm one of the (few) that loves the "old" UI system. This new UI tookit seems like building a style thingie for a web page (css or whatever its called). I wonder if it's worth getting used to it.

@git-amend 4 ай бұрын

Thanks! I agree, just when I feel like I've gotten used to the UGUI system, we now have this to contend with. In the next video I'm going to talk a bit about data binding, which is one big potential upside. I'm still on the fence myself, but one day they will retire UGUI I think.

@gonzaloasencio4503 4 ай бұрын

I studied to be a video game developer and I am currently working in a full stack company. I had no idea that both options could be combined, thanks for this incredible tutorial

@git-amend 4 ай бұрын

Great to hear! Fun isn't it 😁

@anthonygiannotti4228 4 ай бұрын

Perfect timing. Coding is magic, sir!

@git-amend 4 ай бұрын

Right on!

@phambaoha170 Ай бұрын

so great, thank you

@git-amend Ай бұрын

Glad you liked it!

@Tenzordk 4 ай бұрын

I am pondering making a small, just for fun, mini coop game ... I like watching your videos. Unity just added some new api for networking. Might work this into this.

@git-amend 4 ай бұрын

Sounds great!

@AriyaBayat 2 ай бұрын

The quality of these videos are super! Would you personally recommend using the UI Builder or going down the code route to make the UI?

@git-amend 2 ай бұрын

Thanks! Personally, I prefer using code, but I find that the builder can be ok for dogfooding a concept. Also, we just found out that the makers of Odin Inspector are making their own UI system, which might interest you (I already signed up for the beta, and I'm sure we'll be talking about it on the channel and on Discord when the beta opens) www.pangui.io/

@damonfedorick 4 ай бұрын

Nice

@git-amend 4 ай бұрын

Thanks!

@V-post 4 ай бұрын

You’re going to be at 100k subs by summer

@git-amend 4 ай бұрын

🤞

@ukaszgrabski2811 Ай бұрын

Hi, awesome tutorial!! Any quick hints for doing a drag and drop into the bottom horizontal panel slots between health and mana indicators? ;)

@git-amend Ай бұрын

Thanks! It really depends on your project and how you set things up. Some people like to keep the hotbar and other inventories as sub trees under the main root Visual Element, but this can lead to a lot of tight coupling between your systems and some spaghetti code. Other, better approaches would be to use the Mediator programming pattern or make it event driven. Detect the id of the hotbar or other inventory system you are dragging on top of and publish an event with the details.

@publicmmi 4 ай бұрын

Nice video! It would be nice to have a version without drag&drop (Diablo like style).

@git-amend 4 ай бұрын

Good idea, I'll keep that in mind!

@DeepPatel-jw1pd 2 ай бұрын

Hi, great video! I was wondering what software are you using to draw the diagrams seen in the Setup section?

@git-amend 2 ай бұрын

Thanks! I'm using Excalidraw for Obsidian, check out this video: kzfaq.info/get/bejne/pZaVq65e3ay0Y58.html excalidraw.com/

@nael_nocteon 2 ай бұрын

Hey @git-amend, thanks so much for this video. You channel truly is a gift! I have two questions regarding UI Toolkit and Drag&Drop. - Aren't all of these string references a problem? For instance, renaming or moving a texture around in the project window would break the UI and there's not even an error to tell that it was broken. - Regarding Drag&Drop, I always struggle to make a clean codebase that I could (at least partially) use from project to project. I'm thinking of a bunch of interfaces and abstract classes that already have the whole "Drag & Drop" logic figured out, waiting to be implemented. Main interfaces would be : IDraggable, IDropContext, IDragContext, IHoverable ... Thinking of it, I'm looking for the same epiphany I had when I watched your 'Better Finite State Machines' video, where all of a there was a flexible and elegant abstract solution to that problem I kept facing in each project. Thanks in advance!

@git-amend 2 ай бұрын

Thanks for the comment! Yes, string references bother me too. This is something on the Unity Roadmap to find solutions for. See: forum.unity.com/threads/ui-toolkit-rant.1252305/#post-7965030 For Drag and Drop, it sounds like you want something similar to UGUI implemented in UI Toolkit. That would be nice, but unfortunately not the way they designed it. However, it would certainly be possible to implement something like that on your own, or potentially someone has already done it. Another thing that some of us on Discord are looking forward to, and have signed up for the beta, is that Sirinex, the makers of Odin Inspector, are creating their own UI framework, so look out for that: pangui.io/

@nael_nocteon 2 ай бұрын

@@git-amend Wow, PanGui looks absolutely promising. My jaw dropped reading the features list. Can't wait for that and thanks for your answer!

@Yukiixs 4 ай бұрын

Good video

@git-amend 4 ай бұрын

Thanks

@moranyt8299 Ай бұрын

OnDrag(PointerMoveEvent evt) перестает работать, если мышка выйдет за пределы ghostCell. Это можно сделать резким рывком мышки, так, чтобы ghostCell не успела установить позицию в пределах курсора. Держу в курсе

@moranyt8299 Ай бұрын

Решение: Я просто зарегистрировал новый ивент в ghostCell: OnPointerLeave(PointerLeaveEvent evt). Код в методе такой же, как и в OnDrag(PointerMoveEvent evt)

@git-amend Ай бұрын

Спасибо за информацию! Я проверю это.

@MarushiaDark316 4 ай бұрын

Not gonna lie, UI Toolkit terrifies me since I've never done anything with HTML or CSS. I'm more of a WYSIWYG type of designer and do a lot of my prototyping for UI in Illustrator. I'm far more comfortable with UGUI and TMP, but even those have problems not always doing what I want in my mockups (like not having resizable grid layouts natively). I'm glad you mentioned up front that you're decoupling it from the rest of the system.

@git-amend 4 ай бұрын

I'm in the same boat. I don't have a preference over UI Toolkit to UGUI other than at some point Unity will deprecate UGUI completely (we're a few years away from that yet). I find the tools inside Unity to be tedious and clunky. That's why I generally advocate learning/using a better tool like Nova - I'd have used that in the video, but of course not everyone has it. Now that it supports WebGL, I think it's the best option.

@StratoCatster 4 ай бұрын

Thank you for the video! Please tell me where and how you register the latest callbacks for the manipulator?

@git-amend 4 ай бұрын

Thank you! The manipulator registers it's callbacks on it's target - this is all handled internally by the manipulator itself. You just have to implement the 2 required methods (RegisterCallbacksOnTarget and UnregisterCallbacksOnTarget). In the example, the target is the inventory VisualElement and the manipulator is connected in the InventoryView class using the WithManipulator extension method. Check out the docs here: docs.unity3d.com/Manual/UIE-manipulators.html

@StratoCatster 4 ай бұрын

@@git-amend thank you for answer!) I will check,

@ekekw930 4 ай бұрын

I would love to see a small Nova overview.

@git-amend 4 ай бұрын

Might be a good idea, especially if it coincides with Nova being on sale sometime. I'll look into it.

@shunpeng5700 4 ай бұрын

Hi,I love your series. I wonder if you have a list of naming convention, and reserved class names for patterns, or something to differenciate when should a class be only a normal c# class or MonoBehavior. The Game object names in the scene, where the component should be in this but not this gameobject (the scene hierarchy).

@git-amend 4 ай бұрын

I do not usually do that, to be honest, other than when using a Scriptable Object in the flyweight pattern I will often give it a suffix that is very clear about it's purpose, like ItemDetails or ItemConfig, and the instanced item can just be called Item. Some people like to write SO before or after the name, but I don't usually find that to be useful to me.

@raymk 4 ай бұрын

Insightful video as always! I'm just wondering how long did it actually take you to make this inventory system. I followed the same video you referenced (HJ's video tutorial series), and it took me a few days to make a proper move controller for a mobile game. UIToolkit's paradigm is very different with UGUI, and sometimes it's kinda buggy, for example: UIDocuments are not initialized early enough, so setting a reference in Awake() might cause null reference. As someone who likes to use points-and-clicks when designing UI, the combination of UGUI and Animator definitely feels more intuitive than UIToolkit. What do you think?

@adventuretuna 4 ай бұрын

You can still use the visual editor for UI Toolkit. They just didn't do it in this example.

@git-amend 4 ай бұрын

To be frank, I find the UI Builder that comes with Unity to be clunky and not very useful, but I can see how it might be useful for people who are unfamiliar with CSS or XML. It took about 1 hour to build the UI and make adjustments so that I was happy with it, and a few more hours (2 or so) to write the additional supporting code. I have never encountered the problem with UI Documents causing a null reference yet, but I'll watch for that.

@frontalachivment3604 4 ай бұрын

Will you expand it into network inventory? Its really interesting how things change when you need to sync it across network.

@git-amend 4 ай бұрын

That’s an interesting topic, and if we get into multi player again on this channel we can certainly discuss how it could be done. The nice thing is that the view is not tightly coupled to any of that logic so you can use this for both. The changes would be in the controller.

@pjarnfelt 4 ай бұрын

How do you feel about the data binding feature of UXML elements when using unity 2023? Could be useful for MVVM?

@git-amend 4 ай бұрын

That's a great question - and a subject I really wanted to squeeze into this video, but it was getting too long. I do think it would be useful, and I intend to talk about it in a future video! I don't think many people know about it.

@nikoart1561 4 ай бұрын

But what the difference between canvas and ui toolkit since they're drawing same amount of batches and it seems that ui toolkit drawing them in the camera view as well which double batches at the same time

@elyastigre9867 4 ай бұрын

Thank you for the awesome video !! I do not understand where the logic of the OnDrop event makes the items stack tho, can someone explain or just give a time code ? Thank you in advance and have a nice day !

@git-amend 4 ай бұрын

That's handled in the Controller - we'll dive into that in the next video! Cheers!

@vyechi 4 ай бұрын

Is the inventory system for a 2D game or you have setup to run consider world coordinates?

@SCHCOMM 2 ай бұрын

absolutely H U G E thanks!)

@git-amend 2 ай бұрын

You're welcome!

@junaidywijaya6413 4 ай бұрын

Wait, i never seen this, is this a new feature that require minimun unity version or maybei just don't know, either way new knowlegde, this channel never failed to surprised me 😂

@git-amend 4 ай бұрын

UI Toolkit has been generally available since version 2021 I believe

@junaidywijaya6413 4 ай бұрын

@@git-amend That means i just don't know 😂 thank you, can't wait to see the next part

@ethancheung1676 4 ай бұрын

so is it that we could also use a manipulator for the ghost icon dragging?

@git-amend 4 ай бұрын

You could, but it's tricky because the way it's setup currently you would need 2 manipulators - one to catch the initial click, so each slot would have a manipulator for the OnPointerDown event, and then a separate manipulator for the ghost icon that handles the OnPointerMove and OnPointerUp events. In some ways that makes the code cleaner - but the ghost icon still needs to be aware of it's context so that it knows which slot it is over. So dealers choice!

@yours_indie_game_dev 3 ай бұрын

how would you make your slotcontainer scrollable if it has many slots

@git-amend 3 ай бұрын

UI Toolkit has a ScrollView VisualElement, that would be my first choice, though there are also some assets on the store that can improve on the basic element. docs.unity3d.com/Manual/UIE-uxml-element-ScrollView.html assetstore.unity.com/packages/2d/gui/ui-toolkit-scroll-view-pro-infinite-scrolling-snapping-paging-262334

@vyechi 4 ай бұрын

What is the tool you're using for prototyping your diagrams?

@git-amend 4 ай бұрын

I'm using the ExcaliDraw plugin for Obsidian. excalidraw.com/ kzfaq.info/get/bejne/pZaVq65e3ay0Y58.html

@vyechi 4 ай бұрын

@@git-amend Oh, that's great; I use obsidian. It's an excellent tool for my Zettelkasten and Para.

@garebeargamingttv5441 4 ай бұрын

What is the software you use for visualizing the thought process?

@Lago06 4 ай бұрын

Looks like excalidraw to me!

@git-amend 4 ай бұрын

Correct, I used Excalidraw in this video

@kpm25 4 ай бұрын

@@git-amend ...Thanks this is a handy tool.. can convert to svg then to ppt etc.. cheers

@ZombieChicken-X 4 ай бұрын

I'm trying to build this same system you have but replacing my View script with logic intended for UGUI. When would you say its better to use Toolkit? Is there any reason I would NOT want to use UGUI for something like inventory?

@git-amend 4 ай бұрын

Absolutely you can use UGUI - the only reason I chose to use UI Toolkit was because it was being discussed quite a bit on the Discord server. My only concern with UGUI is that one day Unity will probably phase it out, but I think that is a long way off.

@ZombieChicken-X 4 ай бұрын

Tbh I'm a bit lost on how to integrate it with this. Do I scrap the view scripts? Should I just have an inventory prefab that gets filled in with the proper information when the controller runs the Initialize coroutine,I guess where I'm confused is, is it the views that are the source of information for the rest of the system or are the views just displaying what the controller is hearing?@@git-amend

@git-amend 4 ай бұрын

@@ZombieChicken-X The main idea with an MVC pattern is that the view knows as little as possible about the underlying system - it's really just a place to show information and let the user interact with images, buttons, etc. Then it can report back to the controller with an event (or a method call if you must) what sort of action the user took. The controller can make all the logical decisions about whether the user's choice was valid or not and what to do about it - then update the model properly. If the model changes for any reason, it should let the controller know so that the controller can make sure the view is correct.

@ZombieChicken-X 4 ай бұрын

Ok so when the player picks up an item for example, would that be told to the view which would then tell the controller it has updated and the controller would proceed to verify that data? Or does the controller get the update and then next time the view is initialized it shows it off@@git-amend

@git-amend 4 ай бұрын

@@ZombieChicken-X The view doesn't know anything about the world typically. But it depends what you are building. If you need the user to click on something in the world, and drag it into an inventory, then let the view handle it the same as if it were a drag and drop. If you are walking into something and it causes a trigger to fire, then just tell the controller. In Unity you won't necessarily have a one solution fits all - it really depends on what you are trying to achieve.

@andrius6080 8 күн бұрын

Hi, I have 5 years exp as game dev in unity and I don't get it why should I use this UI toolkit if there is way easer and faster way to setting things up?

@git-amend 8 күн бұрын

Surely with 5 years of experience under your belt you've heard that UGUI is being deprecated, and are aware that new versions of the Unity Editor already use UI Toolkit exclusively. It's also intended for improved integration with DOTS. But of course there are plenty of alternative UI frameworks to choose from, and some new exciting ones in development.