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

Comenzando Con Crafty: Introducción

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

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

Si alguna vez has desarrollado juegos HTML5, podrías estar familiarizado con algunos motores de juegos que pueden hacer el desarrollo de juegos mucho más fácil. Estos tienen todo el código que necesitas para detectar colisiones, engendrar diferentes entidades, o agregar efectos de sonido a tu juego. En este tutorial, aprenderás sobre otro motor de juegos llamado Crafty. Es muy fácil de usar y soporta todos los navegadores principales, incluyendo IE9.

Una vez minificado, la librería tiene solo 127kb en tamaño, así que no resultará en ningún retraso cargando tu juego. Soporta mapas de sprites, así que puedes dibujar fácilmente entidades de juego sobre la pantalla. También puedes crear eventos personalizados que pueden ser disparados siempre que quieras sobre cualquier objeto que quieras.

También hay componentes para sonidos, animación y otros efectos. En general, este motor de juegos es una gran elección si quieres desarrollar algunos juegos HTML5 básicos.

Configuración Inicial

La primera cosa que necesitas hacer es incluir Crafty en tu proyecto. Puedes ya sea descargar el archivo y cargarlo en tus proyectos o puedes enlazarlo directamente a la versión minificada hospedada en un CDN. Una vez que la librería ha sido cargada, puedes usar la siguiente línea para iniciar Crafty:

Los primero dos argumentos determinan el ancho y alto de nuestro escenario. El tercer argumento es usado para especificar el elemento que vamos a usar como nuestro escenario. Si el tercer argumento no es proporcionado, Crafty usará un div con id cr-stage como su escenario. De manera similar, si los argumentos de ancho y alto faltan, Crafty establecerá el ancho y alto de nuestro escenario igual al ancho y alto de la ventana.

En este punto, deberías tener el siguiente código:

Creando Entidades

Las entidades son bloques de construcción de un juego Crafty. Todo desde el jugador a los enemigos y obstáculos es representado usando entidades. Puedes pasar una lista de componentes a una entidad. Cada uno de estos componentes agregará funcionalidad extra a nuestra entidad asignando propiedades y métodos desde ese componente a la entidad. También puedes encadenar otros métodos a una entidad para establecer varias propiedades como su ancho, alto, ubicación y color. Aquí está cada ejemplo básico de agregar componentes a una entidad:

Cada entidad que quieras mostrar al usuario necesitará tanto el componente 2D como una capa de generación. La capa de generación puede ser DOM, Canvas, o WebGL. Por favor nota que el soporte WebGL fue agregado en la versión 0.7.1. Actualmente, solo los componentes Sprite, Image, SpriteAnimation y Color soportan generación WebGL. Las entidades Text aún necesitan usar DOM o Canvas por ahora.

Ahora, puedes usar el método attr() para establecer el valor de varias propiedades incluyendo el ancho, alto y posición de tu entidad. La mayoría de los métodos en Crafty regresan la entidad sobre la que son llamados, y attr() no es la excepción. Esto significa que podrás encadenar más métodos para establecer otras propiedades de tus elementos. Aquí está un ejemplo:

Esto creará una entidad rectangular anaranjada en el escenario.

Moviendo Entidades

Ahora que has creado la entidad, escribamos algo de código para mover alrededor usando el teclado. Puedes mover una entidad en cuatro diferentes direcciones, ej. arriba, abjo, izquierda y derecha, agregando el componente Fourway a este.

La entidad puede ser entonces movida usando las teclas de flechas o W, A, S, y D. Puedes pasar un número com argumento al constructor fourway para establecer la velocidad de la entidad. Aquí está cómo debería lucir ahora el código de la entidad:

Puedes restringir el movimiento de una entidad a solo dos direcciones usando el componente Twoway. Reemplazar el componente Fourway en el código de arriba con Twoway confinará el movimiento de la caja a solo la dirección horizontal. Esto es evidente desde el siguiente demo:

También puedes agregar tus propios componentes a diferentes entidades para identificación o para agrupar entidades similares. En este caso, estoy agregando el componente Floor a nuestra caja naranja. Puedes usar algunos otros nombres descriptivos para ayudarte a identificar diferentes entidades.

Hay otro componente bastante útil que puedes usar para mover elementos, y es el componente llamado Gravity. Cuando se agrega a una entidad, hará que la entidad caiga. Tal vez querrás detener a esa entidad de caer más allá, una vez que encuentre algunas otras entidades. Esto puede lograrse pasando un componente identificador como un argumento a la función gravity. Aquí está el código que hace caer al pequeño cuadrado negro sobre el piso o plataforma:

Ideas Finales

Como ves en el tutorial, pudimos crear la estructura básica de un juego simple usando muy poco código. Todo lo que tuvimos que hacer fue agregar componentes a todas nuestras entidades y especificar los valores de diferentes propiedades como ancho, alto, o velocidad de movimiento.

Este tutorial fue pensado para darte una idea básica de entidades y otros conceptos relacionados a Crafty. En la siguiente parte, aprenderás sobre entidades en mucho más detalle. Si tienes alguna pregunta sobre este 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.