Criar um jogo 2D com Phaser – PARTE 3 – Movimento do cenário de jogo

By | 16 Janeiro, 2021

No nosso jogo vamos simular um movimento lateral ao longo do cenário, como se estivéssemos num veículo em andamento a olhar pela janela lateral. Os objetos mais próximos passam rapidamente e os objetos mais longínquos lentamente, dando assim uma noção de profundidade. Para isso, as imagens utilizadas no cenário (mountains.png, clouds.png e ground.png) vão rolar continuamente da esquerda para a direita da área de jogo. A imagem ground.png é mais larga que as restantes, para que não se note tanto a repetição dos mesmos elementos do cenário.

Movimento dos elementos do cenário

Para criar o efeito de rolar as imagens é necessário, no código, trocá-las para TileSprite de forma a criar uma textura que se repete.

Textura criada com as imagens do cenário

No ficheiro game.js e na função create() vamos modificar o código de forma a colocar como TileSprite as imagens do cenário (mountains.png, clouds.png e ground.png).

function create ()
{
    
    this.add.image(400, 300, 'sky');

    this.clouds = this.add.tileSprite(400, 300, config.width, config.height, "clouds");
    this.mountains = this.add.tileSprite(400, 300, config.width, config.height, "mountains");
    this.ground = this.add.tileSprite(400, 300, config.width, config.height, "ground");
   
}

Pensámos que o nosso cenário poderá ter diferentes velocidades ao longo do jogo, por isso, vamos definir uma variável de nome scenarySpeed para atribuir a velocidade inicial.

// variavel para definir a velocidade do cenário
var scenarySpeed = 1;   

Para criar o movimento dos elementos do cenário, vamos criar uma função de nome moveScenery(). Nesta função vamos receber como parâmetros os objetos clouds, mountains, ground e speed, para que possamos incrementar a posição X dos elementos do cenário. Sempre que esta função é chamada a posição X será incrementada.

function moveScenery (clouds, mountains, ground, speed)
{
    //deslocamento horizontal dos elementos
    ground.tilePositionX += speed *2 ;   
    mountains.tilePositionX += speed / 10; 
    clouds.tilePositionX += speed / 4;
}

Como os elementos mais próximos estão representados no objeto ground multiplicámos o valor da velocidade speed. Diminuímos a velocidade do objeto clouds (dividimos por 4) e do objeto mountains (dividimos por 10). Assim, quanto mais distante mais lentamente se movem os objetos no cenário do jogo.

No método update(), que se executa constantemente, vamos chamar a função moveScenery() para criar o movimento através da atualização da posição X dos elementos do cenário (textura criada com os objetos ground, clouds e mountains). Vamos passar como parâmetros da função moveScenery() os objetos clouds, mountains, ground e speed.

function update ()
{
    moveScenery(this.clouds, this.mountains, this.ground, scenarySpeed);
    
}

Temos agora o código completo do ficheiro game.js que permite simular um movimento lateral ao longo do cenário do jogo.

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);

var scenarySpeed = 1;   // variavel para definir a velocidade do cenário

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');
    
}

function create ()
{
    
    this.add.image(400, 300, 'sky');

    this.clouds = this.add.tileSprite(400, 300, config.width, config.height, "clouds");
    this.mountains = this.add.tileSprite(400, 300, config.width, config.height, "mountains");
    this.ground = this.add.tileSprite(400, 300, config.width, config.height, "ground");
   
}

function update ()
{
    moveScenery(this.clouds, this.mountains, this.ground, scenarySpeed);
    
}

/**
 * função para criar o movimento dos elementos do cenário
 */
function moveScenery (clouds, mountains, ground, speed)
{
    //deslocamento horizontal dos elementos
    ground.tilePositionX += speed *2 ;   
    mountains.tilePositionX += speed / 10; 
    clouds.tilePositionX += speed / 4;
}

Download

Código relativo à PARTE 3 no GitHub:

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

Brevemente a PARTE 4 …

Artigos relacionados

Brevemente, PARTE IV do nosso tutorial.

Artigos mais recentes