Build Procedural UI with Callbacks and Manipulators

แชร์
ฝัง
  • เผยแพร่เมื่อ 18 ม.ค. 2025

ความคิดเห็น • 114

  • @git-amend
    @git-amend  11 หลายเดือนก่อน +12

    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
    @roxforgegames4548 11 หลายเดือนก่อน +6

    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
      @git-amend  11 หลายเดือนก่อน +1

      Love to hear it!

  • @toastyshrimp1882
    @toastyshrimp1882 11 หลายเดือนก่อน +5

    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
      @git-amend  11 หลายเดือนก่อน +1

      Glad to hear it, welcome aboard!

    • @mypaxa003
      @mypaxa003 9 หลายเดือนก่อน

      +1

  • @phoenixfire6559
    @phoenixfire6559 11 หลายเดือนก่อน +5

    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
      @git-amend  11 หลายเดือนก่อน +1

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

  • @davitheking024
    @davitheking024 11 หลายเดือนก่อน +2

    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
      @git-amend  11 หลายเดือนก่อน

      Thanks! Glad to hear that!

  • @あれくす
    @あれくす หลายเดือนก่อน

    Seriously I can't thank you enough for your generous teaching to the community. I am learning a ton. I have no clue your personal background but you seem very knowledgeable in so many of the game design topics and advanced programming topics in general. The fact that you share this knowledge without charging your viewers a dime is a testimony to your generosity and kindness. You have my utmost respect and admiration for doing this and not hiding it behind a paywall. Thank you sir.

    • @git-amend
      @git-amend  หลายเดือนก่อน

      I appreciate that!

  • @vladtempest7506
    @vladtempest7506 11 หลายเดือนก่อน +1

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

    • @git-amend
      @git-amend  11 หลายเดือนก่อน

      Great to hear!

  • @BashBoundGames
    @BashBoundGames 11 หลายเดือนก่อน +1

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

    • @git-amend
      @git-amend  11 หลายเดือนก่อน

      Thanks!

  • @umoyGC
    @umoyGC 8 หลายเดือนก่อน

    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
      @git-amend  8 หลายเดือนก่อน +1

      You're welcome!

  • @gonzaloasencio4503
    @gonzaloasencio4503 11 หลายเดือนก่อน +5

    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
      @git-amend  11 หลายเดือนก่อน +3

      Great to hear! Fun isn't it 😁

  • @franciscooteiza
    @franciscooteiza 10 หลายเดือนก่อน

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

    • @git-amend
      @git-amend  10 หลายเดือนก่อน

      Glad to hear it!

  • @anthonygiannotti4228
    @anthonygiannotti4228 11 หลายเดือนก่อน +1

    Perfect timing. Coding is magic, sir!

    • @git-amend
      @git-amend  11 หลายเดือนก่อน

      Right on!

  • @jacobs.7925
    @jacobs.7925 11 หลายเดือนก่อน +2

    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
      @git-amend  11 หลายเดือนก่อน +1

      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.

  • @AriyaBayat
    @AriyaBayat 9 หลายเดือนก่อน

    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
      @git-amend  9 หลายเดือนก่อน +1

      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/

  • @moranyt8299
    @moranyt8299 8 หลายเดือนก่อน +2

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

    • @moranyt8299
      @moranyt8299 8 หลายเดือนก่อน +2

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

    • @git-amend
      @git-amend  8 หลายเดือนก่อน

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

  • @AnotherGameDev2411
    @AnotherGameDev2411 10 หลายเดือนก่อน +1

    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
      @git-amend  10 หลายเดือนก่อน +1

      Thanks so much!

  • @Tenzordk
    @Tenzordk 11 หลายเดือนก่อน

    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
      @git-amend  11 หลายเดือนก่อน

      Sounds great!

  • @nael_nocteon
    @nael_nocteon 9 หลายเดือนก่อน

    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
      @git-amend  9 หลายเดือนก่อน

      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
      @nael_nocteon 9 หลายเดือนก่อน

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

  • @unknown1138
    @unknown1138 9 วันที่ผ่านมา

    What's the UML program you're using here? Looks pretty sleek

    • @git-amend
      @git-amend  9 วันที่ผ่านมา +1

      Excalidraw for Obsidian

    • @unknown1138
      @unknown1138 9 วันที่ผ่านมา

      @@git-amend Both of those seem great - thanks for sharing 🙂

  • @ukaszgrabski2811
    @ukaszgrabski2811 8 หลายเดือนก่อน

    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
      @git-amend  8 หลายเดือนก่อน +1

      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.

  • @frontalachivment3604
    @frontalachivment3604 11 หลายเดือนก่อน

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

    • @git-amend
      @git-amend  11 หลายเดือนก่อน +1

      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.

  • @konartis7
    @konartis7 4 หลายเดือนก่อน

    The backing with the generic observable array is checking on null before adding. When using the unity inspector to view the save load data array, the array is all set to non-null and thus you are unable to Add items to the array through the interface. Everything works fine before viewing in the inspector. Any idea how to handle this besides creating a new concrete class using without generics?

  • @stoggam
    @stoggam 9 หลายเดือนก่อน

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

    • @git-amend
      @git-amend  9 หลายเดือนก่อน +1

      Thanks! I'm using Excalidraw for Obsidian, check out this video: th-cam.com/video/o0exK-xFP3k/w-d-xo.html
      excalidraw.com/

  • @StratoCatster
    @StratoCatster 11 หลายเดือนก่อน

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

    • @git-amend
      @git-amend  11 หลายเดือนก่อน +1

      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
      @StratoCatster 11 หลายเดือนก่อน +1

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

  • @pjarnfelt
    @pjarnfelt 11 หลายเดือนก่อน

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

    • @git-amend
      @git-amend  11 หลายเดือนก่อน +1

      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.

  • @shunpeng5700
    @shunpeng5700 11 หลายเดือนก่อน

    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
      @git-amend  11 หลายเดือนก่อน

      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.

  • @ekekw930
    @ekekw930 11 หลายเดือนก่อน

    I would love to see a small Nova overview.

    • @git-amend
      @git-amend  11 หลายเดือนก่อน +2

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

  • @Rigdereine
    @Rigdereine 4 หลายเดือนก่อน

    Is there any good reason for handling drag and drop in two different ways or was that only for tutorial purposes? Could we handle the slots also with a manipulator and would it be better?

    • @git-amend
      @git-amend  4 หลายเดือนก่อน +1

      The big difference with the slots is that it has to handle the ghost icon as well. It can be done but it is not as straightforward because you need multiple manipulators involved. I did, in fact, make a version like that before recording this video, but for the purpose of the video, it was overly complex.

    • @Rigdereine
      @Rigdereine 4 หลายเดือนก่อน

      ​@@git-amend Thank you. With your expierence are there any benefits to the solution with the manipulators?

    • @git-amend
      @git-amend  4 หลายเดือนก่อน +1

      @@Rigdereine In many cases it will allow you to encapsulate all related event callbacks into a single class so that you can reuse it in many places, so click and drag or pinch and zoom would be behaviours you would only build one time and reuse it wherever you need it. The same would apply to manipulators for the drag and drop inventory system, but more complex, so you could use it for your ability tree, your inventory and so on.

    • @Rigdereine
      @Rigdereine 4 หลายเดือนก่อน

      @@git-amend Thank you for the nice response. I would really like to see a manipulator implementation for the slot based drag and drop.
      Your comment reminded me of my implementation of Pinch and Pan by inheriting from InputBindingComposite. I leave my pastbin codes here in case you are Interessted.
      Pinch: aK3iveRh
      Pan: wgMhsMfH

  • @vyechi
    @vyechi 10 หลายเดือนก่อน

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

  • @V-post
    @V-post 11 หลายเดือนก่อน

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

    • @git-amend
      @git-amend  11 หลายเดือนก่อน +1

      🤞

  • @raymk
    @raymk 11 หลายเดือนก่อน

    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
      @adventuretuna 11 หลายเดือนก่อน +1

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

    • @git-amend
      @git-amend  11 หลายเดือนก่อน +1

      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.

  • @nikoart1561
    @nikoart1561 11 หลายเดือนก่อน

    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

  • @ethancheung1676
    @ethancheung1676 11 หลายเดือนก่อน

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

    • @git-amend
      @git-amend  11 หลายเดือนก่อน +1

      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!

  • @garebeargamingttv5441
    @garebeargamingttv5441 11 หลายเดือนก่อน

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

    • @Lago06
      @Lago06 11 หลายเดือนก่อน

      Looks like excalidraw to me!

    • @git-amend
      @git-amend  11 หลายเดือนก่อน

      Correct, I used Excalidraw in this video

    • @kpm25
      @kpm25 10 หลายเดือนก่อน

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

  • @publicmmi
    @publicmmi 11 หลายเดือนก่อน

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

    • @git-amend
      @git-amend  11 หลายเดือนก่อน

      Good idea, I'll keep that in mind!

  • @phambaoha170
    @phambaoha170 8 หลายเดือนก่อน

    so great, thank you

    • @git-amend
      @git-amend  8 หลายเดือนก่อน

      Glad you liked it!

  • @vyechi
    @vyechi 11 หลายเดือนก่อน

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

    • @git-amend
      @git-amend  10 หลายเดือนก่อน +1

      I'm using the ExcaliDraw plugin for Obsidian.
      excalidraw.com/
      th-cam.com/video/o0exK-xFP3k/w-d-xo.html

    • @vyechi
      @vyechi 10 หลายเดือนก่อน +1

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

  • @yours_indie_game_dev
    @yours_indie_game_dev 10 หลายเดือนก่อน

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

    • @git-amend
      @git-amend  10 หลายเดือนก่อน

      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

  • @elyastigre9867
    @elyastigre9867 11 หลายเดือนก่อน

    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
      @git-amend  11 หลายเดือนก่อน

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

  • @ZombieChicken-X
    @ZombieChicken-X 10 หลายเดือนก่อน

    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
      @git-amend  10 หลายเดือนก่อน +1

      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
      @ZombieChicken-X 10 หลายเดือนก่อน

      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
      @git-amend  10 หลายเดือนก่อน +1

      @@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
      @ZombieChicken-X 10 หลายเดือนก่อน

      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
      @git-amend  10 หลายเดือนก่อน +1

      @@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.

  • @MarushiaDark316
    @MarushiaDark316 11 หลายเดือนก่อน

    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
      @git-amend  11 หลายเดือนก่อน +1

      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.

  • @andrius6080
    @andrius6080 7 หลายเดือนก่อน

    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
      @git-amend  7 หลายเดือนก่อน +1

      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.

  • @junaidywijaya6413
    @junaidywijaya6413 11 หลายเดือนก่อน

    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
      @git-amend  11 หลายเดือนก่อน +1

      UI Toolkit has been generally available since version 2021 I believe

    • @junaidywijaya6413
      @junaidywijaya6413 11 หลายเดือนก่อน +1

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

  • @damonfedorick
    @damonfedorick 11 หลายเดือนก่อน

    Nice

    • @git-amend
      @git-amend  11 หลายเดือนก่อน

      Thanks!

  • @SCHCOMM
    @SCHCOMM 9 หลายเดือนก่อน

    absolutely H U G E thanks!)

    • @git-amend
      @git-amend  9 หลายเดือนก่อน +1

      You're welcome!

  • @Yukiixs
    @Yukiixs 11 หลายเดือนก่อน

    Good video

    • @git-amend
      @git-amend  11 หลายเดือนก่อน +1

      Thanks

  • @TheMystogrigen
    @TheMystogrigen 11 หลายเดือนก่อน

    Awww man, UIToolkit... UIToolkit isn't very useful for my toolbox, as I only use UI in worldspace, which UIToolkit doesn't support.

    • @git-amend
      @git-amend  11 หลายเดือนก่อน

      One option might be to use a render texture, but I haven’t tried that with drag and drop. I’ll try it out later this week and see.