Haz magia con un círculo: el primer movimiento de tu videojuego - Parte 2

En la sesión anterior aprendimos cómo dibujar texto en pantalla, exploramos la estructura del ciclo del juego (Game Loop) y ejecutamos nuestra primera línea de código en Pico-8.

👉 Leer la Parte 1

Hoy haremos algo tan simple como poderoso: mover un círculo en pantalla.

“Dar vida a un simple círculo es más que programación: es tu primer acto de magia como creador de mundos.”

¿Qué vamos a lograr?

Al final de este capítulo, tendrás en tu pantalla un círculo moviéndose lentamente, gracias a las primeras líneas de código verdaderamente dinámico. Parece trivial, pero este pequeño gesto es el umbral entre observar y crear.

Este es tu primer logro real como desarrollador.

Dibujando el círculo

Pico-8 nos regala funciones sencillas pero potentes para dibujar. Una de ellas es circ(), que nos permite crear un círculo con solo una línea.

📌 `circ(x, y, radio, color)`

x: Posición horizontal
y: Posición vertical
radio: Tamaño del círculo
color: Un número del 0 al 15 (según la paleta de colores de Pico-8)

Ejemplo básico:

function _draw()
  circ(10, 40, 20, 7)
end

Con esto, ya deberías ver un círculo en la pantalla. Pero… aún está quieto.

¿Cómo logramos que se mueva?

Para que el círculo cambie de posición, debemos hacer que sus coordenadas x y y se actualicen constantemente. Esto lo lograremos con variables.

Entendiendo las variables (sin complicarnos)

Una variable es como una cajita donde guardamos un valor que puede cambiar mientras el juego corre.

En Pico-8 (que usa una versión de Lua), las variables son globales por defecto, lo que significa que se pueden usar y modificar desde cualquier parte del código.

Esto es útil cuando estás empezando, pero ten en cuenta que en proyectos grandes puede volverse riesgoso si no las controlas bien.

También existen las variables locales, que sólo funcionan dentro de funciones específicas, lo que permite tener un código más organizado y seguro.

En este ejercicio usaremos variables globales para mantener todo simple y comprensible.

Paso a paso: nuestro primer movimiento

1. Declaramos las variables de posición

Dentro de la función _init():

function _init()
  x = 10
  y = 40
end

Estas son las coordenadas iniciales de nuestro círculo.

2. Actualizamos su posición 30 veces por segundo

Pico-8 ejecuta la función _update() exactamente 30 veces por segundo. Aquí podemos hacer que la variable x aumente un poco en cada cuadro:

function _update()
  x = x + 0.1
end

O, de forma más compacta:

x += 0.1

Este es el operador de incremento (suma y asigna).

3. Redibujamos el círculo con su nueva posición

Ahora debemos usar nuestras variables en la función _draw() para que el círculo use la nueva posición x:

function _draw()
  circ(x, y, 20, 7)
end

Código completo

function _init()
  x = 10
  y = 40
end

function _update()
  x += 0.6
end

function _draw()
  cls()
  circ(x, y, 20, 7)
end

🎥 [GIF del resultado aquí]

Y listo: ¡tu primer objeto en movimiento en pantalla! ✨

Reto creativo

Copiar y pegar no es suficiente si de verdad quieres aprender.

“Un juego no nace del código: nace de la curiosidad.”

Te propongo 3 mini desafíos:

Mueve el círculo en vertical (usa la variable y).
Cambia el color del círculo.
Mueve el círculo en diagonal (usa x e y al mismo tiempo).

¿Notas que el círculo eventualmente desaparece por un lado?
No te preocupes. En la siguiente sesión aprenderemos a tomar decisiones con código, y hacer que el círculo rebote o regrese antes de perderse.

Nos vemos en el siguiente checkpoint.
Gracias por crear conmigo.

Pico-8 versión educativa

Pico-8