No mês passado, participei do hackathon da ThirdWeb, no qual me propus a criar um clone web3 do jogo The Hill Climb usando o ThirdWeb GamingKit e o ContractKit. Fiquei empolgado com a oportunidade de explorar as diferentes maneiras pelas quais a blockchain Ethereum pode ser utilizada para criar jogos com recursos exclusivos.
Neste post, analisarei as diferentes partes do jogo que construí no mês passado. Vou explicar como usei o ThirdWeb GamingKit e o ContractKit para personalizar diferentes partes do jogo. Por fim, mostrarei como você pode personalizar este jogo para criar sua própria versão descentralizada do The Hill Climb.
Análise de modelo
A Análise de Modelo é um método que nos permite compreender os pré-requisitos de um software específico, neste caso, um jogo e como eles interagem entre si. Essa técnica nos fornece uma visão geral de alto nível do que deve ser feito para construir o jogo e um plano para desenvolvê-lo.
Diagrama de casos de uso
Diagrama de caso de uso do jogo ( Imagem do autor ).
O Diagrama de Caso de Uso descreve as interações entre um usuário e o software. Ilustra as atividades do usuário e como elas são interconectadas. Um jogador progride no jogo completando uma série de atividades representadas por módulos / painéis. Cada painel significa um estágio de jogo diferente e o jogador deve concluir todas as tarefas dentro de cada painel para passar para o próximo.
Esse diagrama de casos de uso começa quando um usuário que joga o jogo aciona o servidor para executar e o jogo é carregado. Um usuário conecta sua carteira, seleciona um carro e um nível e começa a jogar. Enquanto jogam, eles podem atualizar seu veículo.
- Etapas:
Vá para o painel.
Reivindique um NFT para conceder acesso ao jogo.
Vá para o menu principal do jogo.
Conecte a carteira.
Selecione um nível.
Selecione um carro.
Atualize seu carro.
O jogo está carregado.
Diagrama de atividades
Diagrama de atividades do jogo ( Imagem do autor ).
Um diagrama de atividades é uma ótima ferramenta para entender melhor a ordem das atividades que precisam ser executadas para concluir uma tarefa e os relacionamentos entre elas. É usado principalmente para identificar áreas potenciais para melhoria.
Você pode entender de maneira abrangente o projeto lendo o diagrama de atividades acima no canto superior direito.
Arquitetura
Arquitetura do jogo (Imagem do autor ).
Integração com o ThirdWeb
Esta seção descreve como o ThirdWeb foi integrado a este jogo.
Contrato inteligente
Usando a CLI do ThirdWeb ContractKit, podemos escrever e implantar rapidamente contratos seguros, concentrando-nos apenas no próprio contrato inteligente. O trecho de código abaixo representa um contrato personalizado do ERC721 Drop.
// SPDX-License-Identifier: Apache-2.0
pragma solidity ^0.8.0;
import "@thirdweb-dev/contracts/base/ERC721Drop.sol";
import "@thirdweb-dev/contracts/extension/Permissions.sol";
contract Contract is ERC721Drop, Permissions {
// Um array de notas.
mapping(uint256 => string) public notes;
constructor(
string memory _name,
string memory _symbol,
address _royaltyRecipient,
uint128 _royaltyBps,
address _primarySaleRecipient
)
ERC721Drop(
_name,
_symbol,
_royaltyRecipient,
_royaltyBps,
_primarySaleRecipient
)
{
_setupRole(DEFAULT_ADMIN_ROLE, msg.sender);
}
/**
* Uma função que permite escrever notas para o proprietário do NFT.
*/
function writeNote(uint256 _tokenId, string memory _msg) public {
require(
msg.sender == ownerOf(_tokenId),
"You are not the token owner."
);
notes[_tokenId] = _msg;
}
/**
* Uma função que permite a atualização de notas apenas para titulares do NFT que tem a permissão 'DEFAULT_ADMIN_ROLE'.
*/
function updateNote(
uint256 _tokenId,
string memory _msg
) public onlyRole(DEFAULT_ADMIN_ROLE) {
notes[_tokenId] = _msg;
}
}
O código mostra que apenas o proprietário de um determinado NFT tem permissão para escrever, atualizar e ler notas para um determinado token.
A razão pela qual escolhi o contrato ERC721 Drop é devido aos seguintes recursos:
Upload em lote, porque economiza tempo e taxas de gás no processo de upload.
Configuração de opções robustas de reivindicação para reivindicar esses tokens dos usuários, como configurar uma lista de permissões etc.
Ótimo para projetos de PFP como o nosso jogo neste caso.
Para obter mais informações sobre como criar e implantar este contrato, consulte a seguinte repositório:
https://github.com/hill-climb/smart-contract
O jogo
O jogo utiliza o Unity e o ThirdWeb GamingKit para criar uma poderosa experiência única de jogo na web3. Este jogo foi desenvolvido na versão Unity 2021.15.1f porque é a única versão existente no meu PC. Portanto, certifique-se de ter esta versão para criar e implantar o jogo. Para obter mais informações sobre como criar e implantar o jogo, consulte o seguinte repositório:
https://github.com/hill-climb/game
Unity
Cenas
No momento da redação deste guia, existem quatro níveis jogáveis e cenas de menu. Clique duas vezes em uma cena para iniciar sua edição.
Níveis
Ao desenvolver um jogo, você deve considerar os diferentes níveis pelos quais um jogador progredirá. Cada nível pode ter objetos e componentes de jogo semelhantes para manter a continuidade durante o jogo. No entanto, você também precisará personalizar as alturas do terreno para cada nível; é aqui que o 2D Terrain Editor é útil.
Para criar um novo nível, você só precisa personalizar as alturas do terreno para cada nível. Você pode usar o 2D Terrain Editor para esse fim. Essa ferramenta pode gerar moedas, combustíveis e outros itens aleatoriamente.
O componente de entrada é anexado à Tela e alterna automaticamente entre o teclado e os botões de toque em cada plataforma.
Menus
O sistema de menu principal é uma parte crucial do jogo, fornecendo acesso a todos os recursos necessários e permitindo navegar facilmente pelo jogo. Este sistema é baseado na ativação e desativação de painéis de menu, armazenados em objetos de jogo vazios.
Como você pode notar, o menu principal consiste em cinco painéis diferentes. Se você deseja alternar para um painel de menus específico, ele pode ser ativado ou desativado de acordo clicando com o botão direito do mouse no painel pretendido e clicando Toggle Active State.
Alterne o estado ativo para um determinado componente ( Imagem do autor ).
Da mesma forma, você pode clicar em um painel específico e marcar a caixa que fica alinhada com o nome do painel no inspetor.
Os componentes de cada painel são totalmente personalizáveis; você pode personalizar diferentes propriedades dos objetos ( por exemplo, cor, largura, altura, script, etc. ) no painel ativado.
1. Menu principal
O menu principal é a primeira coisa que você vê quando abre a cena do jogo MainMenu. Ele é ativado por padrão, para que você possa conectar sua carteira e começar a jogar. O menu principal é onde você encontrará todas as opções e configurações do jogo.
Painéis do menu principal ( Imagem do autor ).
Este painel possui dois componentes principais: Connected e Disconnected. Esses componentes são ativados e desativados programaticamente com base no status da conexão da carteira. Em uma tentativa bem-sucedida, o componente Connected será ativado e o componente Disconnected será desativado. Isso nos fornece uma maneira fácil de verificar o status da conexão da carteira.
O componente Connected é ativado e o componente Disconnectedé desativado ( Imagem do autor ).
Criar um novo componente de entrada é bastante direto. Para criar um novo componente de entrada, você pode copiar, colar e personalizá-lo ao seu gosto.
2). Menu Configurações
Menu Configurações ( Imagem do autor ).
O menu de configurações é onde você obtém controle completo sobre a experiência de jogo. Ele fornece acesso a vários recursos e configurações para que você possa personalizar o jogo o máximo possível.
Por exemplo, se você deseja usar um recurso específico no jogo, pode encontrá-lo no menu de configurações e ativá-lo com apenas alguns cliques. Da mesma forma, você pode personalizar sua experiência ativando ou desativando determinadas opções gráficas daqui também. Usando este sistema de menus, você pode controlar sua experiência de jogo e personalizá-la de acordo com suas necessidades e preferências.
Outro exemplo é alterar o volume da música de fundo deslizando o indicador para a esquerda ou para a direita como uma janela deslizante. Você pode desativar a música e os efeitos sonoros para desfrutar de uma atmosfera mais pacífica enquanto joga. Você também tem a oportunidade de ajustar a qualidade de cada pixel exibido na tela.
Criar um novo componente é bastante direto. Para criar um novo componente, você pode copiar, colar e personalizá-lo.
3). Menu Selecionar nível
Menu selecionar nivel ( Imagem do autor ).
O menu de seleção de nível é fácil de usar e navegar. Você clica no ícone do GameObject LevelSelect na tela e rola para baixo até os ícones de itens no inspetor, onde você pode escolher entre quatro níveis disponíveis. Esses níveis são ordenados da esquerda para a direita, conforme a dificuldade de comprimento, preço e terreno.
Se você deseja adicionar um novo nível, pode clicar no ícone plus no inspetor e arrastar e soltar um sprite de nível na tela. Depois disso, você pode alterar sua animação, som e ícones conforme necessário.
4). Menu Selecionar Carro
Menu de seleção de carros( Imagem do autor ).
Este painel é uma ferramenta poderosa que permite adicionar carros novos, controlar animação e muito mais. Este menu é semelhante ao anterior.
5). Menu de atualizações
Menu de seleção de carros( Imagem do autor ).
O menu de atualização é onde você pode personalizar o carro selecionado recentemente. Você pode ajustar os níveis de motor, combustível, rodas e velocidade.
Criando um novo painel de menus
Você também pode criar um novo painel usando o Empty GameObject incorporado do Unity. Para fazer isso, selecione GameObject > Create Empty debaixo da tela.
Isso criará um novo GameObject vazio que você pode renomear para o que quiser, SeuNomeDePainelCustomizado.
Componente personalizado ( Imagem do autor ).
Como o objeto é invisível, você precisará adicionar um Canvas Renderer para podermos ver algo na visualização da cena que vive dentro da tela. No entanto, isso não está relacionado aos estados de animação. Simplesmente nos dá uma representação na tela do painel.
Crie um renderizador de lona ( Imagem do autor ).
Após adicionar o componente Canvas Renderer, você pode adicionar um componente Imagem. O componente Imagem fornece muitas opções para personalizar a aparência da sua imagem. Você pode escolher entre uma variedade de predefinições ou personalizar as configurações você mesmo.
Componente da imagem ( Imagem do autor ).
O componente da imagem agora está visível na cena. Para anexar um sprite a esse componente, arraste a imagem da janela do Projeto para o inspetor.
Anexe uma imagem ao componente de Imagem ( Imagem do autor ).
Se você deseja levar a experiência do usuário do painel para o próximo nível, pode até anexar um script ao componente que controla seu comportamento com base na lógica personalizada. Isso significa que você tem controle total sobre a aparência e o comportamento do seu painel.
Um componente de script é anexado ( Imagem do autor ).
Agora, você pode começar a adicionar seus componentes filhos de painel personalizados. Você pode se inspirar nos painéis existentes.
Alternar entre painéis
Você pode anexar um botão ao painel atual para alternar entre os painéis. Para fazer esse botão mudar para o próximo, você pode adicionar um evento de tempo de execução no cabeçalho OnClick clicando no ícone de adição. Agora, você deve arrastar e soltar a tela no espaço reservado GameObject.
Adicione um botão a um componente ( Imagem do autor ).
Adicione uma tela a uma função ( Imagem do autor ).
Agora você pode anexar uma função personalizada disponível no jogo, que é true neste caso, isso aceita um GameObject.
Escolha uma função de botão ( Imagem do autor ).
Adicione funções de ocultar / mostrar painéis a um botão ( Imagem do autor ).
O objeto do jogo representa o próximo painel. Esta função exibirá o próximo painel. Da mesma forma, para ocultar o painel atual, arraste e solte o painel atual como um argumento para setFalse.
Estado Inicial
Estado inicial da tela ( Imagem do autor ).
Quando você abre a tela pela primeira vez, todos os valores para os estados iniciais do jogo estão presentes lá. Você pode controlar os valores iniciais das variáveis do jogo sob o script de tela do inspetor. Os estados iniciais são importantes porque definem o ponto de partida para as ações do jogador. Se você quiser mudar como o jogo é executado, poderá fazê-lo alterando os estados iniciais.
Criar um novo carro
Crie um carro novo ( Imagem do autor ).
Criar um carro novo é relativamente fácil. Para criar um novo, copie e cole um carro pré-fabricado e altere seus objetos na guia Hierarquia. Para melhorar o desempenho do seu carro, abra o Body do objeto na guia Hierarquia. Em seguida, selecione qualquer um desses componentes da lista para personalizá-los para a carroceria do carro.
Para alterar a imagem da carroceria do carro, clique no objeto VehicleSprite na guia Hierarquia. Agora você precisa especificar uma imagem de carro.
Alterar sprite do carro ( Imagem do autor ).
Agora, você precisa alterar o volume delimitador do colisor da carroceria do carro. Para fazer isso, clique no objeto Collider na guia Hierarquia. Agora você precisa clicar em editar o colisor no inspetor para corresponder ao sprite do carro adicionado recentemente.
Altere o volume delimitador do carro ( Imagem do autor ).
O componente de gatilho de morte no jogo controla quando o estado de perda é atingido. Se a parte superior do carro tocar o chão,
você vai perder o jogo.
Da mesma forma, você pode personalizar os componentes restantes do carro. Após alterar todas essas propriedades ao seu gosto, seu novo veículo está pronto para ser usado no seu jogo!
Recursos
Este artigo foi escrito por Mahmoud Harmouch e traduzido por Adriano P. de Araujo. O original em inglês pode ser encontrado aqui.
Top comments (0)