13 Scrolls recorte-Félix Delgado Plana

agosto 23, 2026

https://www.youtube.com/watch?v=YORXlTxN9L0

Cómo hacer Scroll Infinito en un Juego (Tipo Plataformas)

🎯 Objetivo del tutorial

Crear un sistema de desplazamiento (scroll) donde el fondo se mueva en sentido contrario al personaje, dando la sensación de un mapa continuo e infinito.

🐱 Paso 1: Animar al personaje mientras camina

Asegúrate de que tu personaje (por ejemplo, un gato) tenga dos o más disfraces (por ejemplo, "gato1" y "gato2").
Programa el cambio de disfraz cuando se presionen las teclas de movimiento:
- Al presionar flecha derecha o flecha izquierda, alterna entre los disfraces para simular la acción de andar.
- Puedes usar un bloque como siguiente disfraz o elegir uno específico con cambiar disfraz a.

Esto crea la ilusión óptica de que el personaje está caminando.

🖼️ Paso 2: Preparar las imágenes del fondo (mapa)

Para que el scroll funcione, necesitamos varias imágenes que se colocarán una detrás de otra.

Cada imagen debe tener el tamaño de la pantalla: 480 píxeles de ancho × 360 píxeles de alto (tamaño estándar de la pantalla en Scratch).
Puedes crear imágenes de diferentes colores o con distintos paisajes (por ejemplo, césped, montañas, cielo, etc.).
Estas imágenes serán los objetos de fondo que se moverán.

🔢 Paso 3: Crear la variable global "scroll"

Crea una variable global (para todos los objetos) llamada, por ejemplo, scroll.
Esta variable almacenará un número que representa la posición de referencia del personaje en el mapa.
- Si el personaje avanza hacia la derecha, scroll aumentará.
- Si avanza hacia la izquierda, scroll disminuirá.

🧮 Paso 4: Programar el movimiento del personaje

Cuando el jugador presione las teclas de movimiento, en lugar de mover el personaje directamente, modificamos la variable scroll:

Al presionar flecha derecha → cambiar scroll por (por ejemplo) 5 (o la velocidad que desees).
Al presionar flecha izquierda → cambiar scroll por -5.

El personaje en sí no se mueve; lo que se mueve es el fondo, creando la ilusión de que el personaje avanza.

📦 Paso 5: Posicionar los objetos de fondo (offset)

Ahora vamos a hacer que cada imagen del fondo se coloque en una posición que depende del valor de scroll. Esto se llama offset.

Para cada objeto de fondo (llamémoslos Fondo0, Fondo1, Fondo2, ...), crea un programa que se ejecute todo el tiempo (bucle por siempre).
La posición x de cada objeto se calculará así:
- Fondo0 → x = scroll + 450 * 0 → x = scroll
- Fondo1 → x = scroll + 450 * 1 → x = scroll + 450
- Fondo2 → x = scroll + 450 * 2 → x = scroll + 900
El número 450 es un valor de separación para que las imágenes se encadenen sin huecos. Puedes ajustarlo según el ancho de tus imágenes (480 píxeles sería lo ideal, pero 450 da un poco de solapamiento para evitar bordes visibles).
En el bloque de ir a x: ( ) y: ( ), usa la fórmula correspondiente para cada objeto. La posición y puede ser fija (por ejemplo, 0) si todas las imágenes tienen la misma altura.

🔄 Paso 6: Lograr el efecto infinito

Al mover el personaje, el valor de scroll cambia y, por tanto, todas las imágenes se desplazan en conjunto. Cuando una imagen sale completamente de la pantalla por un lado, la siguiente entra por el otro, dando la sensación de un bucle continuo.

Si tienes suficientes imágenes (al menos 3 o 4), el mapa parecerá infinito.
Puedes repetir la misma imagen o usar diferentes para crear variedad.

✅ Resumen del código

Para el personaje (gato):

al presionar bandera
por siempre
    si <tecla [flecha derecha] presionada?> entonces
        cambiar disfraz a [gato2] // o siguiente disfraz
        cambiar [scroll] por (5)
    si <tecla [flecha izquierda] presionada?> entonces
        cambiar disfraz a [gato1] // o siguiente disfraz
        cambiar [scroll] por (-5)
    // (Opcional) si no se presiona ninguna tecla, volver al disfraz quieto

Para cada objeto de fondo (ejemplo Fondo0):

al presionar bandera
por siempre
    ir a x: (scroll + 0 * 450) y: (0)

Fondo1:

ir a x: (scroll + 1 * 450) y: (0)

Fondo2:

ir a x: (scroll + 2 * 450) y: (0)

(Ajusta el multiplicador según el número de imagen)

🧠 Consejos adicionales

Puedes duplicar los objetos de fondo y cambiarles el color o la imagen para que el paisaje varíe.
Si quieres que el personaje también pueda saltar o moverse en el eje Y, solo tendrías que añadir la lógica de gravedad y salto, manteniendo el scroll para el eje X.
Para un scroll más suave, puedes usar valores decimales en el cambio de scroll (por ejemplo, 0.5).

🎬 ¡Ya lo tienes!

Con este sistema, tu personaje parecerá moverse a través de un mundo infinito, mientras que el fondo se desplaza continuamente. Es la base perfecta para juegos de plataformas, carreras o aventuras de desplazamiento lateral. ¡A disfrutar programando

Buscar este blog

sotelo-SCRATCH