Parte 1 – organizando o código e criando o cenário

O que veremos aqui?

Neste post, mostrarei como criar o cenário do jogo, um cenário simples com um fundo sendo uma imagem, onde o nosso personagem irá andar.

Desenvolvimento

Vou apresentar a estrutura básica de javascript do nosso jogo e as três funções principais que o compõem. Por último mostrarei como criar o cenário.

O objetivo aqui será simplificar ao máximo o código, para exibir apenas o fundo e o chão do jogo.

Organização do código e início de desenvolvimento do jogo

Como já vimos na preparação do ambiante de desenvolvimento de jogo online, precisamos de um servidor web que hospede nosso jogo, como se fosse hospedar um site.

Depois disso, precisamos de uma estrutura muito simples para fazer o jogo: um arquivo html para abrir a página, o framework phaser (javascript), outro arquivo javascript que conterá nosso jogo (game.js) e demais arquivos de imagens do jogo.

Portanto, dentro da pasta www pública de seu servidor, crie uma pasta chamada phaser, e lá dentro crie esta estrutura de arquivos:

estrutura inicial
O arquivo jogo.html será a página html para abrir nosso jogo. A pasta assets conterá arquivos de imagens usados no jogo (fundos etc) e a pasta js terá nossos arquivos javascript (phaser.min.js que é o framework e game.js que é onde inserimos o código de nosso jogo)

Estrutura HTML do jogo (conteúdo do arquivo jogo.html)

Este arquivo html contém a estrutura html do jogo, que por hora é muito simples:


<!doctype html>

<meta charset="UTF-8" />
Jogo phaser parte 1 - criano cenário</pre>
<style type="text/css"><!--
            body, html{
                margin: 0;
                border: 0;
            }
        
--></style>
<pre>


O código fonte acima é  bastante simples. O mais importante ocorre dentro da tag head. Ali temos a definição do título da página (Jogo phaser parte 1 – criano cenário) e a inclusão de dois arquivos javascript: o primeiro deles (phaser.min.js) é o framework phaser que baixamos do site oficial. O segundo arquivo (game.js) é onde iremos inserir nossos códigos que farão o jogo funcionar. Repare que ambos os arquivos então dentro da pasta js.

Ainda dentro da tag head, temos um script css, que apenas informa ao browser para não criar nenhuma margem e borda nos elementos body e html.

Arquivo phaser.min.js – framework phaser

Dentro da pasta js, precisamos incluir o framework para desenvolver o jogo, que é o phaser. Lembrando, o site oficial do jogo é este.

Baixe aqui o arquivo phaser.min.js e copie-o para a pasta js. Esse arquivo é incluido nesta linha:dentro do arquivo jogo.html

Código fonte do jogo

Agora sim, vamos visualizar o código fonte que iremos inserir dentro do arquivo game.js. Este arquivo será responsável por todas as instruções que daremos ao framework phaser para definir como nosso jogo irá funcionar.

Função window.onload

Esta função é chamada quando a janela do browser (window) carregou. Ou seja, ela é chamada quando todo html do site está pronto para ser usado.

É uma função padrão e sempre a usaremos para carregar o jogo. Portanto, nas primeiras linhas do game.js teremos:


window.onload = function() {

    // Aqui o código javascript que rodará quando a janela for carregada (on load)

}

Definindo tamanho do cenário e funções básicas

Dando sequência, a única coisa que fazemos dentro da função window.onload é definir o tamanho do ambiente e quais funções usaremos para carregar imagens, criar cenário e atualizar comportamentos do jogo.

Veja que depois de fecharmos o window.onload é que inserimos a implementação das funções carregaAssets, criaCenario e atualizaJogo.


window.onload = function() {
    // Cria o cenário com 1220 x 600 px
    game = new Phaser.Game(1200, 600, Phaser.AUTO, '', {
        preload: carregaAssets,
        create: criaCenario,
        update: atualizaJogo
    });
}

/**
 *  Carrega imagens, sons etc, para usar no jogo
 */
function carregaAssets() {
    // Código da função virá aqui
}

/**
 *  Cria cenário do jogo
 */
function criaCenario() {
    // Código da função virá aqui
}

/**
 *  Atualiza jogo. Esta função roda em torno de 60 vezes em 1 segundo, ou seja,
 *  60 FPS (FPS = Frames Por Segundo)
 */
function atualizaJogo() {
    // Código da função virá aqui
}

Tudo que você verá até agora é uma tela preta com o tamanho do cenário que você criou:

cenário inicial

Adicionando o fundo

O próximo passo é carregar as imagens do jogo e fazer o fundo aparecer. Modifique a função carregaAssets e deixe-a assim:

/**
 *  Carrega imagens, sons etc, para usar no jogo
 */
function carregaAssets() {
    game.load.image('fundo', 'assets/fundo.jpg');
}

Crie agora uma função chamada criaFundo e nela insira este conteúdo:

/**
 * Função que cria o fundo do jogo
 */
function criaFundo(){
    // Adiciona o fundo
    game.add.sprite(0, 0, 'fundo');
}

Repare que na função carregaAssets adicionamos uma imagem no jogo com o nome ‘fundo’ que se encontra no caminho ‘assets/fundo.jpg’, ou seja, dentro da pasta assets.

Veja que na função criaFundo, nós adicionamos um sprite na posição 0x e 0y que usa a imagem ‘fundo’. O resultado é que isto irá exibir o fundo no jogo. Basta apenas chamarmos a função criaFundo() para que ela faça seu trabalho.

Altere então a função criaCenario e faça com que ela chame a função criaFundo:

/**
 *  Cria cenário do jogo
 */
function criaCenario() {
    // A primeira coisa a criar deve ser o fundo
    criaFundo();
}

O resultado será este:
cenário com fundo

Criando o chão para nosso jogador andar

O último passo desta parte do jogo, será adicionar o chão para que nosso jogador possa andar e pular. Nosso chão será uma imagem simples e o usaremos para entender qual a diferença entre chão e limite do mundo.

Inclua o arquivo do chão na lista de imagens a serem carregadas pela função carregaAssets:

/**
 *  Carrega imagens, sons etc, para usar no jogo
 */
function carregaAssets() {
    game.load.image('fundo', 'assets/fundo.jpg');
    game.load.image('chao', 'assets/chao.jpg');
}

Modifique a função criaCenario conforme o código abaixo:

/**
 *  Cria cenário do jogo
 */
function criaCenario() {
    // A primeira coisa a criar deve ser o fundo
    criaFundo();

    // O grupo de plataformas contém o chão onde o personagem poderá pular
    plataformas = game.add.group();

    // Cria o chão
    criaChao();
}

Veja que adicionamos a variável plataformas que conterá a estrutura do chão, e abaixo chamamos a função criaChao que ainda precisa ser criada.

Crie então a função criaChao conforme visto abaixo:

/**
 * Função que cria o chão do jogo
 */
function criaChao(){
    // Definimos aqui a física que qualquer objeto neste grupo tem corpo
    plataformas.enableBody = true;

    // Aqui criamos o chão
    var chao = plataformas.create(0, game.world.height - 30, 'chao');

    // Informa que o chão não vai se mover se o usuário pular em cima dele
    chao.body.immovable = true;

    // Escala o chão para aparecer até perto do final do cenário
    // (2x mais comprido e 1x mais alto - mesma altura)
    chao.scale.setTo(2, 1);
}

O resultado será este. O chão é a barra em verde na parte de baixo da imagem:
cenário com fundo e chão

Jogo em ação

Aqui você pode ver o código que implementamos funcionando.

Neste link você pode baixar esta versão do jogo:

O que vem por aí?

No próximo post vou mostrar como adicionar um personagem ao jogo e fazê-lo andar, até breve!

4 Comments

Leave a Reply

%d