Handling Rendering Priority

[Phodex Games]

Hey guys,

 

I was searching the forums for a releated subject, but I couldnt find one, but I could imagine there is one, if so I am sorry to post the same topic again

 

So I am currently trying to come up with a way to handle diffrent objects rendering in the right order. What solutions have you for this problem.

 

For example: I have a trading menu, but my cursor is rendered behind the inventory slots and buttons rendered by the NPC Trader entity. (elements of my trading menu are rendered by two diffrent entities (Player and NPC Trader))

 

I was thinking about something where you can set a variable "renderPriority" which indicates in which order objects are rendered. So if render Priority is 1 those objects "PostRender" function is called before all the others, then come entities with priority 2,3 and so on. Thats the point I am stuck . How to make the other PostRender functions "wait" unitl the PostRender function of an specific entity is finished.

 

This I a problem I occured pretty often and havent found a solution yet, I mean that you control the order entities call functions like UpdateWorld() or PostRender(). Would really appreciate if somebody can come up with an idea

[AggrorJorn]

I would store your UI in an order list based on rend priority. Every time you create an element you add it to this list and give it a priority index. The list sorts itself when a new item has been added. Higher number means being drawn later. Then at the end of the game loop, iterate over the list and draw the UI.

[Phodex Games]

Hi Jorn. That sounds like a good idea. But I would appreciate if you could get a little bit more into detail.

I would store your UI in an order list based on rend priority. Every time you create an element you add it to this list and give it a priority index.

 

How to outsource my UI elements, or how to add them to the "list" and where do I actually render all my elements then? I cant get a clear idea how to realise this by my own sorry . I am no expert in lua coding.

[Crazycarpet]

I think Aggror thought you were using C++, however in Lua it's not much different... store all your UI elements in a table and sort that table. I don't know what your code looks like so here's a generic Lua sorting example:

local myTable = {
{ name = "key1", priority = 0 },
{ name = "key2", priority = 1 }
}
table.sort(myTable, function(a, b) return a.priority < b.priority end)

 

Then, use this table to render your UI elements one by one after world:Render() is called.

Wherever you create your widgets you'd use table.insert to assign a priority and push the UI elements to the table.

 

It's hard to give a more detailed answer because i have no idea what UI system you're using (The LE one is in beta, undocumented.) and I don't know what your code looks like at all. If you're using the LE one, keep in mind Widget::Draw() is not exposed to Lua...

[Rick]

By the sounds of it your issue is that you're rendering ui in multiple scripts PostRender() functions. For basic UI you can get away with that but as you're seeing when working with more involved UI it's best to render your entire UI at the same time. You can either make one Le entity script to do this (or do it in your player script) or use main.lua to do this.

 

It sounds like you might be brute forcing your UI though. By this I mean do you have objects that make up your UI elements or are you simply drawing all your UI elements right in PostRender() with draw commands? Ideally you want to have your UI elements be objects that are configured for how it should be drawn, and then you have some functions that actually draw. So you configure the UI elements in Start() and then draw them all in one place.

 

In my UI there is a main GUI table/class where I add UI elements to. Then in main.lua file I draw all visible elements in this GUI table/class. Inside any script I can add GUI elements (which are just tables themselves with config info about how to draw that element).

 

GUI.addElement("closeButton", { x=5, y=5, width=100, height=50, border= 1, priority=1, text="Close" })

 

Then you get into how you handle events and that can get involved with many design wars around it. It's a pretty involved topic with lots of different ways to go about designing.