Design de interface com circulos
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é...
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:
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:
[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.
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é...
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:
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:
[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
Postar um comentário
Como fiquei sabendo que um pobre blogueiro foi processado por um comentário anonimo esses dias, so me resta me precaver contra a ineficácia da legislação em tratar o meio online. Mas eu prometo que libero rapido ^_~