Making UI elements through LUA

Question

I'm wondering the best approach given the current UI methods we have. Looking to create a inventory like system or a visual queue of actions. Seems like the layout columns and grid would be great for these things. But how do I get new things to populate. Do I make place holders and disable them. I don't see a way to instantiate a UI slice.

Accepted Answer

Hi @REDACTEDUSER

Great question. I assume that you are using v1.9?

One way to do this is to use the DynamicLayout component. Add it to the same UI element as the LayoutColumn. Then from Lua you can set the number of elements in the LayoutColumn and it will resize to fit that many elements. To set the number of elements use:

UiDynamicLayoutBus.Event.SetNumChildElements

There is an example of using the DynamicLayout in the FeatureTests UiComponents level. It currently uses FlowGraph but is being updated for the next release to use Lua.

Components to support Drag and drop are coming soon. Also a CloneElement method that you can call from Lua.

Answer

Hi @REDACTEDUSER
[http://docs.aws.amazon.com/lumberyard/latest/userguide/fg-node-ref-ui-component-dynamiclayout.html](http://docs.aws.amazon.com/lumberyard/latest/userguide/fg-node-ref-ui-component-dynamiclayout.html)

Keep us updated =)

Answer

@REDACTEDUSER

I was able to get the UiSpawnerComponent to work which is awesome. Need to play with it more to get a better understanding on how to use it effectively. Currently this is the flow I got

Spawn a UI Dynamic slice of a Image -> use the spawner Notification bus to get the Slices EntityID -> change the setimagepath to change the image to what I want to show now that I have the EnitityID

Not very elegant or maybe it is not sure. If you have suggestion on how I may make it better please feel free to let me know.

Answer

Hi @REDACTEDUSER

The recently released v1.10 release of Lumberyard has examples of using the DynamicLayoutComponent from Lua in the SamplesProject UiFeatures example level. There is also a CloneElement on the UiCanvasBus that is exposed to Lua.

Also see the new Draggable and DropTarget components. There are examples using them for an inventory style UI in the UiFeatures level.

Answer

One additional note. In v1.9 you can instantiate a UI slice at runtime. It has to be flagged as a dynamic slice to do that (set the flag in the Asset Browser). Then use the UiSpawnerComponent to spawn an instance of a dynamic slice.

Making UI elements through LUA

Relevant content