3.8 - Scroll Horizontal

 https://www.youtube.com/watch?v=bOQsWM-3VmE&list=PL5tA44GpyFntFHtHd6Zxb2xQZpxwOfeu3&index=25

Scroll horizontal en Scratch

🎯 Objetivo de este tutorial

Vamos a implementar un scroll horizontal simple para juegos de plataformas o aventuras. El personaje podrá moverse a izquierda y derecha, y el fondo se desplazará en sentido contrario, creando la ilusión de un mundo más grande que la pantalla. Aprenderás a:

• Animar al personaje cambiando de disfraz.

• Usar una variable global scroll para controlar la posición del fondo.

• Mover varios objetos de fondo de forma sincronizada con el scroll.

• Crear un bucle infinito de imágenes para simular un escenario continuo.

---

🐱 Paso 1: Preparar al personaje (animación)

El personaje (gato) tendrá al menos dos disfraces para simular que camina.

1. Ve a la pestaña de Disfraces del gato y asegúrate de que haya dos imágenes (por ejemplo, gato-a y gato-b).

2. Programa el cambio de disfraz en un bucle para dar sensación de movimiento.

Código del gato (animación):

text

al presionar bandera
por siempre
    siguiente disfraz
    esperar [0.2] segundos

Ajusta el tiempo de espera para que la animación sea más rápida o más lenta.

---

📊 Paso 2: Crear la variable global scroll

Necesitamos una variable que indique en qué punto del "mundo" se encuentra el personaje. Esta variable será compartida por todos los objetos del fondo.

1. Ve a la categoría Variables.

2. Crea una variable global (para todos los objetos) llamada scroll.

3. Al empezar el programa, ponla a 0.

Código (en el escenario o en el gato):

text

al presionar bandera
fijar [scroll] a [0]

---

🎮 Paso 3: Controlar el scroll con las teclas

Al presionar las flechas, en lugar de mover al gato, vamos a cambiar el valor de scroll.

• Flecha derecha → scroll aumenta (el fondo se mueve a la izquierda).

• Flecha izquierda → scroll disminuye (el fondo se mueve a la derecha).

Código del gato (control):

text

al presionar tecla [flecha derecha]
cambiar [scroll] por (1)

al presionar tecla [flecha izquierda]
cambiar [scroll] por (-1)

Nota: Si el scroll se mueve muy rápido, puedes reducir la cantidad (por ejemplo, 0.5 en lugar de 1).

---

🖼️ Paso 4: Crear los objetos de fondo

Para simular un escenario más grande que la pantalla, usaremos varios objetos (sprites) que se colocarán uno al lado del otro. Cada objeto tendrá el ancho de la pantalla (480 píxeles).

1. Crea un objeto (puede ser un rectángulo) y dibújalo de un color (ej: verde).

   • Asegúrate de que tenga 480 píxeles de ancho (puedes ajustarlo en el editor de disfraces).

2. Duplica este objeto dos veces más y cámbiales el color (ej: amarillo, lila, azul, etc.) para que se distingan.

3. Coloca cada objeto en una posición inicial:

   • Objeto 1: x = 0

   • Objeto 2: x = 480

   • Objeto 3: x = 960

   • (Así sucesivamente)

---

🔢 Paso 5: Programar el desplazamiento de los fondos

Cada objeto de fondo debe moverse en función del valor de scroll. Usaremos una fórmula que calcula su posición como:

x = scroll + (número_de_fondo * 480)

Donde:

• número_de_fondo empieza en 0 para el primero, 1 para el segundo, 2 para el tercero, etc.

• 480 es el ancho de cada imagen.

Código para el Objeto 1 (primer fondo):

text

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

Código para el Objeto 2 (segundo fondo):

text

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

Código para el Objeto 3 (tercer fondo):

text

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

Observación: La posición y puede ser 0 (centro vertical) o la que prefieras.

---

🔄 Paso 6: Scroll infinito (opcional)

Para que el fondo nunca se acabe, puedes añadir más objetos (4, 5, 6...) y, cuando uno se salga completamente de la pantalla por un lado, lo recolocas al otro lado. Sin embargo, en su forma más simple, con 3 o 4 objetos ya se cubre una buena distancia.

Si notas que aparece un hueco entre los fondos, puedes ajustar el offset (por ejemplo, usar 479 en lugar de 480) para que se solapen ligeramente.

---

▶️ Paso 7: Probar el sistema

1. Presiona la bandera verde.

2. Usa las flechas izquierda y derecha.

3. Verás que el gato cambia de disfraz (camina) y los fondos se desplazan en sentido contrario, dando la sensación de movimiento.

Si ves una pequeña línea o hueco al desplazarte, puedes añadir un objeto más o ajustar la posición inicial.

---

🧩 Paso 8: Mejoras y personalización

Mejora	Cómo hacerla
Movimiento más suave	Cambia scroll en incrementos más pequeños (ej: 0.5) y usa deslizar en los fondos.
Fondo con imágenes reales	En lugar de colores sólidos, usa imágenes de paisajes partidas en trozos de 480 píxeles.
Scroll con parallax	Haz que los fondos más lejanos se muevan más lento que los cercanos (creando profundidad).
Límites del mundo	Puedes hacer que el personaje no pueda pasar de ciertos puntos, deteniendo el scroll.
Obstáculos en el fondo	Añade otros objetos (árboles, casas) que también se muevan con el scroll.

---

📚 Resumen del tutorial 3.7

Concepto	Implementación
Animación del personaje	Cambiar de disfraz con siguiente disfraz en un bucle.
Variable scroll	Guarda la posición del personaje en el mundo. Se modifica con las flechas.
Fondos móviles	Cada objeto de fondo se posiciona en scroll + (n * 480).
Coordinación	Todos los fondos se mueven sincronizados con la misma variable.
Scroll infinito	Se logra encadenando varios objetos de fondo de 480 píxeles.

---

🎬 ¡Ya tienes un sistema de scroll funcional!

Este sistema es la base para juegos de plataformas, carreras o aventuras de desplazamiento lateral. Al combinar la animación del personaje con el movimiento del fondo, lograrás una experiencia de juego más inmersiva. ¡Ahora puedes añadir enemigos, obstáculos y niveles para crear tu propio mundo infinito