Portuguese (Português) translation by Erick Patrick (you can also view the original English article)
Quem já desenvolveu jogos HTML5 antes, deve conhecer alguns motores de jogos que facilitam bastante o desenvolvimento. Eles tem o código que precisamos para detecção de colisões, gerar entidades diversas ou adicionar efeitos de som ao jogo. Nesse tutorial, aprenderemos sobre outro motor de jogo chamado Crafty. É bem fácil de usar e suporta os principais navegadores, incluindo IE9.
Após reduzida, a biblioteca fica com apenas 127kb, logo não resultará em grande demorar na carga do jogo. Ela suporta mapas de sprites, logo é fácil desenhar entidades de jogo na tela. Também podemos criar eventos customizados ativados quando quisermos e nos objetos que quisermos.
Também há componentes para sons, animação e outros efeitos. No geral, esse motor de jogo é uma ótima escolhar se quisermos desenvolver jogos HTML5 básicos.
Configuração Inicial
A primeira coisa a fazer é incluir Crafty no projeto. Podemos baixar o arquivo e carregar no projeto ou usar o link direto da versão reduzida hospedada numa CDN. Após carregada, podemos usar o código a seguir para iniciar Crafty:
Crafty.init([Number width, Number height, stage_elem]);
Os dois primeiros argumentos determinam a largura e altura da palco. O terceiro é usado para especificar o elemento que usaremos como palco. Se o terceiro não for provido, Crafty usará uma div com id cr-stage como seu palco. De forma similar, se a largura e altura não forem passadas, Crafty configurará a largura e altura do palco igual à da janela do navegador.
Até o momento, temos o código a seguir:
<html> <head></head> <body> <div id="crafty-game"></div> <script type="text/javascript" src="path/to/crafty.min.js"></script> <script> Crafty.init(600,400, document.getElementById('crafty-game')); </script> </body> </html>
Criando Entidades
Entidades são a base de um jogo em Crafty. Tudo, do jogador aos inimigos e obstáculos são representados usando entidades. Podemos usar lista de componentes com entidades. Cada componente adicionará funcionalidades à entidade, dando propriedades e métodos do componente à entidade. Também podemos encadear outros métodos à uma entidade configurando várias propriedades, como largura, altura, localização e cor. Eis exemplo básico da adição de componentes a uma entidade:
Crafty.e('2D, Canvas, Color');
Cda entidade a mostrar ao usuário precisará tanto do componente 2D quando da camada de renderização. Essa última pode ser DOM
, Canvas
ou WebGL
. Notemos que suporte ao WegGL foi adicionado na versão 0.7.1. Atualmente, apenas componentes Sprite
, Image
, SpriteAnimation
e Color
suportam essa renderização. Entidades Text
ainda precisam de DOM
ou Canvas
.
Agora, podemos usar attr()
para configurar os valores das propriedades como a largura, altura e posição da entidade. A maioria dos métodos de Crafty retornará a própria entidade e attr()
não é exceção. Isso significa que seremos capazes de encadear mais métodos para configurar mais propriedades aos elementos. Eis um exemplo:
Crafty.e("2D, Canvas, Color") .attr({x:200, y:100, w:200, h:50}) .color("orange");
Isso criará uma entidade retangular laranja no palco.
Movendo Entidades
Agora que criamos a entidade, criemos código para movê-la usando o teclado. Podemos movê-la em quatro direções diferentes (cima, baixo, esquerda e direita) usando o componente Fourway
.
A entidade pode ser movida usando as setas ou W, A, S e D. Podemos passar alguns argumentos para o construturo de Fourways
para configurar a velocidade da entidade. Eis como o código da entidade deve estar agora:
Crafty.e("2D, Canvas, Color, Fourway") .attr({x:200, y:100, w:200, h:50}) .color("orange") .fourway(300);
Podemos restringir o movimento da entidade a apenas duas direções usando o componente Twoway
. Substituir o componente Fourway
acima pelo Twoway
confinará o movimento da caixa apenas à direção horizontal. Isso fica evidente na demo abaixo:
Também podemos adicionar nossos próprios componentes a entidades diferentes para identificação ou agrupar entidades similares. Nesse caso, adicionamos o componente Floor
à caixa laranja. Podemos usar outros nomes descritivos para ajudar a identificar entidades diferentes.
Crafty.e("2D, Canvas, Color, Twoway, Floor") .attr({ x: 200, y: 340, w: 200, h: 50 }) .color("orange") .twoway(300);
Há um outro componente bem útil que podemos usar para mover os elementos, o componente Gravity
. Ao adicionar a uma entidade, ele a fará cair. Talvez queiramos parar tal entidade de cair quando encontrar outras entidades. Podemos fazê-lo passando um componente identificar como argumento da função da gravidade. Eis o código que faz o pequeno quadrado preto cair na no chão ou plataforma:
Crafty.e("2D, Canvas, Color, Gravity") .attr({ x: 200, y: 50, w: 50, h: 50 }) .color("black") .gravity("Floor");
Pensamentos Finais
Como vimos no tutorial, podemos criar estruturas básicas de um jogo simples com pouco código. Tudo que fizemos foi adicionar componentes às nossas entidades e especificar os valores de propriedades como altura, largura e velocidade de movimento.
Esse tutorial trouxe a ideia básica sobre entidades e outros conceitos da Crafty. Na próxima parte, aprenderemos sobre entidades em mais detalhes. Quaisquer dúvidas sobre o tutorial, basta deixar uma mensagem nos comentários.
Subscribe below and we’ll send you a weekly email summary of all new Game Development tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post