Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能

27.480 visualizaciones

Publicado el

講演者:アンディ・タッチ(Unity Technologies)


・Unity UIで作られたUIの最適化に関する様々なテクニック


Publicado en: Tecnología
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website!
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能

  1. 1. Tips and Tricks for Optimising Unity UI
  2. 2. Andy Touch Product Content Evangelist, Unity Technologies
  3. 3. Unity UI
  4. 4. Unity UI Interactive LayoutVisual Text Image RawImage Button Toggle Slider etc VerticalGroup ContentSizeFitter LayoutElement etc
  5. 5. In an Ideal World…
  6. 6. …However, This Button Does Not Exist!
  7. 7. 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.
  8. 8. The Balance of UI Systems Flexibility Performance
  9. 9. UI Batching
  10. 10. 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.
  11. 11. Frame Debugger and UI Profiler Demo!
  12. 12. Sprite Atlas Demo!
  13. 13. 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!
  14. 14. 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!
  15. 15. 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’
  16. 16. Unity UI - Source Code
  17. 17. UI Source Code – ‘Graphic.cs’
  18. 18. UI Source Code – ‘Graphic.cs’
  19. 19. UI Source Code – ‘Graphic.cs’
  20. 20. UI Source Code – ‘Graphic.cs’
  21. 21. 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
  22. 22. UI Source Code – ‘LayoutGroup.cs’
  23. 23. UI Source Code – ‘LayoutGroup.cs’
  24. 24. UI Source Code – ‘LayoutGroup.cs’
  25. 25. 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.
  26. 26. 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.
  27. 27. Rebuild Process – Animator •  ‘Animator’ on UI – for Buttons, Transitions, etc •  In ‘Graphic.cs’:
  28. 28. 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!
  29. 29. Unity UI - Source Code
  30. 30. Unity UI – Best Practices Guide
  31. 31. Thank You! Any Questions? @andytouch