Upload
unitytechnologiesjapan
View
24.969
Download
0
Embed Size (px)
Citation preview
Unity UI
Interactive Layout Visual Text
Image Raw Image
Button Toggle Slider
etc
Vertical Group Content Size Fitter
Layout Element etc
Optimising UI is Case-By-Case Dependent
• Range of Platforms: Mobile, to Console, to VR. • Range of Styles: 2D, 3D, Mixed • Range of Genres: Racing, FPS, 2D Platformer, etc
• Not all advice will work in all use-cases! • Always best to Profile and Test on target device.
UI Batching Rules
A UI Batch Happens When 2 or more Visual Components… • Are on the same Canvas. • Share the same Material. • Share the same Sprite Asset. • Have RectTransforms that are Co-Planar to each other (Same Z Pos) • Are clipped by the same Mask.
UI Shaders
• All Visual Elements: ‘UI/Default Shader’. • Supports Masking, Clipping, Vertex Coloring etc
• Built-In Unity Shader Source Code: Unity Archive Page • All Shader Source Code can be customised!
• Demo Time!
Text Mesh Pro
• Advanced Text Customisation and Rendering System • Very Popular Unity Asset Store Package
• Acquired by Unity Technologies in February 2017 • Free to Download Today!
• Demo Time!
The Rebuild Process
• UI Element Layout changes -> Element is set to ‘Dirty’. • UI Element Graphic changes -> Element is set to ‘Dirty’.
• Rebuild Process: Recalculates the ‘Dirty’ components/objects. • This can be seen in the Profiler as ‘Canvas.SendWillRenderCanvases’
Layout Components
• Vertical, Horizontal, Grid, Layout Element, etc • Very useful for structuring UI and setting up UI elements in order. • Child Order determines how the Layout is structured.
• Related RectTransform Changes -> Layout is set to ‘Dirty’. • Layout is ‘Dirty’ -> Added to Rebuild Process
Layout Components
• Suggestions: • Enable Layout when needed to be rebuilt. Disable when not needed. • Smaller number of child elements being rebuilt; combine UI elements. • Create own Layout Manager Script; Control ‘when’ Layout is updated. • Object-Pooled Scroll List; Reuse elements as they are scrolled.
Rebuild Process – Pixel Perfect
• When RectTransform’s move, they will snap to exact pixel edges.
• Pro: ‘Pixel Perfect’ visuals. • Con: Very expensive for many moving elements.
Sub Canvases
• It is possible to add a ‘Canvas’ component to child UI of a Canvas. • This will create a ‘Sub-Canvas’. • Can be used to isolate Canvas rebuilds.
• A Sub-Canvas will: - Have its own independent settings (Such as Pixel Perfect) - Rebuild its child batches, when required. - Can enable and disable visibility of all child elements.
• Demo Time!