Home-theater-designers
Phaser é uma estrutura para a criação de videogames 2D. Ele usa HTML5 Canvas para exibir o jogo e JavaScript para executá-lo. A vantagem de usar o Phaser em vez do JavaScript básico é que ele possui uma extensa biblioteca que completa muito da física dos videogames, permitindo que você se concentre no design do jogo em si.
Phaser reduz o tempo de desenvolvimento e facilita o fluxo de trabalho. Vamos aprender como criar um jogo básico com Phaser.
Por que desenvolver com Phaser?
Phaser é semelhante a outras linguagens de programação visual em que o programa é baseado em atualizações em loop. O Phaser tem três estágios principais: pré-carregamento, criação e atualização.
No pré-carregamento, os ativos do jogo são carregados e disponibilizados para o jogo.
Criar inicializa o jogo e todos os elementos iniciais do jogo. Cada uma dessas funções é executada uma vez quando o jogo é iniciado.
A atualização, por outro lado, é executada em um loop durante todo o jogo. É o burro de carga que atualiza os elementos do jogo para torná-lo interativo.
Configure seu sistema para desenvolver jogos com Phaser
Apesar de o Phaser ser executado em HTML e JavaScript, os jogos, na verdade, são executados no lado do servidor, não no lado do cliente. Isso significa que você precisará executar seu jogo em seu host local . A execução do lado do servidor do jogo permite que o jogo acesse arquivos e ativos adicionais fora do programa. Eu recomendo usando XAMPP para configurar um host local se você ainda não tiver uma configuração.
O código a seguir o ajudará a começar a trabalhar. Ele configura um ambiente de jogo básico.
var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};
var gamePiece;
var game = new Phaser.Game(config);
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}
Para ser executado, o jogo exigirá uma imagem PNG chamada 'gamePiece' salva em uma pasta 'img' em seu host local. Para simplificar, este exemplo usa um quadrado laranja 60xgame de60px. Seu jogo deve ser semelhante a este:
Se você tiver um problema, use o depurador do seu navegador para descobrir o que deu errado. Perder até mesmo um único caractere pode causar confusão, mas geralmente, seu depurador detectará esses pequenos erros.
Explicando o código de instalação
Até agora, o jogo não faz nada. Mas já cobrimos muito terreno! Vamos examinar o código com mais detalhes.
Para que um jogo Phaser seja executado, você precisa importar a biblioteca Phaser. Fazemos isso na linha 3. Neste exemplo, vinculamos ao código-fonte, mas você pode baixá-lo em seu host local e fazer referência ao arquivo também.
você pode recuperar mensagens apagadas no messenger?
Muito do código até agora configura o ambiente do jogo, que a variável config lojas. Em nosso exemplo, estamos configurando um jogo de phaser com um fundo azul (CCFFFF em código de cor hexadecimal) de 600 por 600 pixels. Por enquanto, a física do jogo foi definida para árcade , mas Phaser oferece física diferente.
Finalmente, cena diz ao programa para executar o pré-carga função antes do jogo começar e o Criar função para iniciar o jogo. Todas essas informações são passadas para o objeto do jogo chamado jogos .
Relacionado: Os 6 melhores laptops para programação e codificação
A próxima seção do código é onde o jogo realmente toma forma. A função de pré-carregamento é onde você deseja inicializar qualquer coisa necessária para executar o jogo. No nosso caso, pré-carregamos a imagem da nossa peça do jogo. O primeiro parâmetro de .imagem nomeia nossa imagem e o segundo diz ao programa onde encontrar a imagem.
A imagem gamePiece foi adicionada ao jogo na função de criação. A linha 29 diz que estamos adicionando a imagem gamePiece como um sprite 270px à esquerda e 450px abaixo do canto superior esquerdo da nossa área de jogo.
Fazendo nosso jogo se mover
Até agora, isso dificilmente pode ser chamado de jogo. Por um lado, não podemos mover nossa peça do jogo. Para poder mudar as coisas em nosso jogo, teremos que adicionar uma função de atualização. Também teremos que ajustar a cena na variável de configuração para informar ao jogo qual função será executada quando atualizarmos o jogo.
Adicionar uma função de atualização
Nova cena na configuração:
scene: {
preload: preload,
create: create,
update: update
}Em seguida, adicione uma função de atualização abaixo da função de criação:
como desmontar um xbox
function update(){
}Obtendo entradas importantes
Para permitir que o jogador controle a peça do jogo com as teclas de seta, teremos que adicionar uma variável para rastrear quais teclas o jogador está pressionando. Declare uma variável chamada keyInputs abaixo de onde declaramos gamePieces. Declará-lo ali permitirá que todas as funções acessem a nova variável.
var gamePiece;
var keyInputs;A variável keyInput deve ser inicializada quando o jogo é criado na função de criação.
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}Agora, na função de atualização, podemos verificar se o jogador está pressionando uma tecla de seta e, se estiver, mover nossa peça do jogo de acordo. No exemplo abaixo, a peça do jogo é movida 2px, mas você pode torná-la um número maior ou menor. Mover a peça 1px por vez pareceu um pouco lento.
function update(){
if(keyInputs.left.isDown){
gamePiece.x = gamePiece.x - 2;
}
if(keyInputs.right.isDown){
gamePiece.x = gamePiece.x + 2;
}
if(keyInputs.up.isDown){
gamePiece.y = gamePiece.y - 2;
}
if(keyInputs.down.isDown){
gamePiece.y = gamePiece.y + 2;
}
}O jogo agora tem um personagem móvel! Mas para realmente ser um jogo, precisamos de um objetivo. Vamos adicionar alguns obstáculos. Evitar obstáculos era a base de muitos jogos da era dos 8 bits.
Adicionando Obstáculos ao Jogo
Este exemplo de código usa dois sprites de obstáculo chamados obstáculo1 e obstáculo 2. obstáculo1 é um quadrado azul e obstáculo2 é verde. Cada imagem precisará ser pré-carregada como o sprite da peça de jogo.
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}Então, cada sprite de obstáculo precisará ser inicializado na função de criação, assim como a peça de jogo.
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}Fazendo o movimento dos obstáculos
Para mover as peças desta vez, não queremos usar a entrada do jogador. Em vez disso, vamos mover uma peça de cima para baixo e a outra da esquerda para a direita. Para fazer isso, adicione o seguinte código à função de atualização:
obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}
obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}O código acima moverá obstacle1 para baixo na tela e obstacle2 pela área de jogo 4px cada quadro. Uma vez que um quadrado está fora da tela, ele é movido de volta para o lado oposto em um novo local aleatório. Isso garantirá que sempre haja um novo obstáculo para o jogador.
Detectando Colisões
Mas ainda não terminamos. Você deve ter notado que nosso jogador pode passar direto pelos obstáculos. Precisamos fazer o jogo detectar quando o jogador atinge um obstáculo e encerrar o jogo.
A biblioteca de física Phaser possui um detector de colisor. Tudo o que precisamos fazer é inicializá-lo na função de criação.
this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});O método do colisor requer três parâmetros. Os primeiros dois parâmetros identificam quais objetos estão colidindo. Acima, temos dois aceleradores configurados. O primeiro detecta quando a peça de jogo colide com o obstáculo1 e o segundo colisor está procurando colisões entre a peça de jogo e o obstáculo2.
O terceiro parâmetro informa ao colisor o que fazer quando detectar uma colisão. Neste exemplo, existe uma função. Se houver uma colisão, todos os elementos do jogo serão destruídos; isso interrompe o jogo. Agora o jogador terminará o jogo se bater em um obstáculo.
Experimente o desenvolvimento de jogos com Phaser
Existem muitas maneiras diferentes de melhorar e tornar este jogo mais complexo. Nós criamos apenas um jogador, mas um segundo personagem jogável pode ser adicionado e controlado com os controles 'awsd'. Da mesma forma, você pode experimentar adicionar mais obstáculos e variar a velocidade de seus movimentos.
como perder uma sequência no snapchat
Esta introdução o ajudará a começar, mas ainda há muito mais a aprender. O melhor do Phaser é que grande parte da física do jogo é feita para você. É uma ótima maneira fácil de começar a projetar jogos 2D. Continue a desenvolver este código e refinar seu jogo.
Se você encontrar algum erro, o depurador do navegador é uma ótima maneira de descobrir o problema.
Compartilhado Compartilhado Tweet O email Como usar o Chrome DevTools para solucionar problemas de sitesAprenda a usar as ferramentas de desenvolvimento integradas do navegador Chrome para melhorar seus sites.
Leia a seguir Tópicos relacionados- Programação
- JavaScript
- HTML5
- Desenvolvimento de jogos
J. Seaton é um escritor de ciências especializado em analisar tópicos complexos. Ela tem um PhD pela University of Saskatchewan; sua pesquisa se concentrou na utilização de aprendizagem baseada em jogos para aumentar o envolvimento dos alunos online. Quando ela não está trabalhando, você a encontrará lendo, jogando videogame ou fazendo jardinagem.
Mais de Jennifer SeatonAssine a nossa newsletter
Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!
Clique aqui para se inscrever