Criar um jogo 2D com Phaser – PARTE 2 – Cenário do jogo

By | 20 Dezembro, 2020

O Cenário do nosso jogo vai ser constituído por um conjunto de imagens que vão formar uma paisagem. Estas imagens vão ser dispostas em camadas (layers) para que possamos criar uma noção de profundidade, principalmente quando estivermos a criar o movimento no jogo.

As imagens do cenário do jogo

Para construir o cenário do jogo vamos utilizar as seguintes imagens:

  • sky.png – imagem que representa o céu.
  • mountains.png – imagem que representa uma cadeia montanhosa.
  • clouds.png – nuvens que serão colocadas no céu.
  • ground.png – imagem correspondente ao primeiro plano do jogo com vários elementos (relva e árvores, etc.).
sky.png
mountains.png
clouds.png
ground.png

As imagens png contêm zonas transparentes para que, ao serem dispostas em camadas sobrepostas, não ocultem completamente as camadas inferiores.  As imagens sky.png, mountains.png e clouds.png têm a mesma dimensão da área de jogo para facilitar a sua utilização. A imagem ground.png é maior que a área de jogo, mais à frente vamos entender o motivo.

Neste momento temos todas as camadas do nosso cenário e podemos dispô-las de modo a obter o seguinte resultado:

cenário do jogo

Adicionar imagens ao jogo

Na pasta criada para o nosso projeto (C:\xampp\htdocs\mygame) vamos criar uma pasta de nome assets para colocar as imagens do jogo (sky.png, mountains.png, clouds.png e ground.png).

Coordenadas no Phaser

As imagens são dispostas na área de jogo segundo coordenadas X e Y, em que X representa o valor correspondente à posição horizontal e Y o valor correspondente à posição vertical. A posição 0,0 (X=0, Y=0) situa-se no canto superior esquerdo da área de jogo. Assim, como a área do nosso jogo tem a dimensão de 800 x 600 (definida nas propriedades width e height do objeto config), podemos observar na imagem algumas das coordenadas.

exemplos de coordenadas na área do jogo

Código para utilizar as imagens do cenário de jogo.

As imagens são carregadas em memória na função preload(). Para isso, vamos adicionar à função preload(), que se encontra no ficheiro game.js, o código necessário para carregar as imagens que compõem o cenário do nosso jogo.

function preload ()
{
    this.load.image('ground', 'assets/ground.png');
    this.load.image('clouds', 'assets/clouds.png');
    this.load.image('mountains', 'assets/mountains.png');
    this.load.image('sky', 'assets/sky.png');
}

No código, o método this.load.image recebe dois parâmetros, o primeiro corresponde à chave (uma string para identificar a imagem, escolhida pelo programador) e o segundo o URL da imagem (caminho para a localização da imagem).  

Na função create() vamos criar os objetos correspondentes aos elementos do cenário.

function create ()
{
    this.add.image(400, 300, 'sky');
    this.add.image(400, 300, 'clouds');
    this.add.image(400, 300, 'mountains');
    this.add.image(400, 300, 'ground');
    
}

O método this.add.image vai receber 3 parâmetros: coordenada X, coordenada Y e a string correspondente à chave da imagem que vamos utilizar. Por padrão, as imagens são posicionadas com base no seu centro. Ou seja, se utilizarmos uma imagem de 800×600 e a vamos colocar toda visível na nossa área de jogo, que também é de 800×600, teremos de a posicionar em 400×300 (no centro da área de jogo).

Neste momento, temos o seguinte código no ficheiro game.js:

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 ()
{
    // carregamento em memória das imagens do cenário
    this.load.image('ground', 'assets/ground.png');
    this.load.image('clouds', 'assets/clouds.png');
    this.load.image('mountains', 'assets/mountains.png');
    this.load.image('sky', 'assets/sky.png');
}

function create ()
{
    // criação e posicionamento das imagens do cenário
    this.add.image(400, 300, 'sky');
    this.add.image(400, 300, 'clouds');
    this.add.image(400, 300, 'mountains');
    this.add.image(400, 300, 'ground');
    
}

function update ()
{
}

Se executarmos o jogo ( http://localhost/mygame) obtemos o seguinte resultado:

Download

Código relativo à PARTE 2 no GitHub:

https://github.com/nmramalho/PhaserGameTutorial/tree/main/parte2

Artigos relacionados