How to change UI image render order dynamically on runtime

Questions & Answers
1

I want to navigate through a book that has different sections, where ach section has a bookmark. I need to render the corresponding bookmark over the current page if you are in any page of that marked section. The rest of the bookmarks should be rendered below the current page, as you are not in any page of those sections. As you navigate through the different sections bookmarks will go from below to over to below.

All assets (pages and bookmarks) are Images in the same canvas.

Can I achieve this with UI Images and a single canvas or do I need to switch to render this through Sprites? Using different canvases here seems quite a messy option, but I might be missing something if that’s the best option.

2

It can be achieved by changing page’s position in the hierarchy on runtime since the bottom gameObject renders on top of the others with the same render queue.

Just add transform.SetAsLastSibling(); to the function your game calls for a page when a player opens it. You may also want to add transform.SetAsFirstSibling(); or transform.SetSiblingIndex(transform.GetSiblingIndex() - 1); to a function that’s called when a player closes the page.

See set as last sibling, set as first sibling and set sibling index in documentation for more info.