Este documento discute um workflow robusto para trabalhar com interfaces de usuário (UI) na Unity, dando poder aos artistas para criar UIs eficientemente enquanto garantindo um bom desempenho. Ele descreve ferramentas que permitem que a UI chegue aos engenheiros funcionando conforme o esperado e como garantir que toda a UI tenha um desempenho viável considerando aspectos como overdraw e custo de CPU. O documento também apresenta um framework de UI chamado Aquiris que objetiva empoderar designers, reduzir trabalho de programadores e facilitar mudanças nas
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
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.
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.
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
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
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
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