Understanding new GUI widgets

[Core]

I have a hard time (again) understanding new concepts.

Let's start simple. If I want to add background image to the new ingame menu, where exactly I would do it in menu.lua?

[Josh]

You could just draw the image before the call to context:Sync.  At this time no widget draw an image onscreen, but perhaps in the near future panels will support this.

[Core]

Thank you again for quick response, will try that!

[Core]

Ok, I added this to the main.lua, before context.Sync:

if gamemenu:Hidden() ~= true then
        context:SetBlendMode(Blend.Solid)
        context:DrawImage(Texture:Load("Materials/Screens/TitleScreen1b.tex"),0,0,gfxmode.x, gfxmode.y)

end

IT somewhat works, I have my background, but it has yellowish tint and when mouse cursor enters over a menu item, image flashes, like I can see true colors for a tenth of a second. I tried to mess with menu.lua's backgroundcolor, but no luck. Am I even at the ball park?

[Josh]

Can you post an image of what you are trying to do?  Modifying the panel script would probably be pretty easy to display an image but I don't know exactly what you want to make it look like.

[Core]

I'm just trying to show my game name, one image on the background of the game menu. Simple as that. Since I'm still noob with lua or any coding, I might and do lack some very basic concepts, so this might be very simple, but for me it is not. Yet.

So, I have not touched on panel.lua. This also puzzles me, Panel.lua, Main.lua or Menu.lua do not have function Script:PostRender(context). I learned that all images, text etc. are drawn on to screen inside that.

[Core]

Here is what I have now, done like described above with falults described above:

[Josh]

Okay, can you post the actual image of the logo, or at least your stand-in image?

[Core]

Here, Should read Celeste Incident, but transparent background hides the first half because text is white. Clicking image shows how it supposed to look.

[Josh]

OK, I will show everyone how the widgets can be modified to do anything you want.

[Core]

That would be cool!

[GorzenDev]

local image = gui:LoadImage("Path/To/Texture.tex")
--
local imageButton = Widget:Button("", 0, 0, 1024, 768, gui:GetBase())
imageButton:SetString("style","Push")
imageButton:SetImage(image)
--
local imagePanel = Widget:Panel(0,0,1024,768, gui:GetBase())
imagePanel:SetImage(image)

Result:

this works for me.

undocumented though

[Core]

27 minutes ago, GorzenDev said:

local image = gui:LoadImage("Path/To/Texture.tex")
--
local imageButton = Widget:Button("", 0, 0, 1024, 768, gui:GetBase())
imageButton:SetString("style","Push")
imageButton:SetImage(image)
--
local imagePanel = Widget:Panel(0,0,1024,768, gui:GetBase())
imagePanel:SetImage(image)

 

this works for me, you might have to play around with the placement of the image.

undocumented though

Thanks, but both of those crashed the map right from the start! I tried them in Panel.lua inside function Script:Draw().

[GorzenDev]

30 minutes ago, Core said:

Thanks, but both of those crashed the map right from the start! I tried them in Panel.lua inside function Script:Draw().

for that you dont need to edit Panel.lua at all
just add a button or panel as you would normaly.

look at Menu.lua for example we could change the options panel if we like.

33	optionspanel = Widget:Panel(gui:GetBase():GetClientSize().x/2-250,gui:GetBase():GetClientSize().y/2-300,500,600,gui:GetBase())
34	optionspanel:SetAlignment(0,0,0,0)
	--load and set out image here
	local image = gui:LoadImage("path/to/texture.tex")
	optionspanel:SetImage(image)
	--
35	GameMenu.optionspanel=optionspanel

 

[Josh]

Looks like you beat me to it!

An image is an object that either contains a texture or a bitmap (OS specific), depending on whether the GUI was created on a context or a window.  The image class makes it so that both systems display the same results, even though one is going through OpenGL and one is going through GDI+, XRender, or Quartz (Windows, Linux, Mac).

I am not 100% sure on the image API yet which is why this is undocumented.  I figured it was best to get the strictly vector-based GUI out first and then add images in a second step.

For the OP's situation, I would trim the surrounding area away from that logo image and create a small panel that is just the size of the logo text, and add the image onto that.  This will work better for different screen resolutions.

Fun fact: Leadwerks GUI renders in exactly one draw call, unless something changes, and then the minimum amount of redrawing is performed to update only the section of the GUI that changed.

[GorzenDev]

4 hours ago, Josh said:

Fun fact: Leadwerks GUI renders in exactly one draw call, unless something changes, and then the minimum amount of redrawing is performed to update only the section of the GUI that changed.

can we in some way mark a section of the gui as changed to force a redraw?
in some cases: image as button for example the control needs a mousehover at least once to draw the image correctly

[Josh]

5 hours ago, GorzenDev said:

can we in some way mark a section of the gui as changed to force a redraw?
in some cases: image as button for example the control needs a mousehover at least once to draw the image correctly

self.widget:Redraw() does this.  It will mark the widget's area as invalid and draw it and all children.

[Josh]

I know there are some *other* GUIs out there that have a lot of problems with redraw speed.

Please show us the result once you get your menu working.  I want to see it!

[Core]

On 8.7.2017 at 2:32 AM, GorzenDev said:

for that you dont need to edit Panel.lua at all
just add a button or panel as you would normaly.

look at Menu.lua for example we could change the options panel if we like.

33	optionspanel = Widget:Panel(gui:GetBase():GetClientSize().x/2-250,gui:GetBase():GetClientSize().y/2-300,500,600,gui:GetBase())
34	optionspanel:SetAlignment(0,0,0,0)
	--load and set out image here
	local image = gui:LoadImage("path/to/texture.tex")
	optionspanel:SetImage(image)
	--
35	GameMenu.optionspanel=optionspanel

 

Ah, ok. But how would you add button or panel normally, never done that and I didn't find tutorials. Adding Pivot to the scene and script to that pivot? Do I have to add pivot for every button/panel I want to add to the menu? Like I said, I'm noob... I would love to get away with just editing current menu to my needs to keep everything menu-related as simple as possible.

 

Edit. Yup, will post screenshot when I get this figured out! It is somewhat important step for me mentally. And thank you so much for the help so far!

[Josh]

3 hours ago, Core said:

Ah, ok. But how would you add button or panel normally, never done that and I didn't find tutorials. Adding Pivot to the scene and script to that pivot? Do I have to add pivot for every button/panel I want to add to the menu? Like I said, I'm noob... I would love to get away with just editing current menu to my needs to keep everything menu-related as simple as possible.

 

Edit. Yup, will post screenshot when I get this figured out! It is somewhat important step for me mentally. And thank you so much for the help so far!

Create your GUI in the main.lua script, or a file included by that (like menu.lua).

[GorzenDev]

3 hours ago, Core said:

Ah, ok. But how would you add button or panel normally, never done that and I didn't find tutorials. Adding Pivot to the scene and script to that pivot? Do I have to add pivot for every button/panel I want to add to the menu? Like I said, I'm noob... I would love to get away with just editing current menu to my needs to keep everything menu-related as simple as possible.

 

Edit. Yup, will post screenshot when I get this figured out! It is somewhat important step for me mentally. And thank you so much for the help so far!

adding elements to the current menu doesnt involve pivots.
i am still figuring it all out but i can try to explain what i learned so far.

so lets start with saying Menu.lua is basicly just a function which creates/returns a table.

function BuildMenu(context)

	local GameMenu={}
	local scale = 1

in this function we create a gui for the menu to hold the elements.

	--GUI
	local gui = GUI:Create(context)
	gui:Hide()
	gui:SetScale(scale)
	local widget
	
	gui:GetBase():SetScript("Scripts/GUI/Panel.lua")
	gui:GetBase():SetObject("backgroundcolor",Vec4(0,0,0,0.5))

	GameMenu.gui=gui
	GameMenu.context = context

then we create menu elements (in this case 3 buttons)

	--Create a link button for new game
	GameMenu.newbutton = Widget:Button("NEW GAME",100,gui:GetBase():GetSize().y/2-60,300,20,gui:GetBase())
	GameMenu.newbutton:SetString("style","Link")
	GameMenu.newbutton:SetAlignment(1,0,0,0)

	--Create a push button for options
	GameMenu.options = Widget:Button("OPTIONS",100,gui:GetBase():GetSize().y/2-10,300,20,gui:GetBase())
	GameMenu.options:SetString("style","Push")
	GameMenu.options:SetAlignment(1,0,0,0)

	--Create a push button for Quit
	GameMenu.quit = Widget:Button("QUIT",100,gui:GetBase():GetSize().y/2+40,300,20,gui:GetBase())
	GameMenu.quit:SetString("style","Push")
	GameMenu.quit:SetAlignment(1,0,0,0)

after we added the elements we need , we could scroll down to the function GameMenu:ProcessEvent(event) 

in that function there are some events WindowSize,WidgetSelect and WidgetAction

in this case we just need the elseif event.id == Event.WidgetAction code block

create your button logics here  (for easier reading i left only the 3 buttons we are using as example in this code block)

elseif event.id == Event.WidgetAction then
			--Options Button Logic
			if event.source == self.options then
				self:GetSettings()
				self.tabber:SelectItem(0)
				self:ProcessEvent(Event(Event.WidgetAction,self.tabber,0))
				self.newbutton:Disable()
				self.options:Disable()
				self.quit:Disable()
				self.optionspanel:Show()
			
			--New/Resume Game Button Logic
			elseif event.source == self.newbutton then
				if self.newbutton:GetText()=="NEW GAME" then
					if Map:Load("Maps/WorkSpace.map") then
						prevmapname = "WorkSpace"
						
						--Send analytics event
						Analytics:SendProgressEvent("Start",prevmapname)
						
						self.newbutton:SetText("RESUME GAME")
					end
				end
				self.gui:Hide()
				--self.context:GetWindow():HideMouse()
				self.context:GetWindow():FlushMouse()
				self.context:GetWindow():FlushKeys()
				self.context:GetWindow():SetMousePosition(self.context:GetWidth()/2,self.context:GetHeight()/2)
				Time:Resume()
				
			--Quit Button Logic
			elseif event.source == self.quit then
				self.newbutton:Disable()
				self.options:Disable()
				self.quit:Disable()
				self.confirmquitpanel:Show()

			end
		end

and the function that will make it all tick will be the update function
 

	function GameMenu:Update()
		--show/hide menu logic
		if context:GetWindow():KeyHit(Key.Escape) then
			if self.optionspanel:Hidden() then
				if self.newbutton:GetText()=="NEW GAME" then
					self:ProcessEvent(Event(Event.WidgetAction,self.quit))
				else
					if self.gui:Hidden() then
						Time:Pause()
						self.gui:Show()
						self.context:GetWindow():ShowMouse()
					else
						self.gui:Hide()
						self.context:GetWindow():FlushMouse()
						self.context:GetWindow():FlushKeys()
						--self.context:GetWindow():HideMouse()
						self.context:GetWindow():SetMousePosition(self.context:GetWidth()/2,self.context:GetHeight()/2)
						Time:Resume()
					end
				end
			else
				self:ProcessEvent(Event(Event.WidgetAction,self.closeoptions))
			end
		end
		
		while EventQueue:Peek() do
			local event = EventQueue:Wait()
			if self:ProcessEvent(event)==false then return false end
		end
		return true
	end

 

i hope this explains a bit as to how Menu.lua is build in basic ways.
and how to add new buttons.

 

 

 

[Core]

Thank you very much for seeing all that trouble to explain, I appreciate it. Sometimes I can be thick headed :), but I think I got it, going to fiddle with the menu this evening!

[GorzenDev]

5 minutes ago, Core said:

Thank you very much for seeing all that trouble to explain, I appreciate it. Sometimes I can be thick headed :), but I think I got it, going to fiddle with the menu this evening!

dont forget to look at the documentation for Widget.

it helps understanding whats available for adding and what to use for get/set script variables.

good luck and have fun messing with it i like the GUI system it is very flexible and fast .

[GorzenDev]

this is still a work in progress and dont mind the graphics, i used whatever images i had laying about.
just wanted to show that even animated elements could be created 

http://www.youtube.com/watch?v=4sapsnW9O1I

[Core]

1 hour ago, GorzenDev said:

this is still a work in progress and dont mind the graphics, i used whatever images i had laying about.
just wanted to show that even animated elements could be created 

http://www.youtube.com/watch?v=4sapsnW9O1I

That looks awesome!