Strange drawing order of gui

So, i have 2 gui materials: “gui” and “shop”.
I draw them in that order:

    render.draw(self.gui_pred) 
    render.clear({[render.BUFFER_STENCIL_BIT] = 0})
    render.draw(self.shop_pred)

I clear stencil buffer, because both gui use “Clipping” nodes.
GUI placed in main.collection in this order.

And i got this:

BUT if i just change order in main.collection, like:

This gives a different result, just what I need:

I assure you that more code of the project never changed.
The question actually is, why the order of the GUI objects in the main.collection alter the final result? I clearly pointed out what the material are .gui files and specify them in order in .render script

EDIT: So, i found a solution: gui.set_render_order
But, now i have question. why can’t I adjust the drawing order in render script?
Do I understand correctly that the material for the gui is to be set ONLY drawing rules?
It does not matter in what order we will draw the gui in the render script? Am I right?

1 Like

I must add that materials “shop” and “gui” differ ONLY in the tag, the shaders I have not change

“main.gui” and “hud.gui” both use “gui.material”

The order in which gui components are listed in the outline should never be taken as an indication of actual render order. You can use gui.set_render_order() to decide in which order gui components are rendered. You should also be able to assign different materials and control when they are rendered in your custom render script so I’m not really sure why you’re not getting it to function properly. Could you please post your full render script?

So, it seems you are in fact only using 1 .material file: gui.material?

What I would try to do is to actually have two .material files: gui.material, and shop.material and point to them in your .gui files. In those materials, you would set one tag in each material (“gui” / “shop”)

Yes I meant that I have two materials which differ only in the tag

function init(self)
    ...
    self.gui_pred = render.predicate({"gui"})
    self.text_pred = render.predicate({"text"})
    self.shop_pred = render.predicate({"shop"})
     ...
end

function update(self, dt)
	render.clear({[render.BUFFER_COLOR_BIT] = self.clear_color, [render.BUFFER_DEPTH_BIT] = 1, [render.BUFFER_STENCIL_BIT] = 0})
    render.set_depth_mask(true)
	
    render.set_viewport(0, 0, render.get_window_width(), render.get_window_height())
    render.set_view(self.view)

    render.set_depth_mask(false)
    render.enable_state(render.STATE_BLEND)
    render.disable_state(render.STATE_DEPTH_TEST)
    render.disable_state(render.STATE_STENCIL_TEST)
    render.disable_state(render.STATE_CULL_FACE)

    render.set_projection(vmath.matrix4_orthographic(-self.pixel_width*self.z,  self.pixel_width*self.z, -self.pixel_width*0.5*self.z, self.pixel_width*0.5*self.z, -1, 1))
	
	
	--render.set_blend_func(render.BLEND_ONE, render.BLEND_SRC_COLOR)
	
	render.draw(self.tile_pred)
	render.draw(self.particle_pred)
	if self.vision_pred_enabled then
		render.draw(self.vision_pred)
		render.draw(self.vision_pred)	
	end
	render.draw(self.thing_pred)
	render.draw(self.moved)
    
  	  

    

	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_pred) 
    render.clear({[render.BUFFER_STENCIL_BIT] = 0})
    render.draw(self.shop_pred)
    render.draw(self.text_pred)
    
    if self.noise_enable then
   		local content = render.constant_buffer()
    	content.time = vmath.vector4(math.random())
    	content.alpha = vmath.vector4(1,1,1,self.noise_alpha)
    	render.draw(self.noise_pred, content)
    end
    
    render.disable_state(render.STATE_STENCIL_TEST)
	

	
   	render.draw_debug3d()
    render.draw_debug2d()
end