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