[WIP] GrimTK GUI Framework
Posted: Sun Dec 28, 2014 8:27 pm
Hey guys, I've been spending a bit of time on a GUI framework and it's pretty close to shareable now. I am going to use it to rebuild my Notebook mod for LOG2 to iron out any more issues then I'll upload a version for people to play with.
I've gone for a 'stateful' GUI instead of an IMGUI because I wanted to separate the layout from the code and I think it's more accessible for the end user (the modder using it). However, it also comes with a GUI context wrapper for anyone who wants to do an IMGUI.
UPDATE: Alpha 002 is now available for you to start playing with! GrimTK - Legend of Grimrock 2 GUI Toolkit on Nexus Mods
Screenshot
Sample Code (how I built the alert box)
Features Completed...
- Widgets: Windows, Labels, Buttons, Images.
- Images/Widget Backgrounds can be drawn stretched, tiled, 'anchored' or 'Nine-Sliced'.
- You can define image references to make it really easy to use a sprite atlas.
- For buttons, you can add a hook and/or connectors for clicks.
- Using the optional 'EXT' add on, you can show a message box really easily using
- 'GTK.EXT.messageBox(title, message)'. I intend to build other useful '1-liners' too.
- Draggable windows.
Features for V1...
- Checkboxes, Edit Boxes
- Ability to define the GUI in your mod assets and then call them in the game.
- Maybe auto-layouts.
- Maybe Keyboard shortcuts.
- Maybe drag/drop components.
Any requests for things you would like to see?
UPDATE
See Update post
GrimTK Demo Video 02
GrimTK Alpha 001
I've gone for a 'stateful' GUI instead of an IMGUI because I wanted to separate the layout from the code and I think it's more accessible for the end user (the modder using it). However, it also comes with a GUI context wrapper for anyone who wants to do an IMGUI.
UPDATE: Alpha 002 is now available for you to start playing with! GrimTK - Legend of Grimrock 2 GUI Toolkit on Nexus Mods
Screenshot
SpoilerShow
SpoilerShow
Code: Select all
GTK.Core.GUI:addImage({ name="log2-guiitems-alert", path="assets/textures/gui/gui_items.tga", origin={2032, 0}, size={436, 300}, margin={80, 80, 80, 81} });
alertForm = {
name = "gtk_alert",
position = {10, 10},
size = {436, 300},
bgColor = {0, 0, 0, 0},
bgImage = "log2-guiitems-alert",
bgDrawMode = GTK.Constants.ImageDrawMode.Stretched,
gravity = GTK.Constants.Gravity.Middle,
children = {
{
type = "GLabel",
name = "title",
position = {54, 32},
size = {340, 20},
text = "",
font = GTK.Constants.Fonts.Medium
},
{
type = "GLabel",
name = "message",
position = {48, 82},
size = {340, 60},
text = "",
font = GTK.Constants.Fonts.Small
},
{
type = "GButton",
name = "cancelButton",
position = {48, 222},
size = {128, 24},
bgColor = {0, 0, 0, 128},
padding = {4, 4, 4, 4},
text = "Cancel",
font = GTK.Constants.Fonts.Small
},
{
type = "GButton",
name = "okButton",
position = {268, 222},
size = {128, 24},
bgColor = {0, 0, 0, 128},
padding = {4, 4, 4, 4},
text = "OK",
font = GTK.Constants.Fonts.Small
}
}
}
function messageBox(title, message)
local window = GTK.Core.GUI:createWindow(alertForm);
local titleLabel = window:findChild("title");
local messageLabel = window:findChild("message");
if ( titleLabel ~= nil ) then
titleLabel.data.text = title;
end
if ( messageLabel ~= nil ) then
messageLabel.data.text = message;
end
end
messageBox("Title-icious", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis vulputate purus. In id massa quis nibh malesuada blandit. Cras mauris urna, placerat id pellentesque at, imperdiet non lacus.");
- Widgets: Windows, Labels, Buttons, Images.
- Images/Widget Backgrounds can be drawn stretched, tiled, 'anchored' or 'Nine-Sliced'.
- You can define image references to make it really easy to use a sprite atlas.
- For buttons, you can add a hook and/or connectors for clicks.
- Using the optional 'EXT' add on, you can show a message box really easily using
- 'GTK.EXT.messageBox(title, message)'. I intend to build other useful '1-liners' too.
- Draggable windows.
Features for V1...
- Checkboxes, Edit Boxes
- Ability to define the GUI in your mod assets and then call them in the game.
- Maybe auto-layouts.
- Maybe Keyboard shortcuts.
- Maybe drag/drop components.
Any requests for things you would like to see?
UPDATE
See Update post
GrimTK Demo Video 02
GrimTK Alpha 001