Como criar um jogo usando Phaser e TypeScript
Se você se interessa por desenvolvimento de jogos e já aprendeu alguma coisa sobre programação, provavelmente sabe que é possível escrever jogos usando a API HTML5 dos navegadores. E se procurou saber um pouquinho mais, percebeu que existe diferentes ferramentas pra ajudar a trabalhar com desenvolvimento de jogos como o Phaser.
Phaser é um framework que te permite criar jogos complexos utilizando HTML5 e suas tecnologias como Canvas, WebGL, WebAudio e também facilita a forma de capturar ações do usuário usando teclado, mouse, touch ou mesmo controles de videogame. Acesse o site oficial phaser.io para saber mais!
Neste tutorial eu vou te ensinar a criar um jogo com Phaser e TypeScript de forma rápida e prática!
Neste artigo
Vídeo do artigo
Pra facilitar a leitura e te levar direto ao ponto, nós criamos um vídeo de leitura e execução deste tutorial. Se você prefere ver do que ler, aqui está!
Vale a pena criar um jogo utilizando Phaser?
Muita gente se pergunta qual a melhor ferramenta para aprender, já que todo mundo sonha alto: lançar um jogo na Steam, no Itch.io, Facebook ou mesmo no Google Play ou App Store.
Não é possível fazer tudo isso usando somente o Phaser, mas existem outras ferramentas como o Electron para empacotar seu jogo para plataformas Desktop e também o Ionic que lhe permite fazer o mesmo para Smartphones e Tablets.
Então considerando que Phaser utiliza JavaScript e/ou TypeScript para desenvolvimento, e você pode portar seu jogo para qualquer plataforma, vale a pena sim escrever um jogo utilizando Phaser.
E não somente jogos simples, viu? A foto abaixo é do jogo Citadels lançado para Facebook, construído com Phaser e que conquistou um público de 4,2 milhões de jogadores:
Qual a melhor forma de criar um projeto com Phaser?
Eu experimentei bastante com o framework Phaser e de acordo com a minha experiência eu aprendi a seguinte lição: se o seu objetivo é criar um jogo, você deve focar mais no jogo em si e menos na tecnologia por trás dele.
Como desenvolvedor de software tradicional isso é um exercício muito difícil pra mim. Eu gosto de criar designs elegantes, que carregam significado e facilitam a leitura. E o desenvolvimento de jogos pra mim sempre fica parecendo uma colcha de retalhos, mau acabada e com diferentes bugs esperando pra pular na minha cara.
Então pra facilitar a minha vida, e agora a sua também, eu criei um projetinho no Github que você pode clonar e começar a codificar. Ele já traz consigo o Phaser, Webpack e TypeScript configurados.
O repositório nawarian/phaser-ts-skeleton traz uma aplicação exemplo com Phaser, Webpack e TypeScript configurados e é perfeito para quem quer começar sem prestar muita atenção na tecnologia! A melhor forma de criar um projeto Phaser é utilizando templates que já existem, como o nawarian/phaser-ts-skeleton!
Passo a passo: como criar um jogo com Phaser e TypeScript
O nosso plano de ação é bem simples na realidade. Vamos primeiro clonar o repositório, depois instalar suas dependências e depois rodar o programa para testar.
Passo 1 – Clone o repositório template
Acesse a página do nawarian/phaser-ts-skeleton no Github para obter o link e clonar em sua máquina. Se preferir, para encurtar o caminho você pode até mesmo fazer um fork do projeto.
Eu vou optar por clonar, fazendo o seguinte:
$ git clone [email protected]:nawarian/phaser-ts-skeleton.git meu-primeiro-jogo
$ cd meu-primeiro-jogo
$ rm -rf .git
$ git init
O primeiro comando git clone [email protected]:nawarian/phaser-ts-skeleton.git meu-primeiro-jogo vai clonar (baixar) o repositório para o seu computador na pasta meu-primeiro-jogo. Em seguida nós entramos nesta pasta com o comando cd meu-primeiro-jogo.
Você vai reparar que este já é um repositório git, e que aponta para o meu repositório. Desta forma você não vai conseguir subir seus arquivos! Então eu apaguei as referências ao git com rm -rf .git e inicializei um novo repositório git com o comando git init.
Se você ainda não sabe mexer com git, dá uma olhada no nosso tutorial de como começar a trabalhar com git e github!
Passo 2 – Instale as dependências com NPM
Estamos prontes pra instalar as dependências do projeto. São as dependências que estão escritas no arquivo package.json sabe? Sem elas a gente não consegue sequer rodar o nosso jogo.
Eu estou utilizando o Node 16 neste momento!
Vamos executar o seguinte comando no terminal:
$ npm install
Este comando vai baixar alguns pacotes, e a tela final deve ficar mais ou menos assim:
npm install.Passo 3 – Inicie o modo de desenvolvimento
Este é o principal comando que você precisa lembrar daqui pra frente. Ele vai te permitir alterar o código do seu programa e ver os resultados imediatamente no navegador!
Rode o seguinte comando no terminal:
$ npm run dev
Ao rodar o comando acima, você vai notar algumas mensagens aparecendo no seu terminal. Uma delas diz o seguinte:
<i> [webpack-dev-server] Loopback: http://localhost:8080/, http://127.0.0.1:8080/.
Este é justamente o endereço onde você pode encontrar seu projeto rodando! Acesse http://localhost:8080/ e você vai ver a seguinte animação:
Passo 4 – Customize a configuração do seu canvas
Você reparou que a tela do jogo utiliza a proporção de um smartphone, certo? Provavelmente os primeiros jogos que você vai querer desenvolver utilizem uma tela um pouquinho maior. Então deixa eu te mostrar exatamente onde você pode mexer para mudar isso!
No arquivo src/game.ts você encontra as configurações globais do jogo. É aqui que você pode alterar as proriedades width (largura) e height (altura) da tela. No exemplo abaixo eu alterei a tela pra utilizar 800x600 pixels:
...
const cfg: Phaser.Types.Core.GameConfig = {
width: 800, // Largura
height: 600, // Altura
type: Phaser.AUTO,
...
};
Passo 5 – Comece a desenvolver seu jogo
Você vai reparar que a estrutura de pastas é bem simples de entender. Vejamos a tabela a seguir:
| Pasta/arquivo | O que faz |
| assets/ | Armazena imagens utilizadas no jogo. Aqui entramspritesheets, imagens de plano de fundo, partículas... |
| src/ | Código fonte do seu jogo. Todos os arquivos .ts estão aqui! |
| src/scenes/ | Onde todas as Cenas do seu jogo ficam armazenadas. |
| src/game.ts | Configurações globais do seu jogo. |
| maps/ | Arquivos .json criados por editores de mapas como o Tiled. |
O arquivo scenes/GameScene.ts por exemplo é a cena que controla a animação que você vê na tela.
Vamos adicionar o seguinte código na linha 16 para tonar a imagem do Phaser vermelha:
phaser.setTint(0xff0000);
Repare que 0xff0000 é o código hexadecimal para a cor rgb(255, 0, 0). O resultado fica assim:
Você está pronte para começar!
No começo não vai ser simples, principalmente se você não sabe nada sobre programação de jogos. Felizmente o site oficial do framework Phaser traz vários exemplos de uma extensa documentação. Infelizmente, tudo em inglês.
Você também pode procurar vídeos no YouTube sobre o tema. E se tiver alguma dúvida específica, pode falar comigo que eu vou ficar mais do que feliz em te ajudar a resolver o problema e aprender contigo!
Nós também temos um grupo no Telegram agora, você pode clicar aqui pra entrar e conversar com a gente!
Comentários