Jump to content
Ultra Engine Community

Sprite Layers and the GUI

Josh

Entry posted by Josh ·

2,755 views

 Share

For finer control over what 2D elements appear on what camera, I have implemented a system of "Sprite Layers". Here's how it works:

  • A sprite layer is created in a world.
  • Sprites are created in a layer.
  • Layers are attached to a camera (in the same world).

The reason the sprite layer is linked to the world is because the render tweening operates on a per-world basis, and it works with the sprite system just like the entity system. In fact, the rendering thread uses the same RenderNode class for both.

I have basic GUI functionality working now. A GUI can be created directly on a window and use the OS drawing commands, or it can be created on a sprite layer and rendered with 3D graphics. The first method is how I plan to make the new editor user interface, while the second is quite flexible. The most common usage will be to create a sprite layer, attach it to the main camera, and add a GUI to appear in-game. However, you can just as easily attach a sprite layer to a camera that has a texture render target, and make the GUI appear in-game on a panel in 3D. Because of these different usages, you must manually insert events like mouse movements into the GUI in order for it to process them: 

while true do
	local event = GetEvent()
	if event.id == EVENT_NONE then break end
	if event.id == EVENT_MOUSE_DOWN or event.id == EVENT_MOUSE_MOVE or event.id == EVENT_MOUSE_UP or event.id == EVENT_KEY_DOWN or event.id == EVENT_KEY_UP then
		gui:ProcessEvent(event)
	end
end

You could also input your own events from the mouse position to create interactive surfaces, like in games like DOOM and Soma. Or you can render the GUI to a texture and interact with it by feeding in input from VR controllers.

alphalabs3_crane2_singleaxis.png.c84bd594a5841f0ca9bf7514a8097939.png

Because the new 2D drawing system uses persistent objects instead of drawing commands the code to display elements has changed quite a lot. Here is my current button script. I implemented a system of abstract GUI "rectangles" the script can create and modify. If the GUI is attached to a sprite layer these get translated into sprites, and if it is attached directly to a window they get translated into system drawing commands. Note that the AddTextRect doesn't even allow you to access the widget text directly because the widget text is stored in a wstring, which supports Unicode characters but is not supported by Lua. 

--Default values
widget.pushed=false
widget.hovered=false
widget.textindent=4
widget.checkboxsize=14
widget.checkboxindent=5
widget.radius=3
widget.textcolor = Vec4(1,1,1,1)
widget.bordercolor = Vec4(0,0,0,0)
widget.hoverbordercolor = Vec4(51/255,151/255,1)
widget.backgroundcolor = Vec4(0.2,0.2,0.2,1)

function widget:MouseEnter(x,y)
	self.hovered = true
	self:Redraw()
end

function widget:MouseLeave(x,y)
	self.hovered = false
	self:Redraw()
end

function widget:MouseDown(button,x,y)
	if button == MOUSE_LEFT then
		self.pushed=true
		self:Redraw()
	end
end

function widget:MouseUp(button,x,y)
	if button == MOUSE_LEFT then
		self.pushed = false
		if self.hovered then
			EmitEvent(EVENT_WIDGET_ACTION,self)
		end
		self:Redraw()
	end
end

function widget:OK()
	EmitEvent(EVENT_WIDGET_ACTION,self)
end

function widget:KeyDown(keycode)
	if keycode == KEY_ENTER then
		EmitEvent(EVENT_WIDGET_ACTION,self)
		self:Redraw()
	end
end

function widget:Start()

	--Background
	self:AddRect(self.position, self.size, self.backgroundcolor, false, self.radius)
	
	--Border
	if self.hovered == true then
		self:AddRect(self.position, self.size, self.hoverbordercolor, true, self.radius)
	else
		self:AddRect(self.position, self.size, self.bordercolor, true, self.radius)
	end

	--Text
	if self.pushed == true then
		self:AddTextRect(self.position + iVec2(1,1), self.size, self.textcolor, TEXT_CENTER + TEXT_MIDDLE)	
	else
		self:AddTextRect(self.position,  self.size, self.textcolor, TEXT_CENTER + TEXT_MIDDLE)
	end

end

function widget:Draw()

	--Update position and size
	self.primitives[1].position = self.position
	self.primitives[1].size = self.size
	self.primitives[2].position = self.position
	self.primitives[2].size = self.size
	self.primitives[3].size = self.size

	--Update the border color based on the current hover state
	if self.hovered == true then
		self.primitives[2].color = self.hoverbordercolor
	else
		self.primitives[2].color = self.bordercolor
	end

	--Offset the text when button is pressed
	if self.pushed == true then
		self.primitives[3].position = self.position + iVec2(1,1)
	else
		self.primitives[3].position = self.position
	end

end

This is arguably harder to use than the Leadwerks 4 system, but it gives you advanced capabilities and better performance that the previous design did not allow.

  • Like 3
 Share

7 Comments

Recommended Comments

SpiderPig
Quote

Because of these different usages, you must manually insert events like mouse movements into the GUI in order for it to process them: 


while true do
	local event = GetEvent()
	if event.id == EVENT_NONE then break end
	if event.id == EVENT_MOUSE_DOWN or event.id == EVENT_MOUSE_MOVE or event.id == EVENT_MOUSE_UP or event.id == EVENT_KEY_DOWN or event.id == EVENT_KEY_UP then
		gui:ProcessEvent(event)
	end
end

 

I don't quite understand how to get the events to the widgets?  I'm using C++, are there any other examples floating around?

  • Like 1
Link to comment
Josh

gui->ProcessEvent() will send the event to the appropriate widget it effects. Those widgets may then emit an event for the widget action, which can be detected in the main event handling code like in your example above.

So mouse and key events get send into the GUI and then may result in new events being generated.

The reason it is done this way is it gives you precise control over the raw input, so you can do a 3D in-game GUI and control how the mouse events work.

  • Like 1
Link to comment
SpiderPig

So I would have to detect the mouse click in C++ and then call gui->ProcessEvent()?

 

Like;

If mouseclick() == true

Event event = new Event();

event.id = MOUSE_CLICK

GUI->ProcessEvent(event)

 

Please ignore the syntax, I'm currently at work on my phone ?

Link to comment
Josh

Just call GetEvent to retrieve the next event in the queue. If it is a mouse or hey event you can pass it straight to the GUI processEvent method.

Link to comment
SpiderPig

I tried that but GetEvent() always returns EVENT_NONE excpet on startup when I get EVENT_WINDOW_SIZE and then EVENT_WINDOW_MOVE 

auto _event = GetEvent();
if (_event.id != EVENT_NONE) {
	Confirm("Somthing Else");
}

 

Link to comment
SpiderPig

Defiantly not being called somewhere else, I commented out all my code in  the loop except this; 

void cGame::Loop()
{
	while (MainFrame::window->Closed() == false && ExitGame == false) {
			auto _event = GetEvent();
			if (_event.id != EVENT_NONE) {
				Confirm("Somthing Else");
			}
	}
}

It only showed the message box when the window was being created and moved.  I'll see if I can put together a small project and upload it.

Link to comment
Guest
Add a comment...

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

×
Copyright © 2024 Ultra Software.
All rights reserved.
×
×
  • Create New...