Começando com Crafty: Introdução

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.