quarta-feira, 21 de novembro de 2012

Paradigma de Entidades e Componentes

A maneira que o crafty trata os objetos do jogo é um pouco diferente, pelo menos quando vi pela primeira vez achei bem diferente e muito interessante.


Introdução

Crafty usa o paradigma Sistema de Entidades e Componentes. Tudo em Crafty são entidades e essas entidades, por sua vez, podem possuir vários componentes.

Entidades

Entidades são os objetos que existe no mundo do jogo, geralmente esses objetos são visíveis e até se movem. Alguns exemplos de entidade:
  • um soldado;
  • uma granada;
  • um carro;
  • uma pedra;
  • uma mesa.
Entidades geralmente podem podem realizar várias ações. Por exemplo:
  • Mover;
  • Pular;
  • Explodir;
  • Voar;
  • Reagir com outras entidades;
  • Dançar.
Componentes

E os componentes? O que são? Para que servem? São importantes? Isso e muito mais você verá sexta-feira, no Globo Reporter. Componente é o que permite uma entidade realizar várias ações. Uma entidade pode ter vários componentes, cada um dando à ela várias funcionalidades.
Imagine um componente "Movimento", ele permite que a entidade mova-se. Então todas as entidades do seu jogo que podem mover iriam ter esse componente. Já aquelas entidades que não se movem (uma árvore, por exemplo) não iriam ter esse componente.
Componentes permite que as entidades só tenha as funcionalidades que elas precisam ter.

Como isso funciona no Crafty?

No Crafty quando queremos criar uma entidade usamos o método .e(). Os argumentos desse método são os nomes dos componentes que você quer que ela tenha inicialmente. Você pode passa-los todos juntos,  separados por virgula, ou separadas, como argumentos individuais. Veja:

var minhaEntidade1 = Crafty.e("Component1, Component2, Component3");
// ou
var minhaEntidade2 = Crafty.e("Component1", "Component2", "Component3");


Aqueles argumentos serão apenas os componentes que a entidade terá ao ser criada. Você pode adicionar mais outros componentes usando .addComponent() e pode remover componentes com o .removeComponente(). Remover? Sim, remover. Caso você não veja utilidade nisso, imagine uma entidade paralisada. Seria legal que entidades paralisadas não possam se mover, então apenas remova o componente "Movimento" dela. E se precisar, depois de um tempo você adiciona ele novamente.


Como crio componentes?

Agora vem a parte legal. Para criar componentes usamos o método .c(). Esse método recebe dois argumentos. O primeiro argumento é uma string que será o nome do Componente, essa string é case-sensitive, ou seja, maiúsculas e minúsculas fazem diferença. Um componente "Movimento" seria diferente de um outro componente chamado "movimento", apenas por que a primeira letra é diferente. Vamos continuar... Já o segundo argumento é um objeto com as funcionalidades que o componente adicionará à entidade. Vejamos um exemplo bem simples:

Crafty.c("MeuComponente", {
    _mensagem : "Meu componente é incrível",

    // o método init é sempre executado quando o componente é adicionado
    init : function() {
        alert("Meu Componente foi adicionado");
    },

    msg: function() {
        alert(this._mensagem);
    }
});

O componente acima está apenas escrito, ele ainda não faria nada. Na verdade nenhum componente faz nada, quem faz é a entidade. Componente apenas faz parte da entidade. Imagine que criamos uma entidade sem nenhum componente. Chega em uma parte do jogo e precisamos que ela tenha o componente "MeuComponente", esse que acabamos de criar. Então adicionamos ele na entidade. Assim que ele é adicionado aparece uma messagem na tela "Meu Componente foi adicionado", pois o método init é sempre chamado quando um componente é adicionado em uma entidade. Nossa entidade agora terá o método .msg(). Esse método faria ser mostrado na tela o conteúdo da váriavel _mensagem, que também faz parte de nossa entidade agora.


Conheça o CraftyBuilder



CraftyBuilder é um site para desenvolvimento de jogos em Crafty. Eu vou usa-lo muito daqui por diante para mostrar exemplos. A vantagem dele que ele é feito especialmente para Crafty, assim não precisamos de adicionar o script na página, pois já está lá. Para demonstrá-lo fiz um exemplo:

Nesse Exemplo apenas criei uma entidade (um quadrado), colori e mudei ela de lugar. Aconselho explorar melhor esse exemplo, dando novos valores para nossa entidade, como uma cor ou tamanho diferentes.

Finalizo aqui minha explicação sobre Entidades e Componentes. Recomendo a leitura da documentação do Crafty, juntamente com o CraftyBuilder. Teste e explore tudo que você for aprendendo. Veja também alguns jogos criados em Crafty:
http://craftyjs.com/ (no final da página)
https://groups.google.com/forum/#!topic/craftyjs/AIsnKKwQ2ow/discussion (no fórum oficial do Crafty)

Muito Obrigado por ter lido. Por favor, se não for incomodar, comente em nosso fórum:
https://groups.google.com/d/topic/upanddraw/5cG6g5EHC7U/discussion



Disqus for Update and Draw