Bucles y condicionales
En esta lección trataremos dos de los elementos más básicos, pero a su vez, más importantes de cualquier lenguaje de programación: Los bucles y los condicionales.
Ambos están presentes en cualquier programa, juego, e incluso en equipos físicos como videoconsolas, teléfonos, televisores, servidores, entre un largo etcétera. Estos elementos ayuda a que los programas puedan interaccionar y adaptarse en función de eventos como pulsar una tecla o mover a un personaje.
Pero ¿Qué son los bucles y condicionales?
Un bucle no es más que una serie de funcionalidades que se repite a lo largo del tiempo. Dicho de una forma más rigurosa, es un conjunto de instrucciones que se ejecutan siempre que se cumpla una determinada condición.
Por su parte, un condicional es una estructura de programación que hace que se ejecute una parte del código si se cumpla o deja de cumplir una cierta condición.
Como podemos ver, ambos conceptos están muy relacionados entre sí, usándose en muchas ocasiones de forma combinada.
Para poner esto en contexto, planteamos el siguiente ejemplo: Supongamos que queremos que nuestro personaje (el gato), cuente del 1 al 10, y que cuando llegue al final del conteo, muestre un mensaje diciendo “Ya hemos terminado de contar”.
En la Figura 15 vemos paso a paso, cómo se ha construido el código.
Figura 15. Evolución del código para contar del 1 al 10 y mostrar un mensaje al final
Aunque los distintos tipos de bucles serán descritos más adelante en esta lección, para este primer ejemplo, utilizaremos un bloque llamado “repetir x”. Este permite que aquello que se introduzca dentro del bloque se pueda ejecutar ‘x’ veces (por defecto 10 veces). Con este bloque tenemos ya definido la forma en la que vamos a llevar a cabo el conteo, por lo que lo único que necesitaríamos es mostrar el personaje diciendo ese conteo, por medio de un bocadillo de diálogo. Esto se logra mediante un bloque llamado “decir”, el cual muestra por pantalla aquello que escribamos en él.
Tenemos que tener en cuenta que lo que nosotros queremos es que se muestre por pantalla el conteo. Sin embargo, éste es realizado de forma interna por Scratch para ir pasando de una iteración a otra. Esto quiere decir que no tenemos ninguna variable que nos del valor del conteo, por lo que tenemos que crearla. Para ello, hemos definido una variable llamada “contador” que hemos inicializado con un valor de 0, la cual vamos a ir incrementando en cada iteración del bucle. Esto se puede hacer de varias formas, pero la más sencilla es utilizar un bloque llamado “sumar a VARIABLE”, el cual permite incrementar o decrementar la variable seleccionada en la cantidad que le indiquemos. Como queremos contar de uno en uno, ponemos el valor de 1.
Con este código el personaje ya sería capaz de contar del 1 al 10 sin problema, pero queremos que cuando termine de contar, muestre un mensaje indicando que ya ha terminado, y es ahí donde entran en juego los condicionales.
Para ello, usaremos uno de los bloques de condicionales más simples, el “Si … entonces”, el cual se muestra en la tercera parte de la Figura 15. Como sabemos que el conteo termina cuando llega a 10, si hacemos esa comprobación con el bloque condicional, podremos saber que nuestro programa ya ha terminado de contar, por lo que podremos mostrar un mensaje en pantalla indicando tal evento.
En la Figura 16 se muestra el código antes descrito en funcionamiento.
Figura 16. Ejemplo de bucles y condicionales
Una vez entendido el funcionamiento de bucles y condicionales, vamos a analizar cada uno de ellos en mayor profundidad.
BUCLES
Ya sabemos que un bucle es una estructura que se repite un cierto número de veces, por lo que ahora vamos a ver los distintos tipos de bucles que podemos implementar por defecto en Scratch:
 |
Repetir: Permite que aquello que se coloca en su interior se ejecuta un número finito de veces. Este número máximo de iteraciones puede ser fijado de forma estática (como se muestra en la imagen) o pude ser modificado en tiempo de ejecución por cualquier evento externo. |
 |
Por siempre: Es similar al anterior, pero en este caso, todo aquello que se coloque en su interior se ejecutará de forma indefinida. Aunque en un principio el bucle no se detendrá nunca, es posible detenerlo mediante el uso de bloques adicionales que permite salir del bucle de forma abrupta. |
 |
Repetir hasta que: Es una combinación de los dos anteriores. Este bloque ejecutará lo que tenga en su interior de forma indefinida hasta que se cumpla una cierta condición. Se diferencia del primero en que la condición de finalización puede ser, números, o eventos como tocar una tecla o chocar con un obstáculo. |
|
|
Detener: No es una estructura de bucle como los anteriores, ésta permite detener (que no pausar) un bucle de forma abrupta. En programación esto se conoce como ‘BREAK’. Scratch proporciona diferentes opciones de detención:
|
Figura 17. Tipos de bucles en Scratch
El uso de bucles no se limita a hacer conteos como el del ejemplo anterior, sino que son un elemento esencial de cualquier programa, pudiendo mover el personaje por el escenario a una cierta velocidad, o incluso realizar animaciones, entre una infinidad de posibilidades.
A continuación, vamos a ver unos ejemplos prácticos, que nos van a permitir ver el potencial de este tipo de estructuras de programación enfocadas al desarrollo de videojuegos.
Ejemplo 1: Cambiar el color de un personaje
Todo lo que vemos en un videojuego, desde los personajes al decorado, tiene un color que viene definido mediante la combinación de tres colores: Rojo, Verde y Azul, o RGB por sus siglas en inglés. En la Figura 18 podemos ver cómo la variación de cada uno de esos tres colores individuales, afectan en el color de fondo.
Figura 18. Codificación de color en formato RGB
Esto es posible gracias a que cada uno de esos colores toma un valor que va de 0 a 255, es decir, que los colore se pueden definir como un número que podemos manipular.
Scratch incluye un bloque específico para poder alternar estos colores, llamado “Sumar al efecto…”, el cual se muestra en la Figura 19. Este es en realidad un bloque de efectos, entre el que se encuentra el de cambio de color, que es el que vamos a utilizar en este primer ejemplo práctico.
Figura 19. Bloque de efectos
Nuestro objetivo con este primer ejemplo, es hacer que el personaje cambie constantemente de color. Para ello, en primer lugar vamos a utilizar un nuevo personaje. Aunque podemos crear uno nuevo, en este ejemplo vamos a seleccionar uno de los que ya se encuentran disponibles en la galería de Scratch, tal y como se muestra en la Figura 20.
Figura 20. Selección de un objeto de la galería
Una vez seleccionado a nuestro personaje, implementaremos el código de la Figura 21. Este hace uso del bucle “por siempre”, que se ejecuta de forma indefinida. Dentro del mismo, incluiremos el bloque de la Figura 19, para ir cambiando los valores de RGB de cada pixel del personaje en un incremento de 25 unidades.
Figura 21. Cambiar color del personaje
Ejemplo 2: Siguiendo al cursor
En este ejemplo, veremos uno de los usos más comunes de los bucles en el desarrollo de videojuegos: mover el personaje. El personaje se puede mover en base a múltiples eventos, como pulsar una tecla, tras una animación o diálogo, al entrar en contacto con otro objeto, etc.
En este ejemplo, vamos a ver cómo podemos utilizar los bucles infinitos para hacer que nuestro personaje nos siga por la pantalla a medida que movemos el cursor.
Una vez hayamos seleccionado el personaje con el que queremos trabajar, debemos implementar un código que constantemente vaya moviendo al personaje en la dirección del cursor del ratón.
Para ello disponemos del bloque 
, que detecta la posición del cursos en la pantalla y oriente al personaje hacia esa dirección. Sin embargo, este bloque no permite el desplazamiento del mismo, por lo que es necesario utilizarlo de forma combinada con el bloque 
. Este último permite el desplazamiento del personaje un cierto número de pasos (pixeles) en pantalla en cada iteración, lo cual nos permite controlar la velocidad de desplazamiento.
En la Figura 22 podemos ver el código implementado en funcionamiento.
Figura 22. Hacer que el personaje sigua el cursor
Ejemplo 3: Animar a un personaje
En un videojuego, los elementos que aparecen en pantalla se encuentran animados, es decir, que su Sprite cambia a medida que los personajes andan, saltan o reciben daño. Una animación no es más que un conjunto de imágenes que se van intercambiando entre sí para simular un cierto movimiento. El desplazamiento entre esas imágenes, se puede realizar mediante bucles (entre otras muchas otras opciones).
En el ejemplo anterior, hemos hecho que nuestro pájaro se desplace hacia donde se encuentra el cursor, pero su movimiento no parece muy natural, dado que no aletean sus alas.
Muchas de las imágenes que tenemos en la galería de Scratch reproducen una pequeña animación cuando ponemos el cursor sobre ellas, tal y como se muestra en la Figura 23.
Figura 23. Sprites animados
En esta ocasión, vamos a modificar el ejemplo anterior para que el personaje aletee al mismo tiempo que se mueve por la pantalla siguiendo al cursor. Como hemos comentado con anterioridad, las animaciones no son más que imágenes que se ejecutan una tras otra para simular un cierto efecto.
Lo que necesitamos añadir al ejemplo anterior es una función que nos permita cambiar la imagen del personaje por la siguiente imagen animada, es decir, el siguiente fotograma. Para ello disponemos de un bloque específico llamado 
que permite cambiar de forma automática (dentro del bucle) a la siguiente animación.
Figura 24. Animación del personaje
CONDICIONALES
Como hemos vistos, los condicionales son elemento muy utilizados en programación, y especialmente en combinación con bucles.
Antes de ver aplicaciones prácticas de los condicionales, debemos conocer qué tipos hay y cuáles son sus principales características y diferencias.
 |
Este bloque ejecuta una porción de código si se cumple la condición especificada. |
 |
Esta estructura se conoce en programación como IF-ELSE. Si se cumple la condición, se ejecuta un código concreto, pero si no se cumple se ejecuta otro. Es una variación del bloque anterior. |
 |
Este bloque no es un condicional propiamente dicho. Lo que permite es introducir una pausa en el código hasta que se cumpla una condición. |
Figura 25. Tipos de condicionales
Hay que tener en cuenta, que los condicionales ejecutan o dejan de ejecutar algo si se cumple una cierta condición, la cual viene (en muchos casos) determinad por algún parámetro numérico. Un ejemplo de esto sería la salud del personaje. Cunado nuestro protagonista es herido, su vida cae hasta llegar a cero, momento en el que muere, o dicho de otra forma, si “Vida <= 0”, deseo que el juego muestre un mensaje en pantalla diciendo ‘GAME OVER’.
 |
El bloque comprueba si el primer valor es menor que el segundo. Si es menor, el bloque devuelve true; si no, devuelve false. Este bloque también funciona con letras, además de con números. En Scratch, las letras de la parte superior del alfabeto (por ejemplo, a, b, c) valen menos que las del final (por ejemplo, x, y, z). |
 |
El bloque comprueba si el primer valor es igual al otro. Si los valores son iguales, el bloque devuelve true; si no, false. Este bloque no distingue entre mayúsculas y minúsculas |
 |
El bloque comprueba si el primer valor es mayor que el otro. Si el segundo valor es menor, el bloque devuelve true; si no, devuelve false. |
 |
El bloque une dos bloques booleanos, por lo que ambos tienen que ser verdaderos para devolver true. Si ambos son verdaderos, el bloque devuelve true; si no son todos verdaderos o ninguno, devuelve false. |
 |
El bloque une dos bloques booleanos, de modo que cualquiera de ellos puede ser verdadero para devolverlo: si al menos uno de ellos es verdadero, el bloque devuelve true; si ninguno de ellos es verdadero, devuelve false. |
 |
El bloque comprueba si el booleano que contiene es falso – si es falso, el bloque devuelve verdadero; si la condición es verdadera, devuelve falso. |
Figura 26. Tipos de operadores matemáticos
Ahora que ya conocemos los condicionales y los bucles, vamos a ver algunos ejemplos prácticos:
Ejemplo 4: Modificar una animación al producir un evento
En este ejemplo vamos a crear un pequeño código en el que modificaremos la animación de un personaje al entrar en colisión con otro. Para contextualizarlo dentro de la dinámica del juego, vamos a crear uno en el que un tiburón tiene que cazar a un pez.
Como nuestro juego se va a desarrollar bajo el agua, vamos a seleccionar un fondo que encaje en nuestra temática dentro de los que proporciona Scratch. Para ello seguimos los pasos mostrados en la Figura 27.
Figura 27. Selección de un fondo de pantalla
Ahora seleccionamos a nuestros personajes: un tiburón y un pez. Como podemos ver, el tamaño de ambos personajes es muy similar, pero nosotros queremos que el tiburón sea más grande que el pez, por lo que vamos a escalarlo hasta que nos gusten las proporciones.
Figura 28. Re-escalar personajes
Nuestro tiburón no parece estar muy dispuesto a comerse nada, dado que la imagen por defecto lo muestra con la boca cerrada. Para arreglar esto, vamos a cambiar la imagen o “disfraz” del personaje para seleccionar uno en el que se encuentre con la boca abierta, tal y como se muestra en la Figura 29.
Figura 29. Cambiar disfraz de personajes
Finalmente se muestra el código en el que el tiburón cierra la boca al tocar al pez
Figura 30. Interacción entre personajes