Atualmente, estou criando um jogo de tiro em primeira pessoa 3D no navegador usando o WebGL. Como eu implementaria a aparência do mouselook / free para esse jogo?
10
Atualmente, estou criando um jogo de tiro em primeira pessoa 3D no navegador usando o WebGL. Como eu implementaria a aparência do mouselook / free para esse jogo?
Respostas:
O Mouselook agora é suportado no Chrome e Firefox através da especificação W3C Pointer Lock . Essencialmente:
Um bom artigo de tutorial é o Pointer Lock e o First Person Shooter Controls no HTML5Rocks.
fonte
Capture
mousemove
Eventos e use as propriedadesscreenX
escreenY
do objeto de evento para atualizar a posição da câmera (use o delta até o últimoscreenX
escreenY
posição para obter a quantidade de movimento).Se você tiver algum tipo de gráfico de cenário , poderá criar uma configuração de nó como a seguinte:
O movimento no eixo X gira o YawNode e o movimento no eixo Y gira o PitchNode. O CameraNode será movido quando o player se mover.
fonte
É bem simples e requer apenas duas coisas.
Código de Evento de Amostra
Aqui está um exemplo de código-fonte para a manipulação de eventos. O módulo do sistema (que lida com toda a interação do navegador do jogo <-->) controla duas variáveis:
lastMousePosition
elastMouseDelta
.Para rastrear a câmera com o mouse, basta
lastMouseDelta
saber como você saberá quantos graus rodar quadro a quadro.O mesmo código de movimento da câmera
Aqui está um código de exemplo para lidar com a rotação da câmera. Dado o número de pixels que o mouse se moveu na direção X ou Y, gire a câmera em muitos graus.
Mais tarde, quando você realmente renderizar seu mundo, simplesmente gere uma matriz de visualização de modelo a partir de sua câmera. (Convertendo a posição da câmera, guinada, inclinação e rotação em vetores que você pode passar para o gluLookAt.) E você deve estar pronto.
fonte