GUI tutorial please ?

[NutJob]

I'm playing around with this now and I'm wondering how @JohnWordsworth figured out that context had color, drawRect and button functions.
Does anyone have a list of the available functions?

Yes.

[strangely]

Doh! Didn't see that.
Thanks a lot. Now to get to work...

[JohnWordsworth]

It's also almost identical to the GUI context from the first game. Apart from a couple of (very welcome) additions!

[JKos]

I think that this is a good thread for posting GUI stuff.
I just discovered that drawParagraph returns the width and the height of the text so it is really easy now to print out multiple paragraphs in a row (compared to LoG 1 where it was pretty hard).

Code: Select all

local x,y,width = 200,600,300
local text = "Implements the Goromorg shield effect for monsters. The shielded monster is invulnerable to all damage. Instead the damage is directed to the shield. When the shield’s energy is depleted the shield is destroyed."

local tw,th = g.drawParagraph(text,x,y,width)

local text2 = "Makes the object breakable. Typically used with Obstacle component to make breakable obstacles. When the health value reaches zero, the object is destroyed."
local tw,th = g.drawParagraph(text2,x,y+th,width)

Ok, but what if you want to print rectangles behind of those texts which will resize automatically according to the paragraph height.
You can't because you don't now the height before you have drawn the paragraph. BUT you can just print the text twice.

Code: Select all

local x,y,width = 200,600,300
local text = "Implements the Goromorg shield effect for monsters. The shielded monster is invulnerable to all damage. Instead the damage is directed to the shield. When the shields energy is depleted the shield is destroyed."

local tw,th = g.drawParagraph(text,x,y+15,width)

-- now we have the height so we can draw the rectangle
g.drawRect(x,y,width,th)

-- and print the text again on top of that
-- if your rectangle is transparent you can adjust the x and y of the secondly drawn text and get a nice shadow effect for the text.
local tw,th = g.drawParagraph(text,x,y+15,width) 

[Drakkan]

Thank JKos, sounds fantastic. I have noticed you were quite active in Log1 gui framework, together with thomson and Xanathar. Are you planning some converting of grimwidget or something like that ? I would especially welcome this system for hiring / releasing party members which were done in Log1.

[JKos]

Thank JKos, sounds fantastic. I have noticed you were quite active in Log1 gui framework, together with thomson and Xanathar. Are you planning some converting of grimwidget or something like that ? I would especially welcome this system for hiring / releasing party members which were done in Log1.

JohnW is apparently already doing some kind of GUI-library/framework and I'm sure it's going to be great, so I will use my time in something else. And I think that Grimwidgets was maybe too complicated for regular modders, I would like to see something a bit simpler.
However I'm currently working on a general use Dialogue system and it's progressing pretty nicely, it was surprisingly easy to implement with the new GUI features. I'm probably going to release it soon.

[Drakkan]

Thank JKos, sounds fantastic. I have noticed you were quite active in Log1 gui framework, together with thomson and Xanathar. Are you planning some converting of grimwidget or something like that ? I would especially welcome this system for hiring / releasing party members which were done in Log1.

JohnW is apparently already doing some kind of GUI-library/framework and I'm sure it's going to be great, so I will use my time in something else. And I think that Grimwidgets was maybe too complicated for regular modders, I would like to see something a bit simpler.
However I'm currently working on a general use Dialogue system and it's progressing pretty nicely, it was surprisingly easy to implement with the new GUI features. I'm probably going to release it soon.

make sense. looking forward to the future then thanks

[JohnWordsworth]

Just a quick update, as it's come up. When I don't fancy C++ (GMT) I've been working on a gui system. The current plan is to build it in two parts...

Step 1. A kind of “wrapper” around the standard gui object with advanced methods. This lets you do:

SpoilerShow

Code: Select all

-- NOT REAL GUI CODE - WILL NOT WORK IN LOG2 (YET)
imgui.beginPanel({x=100, y=100, width=200, height=100, bgColor={255, 255, 255, 128}})
imgui.label(…)
imgui.button(...)
imgui.slider(…)
imgui.endPanel()

And all of the calls on the panel will automatically line up on the panel properly (so you can just move the panel and all of the things on it will move too).

Step 2. Using this system, make it so that beginners can just do…

SpoilerShow

Code: Select all

-- NOT REAL GUI CODE - WILL NOT WORK IN LOG2 (YET)
defineWindow{
  name = “windowA”,
  widgets = {
    { type=“panel”, x=100, y=100, width=200, height=100, bgColor={255, 255, 255, 128},
      children={
        { type=“label”, … }, 
        { type=“button”, onClick=function(button) end, … }
      }
    }
  }
}

local window = grimtk:createWindow("windowA");
-- later
window:destroy();

I'm about 50% through step 1 I guess. I have panels and basic labels/buttons in there at the moment. I would like to also add some more things like a slider, and checkboxes, but then I can release "step 1".