Townsend’s Inventory GUI is Finished

After over a month of on-and-off coding, the first GUI widget is finished–the inventory widget. From a player’s point of view, there’s nothing really that innovative to it; it’s purely functional. However, from a developer’s point of view, dang that thing took a long time to make.


As I mentioned in the last few posts, the inventory widget uses both the NGUI and FingerGestures systems to provide functionality. So far, the widget (and those in the foreseeable future) can be opened and closed by swiping or by activating the toggle button. Currently the inventory slots can be clicked or tapped to toggle between two icons, which simply shows that these pieces are hooked up and ready to go for future use. Eventually the slots will be draggable so that players can rearrange, activate, and drop items easily.

For such simple functionality, there’s a crazy amount of work that goes into it:

  1. The whole NGUI and FingerGestures systems. It would have taken me days longer without them
  2. Create the grid
  3. Create the graphics. Luckily I’m reusing most of the graphics that come in example packages of NGUI
  4. Create the icons. I’ve only made this one of the lettuce, but I came up with the whole procedure for converting an in-game asset into an icon
  5. Make the panel and all of its children components using NGUI and the relatively complex hierarchy structure it requires
  6. Centering and Scaling setup
  7. Code a custom script to create a box collider on the parent panel of the entire GUI from all of its children in order to detect touch input
  8. Set up the FingerGestures environment and opening up some of the code for integration with the rest of my scripts
  9. Integrate the swipe input into the overall touch input controller so that it doesn’t interfere with normal GUI operations nor movement/camera controls
  10. Getting the position tween (the close/open sliding of the panel is called a tween) to simply work, and then extend it be called by FingerGestures’ swipe input
All of this creates a pretty sophisticated piece of tech: it renders in one draw call, it’s animated(!) using easing functions, it automatically scales and positions itself based on the available screen size (see-ya fragmentation!), and it reacts to specifically tailored touchscreen and mouse interactions. That’s pretty sweet!

With that said, I still see this widget is more of a test run. Ironically, I haven’t done any wireframing or concrete planning for the actual GUI yet, despite my day job as a UI Designer, so I’m not entirely sure if this is even what I want for an inventory screen. I figure that I’ll get down to business and do some mockups in balsamiq… right after I do some fun stuff! :-D

Next up is revisiting the terrain and using a bunch of the new cartoon assets. I’m super excited for this next development sprint!

Edit: Oh! I almost forgot, I spent a good day working on creating an actual inventory system (which is the reason why there are three random lettuce plants where you start). It’s the next piece on the route I’ve been on, and it’s coming along but it’s definitely more oriented towards some actual programming–it kind of throws me back to my java courses with a bit of a C# twist. Luckily the terrain and cartoon assets are completely unrelated, so I can easily take a break and switch my focus for a sprint or two :-)

This entry was posted in Townsend. Post a comment or leave a trackback: Trackback URL.

One Comment

  1. htoo
    Posted July 27, 2013 at 12:09 am | Permalink

    Good job. But I have a question. When you attach a box collider to the inventory widget, how to toggle the inventory slots which are covered by their parent’s collider.

Post a Reply to htoo

Your email is never published, nor shared. Entering your website is optional, but good for networking!

*
*

Available HTML
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>