Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Game Engines
Gamedevelopment

Começando com Crafty: Entidades

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Getting Started with Crafty.
Getting Started With Crafty: Introduction
Getting Started With Crafty: Controls, Events, and Text

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

No tutorial anterior, aprendemos o básico sobre entidades e como elas são os blocos base do jogo. Nesse tutorial, iremos além do básico e aprenderemos mais detalhes sobre entidades.

Entidades e Seus Componentes

Cada entidade é feita de vários componentes. Cada um deles adiciona sua própria funcionalidade à entidade. Crafty oferece vários componentes embutidos, mas podemos criar nossos próprios usando Crafty.c().

Aprendemos alguns componentes básicos como 2D, Canvas, Color e Fourway no primeiro tutorial. Comecemos criando outra entidade usando-os:

Quando temos várias entidades com diferentes componentes, pode ser necessário saber se uma dada entidade tem um dado componente anexado. Podemos fazê-lo usando o método .has().

Similarmente, adicionamos componentes a uma entidade usando .addComponent(). Para adicionar vários de uma vez, podemos passá-los em um texto separado por vírgula, ou cada um deles com um argumento diferente. Nada acontecerá se a entidade já tiver o dado componente que tentamos adicionar.

Também podemos remover componentes de uma entidade usando .removeComponente(String Component[, soft]). Esse método recebe dois argumentos. O primeiro é o que queremos remover e o segundo determina se a exclusão do elemento é reversível ou integral. Exclusão reversível apenas fará .has() retornar false quando consultado para aquele componente. Exclusão integral removerá todas as propriedades associadas e métodos do componente.

Por padrão, todos os componentes são reversíveis. Podemos passar false pro segundo argumento para exclusão integral.

Configurando Valores de Diferentes Atributos

É provável que precisemos configurar valores de atributos específicos em todas entidades do jogo. Por exemplo, uma entidade de comida do personagem no jogo deve parecer diferente que a entidade representando o personagem em si. De forma similar, energéticos serão diferentes de comidas. Crafty permite configurar valores de entidades diferentes num jogo, separadamente, ou de uma só ver via .attr().

A entidade principal é guardada na variável playerBox. Então, podemos configurar diferentes propriedades diretamente usando o código abaixo:

A propriedade z configura o z-index das várias entidades. Uma com valor de z maior será criada acima das outras. Lembremos que apenas inteiros são válidos para z-index.

Criemos uma entidade comida com tamanho, posição e rotações diferentes. A rotação é em graus e usamos valores negativos para girar na direção anti-horária.

Como podemos ver na demo abaixo, tanto a comida como o jogador são bem distinguíveis. Se tentarmos mover o jogador acima da comida, veremos que a comida é desenhada abaixo do jogador pelo valor menor de z-index.

Vinculando Eventos a Entidades

Há vários eventos que podemos responder ao criar um jogo. Por exemplo, podemos vincular uma entidade jogador ao evento KeyDown se quisermos que ele cresça em tamanho quando a tecla for apertada. Crafty permite vincular entidade a eventos específicos usando .bind(). Eis um exemplo:

Na demo a seguir, tentemos mover o jogador sobre a comida e apertemos as teclas 'T' e 'O'. Apertar 'T' mudará a opacidade do jogador para 0.5 e apertar 'O' restaurará para 1.

Agora, vinculemos um evento de colisão a nosso jogador para ele crescer ao tocar em comida. Adicionaremos um componente de colisão ao jogador e usaremos .checkHits(). Esse método realizará as verificações de colisão contra todas as entidades que tiverem pelo menos um dos componentes especificados ao invocar .checkHits().

Quando colisão ocorre, um evento HitOn é ativado. Ele também terá informação relevante do evento de toque. Um evento HitOff é ativado quando a colisão termina.

A largura e altura do jogador aumentam sempre que um toque acontecer. Usamos esse evento para várias coisas, incluindo mudar a posição da comida ou aumentar a pontuação do jogo. Também podemos destruir a entidade comida usando o destroy() quando o toque for detectado.

Selecionando

Na seção anterior, mudamos as propriedades de uma única entidade. Isso pode ser feito usando a variável de cada entidade. Isso não é prático se lidamos com 20 ou mais entidades.

Quem usou jQuery sabe como ela seleciona elementos. Por exemplo, podemos usar $('p') para selecionar todos os parágrafos. De forma similar, selecionamos todas entidades que tiverem um componente em comum com Crafty('componente').

Eis alguns exemplos:

Com a seleção, podemos saber quantos elementos foram selecionados usando a propriedade length. Podemos iterar por cada entidade ou vincular eventos a todas elas de uma só vez. O código a seguir mudará para púrpura todas as entidades comidas cujo valor x seja maior que 300.

Com a seleção, podemos usar get() para obter um vetor com todas as entidades dela. Podemos acessar uma entidade específica usando um índica, get(índice).

Pensamentos Finais

Hoje, aprendemos a adicionar e remover componentes de uma entidade. Também aprendemos como selecionar aquelas com um ou mais componentes, e a manipular seus atributos e propriedades uma a uma. Tudo isso será muito útil quando manipularmos diferentes entidades na tela com base em vários eventos.

Quaisquer dúvidas sobre o tutorial, deixe um comentário abaixo.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.