MAME RUN!! Detrás de la producción – Parte técnica

Si la primera parte trató sobre ‘por qué se hizo’,
la segunda parte cuenta la historia de ‘cómo se hizo’.

Personalmente, me siento mucho más cómodo trabajando con sistemas de backend como Django, PostgreSQL, Redis y Docker al desarrollar aplicaciones web.
Sin embargo, este proyecto se llevó a cabo casi completamente con JS puro + HTML5 Canvas.
Las tecnologías de frontend que normalmente no habría profundizado se convirtieron en el núcleo de este juego.

Y sorprendentemente...
fue muy divertido.
Este fue un factor técnico que me hizo sumergirme aún más.

Normalmente podría decir que "no me gusta" trabajar en frontend, en lugar de "me desagrada", pero creo que el poder del amor por 豆柴の大群 hizo que me gustara algo que antes detestaba.

1. HTML5 Canvas – Un mundo como “paint + animación”

El núcleo de MAME RUN!! es HTML5 Canvas.
Es un área ‘como un lienzo’ creada en la página web, donde se crea el juego dibujando píxeles directamente.

El desarrollo web generalmente sigue este flujo:

• Crear botones (HTML)

• Colorear (CSS)

• Agregar algo de comportamiento (JS)

Sin embargo, Canvas es completamente diferente.

Canvas tiene una estructura que redibuja constantemente a 30-60 fps.
En cada frame:

1. Borrar el fondo

2. Redibujar

3. Dibujar el personaje

4. Dibujar los obstáculos

5. Calcular colisiones

6. Aumentar la puntuación

7. Reservar el siguiente frame

Esto se repite decenas de veces por segundo.

Hoy en día, los navegadores web son tan poderosos como un motor de juegos.

2. Saltos y gravedad: “La magia de 3 líneas de código”

El ‘salto’, que es fundamental en el juego, se implementó con física simple.

dino.vy += gravity * dt;  // Aplicar gravedad
dino.y  += dino.vy * dt;  // Cambiar posición

if (dino.y >= ground) {
    dino.y = ground;
    dino.vy = 0;
}

Con esta lógica simple,
Leona salta, aterriza y cae suavemente.

Sin un motor de juego,
tuve un pequeño momento de asombro al darme cuenta de que “oh... con esta física básica es posible lograr un movimiento tan fluido”.

3. Animación de sprites – La vida cobró vida en el momento en que Leona corre

El movimiento de carrera de Leona usa una hoja de sprites de 6 cuadros, como en la imagen siguiente.

(※ Se recomienda insertar la imagen del sprite en el blog)

En JS, se trata de cortar el sprite y dibujar en cada frame:

const frameWidth = sprite.width / 6;
ctx.drawImage(
  sprite,
  frameIndex * frameWidth, 0, frameWidth, sprite.height,
  dino.x, dino.y, dino.width, dino.height
);

Solo cambiando el índice del cuadro,
Leona corre de manera encantadora.
En este momento, sentí que el juego había cobrado ‘vida’.

La animación es realmente importante en el desarrollo de juegos.

4. Generación aleatoria de obstáculos – “La clave para eliminar la monotonía”

Hay varios tipos de obstáculos.

• Cono naranja

• Cono rojo

• Cono amarillo

• Motocicleta (2 colores)

• Coche (2 tipos)

• Señales (tres tipos)

Si solo se repiten 1-2 tipos, se aburren rápidamente,
pero mezclar varios tipos a intervalos aleatorios hace que el flujo del juego cobre vida.

const key = OBSTACLE_KEYS[Math.random() * length];
const interval = 0.8 + Math.random() * 1.2;

Es solo una aleatoriedad simple, pero
la experiencia de juego cambia completamente.

5. Detección de colisiones – La parte más difícil y divertida

La detección de colisiones se basa en lo que comúnmente se llama “colisión de cajas AABB”.

if (dino.x < ob.x + ob.width &&
    dino.x + dino.width > ob.x &&
    dino.y < ob.y + ob.height &&
    dino.y + dino.height > ob.y) {
    // ¡Colisión!
}

Lo importante aquí es:

• Si la detección es demasiado estricta, el juego se vuelve frustrante

• Si es demasiado laxa, la dificultad del juego disminuye

Por lo tanto, tanto Leona como los obstáculos tienen sus cajas de colisión reducidas en un 10-15% para crear una “dificultad agradable”.

Este ajuste fino fue bastante divertido.
Ahora entiendo un poco por qué los desarrolladores de juegos se toman tan en serio el balance de la dificultad.

6. Sistema de etapas basado en distancia – Completar en 50 segundos

La Etapa 1 fue diseñada para ser completada en unos 50 segundos.
Por lo tanto, supuse que Leona se mueve a 16 m por segundo.

Distancia objetivo: 800m  
Velocidad: 16 m/s → Aproximadamente 50 segundos  

No solo se define numéricamente, sino que realmente jugué de 30 a 40 veces para evaluar
“¿Es esta longitud suficiente para disfrutar de una partida y querer jugar otra vez?”

Fue un pequeño pero crucial elemento que influenció la experiencia de juego.

7. Integración del servidor – Clasificación y almacenamiento de puntuaciones

Como desarrollador con experiencia en backend, la parte del servidor fue configurada naturalmente con Django + DRF.

• Enviar puntuaciones con POST

• Validación en el serializer

• Los usuarios no registrados son registrados con guest_id

• Las mejores puntuaciones de cada usuario se gestionan en la tabla UserScore

• Las TOP 5 se devuelven como fragmentos HTML para que JS las reemplace

Por lo tanto, una vez que el juego termina,
el ranking TOP5 se actualiza en tiempo real.

Lo interesante es que, dentro del juego Canvas,
la estabilidad del backend y el flujo de datos estructurado son una gran ayuda.

En el backend, organizamos sistemáticamente las imágenes y los datos de diálogos del personaje para enviarlos combinados al navegador.

8. Soporte móvil – Fue mucho más difícil de lo esperado

Uno de los obstáculos más inesperados para crear un juego web fue el entorno móvil.

• Adaptación de la resolución

• Acciones táctiles

• Proporción del canvas

• Rendimiento de renderizado

• Corrección de la velocidad de desplazamiento del fondo

Funciona muy suavemente en desktop,
pero en móvil había problemas como pequeñas caídas de frame, respuesta táctil o cálculos del tamaño del canvas.

Finalmente lo resolví, pero,
durante el proceso, no pude evitar pensar “admiro a los desarrolladores de frontend…”

9. Conclusión de la Parte Técnica

Como alguien que ama el backend y se enfoca principalmente en desarrollar APIs, esta fue la primera vez que hice un juego cuyo diseño se centra en la parte visual con JS en la web. Normalmente, tengo que hacer frontend, así que lo hago a regañadientes, y raramente había utilizado HTML5 Canvas en esta profundidad.

Pero a través de este proyecto,

• La web es más poderosa de lo que parece

• JavaScript, que solía considerar desordenado, es un lenguaje bastante interesante

• El desarrollo de juegos es una ‘combinación de pequeñas técnicas’

pude aprender.

Un proyecto que comenzó por pasión, pero,
fue un trabajo del que aprendí y crecí mucho como desarrollador.

Avance del siguiente episodio (Parte 3: Parte de la historia)

En el próximo artículo,
“¿Por qué comienza en Shibuya?”, “¿Por qué en el Tokyo Dome?”, “¿Cómo se definieron las características de cada miembro?”
planeo resumir los trasfondos de la creación de la historia y el mundo.

• Revisitar el artículo anterior