I suggest adding a D3.js-ish (Graphical-DATA-Interface) component to the designer as well as a GUI entity. This way a developer can add a Graphical-DATA-Interface component to desired entities to manipulate and/or visualize entity data via the GUI entity. The GUI entity could be constructed with a screen system where each screen is a grid with grid blocks that could contain ui controllers (buttons, sliders, etc. …), dynamic data-linked visualizations, or simply static PNG images.
The Graphical-DATA-Interface component could have some basic property linking abilities within the designer as well as provide a more advanced API via scripts. For example a developer could declare an attribute via the pc.script.attribute(‘someAttribute’, ‘number’, 100); method which could then be linked to a graphical representation within a grid block of the GUI entity and updated onAttributeChanged().
The GUI entity could have a setScreen() method with the last parameter being an “ANIMATION_TYPE” string or JSON object for more precise control.
Will Eastcott’s UI Entity from his “Soldier of Yellowism” game is a good start toward this end. I would then define a grid object, then a grid block object for layout purposes then proceed to create a data_link object which would link entity properties (attributes) to visualizations and/or controllers.