Thank you! I ended up following this suggestion and it works! Here are the steps on how to do it (in case someone in the future faces the same issue)
How to draw a specific GUI in the background behind the other elements
Steps:
- Copy the gui material (from the builtins materials) and name it “gui_bg”.
- Change the ‘name’ and the ‘tag’ from
gui
togui_bg
. (Don’t modify the vertex and fragment references). - Assign the material to the GUI that needs to be in the background.
- In the render script add a couple of lines.
- In the
init
function add:
- In the
...
self.gui_bg_pred = render.predicate({"gui_bg"})
...
- In the
update
function, before the-- render tiles
comment add:
-- render Background UI
--
render.set_view(vmath.matrix4())
render.set_projection(vmath.matrix4_orthographic(0, render.get_window_width(), 0, render.get_window_height(), -1, 1))
render.enable_state(render.STATE_STENCIL_TEST)
render.draw(self.gui_bg_pred)
render.draw(self.text_pred)
render.disable_state(render.STATE_STENCIL_TEST)