[WIP] GrimTK GUI Framework

[JohnWordsworth]

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

SpoilerShow

Sample Code (how I built the alert box)

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.");

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

[Eleven Warrior]

Hi John. Very impressive Will it be long till Modder's can use this? This will be awesome for Adventure games. Are you going to redo Book that stores notes, scrolls etc.. for LOG 2? oh and how is the big one coming on GMT 2? Keep up the good work very, very cool - Sorry mate I forgot to go to the shop and buy Kudos but this deserves 10 at least

[JohnWordsworth]

Hi Eleven Warrior! Thanks for the kind words.

- It won't be long until minders can use this. If anyone wants a 'pre-release' to play with, feel free to PM me. But as the API might change still, I've not uploaded it yet. I plan to release next weekend.

- I am rewriting the notebook now using this system as a way to test it. I will release that at the same time.

- The GMT2 is coming along nicely. I keep refactoring and improving the code (more than I should) but it's getting there. Also planning on an initial release next weekend. :p

[JKos]

Looking really nice and clean! I will definitely try it out when it's released.

A few feature suggestions came in my mind.
- onClick - hook support for every element, why limit it to buttons only?
- draggable - flag for child elements. These elements could be dragged and dropped on to other elements which do have onDrop-hook defined.
- onDrop(droppedElement) - hook for drop targets. If the hook returns false the droppedElement will be returned to its initial position (where it was before drag started)

[Batty]

Is it possible to have the player type in a response to a riddle? (is that edit boxes?) Also, can there be a small bevel surrounding the buttons like there is with the message? Kind of like it minimal as it is though.

*I tried to translate that message but all I get is something about financing real estate...

[minmay]

Looks great as usual. Here are the GUI features needed for my mods in case you're interested in any of them:
- draggable windows (like the Quick Action Bar)
- my interface design includes an "ability bar" that has a button for each spell/ability known by the player; the bar can be placed anywhere on the screen and the buttons can be rearranged inside the window by clicking/dragging
- scrollable windows, with support for additional GUI elements (including buttons) inside the scrollable area, not just text
- keyboard shortcuts for buttons
- preferably the ability to navigate options with the keyboard in general
- text fields the player can type in

I expect to implement most of these myself, of course, since they are quite niche and some are nontrivial, but I'm listing them just in case.

[JohnWordsworth]

Thanks for the feedback guys!

@JKos:

- onClick is reasonably expensive (simply checks the mouse per element at the moment), but I will probably make the onClick function a separate handler somehow so you can plug it in to any widget .

- I want to do drag/drop (for elements, not just windows) but will have a think about how best to do it. Probably some kind of container widget and then a flag on child widgets.

@Batty:

- Yup, edit boxes will allow you to type in text. The buttons also allow you to use images for fancy buttons, but adding a border system is doable (although, a tiny bit expensive, as it will draw 4 rects, but hey - I'll let the user ensure they don't overload the GUI re: performance).

@Minmay:

- Draggable windows will definitely be in.

- I am considering a drag/drop system and a 'flow' container. Might do a lot of the work for your ability bar.

- Scrollable windows might be one left for you to do :p. If you don't want a full on 'masking' system for the edges (ie. The window scrolls one full icon at a time) it should be okay. If you want a smooth, full on scroll box, you might need some overlay at the top/bottom to hide partially drawn content.

- Keyboard shortcuts. Yeh, that should be quite easy.

- Text fields are on the list .

[Drakkan]

Not sure how I have missed this thread, when I am here 24 hours per day :d
PM sent. thanks

[Drakkan]

just few quick ideas I´d like to use with GUI
- some "freeze" world option when GUI dialogue appears
- some demo level example so even less skill modder like me could check and accomodate easy functions (like make three possible buttons(anwers) etc...
- box for typing already mentioned (also some script example which will check if typed world is for example "John" then it trigger something, otherwise it trigger something different (could be used for riddles, passwords etc...)
- support for another picture format inside GUI if possible (like Jpg...)

[JohnWordsworth]

Hey Drakkan! I know you've been waiting a while, so I will send you a preview build soon .

- Not sure about the Freeze option. I guess it might be theoretically possible to literally disable every component on every game object, but I think that belongs outside of the GUI system.

- I will be sure to provide lots of demos .

- I'm afraid adding JPEG support is not really feasible (without crazy hacking of some sort). A big DDS atlas is most efficient anyway, as it allows compression on the Gpu for less important items and uncompressed, transparent images for important things.

Another thing that should be cool, is that we could now draw item icons properly in 'custom containers' given an item definition .