Manutenção de uma tabela de classificação de jogos específica de geolocalização com Phaser e MongoDB
Avalie esse Tutorial
Quando se trata de desenvolvimento de jogos, um componente frequentemente esquecido vem na forma de um banco de dados para armazenar informações de jogabilidade. O banco de dados pode contribuir para várias funções, como armazenar informações de perfil do usuário, estado do jogo e muito mais.
Na verdade, criei um tutorial anterior intitulado Criando um jogo de desenho multijogador com Phaser e MongoDB. Neste exemplo de desenho, cada pincelada feita foi armazenada no MongoDB.
Neste tutorial, veremos um componente de dados diferente para um jogo. Exploraremos as tabelas de classificação e algumas das coisas interessantes que você pode fazer com elas. Assim como meu outro tutorial, usaremos Phaser e JavaScript.
Para ter uma ideia do que queremos realizar, dê uma olhada na imagem animada a seguir:
O jogo acima tem três telas diferentes, que são chamadas de cenas no Phaser. A primeira tela (primeiros segundos do gif) aceita a entrada do usuário como nome de usuário e também reúne informações de geolocalização sobre o player. A segunda tela é onde você realmente joga o jogo e tenta acumular pontos (coletando folhas) enquanto evita bombas! Por fim, a terceira tela é onde suas informações de pontuação e localização são enviadas. Você também verá as melhores pontuações de todos os tempos, bem como as melhores pontuações perto da sua localização, todas elas podem ser consultadas facilmente usando o MongoDB!
Não há muitos requisitos que devem ser atendidos para ter sucesso com este tutorial. Aqui está o que você precisa:
- Node.js 12+
Para este exemplo, o MongoDB Atlas armazenará todas as informações da nossa tabela de classificação e o Node.js alimentará nossa API de back-end. O jogo Phaser não tem nenhuma dependência real além de ter algo disponível para atender ao projeto. Eu uso serve para fazer isso, mas você pode usar o que quiser.
Antes de entrarmos na parte de desenvolvimento de jogos (com o Phaser), devemos cuidar da nossa API de back-end. Esta API de backend será responsável pela interação direta com nosso banco de dados. Ele aceitará solicitações do nosso jogo para armazenar dados, bem como solicitações para buscá-los.
Crie um novo diretório de projeto em seu computador e, de dentro desse diretório, execute os seguintes comandos:
Os comandos acima criarão um novo arquivopackage.json e instalarão as dependências do projeto para nosso backend. Iremos utilizar Express para criar nossa API e o driver MongoDB Node.js para comunicação com o banco de dados.
Para o backend, adicionaremos todo o nosso código a um arquivomain.js. Crie-o no diretório do seu projeto e adicione o seguinte JavaScript:
O JavaScript acima tem muitos códigos padrão que não entrará em detalhes. Se você quiser aprender como se conectar ao MongoDB com o Node.js, confira o tutorialde introdução deLauron Scheefer sobre o assunto.
Há algumas linhas para as quais gostaria de chamar a atenção, começando com a criação do objeto
MongoClient :Neste exemplo,
ATLAS_URI é uma variável de ambiente no meu computador e o Node.js está lendo a partir dessa variável. Para contexto, a variável se parece com algo assim:Independentemente de como você deseja criar o
MongoClient, verifique se o URL de conexão do MongoDB Atlas contém as informações corretas de nome de usuário e senha que você definiu no painel do MongoDB Atlas.O próximo ponto para o qual quero chamar a atenção está nas duas linhas a seguir:
Neste exemplo, meu banco de dados é
gamedev e minha collection é scores. Se você quiser usar seu próprio nome, basta trocar o que temos com seus próprios nomes de banco de dados e coleção. Além disso, como planejamos usar queries geoespaciais, precisaremos de um índice geoespacial. É aqui que entra ocomandocreateIndex. Quando lançamos nosso backend, o índice será criado para nós no campo location de nossos documentos, assim como especificamos em nosso comando.Não precisamos de nenhum documento criado neste ponto, mas quando os documentos forem inseridos, eles terão a seguinte aparência:
O campo
locationé um objeto especial e formatado em conformidade com o GeoJSON. A formatação é importante quando se trata de consultas geoespaciais e do próprio índice.Com a base do nosso backend criada, vamos começar a criar cada uma das funções do endpoint.
Como não temos dados para trabalhar, vamos começar com a função de endpoint
create :Quando o cliente faz uma solicitação de POST, pegamos o
username, scoree location da carga útil e a inserimos no MongoDB como um novo documento.O_idresultante será devolvido ao usuário quando for bem-sucedido. A validação de dados está fora do escopo deste tutorial, mas é importante observar que não estamos validando nenhum dos dados recebidos do usuário.Agora que podemos criar pontuações, precisaremos de uma maneira de consultá-las. Analisando o endpoint
get, podemos fazer o seguinte:No código acima, estamos usando o método
find em nossa coleção sem filtro. Isso significa que tentaremos recuperar todos os documentos da collection. No entanto, também estamos usando sort e limit, que diz que queremos apenas três documentos em ordem decrescente.Com esse endpoint configurado dessa maneira, podemos tratá-lo como uma função global que obtém as três principais pontuações de qualquer local. Perfeito para uma tabela de classificação!
Agora podemos restringir nossos resultados. Vamos dar uma olhada na função
getNearLocation:Aqui, também usamos o método
find, mas utilizamos uma consulta geoespacial como nosso filtro usando o operador$near. Quando passamos uma posição de latitude e longitude como parâmetros de consulta na solicitação, criamos uma consulta geoespacial que retorna qualquer documento com um local que esteja dentro de 25,000 metros da posição fornecida. Você pode alterar os números para obter os resultados de que precisa.O backend deve estar Go. Certifique-se de que está executando o aplicativo Node.js antes de tentar jogar o jogo que criamos na próxima etapa.
Quando criarmos nosso jogo, vamos querer criar um novo diretório de projeto. No seu computador, crie um novo diretório de projeto e, nele, crie um arquivoindex.html com a seguinte marcação HTML:
O código acima não deve ser executado, mas é o ponto de partida do nosso jogo Phaser. Vamos detalhá-lo.
Dentro de
<head>, você verá as seguintes tags<script>:O primeiro arquivo JavaScript é a estrutura do Faser. Os outros três são arquivos que criaremos. Você pode criar cada um dos três arquivos restantes agora ou esperar até chegarmos a essa etapa do tutorial.
Neste ponto do tutorial, a informação mais importante está aqui:
Na configuração acima, estamos definindo a tela do jogo, mas também estamos ativando o mecanismo de física e a incorporação de elementos DOM.
A incorporação do elemento DOM nos permite incorporar um campo de entrada de usuário ao nosso jogo para que os usuários possam digitar seu nome. O mecanismo de física nos permite lidar com as colisões entre o jogador e a recompensa, bem como entre o jogador e o obstáculo. Há vários mecanismos de física disponíveis no Phaser, mas usaremos a opção de física
arcadepor ser a mais fácil de usar.Como planejamos manter as pontuações dos jogadores com base em seu nome e localização, precisaremos ativar o rastreamento de localização. Na marcação
<script>que contémphaserConfig, modifique-a para o seguinte:O código acima aproveitará o rastreamento de localização do navegador da web. Quando o jogo começar, o navegador solicitará que o usuário ative o rastreamento de localização. Se a localização não puder ser determinada, valores zero serão usados. Se o rastreamento de localização não estiver disponível no navegador, um erro será exibido nos registros e o jogo falhará na configuração.
No momento, nada foi feito com a localização, mas depois que o usuário aceitar, o jogo começará. No entanto, como ainda não temos nenhuma cena criada, nada acontecerá.
É importante observar que entre obter a localização e iniciar o jogo, pode levar de alguns segundos a alguns minutos. Isso depende da rapidez com que o navegador pode detectar sua localização.
Com a configuração concluída, vamos criar a primeira cena que o jogador verá.
A primeira cena que o jogador vê solicitará que ele insira um nome de usuário. Este nome de usuário será enviado ao nosso backend e armazenado no MongoDB com uma pontuação.
Se ainda não o fez, crie um arquivoinformation-scene.js e inclua o seguinte código:
A classe acima representa nossa cenário inicial. Nela, você verá os quatro eventos do ciclo de vida que o Stager usa para compor uma cenário. Como essa imagem requer a entrada do usuário, precisamos criar outro arquivo HTML que contenha nosso formulário.
Crie um arquivoformulário.html dentro do projeto do jogo e adicione a seguinte marcação HTML:
Não há nada particularmente elegante acontecer no HTML acima. No entanto, observe o atributo
namena marcação <input> . Faremos referência a ele mais tarde em nosso arquivoinformation-scene.js.Retornando ao arquivoinformation-scene.js, precisamos carregar o arquivo HTML que acabamos de criar na função
preload:Com o formulário HTML carregado em nossa cenário, agora podemos trabalhar para exibi-lo e capturar quaisquer dados inseridos nele. Isso pode ser feito a partir da função
createda seguinte forma:Na função
preload, referenciamos o arquivo HTML como form, que será adicionado como um elemento DOM na tela do Phaser. Queremos ouvir eventos em uma tecla específica, neste caso a tecla Enter, e quando a tecla Enter é pressionada, queremos obter os dados do elementousername. Lembra do atributoname na tag<input>? Esse é o valor que estamos usando na funçãogetChildByName.Neste ponto, temos tecnicamente uma cena funcional, embora nada aconteça com a entrada do usuário. Vamos editar o arquivoindex.html para podermos alternar para ele:
Se você está se perguntando o que mudou, primeiro dê uma olhada no campo
scenedo objeto phaserConfig . Observe que incluímos a classeInformationScenena array. Em seguida, dê uma olhada no que acontece depois que obtemos as informações de geolocalização do navegador:Essas alterações nos permitem iniciar a cenário
InformationScene e passar a ela as informações de localização que recebem do navegador. Para manter minha privacidade no exemplo, estou definindo a precisão decimal da latitude e longitude para apenas um único decimal. Dessa forma, ela mostra minha localização geral, mas não exatamente onde vivo.As informações de localização são formatadas como GeoJSON apropriado, pois é disso que o MongoDB dependerá mais tarde.
Então, se estamos passando informações para a nossa cena, como podemos usá-las?
Abra o arquivoinformation-scene.js e altere a função
init para ficar assim:Estamos pegando os dados que foram passados e armazenando-os em uma variável local para a classe. Quando mudarmos dessa cena para outra cena no futuro, passaremos a variável novamente.
Antes de começarmos a trabalhar na próxima cenário, vamos exibir as informações de localização abaixo da entrada de texto. Na função
create do arquivoinformation-scene.js, adicione o seguinte:O código acima renderiza tudo o que está na variável location. Ele deve estar centralizado abaixo do campo de entrada nessa cena específica do jogo.
Mesmo que a próxima etapa ainda não exista, vamos colocar a lógica de mudança em funcionamento. Vamos mudar a lógica que acontece quando a tecla Enter é pressionada depois de digitar um nome de usuário:
Chamaremos a próxima cenário
MainScene e passaremos a ela o nome de usuário que o usuário forneceu, a localização do navegador e uma pontuação inicial.Temos um nome de usuário e alguns dados de localização para trabalhar. Agora é hora de criar o jogo que o usuário pode realmente jogar.
Crie um arquivoprincipal-scene.js em seu projeto se você ainda não tiver feito isso e inclua o seguinte código:
Você notará que estamos aceitando os dados passados da cena anterior na
init função . Antes de começarmos a modificar as outras funções do ciclo de vida, vamos adicionar esta cena ao phaserConfig encontrado no arquivoindex.html :Como
MainScene representa nossa cena de jogo, precisamos pré-carregar nossos recursos de jogo.Você pode baixar meus ativos abaixo ou usar suas próprias imagens.
As imagens reais não são muito importantes desde que algo exista. Dependendo da resolução de suas imagens, talvez seja necessário alterar o dimensionamento que faremos mais adiante no tutorial.
Com os arquivos de imagem em seu projeto, altere a função
preload do arquivoprincipal-scene.js para ficar assim:Só vamos ter uma única caixa para representar nosso jogador, mas teremos muitos dos objetos de jogo
leaf e bomb . Isso significa que precisaremos criar dois pools de objetos e um único ator para o jogador.Se você é novo no conceito de pools de objetos, eles são comuns quando se trata de desenvolvimento de jogos. A ideia por trás deles é que, em vez de criar e destruir objetos do jogo conforme necessário, o que é ruim para o desempenho, um número específico de objetos é criado antecipadamente e esses objetos permanecem inativos e invisíveis até que sejam necessários. Quando o objeto não é mais necessário, ele é desativado e tornado invisível, voltando para a piscina para ser usado novamente no futuro.
Na função
create do arquivomain-scene.js, adicione o seguinte código JavaScript:Lembra das informações de pontuação e nome de usuário que foram passadas da cena anterior? Estamos anexando esses dados ao player (linhas 5-6).
Para
leafGroup e bombGroup, estamos criando pools de objetos. Esses pools de objetos têm trinta objetos cada e são inativos e invisíveis por padrão. Isso é conveniente, pois não queremos exibi-los ou ativá-los até que estejamos prontos para usá-los.A pontuação está sendo rastreada no jogador, mas provavelmente é uma boa ideia mostrá-la também. Dentro da função
create da função principal-scene.js, adicione o seguinte:No código acima, estamos inicializando nosso texto a ser renderizado com formatação específica. Vamos alterá-la mais tarde à medida que a pontuação aumentar.
Embora não estejamos usando nossos pools de objetos no momento, vamos definir alguma lógica de colisão para quando eles colidirem com o nosso jogador.
Na função
create do arquivoprincipal-scene.js, adicione o seguinte:Temos dois colliders no código acima. Um com lógica para determinar o que acontece quando uma folha toca o jogador e outro para quando uma bomba toca o jogador. Quando a folha toca o jogador, precisamos primeiro nos certificar de que a folha estava ativa. Quando um objeto está ativo, determinadas lógicas de jogo e de cena podem ser aplicadas. Se a folha estava ativa, precisamos obter a pontuação atual do objeto
player, aumentá-la, definir a nova pontuação no objetoplayer e atualizar o texto renderizado. Também precisamos adicionar a folha de volta ao pool para que ela possa ser usada novamente.Quando a bomba toca o jogador, precisamos ter certeza de que a bomba está ativa e, se estiver, adicioná-la de volta à piscina e mudar o cenário. Trabalharemos na lógica para mudar a cenário em breve.
Agora é um bom momento para extrair objetos de ambos os nossos pools de objetos. Dentro da função
create do arquivoprincipal-scene.js, adicione o seguinte código JavaScript:No código acima, estamos criando um temporizador de repetição. Toda vez que o cronômetro é acionado, puxamos uma folha e uma bomba das piscinas de objetos e as colocamos em uma posição aleatória no eixo x. Também ativamos esse objeto específico e o tornamos visível.
Não tente extrair mais objetos do que os existentes no pool, caso contrário, você receberá erros se o pool estiver vazio.
O cronômetro está puxando objetos, mas esses objetos ainda não estão se movendo. Precisamos movê-los na função
update do arquivomain-scene.js. Altere a função para ficar assim:Tanto para
leafGroup quanto parabombGroup, estamos aumentando a posição no eixo y. Estamos fazendo isso para cada objeto nesses pools de objetos. Embora estejamos mudando a posição de toda a pool, você só verá e interagirá com os objetos ativos e visíveis.Para evitar que fiquemos sem objetos no pool, podemos percorrer cada pool e ver se algum objeto se moveu além da tela. Se tiverem, adicione-os de volta ao pool.
Então, a partir de agora, temos objetos cair da tela em nossa cenário. Se o jogador tocar em qualquer um dos objetos de folha, nossa pontuação aumentará; caso contrário, as bombas encerrarão a cena. O problema é que ainda não podemos controlar nosso jogador. No entanto, esta é uma solução fácil.
Na função
update do arquivoprincipal-scene.js, adicione o seguinte:Agora, quando o ponteiro estiver para baixo, seja no celular ou no computador, a posição do eixo x do player será atualizada para onde quer que o ponteiro esteja. Para este jogo em particular, não nos daremos ao trabalho de atualizar a posição do eixo y.
Com exceção de mudar desta cena atual para a próxima, temos um jogo jogável.
Vamos voltar à lógica do colisor da bomba:
Embora não tenhamos criado uma cenário
GameOverScene, presumimos que criamos. Então, se colidirmos com uma arma, o GameOverScene começará e passaremos as informações de nome de usuário, pontuação e localização para a próxima etapa.A cena final é onde realmente incluímos o MongoDB em nosso jogo. Definimos nossas informações, jogamos nosso jogo e agora precisamos enviá-las para o MongoDB para armazenamento.
Se ainda não o fez, crie um arquivogameover-scene.js no diretório do seu projeto com o seguinte código:
A classe acima deve parecer familiar, pois foi usada como base para as duas classes anteriores. Na função
init aceitamos o nome de usuário, pontuação e dados de localização da cena anterior. Antes de começarmos a definir nossa funcionalidade de cena, vamos adicionar a cena ao arquivoindex.html no objetophaserConfig:Como não temos nenhum ativo de jogo, não precisamos usar a função
preload dentro do arquivojogoover-scene.js. Em vez disso, vamos dar uma olhada na função create:Na função
createacima , estamos fazendo três solicitações. Primeiro, pegamos as informações do jogador fornecidas na cena anterior e as enviamos para nosso back-end por meio do endpointcreate. Depois de enviarmos nossos dados de pontuação, fazemos duas solicitações, a primeira para as três melhores pontuações globais e a segunda para as três melhores pontuações próximas à minha latitude e longitude.A próxima etapa é renderizar os resultados dessas solicitações na tela como texto.
O código acima pode parecer confuso, mas a realidade é que estamos apenas renderizando texto na tela. Estamos analisando os resultados de ambas as pontuações e rasgando os resultados e também estamos renderizando a pontuação atual.
Para repetir o jogo, criamos um texto clicável:
Ao clicar no botão, o
MainScene é iniciado e as informações do jogador atual são enviadas.Você acabou de ver como trabalhar com informações de placar de líderes usando o MongoDB em um jogoPhaser. Nesse exemplo específico, vimos dois tipos diferentes de tabelas de classificação, uma global e outra geoespacial. Outra possibilidade que não exploramos pode ser no âmbito da plataforma, como móvel ou desktop.
Se você quiser ver outro exemplo de jogo com o MongoDB, confira meu tutorial anterior intitulado Creating a Multiplayer Drawing Game with Phaser and MongoDB (Criando um jogo de desenho para vários jogadores com Phaser e MongoDB).
Avalie esse Tutorial