Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Game Development
  2. Game Engines
Gamedevelopment

Começando Com Crafty: Controles, Eventos, e Texto

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Getting Started with Crafty.
Getting Started With Crafty: Entities
Getting Started With Crafty: The Game Loop

Portuguese (Português) translation by Marcos Fuchter Leandro (you can also view the original English article)

No último tutorial, você aprendeu sobre entidades em Crafty e como você pode manipulá-las usando métodos diferentes. Nesse tutorial, você vai aprender sobre diferentes componentes que vão te permitir mover diferentes entidades por aí usando o teclado.

Crafty tem três diferentes componentes para mover elementos por aí. Esses são Twoway, Fourway e Multiway. Esse tutorial vai introduzir você a todos esses componentes. No fim, você vai ter aprendido sobre o componente Keyboard e vários métodos associados a isso.

Twoway e Fourway

O componente Twoway permite a uma entidade se mover para esquerda ou direita usando as setas do teclado ou A e D. Isso também permite que a entidade pule usando a seta pra cima ou a tecla W. Você terá que adicionar um componente Gravidade para suas entidades para fazê-las pular.

O método .twoway() aceita dois argumentos. O primeiro determina a velocidade da entidade na direção horizontal, enquanto o segundo argumento determina a velocidade do pulo da entidade. Deixar de lado o segundo argumento vai configurar o valor da velocidade do pulo igual ao dobro da velocidade na direção horizontal.

O componente Fourway vai permitir que uma entidade se mova em quatro direções diferentes usando as setas do teclado ou W, A, S, D. O método .fourway() apenas aceita um argumento, o qual determinará a velocidade da dada entidade em todas as direções.

Multiway

Uma grande desvantagem do componente Fourway é que ele não permite que você configure diferentes velocidades para as direções horizontal e vertical.

Por outro lado, o componente Multiway te permite configurar a velocidade em cada eixo individualmente. Ele também te permite atribuir teclas diferentes para mover a entidade em direções diferentes. O primeiro argumento no método .multiway() é a velocidade da nossa entidade. O segundo argumento é um objeto para determinar qual tecla vai mover a entidade em qual direção.

As direções são especificadas em graus. 180 é esquerda, 0 é direita, -90 e cima, e 90 é baixo. Aqui estão alguns exemplos:

O código acima define a velocidade da caixa preta igual a 150 na direção horizontal e 75 na direção vertical. A caixa laranja move a uma velocidade de 150 em todas as direções mas foi atribuída diferentes teclas para movimento. A caixa roxa não se move estritamente horizontalmente ou verticalmente mas num ângulo de 45 graus. A velocidade aqui é em pixels por segundo.

Basicamente, você pode atribuir qualquer tecla para qualquer direção usando o componente Multiway. Isso pode ser muito útil quando você quer mover múltiplas entidades independentemente.

Esse componente também tem um método .speed(), o qual pode ser usado para mudar a velocidade de uma entidade em um tempo mais tarde. Você pode também desabilitar os controles de tecla a qualquer momento usando o método .disableControl().

O Componente Teclado

Os três componentes na seção anterior permitem que você mova uma entidade por aí usando diferentes teclas. Entretanto, você pode querer mais controle sobre o que acontece quando uma tecla é pressionada. Por exemplo, você pode querer fazer o jogador maior assim que uma tecla específica é apertada ou fazer o jogador mais poderoso assim que outra tecla é apertada. Isso pode ser conquistado usando o componente Teclado.

Esse componente também te dá acesso ao método .isDown(StringkeyName/KeyCode), o qual vai retornar verdadeiro ou falso baseado se a tecla pressionada tem o dado KeyName ou KeyCode.

Crafty também tem dois diferentes eventos de teclado, KeyDown e KeyUp. Você pode vincular esses eventos para qualquer entidade no seu jogo sem usar o componente Keyboard. O evento KeyDown é acionado sempre que o evento DOM keydown ocorre. Similarmente, o evento KeyUp é acionado sempre que o evento DOM keyup ocorre.

No código acima, o blackBox já tinha o componente Keyboard. Isso nos permitiu usar o método .isDown() para determinar a tecla apertada.

Tente apertar L e K na demonstração a seguir para aumentar a largura e altura das duas caixas respectivamente.

O Componente Texto

É bem fácil adicionar texto no seu jogo usando Crafty. Primeiro, você precisa criar uma entidade com o componente Text. Então, você pode adicionar texto à sua entidade usando o método .text(), o qual aceita uma string como seu parâmetro.

A localização do texto pode ser controlada usando o método .attr() para configurar o valor das coordenadas x e y. Similarmente, a cor do texto pode ser especificada usando o método .textColor(). Algumas outras propriedades como o size, weight, e family da fonte podem ser configurados usando o método .textFont(). Aqui há um exemplo: 

Como eu mencionei mais cedo, o método .text() requer que você supra uma string como parâmetro. Isso significa que se a pontuação do jogo é um número, você terá que convertê-lo a uma string para o método .text() renderizá-lo.

A maioria das propriedades 2D e métodos vão funcionar sem nenhum problema com o componente Text. Por exemplo, você pode rotacionar e movê-lo por ai facilmente. Entretanto, há duas coisas que você precisa manter em mente. Estilo do texto funciona melhor quando renderizado usando o DOM. Quando renderizado no Canvas, a largura e altura da entidade do texto vão ser colocadas automaticamente. 

Pensamentos Finais

Usando o conhecimento disso e do último tutorial, você deveria agora ser capaz de mover diferentes entidades por aí usando o teclado. Você pode também mudar a aparência do jogador principal e outras entidades baseado nas diferentes teclas pressionadas.

Se você tem alguma pergunta sobre esse tutorial, me conte nos comentários.

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.