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…
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 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
Above is a video of the alpha version of a Soldier Outfitter system I developed in the summer of 2015. I received a few requests to release this on the UE4 Marketplace and so this week I’ve begun the process of modularizing the system for an official release. The aim is to produce an inventory system that is as extensible and adaptable as possible. Developers shall be able to utilize this system across a variety of game genres. Occulus Rift support is also planned.
Hopefully I will be able to provide weekly updates on progress, but no specific completion date has been set as this system will be developed concurrently with my post-secondary responsibilities.
A snippet of a planning diagram: