Criar um jogo 2D com Phaser – PARTE 1 – Introdução

By | 8 Dezembro, 2020

Phaser

Phaser é uma framework open source para o desenvolvimento de jogos HTML5. Os jogos podem ser facilmente executados em navegadores para desktop ou dispositivos móveis. A linguagem de programação utilizada pode ser JavaScript ou TypeScript. Com Phaser é possível amentar a rapidez na criação de jogos para a web. O site oficial do Phaser está disponível no endereço https://phaser.io/

Requisitos

Servidor Web local

Neste projeto vai ser utilizado o servidor XAMPP disponível em http://www.apachefriends.org/en/xampp.html

Editor de código

Programa para editar o código da aplicação (JavaScript).

Alguns Editores:

Phaser

O download da framework pode ser feito em https://phaser.io/download/stable

Preparar o ambiente de desenvolvimento

Instalação do XAMPP

O XAMPP permite preparar facilmente um ambiente de desenvolvimento para web. Com a instalação do XAMPP temos um acesso a um servidor local web, o Apache, um Sistema Gestor de Bases de Dados, MariaBD (derivou do MySQL), suporte à linguagem de scripting PHP e Perl.
Neste projeto de desenvolvimento de um jogo 2D apenas vamos necessitar das funcionalidades básicas do servidor web.
Podemos fazer o download gratuito em https://www.apachefriends.org/
Depois de realizar a instalação do nosso servidor web local, vamos através do painel de controlo o XAMPP, iniciar o serviço Apache.

No navegador, podemos então testar o funcionamento do servidor web através do endereço http://localhost

Editor de código

Pode utilizar o seu editor de código favorito (por exemplo, Visual Studio Code, Atom, Brackets, Sublime Text, entre outros). Neste projeto será utilizado Visual Studio Code disponível em https://code.visualstudio.com/

Primeiro código do jogo

Pasta do projeto e primeiro código

No servidor web vamos criar uma pasta para o nosso projeto. Na pasta htdocs do servidor web (C:\xampp\htdocs) criamos então uma pasta para o jogo, por exemplo, mygame (C:\xampp\htdocs\mygame).
Dentro da pasta do projeto vamos começar por criar a pasta phaser onde iremos colocar o ficheiro da framework que iremos utilizar no nosso projeto. Vamos utilizar o ficheiro phaser.min.js disponível em https://phaser.io/download/stable

No editor de código vamos também criar os ficheiros game.js e index.html. O ficheiro index.html será a raíz do jogo e vai utilizar o código da framework (phaser/phaser.min.js) e do nosso jogo, a desenvolver no ficheiro game.js. Se estiver a utilizar o Visual Studio Code pode abrir a pasta do projeto no menu File -> Open Folder.

Ficheiro game.js

No ficheiro game.js vamos colocar o seguinte código:

var config = {
    type: Phaser.AUTO,
    parent: "game",
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

// Criar o objeto game com as propriedades do jogo
var game = new Phaser.Game(config);

function preload ()
{
  
}


function create ()
{
  
}


function update ()
{
}

O objeto config vai ser utilizado para definir as características principais do jogo (propriedades do objeto).

Propriedades:

  • type: modo de renderização do jogo (Phaser.AUTO para verificar automaticamente o que o navegador suporta WebGL, caso não suporte irá utilizar Canvas);
  • parent: id do elemento HTML onde será apresentado o jogo;
  • width e height : dimensão do jogo em pixels.
  • scene: as cenas permitem criar a lógica do jogo. São utilizadas para criar e organizar partes específicas do jogo, por exemplo, ecrã de entrada, diferentes níveis do jogo, mapa do jogo, ecrã de saída, etc. Para simplificar, no nosso exemplo vamos ter apenas uma cena, a cena de jogo.

Uma instância de Phaser.Game é criada com o as propriedades definidas no objeto config. Este objeto é responsável por dar vida ao Phaser (trata do processo de arranque, valores de configuração, renderização, etc.).

As cenas são utilizadas para criar e organizar partes específicas do jogo, e contêm os métodos:

  • init() – método onde se podem definir parâmetros específicos para a cena;
  • preload() – método para realizar o carregamento de imagens e áudio para a memória.
  • create() – método utilizado para criar os objetos do nosso jogo (personagens, textos, cenário, etc.).
  • update() – método que se executa constantemente. É utilizado para criar a lógica de movimento e atualização dos elementos do jogo.
Ficheiro index.html

No ficheiro index.html vamos utilizar o seguinte código:

<!doctype html> 
<html > 
<head>
    <meta charset="UTF-8"> 
    <title>O meu jogo</title>
    <script src="phaser/phaser.min.js"></script>
    <script src="game.js"></script>
 </head>

<style>
#game {
    margin: 10px auto;
    padding: 10px;
    width: 800px;
    height: 600px;
    border: 10px solid red;
}
</style>
<body>
    <div id="game"></div>
</body>
</html>

No nosso index.html são carregados os ficheiros de framework Phaser e o ficheiro que contém o nosso código do jogo, o ficheiro game.js.

É colocado na página o elemento com idgame” onde será apresentada a área de jogo. Para este elemento foram definidas as configurações: margin; padding;  width; height; border.

Neste momento, estamos prontos a realizar a primeira execução no nosso jogo. Como não temos elementos (imagens textos ou outros) será apresentada a área de jogo num quadrado preto. Para executar devemos ter o servidor web local a funcionar colocar o endereço do jogo  no navegador (no exemplo: http://localhost/mygame)

Ao inspecionar o nosso código podemos ver o que foi criado e a utilização do Phaser.

Download

Código relativo à PARTE 1 no GitHub: https://github.com/nmramalho/PhaserGameTutorial/tree/main/parte1

Artigos relacionados