Download - Anatomía de GUI
![Page 1: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/1.jpg)
ANATOMíA DE
Nacho LasherasGameplay Programmer@nacholhs7 March 2015
GUI
![Page 2: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/2.jpg)
![Page 3: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/3.jpg)
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.
![Page 4: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/4.jpg)
But that is not enough anymore
Why this mobile games need so much UI?
![Page 5: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/5.jpg)
Sec to sec = intrinsically rewarding
EVE Online promises epic fleet battles...
![Page 6: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/6.jpg)
Metagame = excite player with a extra 1%
EVE is, in reality, a game about waiting a month to put four launchers in your spaceship.
![Page 7: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/7.jpg)
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.
![Page 8: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/8.jpg)
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.
![Page 9: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/9.jpg)
Who builds it?
![Page 10: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/10.jpg)
A lot of people involved
○ Game designer○ 2D artist○ UI/UX designer○ Programmer
But who should do what?
![Page 11: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/11.jpg)
Programmers think about the best way to do something.
Artists think how can use the tools they have to do it.
Artists/Programmers
![Page 12: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/12.jpg)
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.
![Page 13: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/13.jpg)
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
![Page 14: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/14.jpg)
How to work with your artist?
![Page 15: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/15.jpg)
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.
![Page 16: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/16.jpg)
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.
![Page 17: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/17.jpg)
● 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?
![Page 18: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/18.jpg)
Style
You want your ButtonRed be a subclass of MyGameButton
Changing the game style should be as easy as possible. Because design is changing.
![Page 19: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/19.jpg)
Atlases
If your engine supports batching, you want to maximize it on the UI.
Keep an eye on the draw calls of the UI.
![Page 20: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/20.jpg)
But don’t atlas too soon
Beware of packing stuff when your game style is not set.
![Page 21: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/21.jpg)
ResolutionsThat is a very pretty layout… it would be a
shame if it didn’t fit the screen
![Page 22: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/22.jpg)
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.
![Page 23: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/23.jpg)
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.
![Page 24: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/24.jpg)
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 750x11402. 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.
![Page 25: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/25.jpg)
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
![Page 26: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/26.jpg)
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.
![Page 27: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/27.jpg)
“A image is worth a thousand words”
But text has their own set of problems in the world of UI
![Page 28: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/28.jpg)
Localization● Word lengths (English is very short)● Hardcoded string archeology● Culture (decimal separators, currency
position)
![Page 29: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/29.jpg)
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: 256Chinese (Simplified): ~7,000 Chinese (Traditional): ~13,000Korean: ~11,000 syllables
And Arab is even more complex.
Text Rendering
![Page 30: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/30.jpg)
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.
![Page 31: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/31.jpg)
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
![Page 32: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/32.jpg)
Some final tipsLessons learned that I couldn’t fit
elsewhere.
![Page 33: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/33.jpg)
Scripting
Very basic scripting will help you with a lot of common cases.
Full-featured scripting will solve almost all of them.
![Page 34: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/34.jpg)
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
![Page 35: Anatomía de GUI](https://reader031.vdocumento.com/reader031/viewer/2022020314/5889daaa1a28ab83478b629b/html5/thumbnails/35.jpg)
Questions?
Nacho Lasheras@nacholhs