Este blog esta em reforma no momento.

Interface multi dispositivo um ideal possível

Esboço de UI para dialogos
Mais alguns rascunhos de interface, venho fazendo vários esboços e depois que peguei essa tablet acabei fazendo mais ^_^
A LibRocket tem um sistema de template que inclusive conta com um mecanismo para arrastar janelas na tela, ótimo para MMOs para desktop mas nem tanto para pequenas telas. Bom com isso eu ando remodelando umas coisas.

Falta ainda uma rebuscada para dar o tom, mas acho que esse novo modelo vai ficar mais bonito e jogável.

Eu também troquei a fonte Comic Book pela fonte Suplexmentary Comic NC pois esta última me parece mais com cara de quadrinho. No entanto não achei muita informação sobre as formas de uso dela nem no DA do artista, apenas uma indicação de "free" no DaFont.

Esboço de UI para informação rápida
Primeiro em modo de jogo o sistema de iteração básico que não deve mudar muito.
O mini mapa eu devo redesenhar só um pouco, e ele também será reprogramado porque o primeiro usava os overlays da OGRE agora farei um apenas usando a LibRocket.

Detalhe da UI de dialogos
Em modo dialogo a coisa muda de figura quem sabe uma câmera pré definida e a forma de balão para os diálogos.
A seleção de opções pode ser feita de modo a seguir o foco do scroll de forma a não ser necessário dar cliques nem toques na tela possibilitando o uso de gamepads.

Os controles:
A - Retorna ao menu principal, Diário que resume todas as conversas do jogo e Encerrar para fechar o diálogo.
B - Um campo Select que pode funcionar como em um formulário HTML ou ser selecionável a partir do gamepad. As opções do diálogo também podem abrir lojas ou inventários ou até opções do jogo... fazendo uma máquina de estados tudo é possível.
C - Barra de scroll na lateral completa da tela, grande e fácil de clicar.
D - Quando existir mais conteúdo essa bolinha aparece, pequeno cuidado mas nunca é pouco.

Esboço tela da loja
Sistema de compra e venda de bugigangas também em tela cheia.
Não tem como não ser menos que convencional nessa hora.


O mecanismo de scroll usando a LibRocket
A LibRocket é poderosa e fazer um texto extenso funciona muito bem, no entanto ela ainda não faz milagres e ficar fazendo teste em geometrias uma por uma exige muito, minha alternativa é fazer uma barra de scroll na mão e fazer o teste de que cada paragrafo do texto esteja na área visível usando Lua mesmo. É o preço do layout personalizado.

O mecanismo de gerência de tela
A interface Lua da OgreKit é realmente muito boa dá pra montar um FPS ou jogo de ação tranquilo, agora quando se precisa apelar para uma situação mais complexa ela se mostra bem limitada, até da pra montar um bom sistema de recursos mas tem que se montar muito código para isso.

Para resolver isso eu abandonei a API nativa e até a SWIG e criei uma API própria, repassando as classes na medida que preciso para Lua. Pareceu um trampo hercúlio no começo mas esta facilitando bastante.
Basicamente há uma classe gerente acoplada à engine principal, a cada render ela chama um conjunto de Controles e os executa e eu posso a qualquer momento retirar ou adicionar controles.

A interface Lua da OgreKit é boa mas eu abandonei ela assim como a SWIG e fiz minhas classes de interface na mão, o resultado ficou melhor integrado num framework.
Só de economia de usar "Switch Case", "If" e mesmo troca de função "MainLoop" dinamicamente eu economizei muito código.

Eu uso um mecanismo de encaixe de controles, cada controle é responsável por um aspecto do ambiente seja a câmera, o minimap ou mesmo todo o cenário.
Na hora que preciso mudar toda a cena desacoplo um controle do loop do aplicativo e acoplo outro.

A LibRocket é renderizada em um controle separado, de forma que eu posso inclusive remover TODO o cenário da renderização. Faço isso para a loja, por exemplo, onde é visualizada na tela cheia.

Segue um diagrama meio feito as pressas pra ilustra a bagaça.

Diagrama do sistema de render

Comentários