GUI questions

[akroma222]

How is this coming along Zimber?
Great that you have chosen to modify this particular area
Very keen to see your code/files

I have a simple menu example project I can send when I get home; and/or you can look at John Wordsworth's Menu system.
(any, string)

Also keen to see your simple example Isaac... I struggle getting my head around some of this GUI bizniz

[zimberzimber]

Pretty good -


(textures are shit tho)

[akroma222]

Send me your textures and I can pretty them up

[Isaac]

Also keen to see your simple example Isaac... I struggle getting my head around some of this GUI bizniz

https://www.dropbox.com/s/h359z7ayvv0r1 ... o.zip?dl=0
I made this about two years ago. It hasn't been touched since; it still has lots of magic number offsets; (some of which I've no idea anymore of why they are there —exactly, but they are for text & image positioning). It's an example of a working menu called by the onDrawGui hook. This menu generates all of the language buttons via passes through a loop for each language listed in a selection table. Each pass will conditionally re-write each button with its current state background; (which can be normal, hovered over, or pressed).

SpoilerShow

This uses a single texture for the three button states.


The rest is just the script_entity.

SpoilerShow

Code: Select all

function showMenu() --causes renderMenu() to run every frame

	party.party:addConnector('onDrawGui', self.go.id, "renderMenu")
	GameMode.setEnableControls(false)
	
end

function hideMenu() --stops renderMenu() from running every frame

	party.party:removeConnector('onDrawGui', self.go.id, "renderMenu")
	GameMode.setEnableControls(true)
	
end

-- menu button text table
supported = {"English","French","Spanish","Croation", "Polish","Dutch","Italian", "Zulu", "Czech", "Norwegian", "German", "Sweedish"}
language_choice = nil --can be checked for the user's language selection.

--menu
function renderMenu(self, context)
	--panel
		local X, Y = context.width /2 -236, context.height /2 -190
		context.drawGuiItem2("ConfirmDialog", X, Y, 0, 0, 430,300, 493, 335 )
	
	--buttons
		local state
		local language = nil
		local count = 1
		local selection = nil
		local buttons = {}
		
		X, Y = context.width /2 -206 , context.height /2 -118 --image placement
		context.font('medium')
		for z = 1,4 do	
			for c = 1, 3 do
				if count > #supported then break
				 end
				local offset = 0
				state = context.button(supported[count], X, Y, 140, 37) 
				context.drawImage2("mod_assets/textures/button_atlas.dds", X, Y, 0,iff(state==nil,0,80), 140, 40, 140, 40)
				context.color(0,0,0,255)
				context.drawText(supported[count], X + 71-(5*#supported[count])+ offset, Y + 26 +offset)
				context.color(255,255,255,255)				
				if (state~=nil and context.mouseDown(0)) or selected == count then offset = 1
					context.drawImage2("mod_assets/textures/button_atlas.dds", X, Y, 0,41, 140, 39, 140, 40)
					selected = count context.color(96,184,255,255)	language = supported[count]
				end
				context.drawText(supported[count], X + 70-(5*#supported[count])+ offset, Y + 25+ offset)
				context.color(255,255,255,255)			
				if state then selection = count mousePressed = true 
				 end
				X=X+140  --button width
				count = count +1	
			end
			Y=Y+37
			X=X-420
		end
		
		X, Y = context.width /2, context.height /2  --image placement
		context.font("large")
		 if not language then language = "Choose a language" end
		
		if language or selected then
		context.color(0,0,0,255)
			context.drawText(language, X-(6 * #language)+1, Y-150)
		context.color(255,255,255,255)	
			context.drawText(language, X-(6 * #language), Y-151 )
		end
		context.drawGuiItem("ButtonApply", X-45, Y+42)
		local apply = (context.button("apply", X-45, Y+42, 92,32))
		if apply then
			context.drawGuiItem("ButtonApplyHover", X-45, Y+42) -- ButtonApply
			playSound("click_up")
			party.party:removeConnector('onDrawGui', self.go.id, "menu")
				if selected then language_choice = language end
			hideMenu()
		end
			
		if selection then		 
			playSound("click_down")
		end

end

The party object has a placeholder onDrawGui defined.

The idea is to build the menu with gui calls on every frame, even if there is no change to the menu; not drawing it for a frame, means it doesn't get drawn for that frame. Interactivity is achieved by conditionally changing what gets drawn —each time the hooked function runs; each frame.

[akroma222]

The rest is just the script_entity.

SpoilerShow

Code: Select all

function showMenu() --causes renderMenu() to run every frame

	party.party:addConnector('onDrawGui', self.go.id, "renderMenu")
	GameMode.setEnableControls(false)
	
end

function hideMenu() --stops renderMenu() from running every frame

	party.party:removeConnector('onDrawGui', self.go.id, "renderMenu")
	GameMode.setEnableControls(true)
	
end

-- menu button text table
supported = {"English","French","Spanish","Croation", "Polish","Dutch","Italian", "Zulu", "Czech", "Norwegian", "German", "Sweedish"}
language_choice = nil --can be checked for the user's language selection.

--menu
function renderMenu(self, context)
	--panel
		local X, Y = context.width /2 -236, context.height /2 -190
		context.drawGuiItem2("ConfirmDialog", X, Y, 0, 0, 430,300, 493, 335 )
	
	--buttons
		local state
		local language = nil
		local count = 1
		local selection = nil
		local buttons = {}
		
		X, Y = context.width /2 -206 , context.height /2 -118 --image placement
		context.font('medium')
		for z = 1,4 do	
			for c = 1, 3 do
				if count > #supported then break
				 end
				local offset = 0
				state = context.button(supported[count], X, Y, 140, 37) 
				context.drawImage2("mod_assets/textures/button_atlas.dds", X, Y, 0,iff(state==nil,0,80), 140, 40, 140, 40)
				context.color(0,0,0,255)
				context.drawText(supported[count], X + 71-(5*#supported[count])+ offset, Y + 26 +offset)
				context.color(255,255,255,255)				
				if (state~=nil and context.mouseDown(0)) or selected == count then offset = 1
					context.drawImage2("mod_assets/textures/button_atlas.dds", X, Y, 0,41, 140, 39, 140, 40)
					selected = count context.color(96,184,255,255)	language = supported[count]
				end
				context.drawText(supported[count], X + 70-(5*#supported[count])+ offset, Y + 25+ offset)
				context.color(255,255,255,255)			
				if state then selection = count mousePressed = true 
				 end
				X=X+140  --button width
				count = count +1	
			end
			Y=Y+37
			X=X-420
		end
		
		X, Y = context.width /2, context.height /2  --image placement
		context.font("large")
		 if not language then language = "Choose a language" end
		
		if language or selected then
		context.color(0,0,0,255)
			context.drawText(language, X-(6 * #language)+1, Y-150)
		context.color(255,255,255,255)	
			context.drawText(language, X-(6 * #language), Y-151 )
		end
		context.drawGuiItem("ButtonApply", X-45, Y+42)
		local apply = (context.button("apply", X-45, Y+42, 92,32))
		if apply then
			context.drawGuiItem("ButtonApplyHover", X-45, Y+42) -- ButtonApply
			playSound("click_up")
			party.party:removeConnector('onDrawGui', self.go.id, "menu")
				if selected then language_choice = language end
			hideMenu()
		end
			
		if selection then		 
			playSound("click_down")
		end

end

Thanks Isaac - great and easy to follow example
Ive attempted quite a few GUI things (havent finished Locks n Traps menu yet)
but it just hasnt gelled completely with me and I see people coding things that are obvious, but I never thought to (ways to go)
But thankyou! That script is very helpful

[AndakRainor]

Additionally, if the aspect ratio is narrower than 1.3:1, multiply the scale by 0.8. If the aspect ratio is between 1.3:1 and 1.4:1, multiply it by 0.9.

I totally missed that in my ui! Thanks for the info.

[AndakRainor]

Additionally, if the aspect ratio is narrower than 1.3:1, multiply the scale by 0.8. If the aspect ratio is between 1.3:1 and 1.4:1, multiply it by 0.9.

I totally missed that in my ui! Thanks for the info.

A little warning about that; in the screen size list the game gives me, the 1600 x 1200 size is an exception to the rule shared by minmay. I don't have any more details to share at this point, but it is the only size that does not work with the previous formula.

[zimberzimber]

If its the only exception, it shouldn't be too hard giving it an exceptional size

[Isaac]

Additionally, if the aspect ratio is narrower than 1.3:1, multiply the scale by 0.8. If the aspect ratio is between 1.3:1 and 1.4:1, multiply it by 0.9.

I totally missed that in my ui! Thanks for the info.

A little warning about that; in the screen size list the game gives me, the 1600 x 1200 size is an exception to the rule shared by minmay. I don't have any more details to share at this point, but it is the only size that does not work with the previous formula.

16x10 This is the screen ratio of my own monitor; and I had troubles getting the UI changes for my Tiger Form Potion to stay centered across resolution swaps.