Este blog esta em reforma no momento.

Design de interface com circulos

Sistema de seleção de alvos e dialogo
Seleção de objetos é uma coisa complicada, num RPG ela deve fornecer boas informações mas sem ferrar com a visão periférica e interação do jogador.
Esse modelo é o de uma seta tipo alvo fixa no objeto e um circulo maior com as opções de ação.
Sim, vagamente inspirado no The Sims mas, né...

Croqui para menu de opções de ação do jogador
O circulo maior se move pouco apenas quando o menor começa a querer sair de sua borda, garantindo assim que o menu de opções fique o mais “fixo” possível ao alvo a ser manipulado independente do frenesi do alvo. Ele também fica limitado à tela .

Essa ideia é uma forma natural (posso dizer “orgânica”) de ver a interação entre elementos pois na natureza objetos empurram uns aos outros.
Assim o usuário estará vendo uma cena mais familiar.

Isso se justifica, também, porque o alvo se move ou mesmo a camera faz algum movimento a primeira seta se move muito bruscamente, se as opções ficassem fixas nela o jogador teria dificuldade de clicar nessa situação e ao mesmo tempo se o menu fosse fixo o jogador teria que realizar um movimento amplo para realizar a ação. Jogadores de Warcraft estão acostumados com teclado, mas como teclado anda sendo um utensílio supérfluo hoje em dia!

Implementação
Bom, a parte de gerar os elementos foi a mais complicada e alvo de outro post (Librocket Custon Decorators).
A ideia aqui é gerar o menor número de linhas de código para realizar a ação. Ai começamos a pensar em termos de matemática simples.

O mecanismo de seleção funciona assim:
Esquema de funcionamento do movimento do menu
Na imagem M é a distância que a seleção ativa se moveu ao centro do menu.
A é a distância do raio de menu (80 pixels no caso).
B é a distância que extrapola o circulo e teremos que mover POS com ela.
Primeiro é pegar o vetor (direção) de M, nesse caso eu só tenho os valores de X e Y.
Eu não preciso ficar fazendo contas de seno e cosseno, esses dados já estão à mão pois se eu dividir o deslocamento de M em X/Y pela distância de M eu tenho um número fracional menor que 1 que é na verdade o cosseno do ângulo (coisas básicas de triângulos), dando os dados que preciso para representar o vetor de M.
Divodo esses valores pela distância percorrida:  M.X / M e M.Y / M.
E depois multiplico pela distância A (80 pixels no caso).
Esses numeros eu subtraio de M.X e M.Y e tenho a distância em que o alvo extrapolou o menu.
Pronto somo M.X e M.Y à POS.X e POS.Y e o danado do menu se desloca dando a impressão de que o alvo empurrou o circulo do menu maior.

Ok, ok, sou péssimo descritor de coisas! Um pouco do código final para vocês melhor entenderem:
Código Lua do mecanismo de menu

[off] Faz tempo que não posto nada no blog, ando pensando demais no post e a coisa esfria, sem mencionar que essas postagens são as que o pessoal mais vem procurar.
Me esforçarei mais daqui pra frente e... comentem digam oque mais querem ver, sugestões de conteúdo são bem vindas.

Comentários