Workflow desenvolvido na Aquiris para desenvolvimento de UI (Interface de Usuário) nos nossos jogos desenvolvidos com a Unity.

2. Um Workflow Robusto para
trabalhar com UI na Unity
Até sua avó consegue fazer UI assim

3. Apresentação
Bruno “Tinnus” Ferreira
Senior Engineer
Juliano Silveira
Technical Artist

5. Como prover o melhor resultado visual possível
com um workflow eficiente?

6. Dando poder para os artistas!

7. Montagem de UI
UI/UX DESIGN TECH ART ENGINEERING
C#

8. Ferramentas desenvolvidas pelos engineers dão
controle para a UI chegar neles muito perto da
funcionalidade final

9. Animators + UI na montagem garantem um
workflow quase independente de código novo
Animator com UI não é o jeito mais otimizado do mundo, mas já vamos
chegar nisso

10. Todas transições e fluxos de UI chegam no
engineer funcionando

11. Como garantir que todo esse workflow e toda
essa UI tenham uma performance viável?
Parte divertida

12. Quem monta a UI precisa ter conhecimento da
plataforma para garantir que tudo funciona...

13. Considerando coisas como:
● Uma UI otimizada dificilmente tem uma limitação parecida com a
de um cenário, não precisamos nos preocupar tanto com
quantidade de triângulos por ex.
● Difícilmente você vai querer comprimir seu atlas.
● Sempre pensar no overdraw.
● Unity UI é bem CPU Costly. Isso é relativamente novo para um
artista, se preocupar com UI reconstruindo e etc.

14. Trabalhando dentro das limitações

15. Animator + Canvas

16. Comprimindo Atlas RGB

17. Geometria na UI!

18. Estendendo o sistema de UI

20. Cenas dos últimos capítulos...
Resumo rápido do que falamos de UI nas últimas apresentações

21. UI - tips and tricks

22. UI - tips and tricks

23. UI - Soft Mask
● Shader customizado de UI com um
input de textura grayscale
multiplicando no alpha.
● Essa textura recebe mapeamento em
screen space com offset alimentado
por um script.

24. Canvas e batches?

25. Muitos ícones? Muitas currencies?
Asset Bundles!

26. Entenda o calcanhar de Aquiris do seu jogo

27. Entenda o calcanhar de Aquiris Aquiles do
seu jogo

28. Como os sistemas suportam isso?

29. Aquiris UI Framework
Objetivos
- Empoderar o designer
- Reduzir o trabalho do programador (e do designer)
- Facilitar mudanças nas telas
- Reduzir código repetitivo
- Resolver o controle de fluxo entre telas

30. Aquiris UI Framework
Arquitetura
- UI separada em "camadas"
- Cada camada é uma máquina de estados (FSM)
- Ou seja, cada camada pode estar em 1 estado por vez (ou desligada)
- Uma “view” está atrelada a um ou mais estados
- “view” = GameObject que representa uma hierarquia de elementos de UI
- Em geral, prefabs que representam telas ou partes delas
- A view está visível se e somente se algum dos seus estados está ativo
- Estado visual das views é controlado por Animators
- O framework apenas liga as views e seta parâmetros no Animator root da view

31. Aquiris UI Framework - Arquitetura
Camadas (Layers)
- Identificadas por um inteiro (arbitrário)
- Layer 0, Layer 1, Layer 10 etc
- Noção de ordem entre camadas não é explícita
- Mas pode ser utilizada pelo jogo
- ex. desligar input da tela caso alguma camada superior esteja ligada
- Uma camada possui uma lista de estados possíveis, ou desligada
- Cada estado pertence a apenas uma camada
- Representação abstrata: não existem na cena
- Só o que existe na cena são as views

32. Aquiris UI Framework - Arquitetura
Estados
- Representadas por uma string (case-insensitive)
- TITLE_SCREEN, GAMEPLAY, MAP, RESULTS, OPTIONS, GAME_OVER etc
- Cada estado faz parte de uma camada
- Atrelados implicitamente a uma lista de views
- Quando o estado é selecionado na camada, suas views são ativadas
- Quando outro estado é selecionado na camada, suas views são desativadas
- Representação abstrata: não existem na cena
- Só o que existe na cena são as views

33. Aquiris UI Framework - Arquitetura
Views
- Representadas por uma hierarquia de GameObjects na cena
- Cada view pode estar atrelada a vários estados
- Visibilidade da view é controlada pelo sistema + Animator
- Sistema liga a view -> Sistema chama trigger de entrada
- Sistema chama trigger de saída -> sistema desliga a view
- Configuradas com um script (ViewConfiguration)

34. Aquiris UI Framework - Configuração de views
Intro Delay / Outro Delay
- Delay para chamar o Animator
Exit State
- Estado do Animator para desligar a tela
Transition Triggers
- Triggers de in/out no Animator
- Inclui transição interna
Show on State List
- Em quais estados mostrar a view?

35. Aquiris UI Framework - Ferramentas
Debug Menu
- Invocado com uma hotkey, permite mudar entre estados diretamente para
testes de fluxo e acelerar o desenvolvimento

36. Aquiris UI Framework - Ferramentas
Scripts auxiliares
- ChangeStateComponent
- DisableLayerComponent
- StateFlowComponent
- PointerEventDispatcher/Listener
- ToggleEventDispatcher/Listener

37. Aquiris UI Framework - Código
Como o sistema se apresenta para o código?
- Fluxo controlado por um singleton: UIManager
- Chamadas de controle de fluxo
- ChangeState(string stateName)
- DisableLayer(int layerIndex)
- Callbacks
- OnBeforeViewStateChange
- OnAfterViewStateChange

38. Como integrar os dados nas telas?

39. Integração de Dados: MVC com referências diretas
Vantagens
- Suportado nativamente pelo framework
- Controller instanciado automaticamente
- Simples de entender e usar
- Boa performance e uso de memória
Desvantagens
- Referências diretas a componentes
dificultam mudanças
- Gera código repetitivo
- Problemático para casos mais complexos

40. Integração de Dados: MVVM

41. Integração de Dados: MVVM
Vantagens
- Referências indiretas reduzem acoplamento
e facilitam mudanças
- Reduz código repetitivo
- Menos código em casos complexos
Desvantagens
- Uso pesado de reflection
- Menos compatibilidade
- Menos performance
- Maior uso de memória
- Mais complexo de entender e usar

43. Referências
Squeezing Unity: Tips for raising performance
Let's Talk Content Optimization

44. Obrigado!
@BrunoTinnus
@3DJu
jobs@aquiris.com.br