DEV Community: Lily

De la Idea al Píxel: Cómo Implementar el Acotamiento de Cámara Usando Min y Max en Python

Lily — Wed, 06 May 2026 01:46:24 +0000

En la primera parte de nuestro tutorial aprendimos a alinear los elementos de nuestro mundo usando operaciones aritméticas básicas. Hoy daremos el siguiente paso lógico y práctico.

Cuando creamos videojuegos en 2D con mapas basados en cuadrículas (tiles), queremos que la cámara siga al jugador. Pero, ¿qué pasa cuando el jugador se acerca a los bordes del nivel? Sin el control adecuado, la cámara se movería de más, mostrando un fondo vacío o el "vacío" del espacio de la ventana.

Para solucionar esto de forma elegante, utilizamos una técnica matemática llamada acotamiento o clamping.

El Reto Espacial
Imaginemos que tenemos una pantalla con una resolución fija y un mapa que es mucho más grande que dicha pantalla.

Para centrar a nuestro personaje, calculamos un desplazamiento (offset) ideal. Sin embargo, este offset puede salirse de los límites permitidos. Para evitarlo, encerramos nuestro cálculo entre los valores mínimos y máximos que puede tomar la cámara en el mundo.

El Modelo Matemático
Para acotar el valor de la cámara, combinamos las funciones min() y max(). La ecuación general que aplicamos es:

Offset_final = max(Límite_Inferior, min(Límite_Superior, Offset_ideal))

Implementación en el Código
En nuestro script, primero calculamos el tamaño total del mapa en píxeles multiplicando el número de celdas (tiles) por su dimensión:

# El ancho y alto total del mapa en píxeles
map_width_pixels = len(store.nivel_mapa[0]) * store.TILE_SIZE
map_height_pixels = len(store.nivel_mapa) * store.TILE_SIZE

Una vez que tenemos el tamaño del mapa, determinamos los límites del desplazamiento. Por ejemplo, en el eje X, el límite superior no puede ser mayor a cero (de lo contrario, veríamos el fondo a la izquierda de nuestro mapa) y el límite inferior se obtiene restando el ancho de la ventana menos el ancho del mapa.

# Límites del desplazamiento de la cámara para X
max_offset_x = 0
min_offset_x = store.SCREEN_WIDTH - map_width_pixels

Finalmente, calculamos la posición ideal para centrar a nuestro personaje y aplicamos la función matemática de acotamiento:

# Posición ideal de la cámara para centrar a Mario
ideal_camera_x_offset = int(store.SCREEN_WIDTH / 2 - mario_world_center_x)


# Aplicación del límite
store.camera_x_offset = max(min_offset_x, min(max_offset_x, ideal_camera_x_offset))

Nota: Este mismo bloque se aplica para el eje Y, intercambiando las variables correspondientes a la altura.

Conclusión
Con estas sencillas líneas de código, hemos logrado un movimiento de cámara fluido, evitando que se muestren áreas fuera de los límites del nivel. ¡Un paso más para lograr que nuestro juego se vea profesional y pulido!

Si no leíste la primera parte del tutorial:

Lily

May 6

De la Grilla a la Pantalla: Cómo Centrar y Alinear Sprites con Aritmética Básica.

#renpy #python #gamedev #tutorial

Comments

3 min read

Ejemplo de nuestro video explicando este proceso:
(Próximamente en Youtube).
Por mientras, puedes visitar mi canal para aprender Ren'Py:

Coding Cuddles - YouTube

Turn your stories into video games! 🎮✨ Have you ever dreamed of creating your own visual novel or an amazing game, but the code intimidates you a little? You're in the right place! Here, we demystify programming. With Ren'Py and Python, we'll learn from scratch (yes, from "Hello World") to creating amazing mechanics, vibrant characters, and unique systems. No boring language, just lots of patience and, above all, tons of fun! Subscribe and let's start writing the code for your next big hit. Your developer adventure starts today! 🚀 ❤️███████▓▒ IMPORTANT NOTICE ░▒▓████████❤️ "This tutorial has been a labor of love. I've used AI tools (Google AI/Gemini) to bring my protagonist's voice to life and generate visual and audio resources that allow me to focus on what I love most: teaching you programming. AI is my assistant, but the heart and structure of this course are my own. Thank you for being part of this dream!"

youtube.com

Si te ha resultado útil este artículo, recuerda dejar tu reacción y compartirlo. ¡Nos vemos en el próximo tutorial!

De la Grilla a la Pantalla: Cómo Centrar y Alinear Sprites con Aritmética Básica.

Lily — Wed, 06 May 2026 01:32:38 +0000

¡Hola a todos! Bienvenidos a un nuevo tutorial de desarrollo de videojuegos. Si estás dando tus primeros pasos creando un juego basado en rejillas o tiles (como los clásicos juegos de plataformas o RPG de tablero), tarde o temprano te enfrentarás a un problema muy común: ¿cómo hacer que tu personaje quede perfectamente centrado en su celda y no flotando en una esquina?

Hoy vamos a desmitificar la fórmula matemática detrás de la alineación de objetos en pantalla usando aritmética que ya conoces: multiplicar, dividir y sumar.

El Sistema de Coordenadas: Lógica vs. Píxeles.
Cuando diseñamos un mapa en un array o matriz, nuestro juego piensa en "coordenadas lógicas" (bloques enteros):

El jugador está en la columna

X = 0, fila Y = 10.

Sin embargo, el motor gráfico de tu pantalla no entiende de "bloques", sino de píxeles. Para poder dibujar a nuestro personaje, necesitamos traducir esa posición lógica a coordenadas reales de pantalla.

Para esta conversión, necesitamos conocer una variable clave: el tamaño de nuestro tile (en nuestro proyecto, TILE_SIZE = 90 píxeles).

Paso 1: La Conversión Básica (El Desplazamiento)

La primera ecuación intuitiva que se nos viene a la mente para calcular la posición en píxeles es multiplicar la coordenada de la grilla por el tamaño del tile:
`

Posición_píxeles = Posición_grilla x Tamaño_del_Tile

Si Mario está en la columna 0 de la grilla:

Posición = 0 x 90 = 0 (Píxel 0)

Si se mueve a la columna 3:

Posición = 3 x 90 = 270 (Píxel 270)
`

El problema: Esta ecuación calcula la esquina superior izquierda de la celda. Si dibujas el personaje usando este punto de referencia, tu sprite quedará alineado al borde del bloque, dando la sensación de que flota o está descuadrado respecto al entorno.

Paso 2: La Magia de la Alineación (Encontrar el Centro)

Para que el personaje se ubique exactamente en el centro geométrico del bloque, debemos aplicar un desfase o ajuste. ¿Cómo encontramos el punto medio de cualquier objeto? Dividiéndolo entre 2.
Sumando la mitad del tamaño de nuestro tile a la ecuación anterior, logramos el centrado perfecto:
`

Centro = (Posición_grilla x Tamaño_del_Tile) + (Tamaño_del_Tile / 2)
`

Traduciendo la matemática a código (Python/Ren'Py): En nuestro código, el cálculo del centro del mundo para Mario se escribe de la siguiente manera:

# Posición central de Mario en el mundo en píxeles
mario_world_center_x = store.mario_pos_x * store.TILE_SIZE + store.TILE_SIZE / 2
mario_world_center_y = store.mario_pos_y * store.TILE_SIZE + store.TILE_SIZE / 2

Si nuestro TILE_SIZE es de 90 píxeles, el programa calcula la esquina del bloque y le suma exactamente 45 píxeles de ajuste. ¡De esta manera, el punto de registro del personaje coincide siempre con el corazón geométrico de su celda!

Conclusión
Como puedes ver, no necesitas fórmulas físicas súper complejas para empezar a estructurar la lógica espacial de tu juego. Con una simple multiplicación y una división básica, lograste que tu entorno visual responda de forma simétrica y profesional.

En el próximo tutorial, utilizaremos este centro que acabamos de calcular para enseñarle a la cámara cómo seguir al jugador sin salirse de los límites del mapa.

¡Si te ha servido esta explicación, deja tu reacción y escribe en los comentarios qué otra lógica matemática te gustaría desglosar!
Puedes visitar mi canal de Youtube para aprender acerca de Ren`Py:

Coding Cuddles - YouTube

youtube.com