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

Comenzando con Crafty: Controles, Eventos y 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

Spanish (Español) translation by James Kolce (you can also view the original English article)

En el último tutorial, aprendiste sobre entidades en Crafty y cómo puedes manipularlas usando diferentes métodos. En este tutorial, aprenderás sobre diferentes componentes que te permitirán mover diferentes entidades usando el teclado.

Crafty tiene tres componentes diferentes para mover elementos. Estos son Twoway, Fourway y Multiway Este tutorial te presentará todos estos componentes. Al final aprenderás sobre el componente Keyboard y varios métodos asociados con él.

Twoway y Fourway

El componente Twoway permite a una entidad moverse a la izquierda o a la derecha usando las teclas de flechas o A y D. También permite a la entidad saltar usando la tecla arriba o la tecla W. Tendrás que agregar un componente Gravity a tus entidades para hacerlas saltar.

El método .twoway() acepta dos argumentos. El primero determina la velocidad de la entidad en dirección horizontal, mientras que el segundo argumento determina la velocidad de salto de la entidad. Omitiendo el segundo argumento se dejará el valor de la velocidad de salto igual al doble de la velocidad de la dirección horizontal.

El componente Fourway permitirá a una entidad moverse en cuatro diferentes direcciones ya sea usando las teclas de flechas o W, A, S, D. El método .fourway() solo acepta un argumento, el cual determinará la velocidad de tal entidad en todas direcciones.

Multiway

Una gran desventaja del componente Fourway es que no permite ajustar diferentes velocidades para las direcciones horizontal y vertical.

Por otro lado, el componente Multiway te permite ajustar la velocidad en cada eje individualmente. También te permite asignar diferentes teclas para mover la entidad en direcciones diferentes. El primer argumento en el método .multiway() es la velocidad de nuestra identidad. El segundo argumento es un objeto para determinar qué tecla moverá la entidad en qué dirección.

Las direcciones son especificadas en grados. 180 es izquierda, 0 es derecha, -90 es arriba y 90 es abajo. Aquí hay algunos ejemplos:

El código arriba ajusta la velocidad de la caja negra igual a 150 en la dirección horizontal y 75 en la dirección vertical. La caja anaranjada se mueve a la velocidad de 150 en todas las direcciones pero le han sido asignadas diferentes teclas para el movimiento. La caja purpura no se mueve estrictamente de forma horizontal o vertical pero en un ángulo de 45 grados. La velocidad aquí está en pixeles por segundo.

Basicamente, puedes asignar cualquier tecla a cualquier dirección usando el componente Multiway. Esto puede ser de mucha ayuda cuando quieres mover varias entidades independientemente.

Este componente tiene también un método .speed(), el cual puede ser usado para cambiar la velocidad de una entidad en un momento posterior También puedes desactivar los controles de teclado en cualquier momento usando el método .disableControl().

El Componente Keyboard

Los tres componentes en la sección anterior te permiten mover una entidad usando diferentes teclas. Sin embargo, querrás mas control sobre lo que pasa cuando una tecla es presionada. Por ejemplo, querrás hacer el jugador más grande una vez que una tecla especifica es presionada o hacer al jugador más poderoso una vez que otra tecla es presionada. Esto puede ser conseguido usando el componente Keyboard.

Este componente también te da acceso al método .isDown(String keyName/KeyCode), el cual revolverá verdadero o falso basándose ya sea cuando a la tecla presionada se le ha dado KeyName o KeyCode.

Crafty también tiene dos eventos de teclado diferentes, KeyDown y KeyUp. Puedes enlazar estos eventos a cualquier entidad en tu juego sin usar el componente Keyboard. El evento KeyDown es desencadenado cuando el evento keydown del DOM ocurre. Similarmente, el evento KeyUp se desencadena cuando el evento keyup del DOM ocurre.

En el código anterior, blackBox ya tenía el componente Keyboard. Esto nos permitió usar el método .isDown() para determinar la tecla presionada.

Intenta presionando L y K en la siguiente demostración para incremental el ancho y altura de las dos cajas respectivamente.

El Componente Text

Es muy fácil agregar texto a tu juego usando Crafty. Primero, necesitas crear una entidad con el componente Text. Luego, puedes agregar texto a tu entidad usando el método .text(), el cual acepta una cadena como su parámetro.

La localización del texto puede ser controlada usando el método .attr() para ajustar el valor de las coordenadas x y y. Similarmente, el color del texto puede ser especificado usando el método .textColor(). Algunas otras propiedades como size, weight y family de la fuente pueden ser ajustadas usando el método .textFont(). Aquí hay un ejemplo:

Como mencioné anteriormente, el método .text() require que proveas una cadena como parámetro. Esto significa que si la puntuación del juego es un numero, lo tendrás que convertir a una cadena para el método .text() para renderizarlo.

La mayoría de las propiedades y métodos 2D funcionarán sin ningún problema con el componente Text. Por ejemplo, puedes rotar y moverlo con facilidad. Sin embargo, hay dos cosas que tienes que mantener en mente. El estilizado del texto funciona mejor cuando es renderizado usando el DOM. Cuando se renderiza en Canvas, el ancho y el alto de la entidad texto será ajustado automáticamente.

Pensamientos Finales

Usando el conocimiento de este y del último tutorial, deberías de ser capaz de mover las diferentes entidades usando el teclado. También puedes cambiar la apariencia del jugador principal y otras entidades basándose en las diferentes teclas presionadas.

Si tienes algunas preguntas sobre este tutorial, házmelo saber en los comentarios.

Advertisement
Advertisement
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.