() translation by (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:
1 |
blackBox.multiway({x:150,y:75}, {W: -90, S: 90, D: 0, A: 180}); |
2 |
|
3 |
orangeBox.multiway(150, {I: -90, K: 90, L: 0, J: 180}); |
4 |
|
5 |
purpleBox.multiway(150, {Y: -45, G: -135, B: 135, H: 45}); |
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.
1 |
blackBox.bind('KeyDown', function() { |
2 |
if (this.isDown('L')) { |
3 |
this.w += 5; |
4 |
}
|
5 |
});
|
6 |
|
7 |
orangeBox.bind('KeyDown', function(e) { |
8 |
if (e.key == Crafty.keys.K) { |
9 |
this.h += 5; |
10 |
}
|
11 |
});
|
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:
1 |
var playerName = Crafty.e('2D, DOM, Text') |
2 |
.attr({ |
3 |
x: 10, |
4 |
y: 10 |
5 |
});
|
6 |
|
7 |
playerName.text('ZombieHunter'); |
8 |
playerName.textColor('red'); |
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.
