- Home /
Canvas draw order messed up on render mode change (overlay to camera)
I'm retrofitting a completed game to work on mobile and in order to support different aspect ratios (through letterboxing) I've changed the canvas from "Screen space - overlay" to "Screen space - camera". The issue is this: before the change the ui elements were drawn in nested heirarchy order from top to bottom. After the change, I don't really know what the draw order is, but it's definitely not top to bottom.
Is there a way to change the canvas to "Screen space - camera" without losing the heirarchy-based draw order and without needing to set z position for each ui element? (it's quite a complex ui).
Alternately, is there a way to change the render position/size of "Screen space - overlay" on the screen to allow letterboxing?
Thanks for any help you can provide.
EDIT: I just tried to recreate the issue with a simplistic new Unity project and the nested heirarchy ordering remained when switching render modes. The question now becomes: what would cause the non-heirarchy-based ordering of ui elements in the main project? The z position is 0 for all of the ui elements...
Answer by violgamba · Aug 22, 2020 at 09:50 PM
I've worked through to an answer to this question. It actually had multiple answers, which I've provided below.
1) This first issue wasn't a draw order thing as it turned out. It was that canvas elements in "overlay" mode measure space in pixels, while elements in "camera" mode measure space in camera-specific coordinates. If a custom cursor is placed at the mouses (pixel) position each frame, it shows up fine in "overlay" mode, but in "camera" mode it requires transforming the mouse pixel coordinates to camera coordinates first.
2) This second issue was tricker: Some of the canvas ui elements use custom shaders. These shaders worked fine when the canvas was in "overlay" mode, but switching the canvas to "camera" mode caused some of the shaders to draw out of order. The solution (for me) was to add the "Queue" tag to the out-of-order shaders. This tag helps define the order of rendering. The bad shaders were missing this tag so were defaulting to the "Geometry" Queue. This was fine in "overlay" mode, but in "camera" mode the "Geometry" queue is rendered before elements with the default ui shader (UI/Default).
Fixing these two issues resolved my woes. I hope they can help someone else struggling through this process.
Your answer
Follow this Question
Related Questions
Ordering UI elements in the Hierarchy is affected by DontDestroyOnLoad 1 Answer
How to see what the UI canvas will look like in the final build? 0 Answers
Canvas - Aspect ratio fitter 0 Answers
Issues with world space canvas for different resolutions. Any Workaround ? 0 Answers
How to make my UI items/canvas stretch to fill preset aspect ratio 0 Answers