Jump to content

Understanding new GUI widgets


Core
 Share

Recommended Posts

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.

  • Thanks 1

My job is to make tools you love, with the features you want, and performance you can't live without.

Link to comment
Share on other sites

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?

  • Thanks 1
Link to comment
Share on other sites

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.

My job is to make tools you love, with the features you want, and performance you can't live without.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:

leadwPrev.JPG.29bbcf5de42f3bb67288497d2c6f7fce.JPG

this works for me.

undocumented though

  • Like 1
  • Upvote 4
Link to comment
Share on other sites

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().

Link to comment
Share on other sites

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


 

Link to comment
Share on other sites

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.

  • Upvote 1

My job is to make tools you love, with the features you want, and performance you can't live without.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

My job is to make tools you love, with the features you want, and performance you can't live without.

Link to comment
Share on other sites

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

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

My job is to make tools you love, with the features you want, and performance you can't live without.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

My job is to make tools you love, with the features you want, and performance you can't live without.

Link to comment
Share on other sites

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.

 

 

 

  • Thanks 2
Link to comment
Share on other sites

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 .

  • Upvote 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...