MoltenEngine icon indicating copy to clipboard operation
MoltenEngine copied to clipboard

UI System

Open Syncaidius opened this issue 3 years ago • 3 comments

This issue is for tracking progress on the UI system. Feel free to post any suggestions here also.

Core:

  • [x] #78
  • [x] Mouse & touch input handling
  • [x] #85
  • [x] Parenting
  • [ ] #67
  • [ ] #76
  • [x] Compound components - e.g. scroll area made of a panel and 2 scroll bars
  • [x] UIManagerComponent - A scene component for managing the update and render of UI. Scene input should pass through this for UI interaction.
  • [ ] #77
  • [x] #84
  • [x] #93

Elements:

  • [x] Button - UIButton
  • [x] Checkbox - UICheckbox
  • [ ] Collapsible panel with toggle button and label
  • [x] Container - UIContainer
  • [ ] #90
  • [ ] #100
  • [ ] #88
  • [x] Horizontal scrollbar - UIScrollBar
  • [ ] Image - Automatically handles loading of image asset to avoid render issues. Should display colored rectangle if no image
  • [x] Label/Text - UILabel
  • [ ] #87
  • [x] #86
  • [ ] #101
  • [ ] #91
  • [ ] GridView - Displays a grid of grid cells. Each cell can have elements parented to it which will render inside it
    • [ ] GridViewItem
  • [x] List view - UIListView
  • [ ] #128
  • [ ] #75
  • [x] Panel - UIPanel
  • [ ] #89
  • [ ] #102
  • [x] Scroll area - UIContainer
  • [x] Sprite - UISprite - Provides functionality for rendering a static or animated sprite into UI
  • [ ] Loading wheel/spinner - configurable speed, segment count, fade, etc
  • [x] Stack panel - UIStackPanel - Renders children horizontally or vertically in order
  • [ ] #74
  • [ ] #73
  • [ ] #72
    • [ ] TreeViewItem
  • [x] Vertical scrollbar - UIScrollBar
  • [x] Window - UIWindow

Syncaidius avatar Mar 20 '22 08:03 Syncaidius

Maui has some classes which reflect the CSS FlexBox and Grid layout systems. They are extremely powerful, but sadly most UI frameworks around only come along with the standard stack / row / column / table layouts. Might be worth a look to eventualy implement?

IceReaper avatar Jun 12 '22 13:06 IceReaper

Oh and before i forget it: It would be awesome if its possible to mix up render targets in the engine in some fancy way. Doom3 for example has awesome ui-as-texture implementations, which allow complex uis to be drawn and interacted in the world. Which means if there is a CamerComponent which is able to render the scene using a specific camera into a framebuffer which then is used on an security-camera-ui screen, which again is used as texture on a screen in the scene, which is fully interactible, it gets pretty mighty :)

IceReaper avatar Jun 12 '22 14:06 IceReaper

@IceReaper The Doom3 ui-as-texture system is something I've been specifically designing the UI to be capable of. There's no working example of it in Molten yet, but the engine is already capable of pulling this off.

Right now the way it would be achieved is by:

  1. Attaching a UIManagerComponent to a SceneObject - This lets you draw a UI into a Scene and will adopt the transform of it's parent SceneObject.
  2. Setup a CameraComponent with it's OutputSurface property set to the RenderSurface you wish to draw the UI to,
  3. Apply camera's RenderSurface to an in-world object/mesh.

Minus any bugs, that should give you an in-world UI.

Hopefully this will become easier over time. I'm glad there is someone else out there who wants Doom3-style in-world interfaces.😄

Syncaidius avatar Jun 12 '22 16:06 Syncaidius