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

Comenzando Con Crafty: El Bucle de Juego

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Getting Started with Crafty.
Getting Started With Crafty: Controls, Events, and Text

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

Hasta este punto en la serie, has aprendido cómo manipular diferentes entidades y usar el teclado para moverlas. En esta parte, aprenderás como usar el bucle de juego en Crafty para revisar continuamente varios eventos y animar diferentes entidades.

El bucle de juego en Crafty es implementado en Crafty.timer.step, el cuál usa eventos globales para comunicar con el resto de los motores. El bucle es manejado por requestAnimationFrame cuando está disponible. Cada bucle consiste en una o más llamadas al evento EnterFrame y una simple llamada a RenderScene que resulta en el re-dibujo de cada capa.

El valor final de todas las propiedades y variables es resuelto antes de que una escena sea generada. Por ejemplo, si mueves tu jugador 5px a la derecha diez veces dentro de un solo evento EnterFrame, será dibujado directamente 50px a la derecha saltando todos los dibujos intermedios.

EnterFrame y RenderScene

Todo en tu juego que necesita ser cambiado a lo largo del tiempo es finalmente enlazado al evento EnterFrame. Puedes usar el método .bind() para enlazar distintas entidades a este evento. Las funciones ligadas a este evento también se les pasa un objeto con propiedades como dt que determina el número de milisegundos que han pasado desde el último evento EnterFrame.

Puedes usar la propiedad dt para proporcionar una experiencia suave de juego determinando qué tan lejos debería avanzar el estado del juego.

El evento RendeScene es usado para asegurar que todo lo visible en pantalla concuerde con el estado actual del juego en el último evento EnterFrame. Normalmente, no necesitarás enlazar este evento tu mismo a menos que decidas implementar tu propia capa personalizada de generación.

Usando Tween para Animar Propiedades 2D

Puedes usar el componente Tween cuando solo quieras animar las propiedades 2D de una entidad sobre un periodo específico de tiempo. Puedes animar las propiedades x, y, w, h, rotation, y alpha usando este componente. Animemos el valor x y altura de las cajas naranja y negra que has estado creando en los dos últimos tutoriales.

Aquí está el código que necesitas:

Probablemente notaste que la caja naranja no está rotando alrededor de su centro sino de la esquina superior izquierda. Puedes cambiar el centro de rotación usando el método .origin(). Puede aceptar dos argumentos enteros, que determinan la compensación de pixel del origen en los ejes x y y.

También acepta un valor string como su argumento. El valor string puede ser una combinación de centro, arriba, abajo, en medio, izquierda y derecha. Por ejemplo, .origin("center") rotará la entidad alrededor de su centro, y .origin("bottom right") rotará la entidad alrededor de la esquina inferior derecha.

Puedes pausar o reanudar todas las animaciones asociadas con una entidad dada usando los métodos .pauseTweens() y .resumeTweens(). De manera similar, puedes usar también .cancelTween() para cancelar una animación específica.

Entendiendo el Temporizador Crafty

El objeto Crafty.timer maneja todos los ticks del juego en Crafty. Puedes usar el método .FPS() con este objeto para obtener los cuadros por segundo objetivo. Ten en mente que no son los cuadros por segundo actuales.

También puedes usar el método .simulateFrames(Number frames[, Number timestep]) para avanzar el estado del juego en un número dado de cuadros. El timestep es la duración para pasar cada cuadro. Si no está especificado, un valor por defecto de 20ms es usado.

Otro método útil es .step(), el cuál avanzará el juego realizando un paso. Un simple paso puede consistir en uno o más cuadros seguido por una generación. El número de cuadros dependerá del steptype del temporizador. Este método dispara una variedad de eventos como EnterFrame y ExitFrame por cada cuadro y eventos PreRender, RenderScene, y PostRender para cada generación.

Hay tres diferentes modos de steptype: fixed, variable, y semifixed. En el modo fixed, a cada cuadro en Crafty se le manda el mismo valor de dt. Sin embargo, este steptype puede disparar múltiples cuadros antes de cada generación para alcanzar la velocidad de juego meta.

También puedes disparar solo un cuadro antes de cada generación usando el modo variable. En este caso, el valor de dt es igual al tiempo actual transcurrido desde el último cuadro.

Finalmente, el modo semifixed dispara múltiples cuadros por generación, y el tiempo desde el último cuadro es dividido equitativamente entre estos.

Creando un Juego Muy Básico

Si has leído todos los tutoriales en esta serie, deberías haber adquirido suficiente conocimiento por ahora para crear un juego muy básico. En esta sección, aprenderás como poner todo lo que aprendiste en uso y crear un juego en donde el jugador principal tiene que comer un pedazo de comida.

La comida será un cuadrado rojo rotatorio. Tan pronto como la comida entre en contacto con el jugador, esta desaparece de la ubicación antigua y aparece en una nueva ubicación al azar. El jugador puede ser movido usando A, W, S, D o las teclas de flechas.

Una cosa más de la que necesitas encargarte es la posición del jugador. Se supone que permanezca dentro de los límites del escenario del juego.

Escribamos el código primero para la comida:

Por defecto, Crafty haría uso de la esquina superior izquierda de la entidad de comida para rotarla. Estableciendo el origen de centro asegura que la entidad de comida rota sobre su centro.

La entidad de jugador revisa la posición actual del jugador en cada cuadro y reestablece la ubicación si el jugador intenta ir fuera del escenario del juego.

Puedes usar una entidad Text para dar seguimiento al marcador. El marcador es mostrado en la esquina superior izquierda. La variable gameScore almacena el número de veces que el jugador toca la entidad comida.

Ahora, solo tienes que escribir el código para mover la comida a una ubicación diferente cuando una colisión es detectada. El siguiente código hará exactamente eso.

Necesitas tener en mente que restas el ancho y alto de tu entidad comida del ancho y alto respectivamente del escenario. Esto asegura que la comida siempre está completamente dentro del escenario. Aquí hay una demostración del juego:

Ideas Finales

Con la ayuda de Crafty, has creado un juego muy básico escribiendo unas cuántas líneas de código. Justo ahora, el juego carece de algunas cuantas craracterísticas que podrían hacerlo más interesante. Primero, no hay sonidos. Segundo, no hay manera de que el jugador salga, y el nivel de dificultad también permanece igual a lo largo del juego. Puedes aprender sobre sonido, sprites, eventos del ratón y otras características de la librería en la siguiente serie.

Si has tenido problemas o dudas mientras seguías los ejemplos en esta serie, 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.