Construa seu próprio jogo de física webgl

Sep 13, 2025

Como

Este projeto será dividido em diferentes partes. Vamos dar uma breve introdução a Heroku, mostrar como usar fisijs com três.js, explique como lidar com eventos de soquete sobre Node.js e também como vamos manusear os dados enviados.

20 exemplos incríveis de webgl em ação

01. Heroku.

Heroku is an easy to use and free to trial node.js web server — Heroku é fácil de usar e livre para o servidor da Web do Node.js

Este projeto será hospedado em Heroku. , que é uma plataforma de nuvem para hospedar seus aplicativos. Tem uma grande variedade de idiomas suportados, como Ruby, Java, Php e Python. Vamos usar o Node.js.

Inscreva-se para uma conta e escolha Node.js. Para este projeto, podemos usar o servidor básico, que é gratuito. Após o registro, você virá ao seu painel onde você pode criar seu aplicativo. Isso criará um subdomínio no Herokuapp.com.

Como método de implantação, você pode optar por usar a interface de linha de comando Heroku (CLI) para implantar usando seu repositório Git ou ter uma conexão configurada para o github ou Dropbox. Eu escolhi ir com o seu cli; Isso exigirá uma instalação. Mas em troca você recebe uma variedade de novas ferramentas úteis, uma delas é a depuração ao vivo através do seu terminal.

Para configurar seu servidor, recomendo seguir as etapas Como descrito aqui .

Para implantar você usa comandos padrão do Git. Cada um que você usa desencadeará o servidor de compilação e seu aplicativo será implantado no servidor Heroku e, em seguida, será visível no seu subdomínio.

Quando o código for implantado, você pode visualizar seu projeto em [YourProject] .HOOKUAPP.com. Para visualizar os logs use o comando 'Heroku logs - cauda' no seu terminal. Algumas das coisas que são mostradas é o que está sendo servido para o cliente - mostra as conexões de soquete e, se você quiser depurar seu código, você também pode usar o console.log para sair para o terminal.

02. Construa a cena da física

Tap your screen or hit the spacebar to bounce the table up — Toque na sua tela ou acerte a barra de espaço para saltar a mesa

Nós estaremos usando o mais popular Webgl. estrutura, três.js. , para construir uma cena 3D contendo um objeto no qual prenderemos a física. A Biblioteca de Física da Escolha é Fisijs. , um plug-in para três.js. Como uma extensão para três.js, a Physijs usa a mesma convenção de codificação, facilitando a utilização se já estiver familiarizado com três.js.

A primeira coisa é a mesa de bilhar. Estamos usando os fisijs Alturafieldmesh. Porque esta malha lerá a altura do pleaseometry. Por isso, basicamente se envolverá em torno do objeto Three.JS.

 Var tabelaometria = nova três.planeometria (650, 500, 10, 10);
var tabematerial = fisijs.createematerial (
  novo três.meshphongmaterial ({
    Brilhante: 1,
    Cor: 0xb00000,
    emissivo: 0x111111,
    Lado: três.Doubleide.
  }),
  .8, // fricção
  .4 // restituição
);
Tabela = New Physijs.HeightFieldmesh (mesaometria, tabela de tabela, 0);

Então Alturafieldmesh. requer uma geometria, mas também um material fisijs. Estamos adicionando dois novos recursos ao material de três.js. Esses são o. atrito e restituição variáveis. A atrito é a resistência que o objeto faz, e a restituição refere-se ao "bounciness". Essas duas variáveis definirão quão real a física se sentirão em sua cena.

Para as bolas de piscina criadas, não queremos fazê-los muito insistentes, então mantenha o número baixo. Como três.js, fisijs também tem uma série de formas básicas para ir ao redor da malha original. Spheremeh. Envolvendo o. Esferaometria vai dar a física da bola. Ao iniciar a cena, chamamos Buildball (8) , que desencadeará a seguinte função ...

 var buildball = função (numberball) {
 var balltexture = novo três.texture ();
 var Ballindex = Ball.Length;

Adicione a textura:

 Balltexture = três.imageutils.loadtexture ('texturas /' + numberball + '_ball.jpg', função (imagem) {
     BallTexture.Image = imagem;
  });

Crie o material habilitado para fisijs com algumas propriedades decentes de atrito e bounce:

var ballmaterial = fisijs.createematerial (
    novo três.meshlambertmaterial ({
      Mapa: Balltexture,
      Brilhante: 10,
      Cor: 0xDDDDD,
      emissivo: 0x111111,
      Lado: três.fronteside.
    }),
    .6, // fricção
    .5 // restituição
  );

Mapeamento de textura:

 ballmaterial.map.wraps = ballmaterial.map.wraphapt = three.repeatwrapping;
  ballmaterial.map.repeat.set (1, 1);
 Crie o Spheremesh habilitado para física e inicie no ar:

  bola [Ballindex] = novo fisijs.spheremaSh (
    New Three.Sphereometry (25, 25, 25),
    Ballmaterial,
    100.
  );
  // y offset para o topo da tela
  bola [Ballindex] .Posição.Y = 500;
  // Shadows.
  bola [Ballindex] .ReceiveShadow = verdadeiro;
  bola [Ballindex] .CastShadow = true;
  // Adicione a bola à sua tela
  cena.add (bola [Ballindex]);
};

Estamos adicionando textura de um arquivo .jpg. Criar o material e usar isso para o Spheremeh. Para criar o objeto, que colocaremos verticalmente para o top, então ele cai na tela.

03. conexão de soquetes

The key goal of our game is emulating the physical movements to the screen — O objetivo principal do nosso jogo está emulando os movimentos físicos para a tela

Para comunicação entre o servidor e o cliente, estaremos usando soquete.Io. . Esta é uma das bibliotecas mais confiáveis disponíveis para Node.js. É construído no topo da API WebSockets.

Agora a física está habilitada para as malhas que precisamos da entrada do usuário para tornar o jogo interativo. O dispositivo de entrada que estamos usando é o dispositivo móvel. O navegador móvel é o controlador que fornecerá dados Do acelerômetro e giroscópio para o desktop onde você verá o jogo.

Em primeiro lugar, uma conexão entre o navegador móvel e o navegador da área de trabalho devem ser feitos. Cada vez que um navegador se conecta com nosso aplicativo Node.js, precisamos fazer uma nova conexão. Uma conexão ao lado do cliente é configurada usando o seguinte:

 Var soquete = io.connect ();

Para enviar mensagens, você usa o emitir função:

 Socket.emit ('nome do evento', dados);

E para receber você usar o .sobre() função:

 soquete.on ('nome do evento', função () {});

03.1. Configurando o jogo de mesa

Se estivermos em um desktop, enviaremos nossos soquetes um dispositivo emitindo no nosso servidor a área de trabalho é o jogo usando a seguinte linha de código:

 Var soquete = io.connect ();
// Quando a mensagem inicial de boas-vindas, responda com o tipo de dispositivo 'jogo'
soquete.on ('Bem-vindo', função (dados) {
  Socket.emit ("Device", {"Tipo": "jogo"});
});

O servidor nos devolverá um código de chave / jogo exclusivo gerado por criptografia . Isso será exibido para a área de trabalho.

 // gera um código
var gamecode = crypto.randombytes (3) .tostring ('hexa'). Substring (0, 4) .tolowercase ();
// garanta exclusividade
enquanto (Gamecode em Socketcodes) {
  gamecode = Crypto.Randombytes (3) .Tring ('hexa'). Substring (0, 4) .tolowercase ();
}
// Loja Código do jogo - & GT; Associação de soquete
Socketcodes [Gamecode] = io.sockets.sockets [Socket.id];
Socket.Gamecode = GameCode

Diga ao cliente do jogo para inicializar e mostrar o código do jogo para o usuário ...

 Socket.emit ("inicialize", gamecode);

03.2. Conecte o controlador ao jogo

Para conectar o dispositivo móvel ao jogo, usaremos um formulário para enviar o código do jogo da tela da área de trabalho. No formulário, enviaremos o código do jogo para o servidor para autenticação.

 Socket.emit ("Device", {"Tipo": "Controlador", "Gamecode": GameCode});

O servidor verificará se o código do jogo é válido e configurará a conexão com o Desktop Game

 se (dispositivo.gamecode em Socketcodes) {
  // Salve o código do jogo para comandos do controlador
  Socket.Gamecode = Device.Gamecode.
  // Inicialize o controlador
  Socket.emit ("conectado", {});
  // comece o jogo
  SocketCodes [Device.Gamecode] .emit ("conectado", {});
}

Uma vez que a conexão seja completa, vamos dar-se a um pequeno empurrão de 8 esferas do X e Z com o seguinte comando ...

 Bola  .SetLinearvelocity (novo três.Vector3 (30, 0, 30));

04. Envio de dados

Agora que a conexão é estabelecida, queremos enviar as variáveis de giroscópio e acelerômetro para o jogo. Usando o. janela.Devicemotion. e a janela.DeViceorientation Eventos, temos os dados que precisamos para emular os mesmos movimentos de inclinação do nosso telefone para a mesa de bilhar. Eu escolhi usar um intervalo de 100 mm para emitir esses valores.

setInterval (função () {
  Socket.emit ('enviar giroscópio', [math.round (roty), matemática (Rotx), AY, AX]);
}, intervalo);

No lado do cliente, resolveremos a latência entre os valores recebidos do servidor para a inclinação da tabela do bilhar. Para tweening usamos Tweenmax. .

 // manipular dados de giroscópios recebidos
soquete.on ('novo giroscópio', função (dados) {
  var degy = dados  & lt; 0? Math.abs (dados ): -data ;
  Tweenmax.to (table.rotation, 0,3, {
    X: Degtorad (Degy - 90),
    Y: Degtorad (Data ),
    facilidade: linear.asenone,
    ONUPDATE: FUNÇÃO () {
        Tabela .__ Dirtyrotation = TRUE;
    }
  });
});

05. Eventos Extra

More balls equals more fun. Try hitting the spacebar or tapping the screen of your mobile — Mais bolas é igual a mais diversão. Tente bater na barra de espaço ou tocando na tela do seu celular

Para dar um pouco mais de interatividade, adicionei alguns eventos extras para o usuário brincar. Vamos dar ao usuário a opção de adicionar bolas extras ao lado da bola 8 usando os números no teclado.

Outro é saltar a mesa para cima. Para isso, você pode acertar a barra de espaço. Mas também estamos adicionando um evento de toque no dispositivo do controlador. Isso enviará um evento para a mesa de bilhar, que aumentará a mesa e enviará as bolas.

Primeiro, precisamos pegar os eventos do teclado ...

 // crie bolas / mesa de slam na barra de espaço
document.addeventlistener ('keydown', função (e) {
  if (e.keycode == 49) {// tecla: 1
    Buildball (1);
  } else if (e.keycode == 50) {// tecla: 1
    Buildball (2);
  } else se (e.keycode == 51) {// tecla: 1
    Buildball (3);
  } else if (e.keycode == 32) {// chave: barbar
    Bolicheb ();
  }
});

O Buildball. Função é a mesma função que usamos para criar a esfera 8-ball. Estamos apenas usando diferentes texturas que vão envolver a esfera. Para empurrar a mesa, damos a mesa um movimento para cima ao longo do eixo y com este código ...

 tabela.SetLineArVelocity (novo três.Vector3 (0, 500, 0));

Conclusão

Add more balls and see how much your browser can handle — Adicione mais bolas e veja quanto seu navegador pode lidar

Quando você tem um conceito para um jogo ou qualquer outra coisa, é inteiramente provável que existam bibliotecas que pudessem facilitar sua vida. Esta é uma demonstração que mostra como isso pode funcionar. Esperamos que isso ajude a desencadear algumas ideias criativas ou ajudá-lo com seu projeto atual. Veja um exemplo ao vivo do jogo aqui ou encontrá-lo em Github .

Este artigo foi originalmente publicado em questão 300 de internet , a principal revista do mundo para web designers e desenvolvedores profissionais. Compre a edição 300. ou Inscreva-se aqui .

Artigos relacionados:

Comece com webgl usando três.js
20 ferramentas de javascript para explodir sua mente
Crie visuais 3D interativos com três.js

Construa seu próprio jogo de física webgl

01. Heroku.

02. Construa a cena da física

03. conexão de soquetes

03.1. Configurando o jogo de mesa

03.2. Conecte o controlador ao jogo

04. Envio de dados

05. Eventos Extra

Conclusão

Como - Artigos mais populares

Armazenamento em nuvem para fotos e imagens: Como escolher a melhor nuvem para o seu trabalho

Dicas de desenvolvimento visual: Conte uma história com sua arte

Como construir um blog com jekyll

Como placar um rosto para animação

Transforme ilustrações 2D na arte 3D

Faça efeitos de tipografia 3D interativos

Como preparar gráficos ilustradores para efeitos após

Combine as habilidades tradicionais e digitais para criar uma cobertura cômica

Categorias