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…



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s