--- title: 【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能 tags: #unity #unite 2017 tokyo author: [Unity Technologies Japan](https://www.docswell.com/user/UnityJapan) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/4L73GLP5E5.jpg?width=480 description: 講演者：アンディ・タッチ(Unity Technologies) こんな人におすすめ ・UIデザイナー ・UIに興味のある開発者全般 受講者が得られる知見 ・Unity UIで作られたUIの最適化に関する様々なテクニック 講演動画：https://youtu.be/13Qwh2UkFmU published: May 08, 17 canonical: https://www.docswell.com/s/UnityJapan/ZV99XK-unite-2017-tokyounity-ui --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/4L73GLP5E5.jpg) # Page. 2 ![Page Image](https://bcdn.docswell.com/page/V87D1NLYEG.jpg) Tips and Tricks for Optimising Unity UI # Page. 3 ![Page Image](https://bcdn.docswell.com/page/4VJPQ522E8.jpg) Andy Touch Product Content Evangelist, Unity Technologies # Page. 4 ![Page Image](https://bcdn.docswell.com/page/L2EV5PDXEQ.jpg) Unity UI # Page. 5 ![Page Image](https://bcdn.docswell.com/page/Z57G6PYRJL.jpg) Unity UI Visual Interactive Layout Text Image Raw Image Button Toggle Slider etc Vertical Group Content Size Fitter Layout Element etc # Page. 6 ![Page Image](https://bcdn.docswell.com/page/V4EQ42MY7P.jpg) In an Ideal World… # Page. 7 ![Page Image](https://bcdn.docswell.com/page/DKJ4QLVZ71.jpg) …However, This Button Does Not Exist! # Page. 8 ![Page Image](https://bcdn.docswell.com/page/PLE1PL3D7G.jpg) 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. # Page. 9 ![Page Image](https://bcdn.docswell.com/page/8GEW2VP8J2.jpg) The Balance of UI Systems Flexibility Performance # Page. 10 ![Page Image](https://bcdn.docswell.com/page/W47ZD4K9E3.jpg) UI Batching # Page. 11 ![Page Image](https://bcdn.docswell.com/page/KYJ613QDEV.jpg) 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. # Page. 12 ![Page Image](https://bcdn.docswell.com/page/5GJ54LR874.jpg) Frame Debugger and UI Profiler Demo! # Page. 13 ![Page Image](https://bcdn.docswell.com/page/V9E2VLDVER.jpg) Sprite Atlas Demo! # Page. 14 ![Page Image](https://bcdn.docswell.com/page/5D7Y3Q2QJM.jpg) 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! # Page. 15 ![Page Image](https://bcdn.docswell.com/page/2VENVK82J8.jpg) 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! # Page. 16 ![Page Image](https://bcdn.docswell.com/page/GY796VKD73.jpg) 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’ # Page. 17 ![Page Image](https://bcdn.docswell.com/page/5G78ZPR5JD.jpg) Unity UI - Source Code bitbucket.org/Unity-Technologies/ui # Page. 18 ![Page Image](https://bcdn.docswell.com/page/ML7LD1K3JR.jpg) UI Source Code – ‘Graphic.cs’ # Page. 19 ![Page Image](https://bcdn.docswell.com/page/54EMPW2MEW.jpg) UI Source Code – ‘Graphic.cs’ # Page. 20 ![Page Image](https://bcdn.docswell.com/page/ZPER1YMLE9.jpg) UI Source Code – ‘Graphic.cs’ # Page. 21 ![Page Image](https://bcdn.docswell.com/page/NP7XYGK6JX.jpg) UI Source Code – ‘Graphic.cs’ # Page. 22 ![Page Image](https://bcdn.docswell.com/page/637K345G7D.jpg) 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 # Page. 23 ![Page Image](https://bcdn.docswell.com/page/4LJ3GLK575.jpg) UI Source Code – ‘LayoutGroup.cs’ # Page. 24 ![Page Image](https://bcdn.docswell.com/page/V8JD1N3Y7G.jpg) UI Source Code – ‘LayoutGroup.cs’ # Page. 25 ![Page Image](https://bcdn.docswell.com/page/4VEPQ54278.jpg) UI Source Code – ‘LayoutGroup.cs’ # Page. 26 ![Page Image](https://bcdn.docswell.com/page/L27V5PXX7Q.jpg) 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. # Page. 27 ![Page Image](https://bcdn.docswell.com/page/Z5JG6PVREL.jpg) 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. # Page. 28 ![Page Image](https://bcdn.docswell.com/page/V47Q426YJP.jpg) Rebuild Process – Animator • ‘Animator’ on UI – for Buttons, Transitions, etc • In ‘Graphic.cs’: # Page. 29 ![Page Image](https://bcdn.docswell.com/page/DKE4QL4ZJ1.jpg) 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! # Page. 30 ![Page Image](https://bcdn.docswell.com/page/PL71PL4DJG.jpg) Unity UI - Source Code bitbucket.org/Unity-Technologies/ui # Page. 31 ![Page Image](https://bcdn.docswell.com/page/8G7W2VX8E2.jpg) Unity UI – Best Practices Guide unity3d.com/learn/tutorials/topics/best-practices # Page. 32 ![Page Image](https://bcdn.docswell.com/page/KYE6132D7V.jpg) Thank You! Any Questions? @andytouch