Flash Sale! Up to 40% off on unlimited courses, tutorials and creative asset downloads Up to 40% off on unlimited assets SAVE NOW
Advertisement
  1. Game Development
  2. Game Engines
Gamedevelopment

Comenzando Con 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

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

En el último tutorial, aprendiste acerca de los básicos de entidades y cómo son los bloques de construcción en tu juego. En este tutorial, irás más allá de los básicos y aprenderás sobre entidades en más detalle.

Entidades y Sus Componentes

Cada entidad está hecha de diferentes componentes. Cada uno de estos componentes agrega su propia funcionalidad a la entidad. Crafty ofrece muchos componentes integrados, pero también puedes crear tus propios componentes personalizados usando Crafty.c().

Aprendiste sobre unos cuantos componentes como 2D, Canvas, Color y Fourway en el primer tutorial. Comencemos creando otra entidad usando estos componentes:

Cuando tienes muchas entidades con diferentes componentes, podría volverse necesario saber si una entidad dada tiene un componente específico adjunto a este. Esto puede ser logrado usando el método .has().

De manera similar, puedes agregar componentes a una entidad usando .addComponent(). Para agregar múltiples componentes a la vez, puedes pasarlos como cadena con diferentes componentes separados por comas o pasar cada componente como argumento diferente. Nada pasará si la entidad ya tiene el componente que estás tratando de agregar.

También puedes remover componentes de una entidad usando .removeComponent(String Component[, soft]). Este método toma dos argumentos. El primero es el componente que quieres remover, y el segundo argumento determina si el elemento debería ser removido temporal o permanentemente. La remoción temporal solo causará que .has() devuelva false cuando se consulte para ese componente específico. Una remoción permanente removerá todas las propiedades asociadas y métodos de ese componente.

Por defecto, todos los componentes son removidos temporalmente. Puedes establecer el a false para remover el componente.

Estableciendo Valores para Diferentes Atributos

Probablemente necesitarás establecer diferentes valores para atributos específicos de todas las entidades en tu juego. Por ejemplo, una entidad que representa la comida del jugador principal en el juego debería lucir diferente que la entidad que representa al jugador mismo. De manera similar, una mejora lucirá diferente que entidades de comida. Crafty te permite establecer los valores de diferentes entidades en un juego ya sea de manera separada o todo de una vez usando .attr().

La entidad principal está actualmente siendo almacenada en la variable playerBox. Así que puedes establecer el valor de diferentes propiedades usando el siguiente código:

La propiedad z establece el z-index de diferentes entidades. Una entidad con valor z más alto será llevado sobre otro con un valor más bajo. Ten en mente que solo son permitidos enteros como valores z-index válidos.

Creemos una entidad comida con un tamaño más pequeño, una posición diferente y rotación aplicada a esta. La rotación es especificada en grados, y usando un valor negativo rota la entidad en sentido contrario a las manecillas del reloj.

Como puedes ver en el demo de abajo, tanto la comida como el jugador principal son fácilmente reconocibles ahora. Si intentas mover al jugador principal sobre la comida, verás que la comida ahora es llevada bajo el jugador principal debido a un valor z-index más bajo.

Enlazando Eventos a Entidades

Hay muchos eventos a los que podrías necesitar responder mientras desarrollas un juego. Por ejemplo, tendrás que enlazar la entidad del jugador a un evento KeyDown si quieres que crezca en tamaño cuando una tecla específica sea presionada. Crafty te permite enlazar diferentes entidades a eventos específicos usando el método .bind(). Aquí hay un ejemplo:

En el siguiente demo, intenta mover al jugador sobre la comida y después presiona las teclas 'T' y 'O'. Presionar 'T' establecerá la opacidad del jugador a 0.5, y presionar 'O' restaurará la opacidad de vuelta a 1.

Ahora, enlacemos un evento de colisión a nuestro jugador de manera que crezca en tamaño siempre que toque comida. Tendremos que agregar un componente de colisión al jugador y usar el método .checkHits(). Este método realizará revisiones de colisión en contra de todos los enemigos que tengan al menos uno de los componentes que fueron especificados cuando .checkHits() fue llamado.

Cuando una colisión ocurre, un evento HitOn será disparado. También tendrá alguna información relevante sobre el evento de colisión. Un evento HitOff también es disparado una vez que la colisión termina.

El ancho y alto del jugador se incrementa cada vez que ocurre una colisión. Podemos usar este evento para muchas cosas incluidas cambiando la posición de la comida o incrementando el marcador del juego. Podrías también destruir la entidad comida usando el método destroy() una vez que la colisión ha sido detectada.

Haciendo una Selección

En la sección previa, tuvimos solo que cambiar las propiedades de una sola entidad. Esto podría hacerse fácilmente usando la variable asignada a cada entidad. Esto no es práctico cuando estamos lidiando con cerca de 20 diferentes entidades.

Si has usado jQuery antes, podrías estar familiarizado con la manera que selecciona elementos. Por ejemplo, puedes usar $("p") para seleccionar todos los párrafos. De manera similar, puedes seleccionar todas las entidades que tienen el mismo componente común usando Crafty("component").

Aquí hay unos cuantos ejemplos:

Una vez que tienes la selección, puedes obtener el número de elementos seleccionados usando la propiedad length. También puedes iterar a través de cada una de estas entidades o eventos de enlace a todos ellos de una vez. El siguiente código cambiará todas las entidades cuyo valor x sea mayor que 300 a púrpura.

Una vez que tienes una selección, puedes usar get() para obtener un arreglo de todas las entidades en la selección. También puedes acceder la entidad a un índice específico usando get(index).

Ideas Finales

En este tutorial, aprendiste como agregar o remover componentes de una entidad. También aprendiste cómo seleccionar entidades con un componente o componentes dados y manipular sus atributos y propiedades uno por uno. Todas estas cosas serán muy útiles cuando queramos manipular diferentes entidades en nuestra pantalla basados en una variedad de eventos.

Si tienes alguna pregunta sobre el tutorial, déjame 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.