Making your first Phaser 3 game - Part 1 - Introduction

Bem-vindo ao nosso primeiro tutorial 'Fazendo um jogo com Phaser 3'. N├│s vamos aprender como criar um pequeno jogo sobre um jogador correndo e pulando por plataformas, colecionando estrelas e evitando os inimigos. Ao passar por este processo, vamos explicar alguns dos principais recursos do framework.

O que ├® Phaser?

Phaser ├® um framework de jogos que visa ajudar os desenvolvedores a criarem jogos poderosos, multi-navegadores, muito r├ípido. Foi criado especificamente para aproveitar os benef├¡cios dos navegadores modernos, tanto para desktop quanto para dispositivos m├│veis. O ├║nicos requisito do navegador ├® suporte do elemento canvas.

Requisitos

Baixe este aquivo zip que cont├®m cada passo deste tutorial em c├│digos e assets que o acompanham.

Voc├¬ necessita ter um conhecimento muito b├ísico de JavaScript.

Al├®m disso certifique-se de que voc├¬ passou pelo Guia de primeiros passos, ele mostrar├í como fazer o download do framework, configurar um ambiente de desenvolvimento local e dar├í uma vis├úo da estrutura de um projeto da Phaser e de suas principais funcionalidades.

Se voc├¬ j├í seguiu o Guia de Introdu├º├úo, voc├¬ fez o download do Phaser e deixou tudo configurado, pronto para codificar. Fa├ºa o download dos assets deste tutorial e descompacte-os em sua pasta raiz da web.

Abra a p├ígina part1.html no seu editor preferido e vamos dar uma olhada mais de perto no c├│digo. Depois de um pequeno HTML inicial o qual inclui o Phaser, a estrutura do c├│digo se parecer├í com isso:

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

var game = new Phaser.Game(config);

function preload ()
{
}

function create ()
{
}

function update ()
{
}

O objeto config ├® por onde voc├¬ configura seu jogo no Phaser. Existem muitas op├º├Áes que podem ser colocadas nesse objeto e, ├á medida que voc├¬ expande seu conhecimento sobre o Phaser, voc├¬ encontrar├í mais delas. Mas neste tutorial vamos apenas definir o renderizador, as dimens├Áes e uma Scene padr├úo.

Uma inst├óncia de um objeto Phaser.Game ├® atribu├¡da a uma vari├ível local chamada game e o objeto de configura├º├úo ├® passado para ela. Isso iniciar├í o processo de dar vida ao Phaser.

No Phaser 2, o objeto game agia como o gateway para quase todos os sistemas internos e era frequentemente acessado a partir de uma vari├ível global. No Phaser 3, esse n├úo ├® mais o caso e n├úo ├® mais vantajoso armazenar a inst├óncia do jogo em uma vari├ível global.

A propriedade type pode ser Phaser.CANVAS, Phaser.WEBGL ou Phaser.AUTO. Este ├® o contexto de renderiza├º├úo que voc├¬ pode usar para o seu jogo. O valor recomendado ├® Phaser.AUTO, o qual tenta automaticamente usar o WebGL, mas se o navegador ou o dispositivo n├úo suportar, ele voltar├í ao Canvas. O elemento canvas que o Phaser cria ser├í anexado ao documento no momento em que o script foi chamado, mas voc├¬ tamb├®m pode especificar um cont├¬iner pai na config do jogo, caso queira.

As propriedades width e height definem o tamanho do elemento canvas que o Phaser criar├í. Neste caso, 800 x 600 pixels. Seu mundo no jogo pode ser de qualquer tamanho que voc├¬ quiser, mas essa ├® a resolu├º├úo em que o jogo ser├í exibido.

A propriedade scene do objeto de configura├º├úo ser├í abordada em maiores detalhes neste tutorial.