Olá pessoal, nesta sequência de artigos, iremos criar um jogo utilizando a Phaser.js. É necessário que você conheça os procedimentos de instalação de servidores web e instalação do Phaser. Recomendo a leitura desta postagem, que é a primeira postagem da série Phaser.js. Você pode acessá-lo clicando aqui.
Vamos começar?
Primeiro, se faz necessário o download deste arquivo zip, que contém tudo o que você necessita para criar o jogo.
[download id=”3357″]
Passo 1:
Abra o arquivo part1.html no seu editor de código favorito. Você deverá ver um código parecido com este:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Making your first Phaser 3 Game - Part 1</title>
<script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
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 ()
{
}
</script>
</body>
</html>
Este é a nossa configuração inicial. Muitas coisas serão inseridas nessa configuração, a medida que o nosso conhecimento em Phaser é expandido. Agora, nós definiremos o renderizador, as dimensões e uma cena 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 inicia o processo de dar vida ao seu jogo em Phaser!
Renderização:
A propriedade type pode ser Phaser.CANVAS, Phaser.WEBGL ou Phaser.AUTO. Este é o contexto de renderização que você deseja usar no seu jogo. O valor recomendado é o Phaser.AUTO, que usa automaticamente o WebGL, mas se não houver suporte do navegador, ele usará o Canvas. O elemento criado será anexado ao documento no momento que o script for chamado.
Dimensões:
As propriedades width e height definem a largura e altura do seu elemento tela, respectivamente. Usaremos 800 x 600 pixels.
Cena:
Vamos carregar os assets que precisamos para o nosso jogo. Faremos isso criando chamadas para o Phaser dentro de uma função chamada preload. O Phaser procurará automaticamente essa função quando carregar a tela e carregará qualquer coisa que esteja definida dentro dela.
Insira o seguinte código dentro de sua função preload vazia:
function preload ()
{
this.load.image('sky', 'assets/sky.png');
this.load.image('ground', 'assets/platform.png');
this.load.image('star', 'assets/star.png');
this.load.image('bomb', 'assets/bomb.png');
this.load.spritesheet('dude',
'assets/dude.png',
{ frameWidth: 32, frameHeight: 48 }
);
}
Isso irá carregar 5 assets: 4 imagens e uma folha de sprites. O Primeiro parâmetro, chamado de asset key (por exemplo, “sky”, “bomb”), é uma sequência que é um link para o material carregado, e é o que você usará no seu código ao criar objetos do jogo.
Exibindo o background:
Para exibir o background do seu jogo, colocaremos o seguinte código dentro da função create:
this.add.image(400, 300, 'sky');
Isso irá carregar um background de um céu azul. Você pode encontrar isso feito no seu arquivo part3.html.
Sua saída deve ser assim:
Você pode ler o artigo original em inglês neste link: http://phaser.io/tutorials/making-your-first-phaser-3-game/part1
Está gostando destes artigos sobre Phaser? Siga acompanhando e comente abaixo!
