Let's begin

Entry posted by Averice · January 12, 2015

2,844 views

Over the past few days I've been porting a GUI library I've written in Lua, it's been a pretty successful and struggle free move over to Leadwerks which has excited me over the future of my time with Leadwerks.

I'll give a rundown of what features I've implemented.

- Text entry panels with carrat positioning and text clipping.

- Labels with multi-line wrapping.

- Scroll panels with mousewheel support.

- Panel hierarchy with parent-child clipping.

- Button and hover events, keytouch events and focus events.

- Panel order of precedence via shardui.paintOver(myPanel)

- Tool tips for those vague looking buttons.

- Scissor rect support - shardui.scrissorStart(x, y, w, h) shardui.scissorEnd()

- Simple way of creating your own unique UI items.

- Skin system.

To give an idea of how it's used I'll show a bit of code.

-- In App.start after you've created your graphics context you simple load the ui lib.
import "Scripts/shardui/shard.lua"; -- This will include all sub files and folders

-- in App.loop - After world rendering so the UI is ontop.
shardui.think(); -- Always before paint.
shardui.paint();
-- And that's it, the UI lib has been loaded successfully.

-- Now to create a panel ( do not create panels in App.loop, they only need to be made once. );
myPanel = shardui.createPanel("ShardFrame") -- second argument to this would be the panel to parent it too, you'll see later on.
myPanel:SetPos(100, 100); -- x, y positioning
myPanel:SetSize(400, 500);
myPanel:SetTitle("TestPanel");
myPanel:SetVisible(true); -- visibility toggling.
myPanel:EnableDragging(true); -- Enable dragging by grabbing the title bar.

-- Now we'll add a label in the panel.

myLabel = shardui.createPanel("ShardLabel", myPanel) -- myPanel is the parent panel.
myLabel:SetPos(2, 22); -- Relative positioning to parents positiong.
myLabel:SetSize(100, 20);
myLabel:SetMaxWidth(100); -- max width, it will line wrap if it's longer than 100 pixels.
myLabel:SetColor(ColorL(255, 100, 100, 255)); -- If you don't like the skins color but don't want to create a skin, use this.
myLabel:SetText("Hello Leadwerks Community");