Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ANATOMíA DE
Nacho Lasheras
Gameplay Programmer
@nacholhs
7 March 2015
GUI
In the beginning the UI was simple
Most of the player time was spent on the sec to sec, so as
developers we focus our effo...
But that is not enough anymore
Why this mobile games need so much UI?
Sec to sec = intrinsically rewarding
EVE Online promises epic fleet battles...
Metagame = excite player with a extra 1%
EVE is, in reality, a game about waiting a month to put four launchers in your sp...
What can F2P learn from EVE?
● EVE is a service. Retention is key to CCP as
it is to us in F2P.
● EVE has quite simple gam...
What does it have to do with UI?
Successful F2P games are hobbies, they need
a deep enough metagame to engage players
enou...
Who builds it?
A lot of people involved
○ Game designer
○ 2D artist
○ UI/UX designer
○ Programmer
But who should do what?
Programmers think about the best way to do
something.
Artists think how can use the tools they have
to do it.
Artists/Prog...
Art is a hack, but a very pretty one
Artist content may not be elegant, but it will
be prettier than a programmer made one.
Artists don’t fix bugs
Offloading UI work to art team is a net win:
⇧ Better quality layouts
⇧ More time invested in them ...
How to work with your
artist?
What is a layout?
If you want artists doing the UI, they need a
way of “building” the screens with the
minimum amount of h...
Design Patterns
There is a lot of literature about MVC, MVVM
and MVP.
Depending on your use case a different
approach will...
● The sec to sec is one of the states of the UI
flow.
● The “main game loop” shows the screens
How the UI and sec to sec d...
Style
You want your ButtonRed be a subclass of
MyGameButton
Changing the game style should be as easy
as possible. Because...
Atlases
If your engine supports
batching, you want to
maximize it on the UI.
Keep an eye on the draw calls
of the UI.
But don’t atlas too soon
Beware of packing stuff when your game
style is not set.
Resolutions
That is a very pretty layout… it would be a
shame if it didn’t fit the screen
This topic could fill it’s own talk
There are many different approaches to
scale UI to different sizes: anchors, springs,
...
Don’t try to solve it for everything
Set a “base” resolution to develop (most
common target device is better)
You want to ...
Resizing example
To resize from iPhone 4 (640x960) to iPhone 6
(750×1334) you need to resize 110 pixels in width and
374 i...
If you want to support gamepads, think a
little about them.
Touch lets itself to create lots of clickable
stuff which is h...
Sometimes, size matters
In theory, a iPhone and iPad have very
similar resolutions.
In practice, you need a different UI b...
“A image is worth a
thousand words”
But text has their own set of problems in
the world of UI
Localization
● Word lengths (English is very short)
● Hardcoded string archeology
● Culture (decimal separators, currency
...
That demo in CodeProject is happy enough with ASCII,
and it will be probably ok for EFIGS+Russian, but won’t
work for Asia...
Fonts: Bitmap vs TTF
● Bitmaps are easy to implement, but
package size can get out of control. Try to
minimize number of f...
If you really need to use Bitmap
Try to keep text scaling to the minimum.
Never scale up (except on animations).
Generate ...
Some final tips
Lessons learned that I couldn’t fit
elsewhere.
Scripting
Very basic scripting will
help you with a lot of
common cases.
Full-featured scripting
will solve almost all of
...
Some Unity tips
● DONT CODE YOUR UI FRAMEWORK
➢ Use New UI or buy NGUI (Noesis is also fine)
● No nested prefabs :(
● Each...
Questions?
Nacho Lasheras
@nacholhs
Anatomía de GUI
Upcoming SlideShare
Loading in …5
×

Anatomía de GUI

556 views

Published on

Some learnings after 8 years working in UI for games.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Anatomía de GUI

  1. 1. ANATOMíA DE Nacho Lasheras Gameplay Programmer @nacholhs 7 March 2015 GUI
  2. 2. In the beginning the UI was simple Most of the player time was spent on the sec to sec, so as developers we focus our effort there.
  3. 3. But that is not enough anymore Why this mobile games need so much UI?
  4. 4. Sec to sec = intrinsically rewarding EVE Online promises epic fleet battles...
  5. 5. Metagame = excite player with a extra 1% EVE is, in reality, a game about waiting a month to put four launchers in your spaceship.
  6. 6. What can F2P learn from EVE? ● EVE is a service. Retention is key to CCP as it is to us in F2P. ● EVE has quite simple gameplay: you select a target and mash your weapons. ● EVE players create the “content” for other players.
  7. 7. What does it have to do with UI? Successful F2P games are hobbies, they need a deep enough metagame to engage players enough to keep playing. ⇒ This systems are usually heavily UI reliant.
  8. 8. Who builds it?
  9. 9. A lot of people involved ○ Game designer ○ 2D artist ○ UI/UX designer ○ Programmer But who should do what?
  10. 10. Programmers think about the best way to do something. Artists think how can use the tools they have to do it. Artists/Programmers
  11. 11. Art is a hack, but a very pretty one Artist content may not be elegant, but it will be prettier than a programmer made one.
  12. 12. Artists don’t fix bugs Offloading UI work to art team is a net win: ⇧ Better quality layouts ⇧ More time invested in them (more animation and polish) ⇧ Understanding of the platform limitations
  13. 13. How to work with your artist?
  14. 14. What is a layout? If you want artists doing the UI, they need a way of “building” the screens with the minimum amount of help. Ideally the UI layout is just data, like any other asset.
  15. 15. Design Patterns There is a lot of literature about MVC, MVVM and MVP. Depending on your use case a different approach will be better for gluing the model and the view.
  16. 16. ● The sec to sec is one of the states of the UI flow. ● The “main game loop” shows the screens How the UI and sec to sec dance?
  17. 17. Style You want your ButtonRed be a subclass of MyGameButton Changing the game style should be as easy as possible. Because design is changing.
  18. 18. Atlases If your engine supports batching, you want to maximize it on the UI. Keep an eye on the draw calls of the UI.
  19. 19. But don’t atlas too soon Beware of packing stuff when your game style is not set.
  20. 20. Resolutions That is a very pretty layout… it would be a shame if it didn’t fit the screen
  21. 21. This topic could fill it’s own talk There are many different approaches to scale UI to different sizes: anchors, springs, grid based systems, ... Making a UI dynamic is quite tricky, especially if you have to support very different sizes.
  22. 22. Don’t try to solve it for everything Set a “base” resolution to develop (most common target device is better) You want to use your dynamic system as minimum as possible, as it needs a lot of tweaking to make widgets resize to any size.
  23. 23. Resizing example To resize from iPhone 4 (640x960) to iPhone 6 (750×1334) you need to resize 110 pixels in width and 374 in height. 1. Scale the screen to 750x1140 2. Use anchors to resize the layout 194 pixels in height. Result of this approach usually looks better. NGUI and New UI can be made to work that way out of the box.
  24. 24. If you want to support gamepads, think a little about them. Touch lets itself to create lots of clickable stuff which is hard to navigate with a gamepad. Think about gamepads
  25. 25. Sometimes, size matters In theory, a iPhone and iPad have very similar resolutions. In practice, you need a different UI because the screen size is much bigger.
  26. 26. “A image is worth a thousand words” But text has their own set of problems in the world of UI
  27. 27. Localization ● Word lengths (English is very short) ● Hardcoded string archeology ● Culture (decimal separators, currency position)
  28. 28. That demo in CodeProject is happy enough with ASCII, and it will be probably ok for EFIGS+Russian, but won’t work for Asian languages. Latin-9: 256 Chinese (Simplified): ~7,000 Chinese (Traditional): ~13,000 Korean: ~11,000 syllables And Arab is even more complex. Text Rendering
  29. 29. Fonts: Bitmap vs TTF ● Bitmaps are easy to implement, but package size can get out of control. Try to minimize number of faces. ● TTF are slower, but you only need “one font” and they look nicer. ● A tradeoff would be using a TTF to generate bitmaps on the fly.
  30. 30. If you really need to use Bitmap Try to keep text scaling to the minimum. Never scale up (except on animations). Generate the fonts so they are displayed as close to pixel-perfect. If possible, evaluate using SDF
  31. 31. Some final tips Lessons learned that I couldn’t fit elsewhere.
  32. 32. Scripting Very basic scripting will help you with a lot of common cases. Full-featured scripting will solve almost all of them.
  33. 33. Some Unity tips ● DONT CODE YOUR UI FRAMEWORK ➢ Use New UI or buy NGUI (Noesis is also fine) ● No nested prefabs :( ● Each screen should be “runnable” ● PlayMaker for making UI flow ➢ Mecanim looks like it could be used for that, but Animation state machines are not FSM
  34. 34. Questions? Nacho Lasheras @nacholhs

×