SlideShare ist ein Scribd-Unternehmen logo
1 von 27
UNITY UI
A DEEP DIVE INTO
A DEEP DIVE INTO UNITY UI - THE GIST OF IT
WHAT WILL WE COVER?
▸Quick overview of the other UI frameworks out there.
▸Demo of the UnityUI workflow.
▸Must-Have Add-ons/Assets for UI Development
▸Architecture; keeping things modular and maintainable
▸(Stretch) Anchoring: Strategies for dealing with multiple
resolutions and aspect ratios across platforms.
PICK YOUR
POISON
A DEEP DIVE INTO UNITY UI - PICK YOUR POISON
NGUI
▸ “Industry Standard” in Unity for a
long time.
▸ WYSIWYG, separate from Unity’s
2D pipeline.
▸ Hope you like Atlases. Features
custom Atlas packers for fonts and
sprites.
▸ Bitmap fonts for text recommended.
Lackluster dynamic font support.
A DEEP DIVE INTO UNITY UI - PICK YOUR POISON
UNITY UI (FORMERLY
CALLED UGUI)
▸ The official Unity UI Solution.
▸ Adapted from and well-integrated
with Unity's 2D tools. Also
WYSIWYG.
▸ Dynamic Batching (no Atlases to
manage).
▸ Dynamic Fonts only.
A DEEP DIVE INTO UNITY UI - PICK YOUR POISON
SCALEFORM
▸ Probably the most commonly used
UI framework in games (outside
Unity).
▸ A more expensive but fully featured,
flash-based UI framework. Probably
still has a UnitySDK.
▸ Authored outside of Unity.
▸ Action script.
▸ Vector graphics.
A DEEP DIVE INTO UNITY UI - PICK YOUR POISON
COHERENT UI
▸ HTML/CSS/Javascript, authored
outside Unity.
▸ Costly but jam-packed with features.
SO, WHY
USE UNITY
A DEEP DIVE INTO UNITY UI - PICK YOUR POISON
SO, WHY USE UNITY UI OVER OTHER
FRAMEWORKS?
▸Free. Open Source.
▸Official solution. Not just a one-man-show, not just an after-
thought integration by a 3rd party.
▸Better editor integration. Editing and iterating inside Unity is
a simpler, faster, and often more approachable workflow
than editing externally.
▸Better compatibility with Editor Extensions / Asset Store Add-
ons.
LET’S
BUILD
TEXT
ESSENTIAL ADD-ON #1
SO NOW THAT
WE’VE
COVERED THE
ARCHITECT
URE AND
MAINTAINA
BILITY
A DEEP DIVE INTO UNITY UI - ARCHITECTURE AND
MAINTAINABILITY
SYMPTOMS OF BAD
ARCHITECTURE
▸ Fragility/Brittleness: hard to change
things; doing so breaks other things.
▸ WETness: Many similar things are
implemented different ways.
▸ Lack of tests. Hard to write tests, or
tests are fragile.
▸ Code smell. Prefab Smell. Scene
Smell. Your project smells.
LET’S
BUILD
PREFAB
ESSENTIAL ADD-ON #2
A DEEP DIVE INTO UNITY UI - ARCHITECTURE AND
MAINTAINABILITY
UI PREFAB
MANAGEMENT IS
KEY▸ UI “elements” work best as prefabs.
But, whole UI views should be
prefabs as well. Hard to have both
without getting fancy
▸ Prefab nesting allows you to properly
keep track of “prefabs inside other
prefabs”
▸ Prefab inheritance to better
encapsulate prefabs and control how
changes propagate to related
elements
A DEEP DIVE INTO UNITY UI - ARCHITECTURE AND
MAINTAINABILITY
CONSIDER
STANDARDS AND
PATTERNS▸ MVC provides a scalable way to
separate data and logic (model),
input handling (controller), and the
presentation of the UI elements
(view).
▸ IoC (Inversion of Control) is a better
way to manage dependencies for
your UI. Check out StrangeIoC.
A DEEP DIVE INTO UNITY UI - THAT’S ALL FOLKS
THANKS!
▸ Feel free to e-mail me:
charlie.helman@gmail.com
▸ Or follow me on Twitter.
@charliehelman

Weitere ähnliche Inhalte

Mehr von BeMyApp

Présentation des APIs cognitives IBM Watson
Présentation des APIs cognitives IBM WatsonPrésentation des APIs cognitives IBM Watson
Présentation des APIs cognitives IBM Watson
BeMyApp
 

Mehr von BeMyApp (20)

Introduction to epid
Introduction to epidIntroduction to epid
Introduction to epid
 
Introduction ciot workshop premeetup
Introduction ciot workshop premeetupIntroduction ciot workshop premeetup
Introduction ciot workshop premeetup
 
Présentation des APIs cognitives IBM Watson
Présentation des APIs cognitives IBM WatsonPrésentation des APIs cognitives IBM Watson
Présentation des APIs cognitives IBM Watson
 
Crédit Agricole S.A. Personae et Parcours
Crédit Agricole S.A. Personae et ParcoursCrédit Agricole S.A. Personae et Parcours
Crédit Agricole S.A. Personae et Parcours
 
Cisco Paris DevNet Hackathon slideshow - Intro
Cisco Paris DevNet Hackathon slideshow - IntroCisco Paris DevNet Hackathon slideshow - Intro
Cisco Paris DevNet Hackathon slideshow - Intro
 
Tumeurs Neuroendocrines : une vue d'ensemble
Tumeurs Neuroendocrines : une vue d'ensembleTumeurs Neuroendocrines : une vue d'ensemble
Tumeurs Neuroendocrines : une vue d'ensemble
 
Building your first game in Unity 3d by Sarah Sexton
Building your first game in Unity 3d  by Sarah SextonBuilding your first game in Unity 3d  by Sarah Sexton
Building your first game in Unity 3d by Sarah Sexton
 
Using intel's real sense to create games with natural user interfaces justi...
Using intel's real sense to create games with natural user interfaces   justi...Using intel's real sense to create games with natural user interfaces   justi...
Using intel's real sense to create games with natural user interfaces justi...
 
Introduction to using the R200 camera & Realsense SDK in Unity3d - Jon Collins
Introduction to using the R200 camera & Realsense SDK in Unity3d - Jon CollinsIntroduction to using the R200 camera & Realsense SDK in Unity3d - Jon Collins
Introduction to using the R200 camera & Realsense SDK in Unity3d - Jon Collins
 
Audio Mixer in Unity5 - Andy Touch
Audio Mixer in Unity5 - Andy TouchAudio Mixer in Unity5 - Andy Touch
Audio Mixer in Unity5 - Andy Touch
 
Shaders - Claudia Doppioslash - Unity With the Best
Shaders - Claudia Doppioslash - Unity With the BestShaders - Claudia Doppioslash - Unity With the Best
Shaders - Claudia Doppioslash - Unity With the Best
 
[HACKATHON CISCO PARIS] Slideshow du workshop Smart City
[HACKATHON CISCO PARIS] Slideshow du workshop Smart City[HACKATHON CISCO PARIS] Slideshow du workshop Smart City
[HACKATHON CISCO PARIS] Slideshow du workshop Smart City
 
Tools to Save Time
Tools to Save TimeTools to Save Time
Tools to Save Time
 
[Workshop e résidents] présentation intent, craft ai, dalkia et incubateur
[Workshop e résidents] présentation intent, craft ai, dalkia et incubateur[Workshop e résidents] présentation intent, craft ai, dalkia et incubateur
[Workshop e résidents] présentation intent, craft ai, dalkia et incubateur
 
[Webinar E-résidents #1] Présentation des différents métiers du bâtiment conn...
[Webinar E-résidents #1] Présentation des différents métiers du bâtiment conn...[Webinar E-résidents #1] Présentation des différents métiers du bâtiment conn...
[Webinar E-résidents #1] Présentation des différents métiers du bâtiment conn...
 
[IoT World Forum Webinar] Review of CMX Cisco technology
[IoT World Forum Webinar] Review of CMX Cisco technology[IoT World Forum Webinar] Review of CMX Cisco technology
[IoT World Forum Webinar] Review of CMX Cisco technology
 
HP Helion Episode 6: Cloud Foundry Summit Recap
HP Helion Episode 6: Cloud Foundry Summit RecapHP Helion Episode 6: Cloud Foundry Summit Recap
HP Helion Episode 6: Cloud Foundry Summit Recap
 
Webinar UI/UX by Francesco Marcellino
Webinar UI/UX by Francesco MarcellinoWebinar UI/UX by Francesco Marcellino
Webinar UI/UX by Francesco Marcellino
 
HP Helion Webinar #5 - Security Beyond Firewalls
HP Helion Webinar #5 - Security Beyond FirewallsHP Helion Webinar #5 - Security Beyond Firewalls
HP Helion Webinar #5 - Security Beyond Firewalls
 
HP Helion Webinar #4 - Open stack the magic pill
HP Helion Webinar #4 - Open stack the magic pillHP Helion Webinar #4 - Open stack the magic pill
HP Helion Webinar #4 - Open stack the magic pill
 

Kürzlich hochgeladen

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Kürzlich hochgeladen (20)

Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 

Unity UI Deep Dive - Charlie Helman

  • 1. UNITY UI A DEEP DIVE INTO
  • 2.
  • 3.
  • 4.
  • 5.
  • 6. A DEEP DIVE INTO UNITY UI - THE GIST OF IT WHAT WILL WE COVER? ▸Quick overview of the other UI frameworks out there. ▸Demo of the UnityUI workflow. ▸Must-Have Add-ons/Assets for UI Development ▸Architecture; keeping things modular and maintainable ▸(Stretch) Anchoring: Strategies for dealing with multiple resolutions and aspect ratios across platforms.
  • 8. A DEEP DIVE INTO UNITY UI - PICK YOUR POISON NGUI ▸ “Industry Standard” in Unity for a long time. ▸ WYSIWYG, separate from Unity’s 2D pipeline. ▸ Hope you like Atlases. Features custom Atlas packers for fonts and sprites. ▸ Bitmap fonts for text recommended. Lackluster dynamic font support.
  • 9. A DEEP DIVE INTO UNITY UI - PICK YOUR POISON UNITY UI (FORMERLY CALLED UGUI) ▸ The official Unity UI Solution. ▸ Adapted from and well-integrated with Unity's 2D tools. Also WYSIWYG. ▸ Dynamic Batching (no Atlases to manage). ▸ Dynamic Fonts only.
  • 10. A DEEP DIVE INTO UNITY UI - PICK YOUR POISON SCALEFORM ▸ Probably the most commonly used UI framework in games (outside Unity). ▸ A more expensive but fully featured, flash-based UI framework. Probably still has a UnitySDK. ▸ Authored outside of Unity. ▸ Action script. ▸ Vector graphics.
  • 11. A DEEP DIVE INTO UNITY UI - PICK YOUR POISON COHERENT UI ▸ HTML/CSS/Javascript, authored outside Unity. ▸ Costly but jam-packed with features.
  • 13. A DEEP DIVE INTO UNITY UI - PICK YOUR POISON SO, WHY USE UNITY UI OVER OTHER FRAMEWORKS? ▸Free. Open Source. ▸Official solution. Not just a one-man-show, not just an after- thought integration by a 3rd party. ▸Better editor integration. Editing and iterating inside Unity is a simpler, faster, and often more approachable workflow than editing externally. ▸Better compatibility with Editor Extensions / Asset Store Add- ons.
  • 16.
  • 17.
  • 18.
  • 19.
  • 22. A DEEP DIVE INTO UNITY UI - ARCHITECTURE AND MAINTAINABILITY SYMPTOMS OF BAD ARCHITECTURE ▸ Fragility/Brittleness: hard to change things; doing so breaks other things. ▸ WETness: Many similar things are implemented different ways. ▸ Lack of tests. Hard to write tests, or tests are fragile. ▸ Code smell. Prefab Smell. Scene Smell. Your project smells.
  • 25. A DEEP DIVE INTO UNITY UI - ARCHITECTURE AND MAINTAINABILITY UI PREFAB MANAGEMENT IS KEY▸ UI “elements” work best as prefabs. But, whole UI views should be prefabs as well. Hard to have both without getting fancy ▸ Prefab nesting allows you to properly keep track of “prefabs inside other prefabs” ▸ Prefab inheritance to better encapsulate prefabs and control how changes propagate to related elements
  • 26. A DEEP DIVE INTO UNITY UI - ARCHITECTURE AND MAINTAINABILITY CONSIDER STANDARDS AND PATTERNS▸ MVC provides a scalable way to separate data and logic (model), input handling (controller), and the presentation of the UI elements (view). ▸ IoC (Inversion of Control) is a better way to manage dependencies for your UI. Check out StrangeIoC.
  • 27. A DEEP DIVE INTO UNITY UI - THAT’S ALL FOLKS THANKS! ▸ Feel free to e-mail me: charlie.helman@gmail.com ▸ Or follow me on Twitter. @charliehelman

Hinweis der Redaktion

  1. First,
  2. First,
  3. First off, it’s free. Free with a capital F. CoherentUI costs a couple thousand, scale-form isn’t cheap, nGUI is $90 per seat. The source is up on bitbucket, meaning there’s opportunity to customize it if you ever run into a situation where something doesn’t meet your needs. Open source contributions are pretty common, and community tweaks that don’t make it into the official source are out there and can be a lifesaver. Because it’s the official solution, Unity has an entire team of engineers and designers working on it. They have a vested interest in developing new features, keeping the bugs at bay, and they have the man-power to do that. nGUI is made by one guy. Coherent and Scale-form are smaller teams where Unity integration is seemingly lower on the priority list because it’s not their primary cash-cow. Better integrated in the editor, and building your UI in-engine is typically quicker and easier than doing it in an external app. Plus, because your UI is just a bunch of game objects with components stored in Unity scenes using Assets stored in your Unity Project, there are plenty of editor extensions out there that work well to enhance it.
  4. Spend 10 mins building a main menu.
  5. And one of those editor extensions is our first essential add-on, Text Mesh Pro.
  6. The text and font management tools in nGUI and UnityUI are cool and all, but ultimately they leave a bit to be desired.
  7. While they support most of the basic sorts of things you’d want a text label to support, it won’t be long before you find a case that they don’t really support. Plus, they’re flawed in the way they render text.
  8. In nGUI’s bitmap fonts, you have to bake your fonts to be as large as possible, but even then, get up close to the text, or present it at any type of angle, pixelation will rear its ugly head. This is especially prominent with text labels that are rendered in 3D world space instead of screen space, where players often find ways to get up close and personal with the text. It also kicks the crap out of nGUI’s and UnityUI’s text styling features.
  9. It also kicks the crap out of nGUI’s and UnityUI’s text styling features.
  10. Brittle/Fragile: Fights break out on your team when requirements change because systems are inflexible in their implementation that making a change often breaks things. WETness: Stands for write-everything-twice, or we-enjoy-typing, or waste-everyone’s-time. You might have a WET project if DejaVu is a common sensation when browsing through your project or codebase. The solution to a problem is rewritten differently every time it comes up, or many similar things are implemented different ways, or straight up copy-pasta’d in multiple places in your code. You might be surprised how common that is, especially when you’re under harsh timelines. Tests: Speaking of things that suffer due to harsh timelines — tests! For a long time, I used to think “testing stuff in Unity is too hard.” Really, our bad architecture was what made it hard. It’s hard to test UIs and the logic behind them when they’re so tightly coupled to other systems, for example. Finally, code smell. This is a term that also usually describes code, but I think, after all the stuff I’ve seen, can fairly be extended to the rest of a Unity project as well.
  11. Spend 10 mins explaining using prefabs, the limitations of just using prefabs, and then talk about prefab inheritance and nested prefabs and how they can be used in UI development.