Uma visão geral do enchant.js

Enchant.js é composto de uma biblioteca central e bibliotecas adicionais de plugins. Os principais plugins estão incluídos no site de desenvolvimento e compartilhamento de jogos 9leap.net, assim você pode experimentá-los facilmente. Para aqueles que estão aprendendo enchant.js, code.9leap.net fornece uma maneira fácil de aprendizado.

Conceitos básicos do enchant.js

Enchant.js é uma biblioteca que funciona em navegadores compatíveis com HTML5. Pode ser usada para desenvolver jogos facilmente, mas também pode ser utilizada para criar outros tipos de programas além de jogos, é claro. Um exemplo de um simples programa que usa enchant.js é mostrado abaixo.

 enchant(); // declara o uso de enchant.js
window.onload = function(){ // executa essa função depois da janela ser carregada
    game = new Core(320,320); // cria um novo jogo com resolução de 320x320
    game.preload('fig1.png','fig2.png'); // especifica quais imagens devem ser carregadas quando o jogo iniciar
    game.onload = function(){ // descreve o que deve ser executado quando o jogo iniciar
        var bear = new Sprite(32,32); // cria um sprite
        bear.image = game.assets['fig1.png']; // especifica o arquivo de imagem *deve ter sido pré-carregado
        bear.x = 50; // especifica a posição no eixo x
        bear.y = 50; // especifica a posição no eixo y
        game.rootScene.addChild(bear); // exibe a imagem na tela
    }
    game.start(); // inicia o jogo
} 

Depois de criar uma instância da classe Core, dentro de window.onload, e depois de pré-carregar as imagens para uso no jogo, o conteúdo de game.onload é executado.

Uma grande parte do processamento do jogo é de fato definido pelo conteúdo de game.onload.

Entidades

Cenas (Scene), sprites (Sprite), rótulos (Label) e grupos (Group) são imagens que são exibidas e abstraídas pelo enchant.js para entidades (Entity), que compõem os jogos. Todas entidades herdam a classe Entity, são exibidas a partir de uma posição especificada nos eixos x e y e então são adicionadas em uma cena específica. Os passos que criam uma instância da classe Core são os seguintes. Uma vez que a cena padrão é por predefinição atribuída para game.rootScene, é comum usar addChild nela para exibir alguma coisa na tela.
As cenas podem conter grupos. Uma vez que grupos também podem ser adicionados a outras entidades (como cenas) com addChild, quando algo é exibido na tela, você precisa manter o registro de qual cena o grupo está sendo adicionado.
Se você precisa remover uma entidade de uma cena, use removeChild.
A tela real é exibida baseada nos sprites e rótulos. A palavra “sprite” (duende em inglês) originalmente tem o significado de uma “criatura de contos de fadas”, o que significa que é esperado que a imagem saia voando pela tela.
Rótulos, como seu nome sugere, exibem caracteres na tela.

Eventos

Eventos ocorrem quando alguma coisa toca outra na tela, quando uma quantidade específica de tempo passa ou algum outro tipo de mudança ocorre. Quando os eventos ocorrem, funções chamadas “ouvintes de eventos” (event listeners) podem ser criadas.
Adicionar ouvintes de eventos às entidades permite que elas sejam controladas. Quando os ouvintes de eventos são disparados, eles emitem comandos à sua entidade pai.

 var bear = new Sprite(32,32); // cria um sprite
bear.image = game.assets['fig1.png']; // define a imagem a ser exibida
bear.x = 50; // define a posição no eixo x
bear.y = 50; // define a posição no eixo y

bear.addEventListener('enterframe',function(){ // adiciona um ouvinte de eventos
    // o ouvinte de eventos para o evento enterframe event
    this.x+=2; // move dois pixels para direita
});
game.rootScene.addChild(bear); // exibe a imagem na tela 

Fazendo isso, a animação do urso se movendo para direita pode ser exibida na tela. O evento enterframe invoca todas entidades exibidas na tela, uma a uma, em um intervalo fixo de tempo.
Outro exemplo

 bear.addEventListener('touchend',function(){ //adiciona um ouvinte de eventos
    //ouvinte de eventos para o evento touchend event
    this.x+=2; //move dois pontos para direita
}); 

Trocando o nome do evento para touchend, desta vez o personagem se moverá 2 pixels para direita apenas quando for clicado pelo usuário, tornando o sprite interativo.
Para criar um ouvinte de eventos para a tela toda, basta adicioná-lo à própria cena.

 game.rootScene.addEventListener('touchend',function(param){ // ouvinte de eventos da cena
    bear.x = param.x; // move o urso para a posição clicada
    bear.y = param.y;
}); 

Os ouvintes de eventos podem, opcionalmente, aceitar parâmetros. Aqui, usando param, o ouvinte de eventos passa a coordenada que foi clicada.
Substituindo as coordenadas do urso pela posição clicada na tela, o personagem é movimentado. Os eventos também podem ser adicionados a uma entidade diversas vezes.

Classes

Quando você se acostumar a desenvolver, criar jogos mais complicados se tornará mais fácil se você criar suas próprias classes personalizadas. Classes em enchant.js podem ser criadas com a função Class.create.

 Bear = Class.create(Sprite, { // declara uma classe personalizada chamada Bear
    initialize:function(){ // inicializa a classe (construtor)
        Sprite.call(this,32,32); // inicializa o sprite
        this.image = game.assets['fig1.png']; // define a imagem
        game.rootScene.addChild(this);
    }
}); 

Definindo essa classe, fica mais fácil a criação do personagem a seguir.

 bear = new Bear(); 

É isso aí. Fazendo apenas isso nós criamos uma instância da classe personalizada Bear, que herda características da classe Sprite. Herdando a classe, nós facilmente criamos a classe Bear que contém todas as funcionalidades da classe Sprite. Caso não usássemos a herança, seria necessário usar o código seguinte.

 hoge = Class.create({
    initialize:function(){
        this.x=10;
    }); 

Além disso, definir um ouvinte de eventos aqui torna a tarefa mais fácil daqui pra frente.

 Bear = Class.create(Sprite, { // define a classe personalizada
    initialize:function(){ // inicializa a classe (construtor)
        Sprite.call(this,32,32); // inicializa o sprite
        this.image = game.assets['fig1.png']; // designa a imagem do sprite
        game.rootScene.addChild(this);
    },
    onenterframe:function(){ // ouvidor do evento enterframe
        this.x+=2;
    },
    ontouchend:function(){ // o ouvidor de eventos para o evento touchend
        this.y+=10;
    }
}); 

Isso o ajudará imensamente a poder escrever classes como esta. Uma classe que você criou uma vez e que poderá ser reutilizada várias vezes.

 bear1 = new Bear();
bear1.x=100;

bear2 = new Bear();
bear2.x=150; 

Ser capaz de aplicar essas classes efetivamente aumentará a eficiência com a qual você desenvolve seus jogos.

Detecção de Colisão

Para verificar se uma entidade interceptou, ou entrou em contato, com outra entidade, use within ou intersect.

 if(bear1.intersect(bear2)){ // se bear1 tocar bear2
    bear1.x -= 10;
    bear2.x += 10;
} 

Finalmente

Isto conclui nossa explicação introdutória do enchant.js. O manual de referência contém informações mais detalhadas sobre a biblioteca. Acreditamos que quanto mais técnicas você for capaz de usar, mais você poderá desfrutar da biblioteca.
Divirta-se!

This post is also available in: Inglês, Japonês