3D UI Design System – Introduction of Animated UI Elements, the Scrolling Grid Inventory, image customization (buttons, panels, etc), and more…

 

This update includes the following new introductions to the 3D UI Design System: 

  • Animated UI Elements: in this demo we see an animated element that I modeled and animated in blender before importing into UE4 to be used as the skeletal mesh assigned to the 1st Animated UI Element, the Display Pad
  • Inter-module communication: the UI Design manages all constituent UI Modules.  When input to a UI Element is received, its parent UI Module handles the event and determines if the effects can be determined locally (within the module) or need to be passed up to the UI Design.  Here, when input to the CLM Module is received, when the user selects an inventory object, the event is broadcast to the UI Design, which processes the event and the current state of the design, and instructs the Display Pad Module to perform the required functions.
  • Scrolling Grid Inventory Panel: under the ‘Weapons’ option in the collapsing list menu, we see an instance of a Scrolling Grid Inventory Panel, which lists a series of ‘inventory’ objects associated to it.  The designer can dynamically set preferences for things like:
    • number of inventory slots per row
    • maximum inventory slots
    • icon images
    • icon text
  • Introduced custom images for panels and buttons.  The designer can now easily set their own custom images to these elements from the design level, without ever having to manually configure individual  buttons
  • Improved animations of the collapsing list menu.  Panels now scale more smoothly during transition animations.

What comes next?

  • Mouse-interactive object meshes on the display pad, so the user can rotate and manipulate the object
  • Improvements to program architecture
  • Effects, effects, and more effects…

 

3D UI Design System – Latest UI Element: Collapsing List Menu

This latest development for the 3D UI Design System for UE4 is a new UI Element I’ve called the Collapsing List Menu (CLM).  This 3D menu has animated transitions between menu options, and the developer is able to assign a unique collapsing widget to each option (ie: the developer can assign something like a grid-based inventory list to certain options, a scroll box of sliders for others, etc, encapsulated and managed within the CLM UI Element)

Customization and tweaking of the CLM is made easy, as all basic parameters are kept in the UI Design class for the current design, while the CLM automatically handles changing parameters upon instantiating a game session.  This means that adding and removing entire menu options, collapsing widget types, animation speed, scaling, and so on, can be accomplished in a matter of minutes or seconds.

3D UI Design System – Milestone 1

3D UI Design System – Milestone 1 reached

The first milestone of a 3D UI Design System has been reached.  After a long hiatus due to post-secondary studies, development has recently begun again, and after a short week of effort, the 1st milestone has already been reached.  A non-comprehensive list of the features of the 1st milestone are as follows:

  • Fundamental framework of system implemented (a hierarchical system involving an encompassing UIDesign that manages a set of UIModules that are each composed of various UIElements)
  • Occluded or anti-occluded UI elements
  • State-transition effects: linear interpolation, fade in/out
  • UIElements: UIPanel, UIButton
  • UIElement factory
  • Standardized design principles for client ease-of-use

The Ultrasonic Motion Capture Device – Shape Drawing Demo

The Ultrasonic Motion Capture Device is an Msp430 microcontroller driven system that uses a set of ultrasonic distance rangers to capture the motion of an object in three dimensional space.  The process involves using sonic emissions that are picked up by a set of a receivers, which provide a set of distances from which we can triangulate a position for the particular emitter.

More theory and specific design to come soon..

Making music with the MSP430

As expected, post-secondary responsibilities have been pretty much overwhelming.  But that doesn’t mean there isn’t bit of wiggle room for some creative fun, even within the context of course requirements!

So here is a quick video demonstrating a ‘music making’ program I made in C that works with the MSP430 microcontroller and a piezoelectric beeper to generate what can subjectively be described as music!

Inventory Slot – 3D UI

This Friday marks the completion of the first components of the 3D Inventory System: the design and interface of the Inventory Shell, Inventory Box, and Inventory Slot, as well as a working implementation of the Inventory Slot 3D UI.

The Inventory Shell and its blueprint counterpart encapsulate the entirety of the 3D Inventory System, and several unique templates will be included in the final release.  The Inventory Shell composes of both the static design of the system’s various components suited to fit the user’s inventory management needs, as well as user defined parameters which can be dynamically altered to customize the layout.

So far, only one such component has been completed, the Inventory Slot.

The Inventory Slot is a single 3D widget that portrays the immediate relevant data of a single ‘Inventoryable’ object (the InventoryableInterface can be implemented by any existing object).  This includes a ‘Title’, ‘Icon’, ‘Statuses’, and ‘Data’.

Below is a small snapshot of a blueprint implementation of an InventoryBox (an other C++ interface) spawning inventory slots for each Inventoryable item contained inside it (an ‘InventoryBox’ could be a literal box, or it could also be anything else that contains objects, such as backpacks or even people):

invSlotBPExample

The following is a spawned 3D Inventory Slot in-game (Please note that this is still only programming art):

invSlotExample

And from another angle:

invSlotPerspectiveExample

 

Welcome to my blog

Hello, and welcome to my blog.  Here you will find detailed accounts of my works, organized by topic.  The intention is to update this blog concurrent with development, to provide examples of my expertise for others who may be interested in such activities.

It is my hope that the information found here is both entertaining and informative.  Please, enjoy your stay!