# 4.4. La importancia de la interactividad

## Diccionario

## Aleatoriamente

Definición

  Hecho que depende del azar o de la casualidad.

Ejemplo

  Se han elegido a esas personas aleatoriamente.

## Periférico

Definición

  Cualquier accesorio o dispositivo que se conecta a la Unidad Central de Procesamiento de un ordenador.

Ejemplo

  Los altavoces son un periférico de un ordenador.

Una vez que sabemos cómo funciona un videojuego, vamos a conocer cómo pueden interactuar los distintos elementos de Scratch con las jugadoras y jugadores de un videojuego.

Empezaremos viendo algunas estructuras de control que te ayudarán en la programación de la interactividad en tu videojuego.

A continuación, veremos distintas opciones de interactividad que te permitirán aumentar la respuesta de tu videojuego a las acciones de las personas que lo utilicen.

Finalmente, descubriremos los sensores disponibles en Scratch y su relevancia en la interactividad de un videojuego.

¡Ánimo, manos a la obra!

# 1. Control de procesos en Scratch

En este apartado vamos a aprender a utilizar distintas estructuras de control que sirven para controlar el orden de ejecución de las instrucciones de un programa en Scratch.

Los bloques operadores nos ayudarán a definir las condiciones a insertar en los recuadros de los bloques de control.

En Scratch los bloques de control los vamos a encontrar en la categoría control y son de color naranja, mientras que los bloques operadores son otra categoría de color verde.

## Bloques de control y operadores

La combinación de bloques de control y operadores será muy importantes para crear nuestro videojuego. Por ejemplo, para detectar cuando un objeto toca otro elemento o si se cumplen ciertas condiciones para cambiar de nivel, finalizar el juego, entre otras.

En la siguiente imagen puedes apreciar los bloques de control y operadores en Scratch.

## Bloques de control

Gracias a estos bloques podremos programar muchas de las acciones del videojuego que dependen del resultado de una condición, permitiendo ejecutar unas instrucciones u otras.

En el siguiente vídeo puedes ver los contenidos y ejemplos sobre las estructuras de control.

En estos bloques vamos a encontrar estructuras de repetición y estructuras condicionales.

## Bloques de control de repetición y condicionales

En el caso de estos bloques de control este orden de ejecución dependerá si se cumple o no, una determinada condición.

Estas condiciones las vamos a concretar con la ayuda de los bloques de operaciones llamados operadores en Scratch.

## Bloques de operadores

Consiste en una serie de bloques en Scratch que permiten realizar una variedad de operaciones. Son una categoría de bloques que se identifican con el color verde.

Se encuentran divididas en tres grupos: operadores matemáticos, booleanos y de cadenas de textos.

En la programación de un videojuego utilizaremos sobre todo las instrucciones booleanas dentro de las estructuras de control condicionales.

## Instrucciones booleanas

Estos bloques son instrucciones que al ser utilizadas nos permiten obtener un valor cierto o falso (booleano) y dicho valor es utilizado en otra instrucción que normalmente será un bloque de control condicional, permitiendo así completar una condición.

En programación, una condición es una instrucción de que algo debe ser cierto para que algo pueda pasar. Una condición es entonces decir que “Se evalúa para verdadero” o “Se evalúa para falso”. En Scratch, son bloques cuya etiqueta dice “Si”, “Al presionar” o “Hasta que”.

Estos bloques se pueden insertar en casi todos los bloques de Scratch, aunque se debe tener en cuenta la forma ya que en algunos no se pueden insertar. Ten presente que se pueden colocar unos operadores dentro de otros.

Los operadores booleanos se dividen en dos grupos: operaciones relacionales y operaciones lógicos.

## Operaciones booleanas relacionales

Se encargan de relacionar dos valores numéricos, determinando por ejemplo si un número dado es menor que otro o viceversa, el resultado de estas instrucciones es cierto o falso dependiendo de los números insertados por medio del teclado. Si el recuadro está vacío el bloque lo toma como un cero.

En Scratch las operaciones booleanas relacionales cuentan con tres bloques:

Si haces clic sobre uno de estos bloques en Scrath, obtienes el resultado de la relación entre sus dos valores: "false" o "true".

## Operaciones booleanas lógicas

Los operadores lógicos son expresiones booleanas que nos permiten combinar dos o más expresiones booleanas con la finalidad de tener más precisión a la hora de tomar una decisión.

En Scratch las operaciones lógicas cuentan con tres bloques:

Los dos primeros operadores "Y" y "NO" evalúan dos o más expresiones, mientras que el operador "NO" solo actúa sobre una expresión.

## Vamos a practicar 1

Ejercicio 1. Editar objetos y escenarios

1. En la barra de menús superior hay una ventana donde podemos poner título a nuestro proyecto. Llámalo UD02_P1_nombreapellido. Esta ventana no te aparecerá si trabajas en Scratch sin registrarte.
2. En la ventana inferior derecha será donde coloquemos todos los objetos del programa: escenarios, personajes, etc. En el apartado Elige un fondo (en la ventana Escenario), selecciona la lupa para añadir un nuevo fondo desde la biblioteca y escoge, por ejemplo, Mountain (figura 6).
3. En cuanto a los personajes, nos aparece por defecto Objeto1. Para añadir nuevos personajes, haz clic en Elige un objeto. Elige, por ejemplo, el oso Bear (figura 7).
4. Podemos editar los objetos fácilmente. Selecciona primero el objeto, en este caso Objeto1, y ve después a la pestaña Disfraces (en la parte superior izquierda). Comprobarás que para este objeto tenemos dos disfraces. Selecciona el disfraz1 (figura 8).
5. A la izquierda de la ventana de trabajo tenemos las herramientas para editar el objeto (figura 9). Haz clic en Seleccionar y después pasa el puntero por el objeto. Aparecerán todas las formas que componen el objeto (pulsando Desagrupar en el menú superior puedes descomponer el objeto en partes más pequeñas). Una vez que tengas seleccionada una forma, utiliza las opciones Rellenar y Borde para cambiar los colores del objeto.
6. Ahora selecciona Volver a dar forma (el segundo botón). Si haces clic sobre la imagen, aparecerán una serie de puntos que, arrastrándolos, permiten cambiar la forma del personaje. Arrastra los puntos para alargar la cola y las orejas del gato, hasta que quede como en la figura 10. Para hacerlo con precisión, utiliza los botones para hacer zoom de la esquina inferior derecha.
7. Vamos a añadir un nuevo personaje. En el menú inferior de objetos, sitúa el puntero del ratón sobre Elige un objeto pero esta vez haz clic en Subir objeto (figura 11) y, de la unidad 2 de tu espacio web, selecciona el archivo UD02_P1_chico.png.
8. Vamos a aumentar el tamaño del nuevo objeto, de forma que quede como en la figura 12. Para ello, selecciónalo en la lista de objetos y después, en el menú donde se muestran las propiedades del objeto, escribe “150” en el campo Tamaño (figura 13).
9. Los objetos tienen asociados unos sonidos. Selecciona el Objeto1, ve a la pestaña Sonidos (figura 14) y pulsa el play; oirás un maullido. Comprueba cuál es el del oso.
10. Descarga el proyecto UD02_P1_nombreapellido.sb3 en tu ordenador yendo a Archivo / Guardar en tu ordenador y seleccionando la carpeta en que guardas tus trabajos. Si no estás registrado, es la forma que tienes de guardar los archivos.

## Vamos a practicar 2

Ejercicio 1. Realizar la interfaz

1. Inicia un nuevo proyecto yendo a Archivo / Nuevo. Llámalo UD02_P2_nombreapellido. Elimina el personaje Objeto1 que viene por defecto haciendo clic en el icono de la papelera que aparece sobre él.
2. Ve a Elige un fondo (figura 15) y escoge Colorful City.Licencia: CC BY-SA
3. A continuación selecciona los personajes. En Elige un objeto, escoge Avery Walking (figura 16).

Ejercicio 2. Iniciar un programa. Modificar apariencias

1. Los personajes pueden tener varios disfraces, esto es, diferentes posiciones en las que aparecen. Selecciona la pestaña Disfraces y comprueba que tu personaje tiene cuatro disfraces (figura 17). Esto va a permitir realizar programas más interesantes.
2. Selecciona el bloque al hacer clic en bandera verde de la categoría Eventos y arrástralo hasta el área de código.
3. A continuación, selecciona el bloque decir ... durante ... segundos, de la categoría Apariencia, e incluye el texto “¡Hola!” durante 2 segundos (o puedes poner otro texto y cambiar el número de segundos). Anida con éste el bloque cambiar disfraz a ... de la misma categoría. En el desplegable selecciona avery walking-d.
4. Añade también el bloque sumar al efecto ... ... de la categoría Apariencia y en el desplegable selecciona pixelar e indica 100. Comprueba que tienes un programa como el de la figura 18.
5. Prueba el programa haciendo clic en la bandera verde. Verás que tu objeto cambia de disfraz y luego se pixela.
6. Añade el bloque esconder de la categoría Apariencia. Prueba el programa.
7. Tu personaje ha desaparecido y ahora no sabes cómo volver a verlo. Esto nos demuestra que es importante tener siempre la precaución de establecer otro conjunto de instrucciones que devuelvan los objetos a su estado original.
8. Para ver nuevamente el objeto, elimina el bloque esconder y sustitúyelo por el bloque mostrar de la categoría Apariencia. Haz clic en la bandera verde.
9. Ahora vamos a dejar el objeto en su estado original. Para ello elige el bloque al hacer clic en este objeto de la categoría Eventos.
10. Incluye a continuación el bloque quitar efectos gráficos de la categoría Apariencia. Anida también de esta categoría los bloques cambiar disfraz a ... y pensar ... durante ... segundos. En el bloque cambiar disfraz a ..., selecciona avery walking-a. Por último, en el bloque pensar incluye el texto “Vuelvo a ser yo” durante 2 segundos (figura 19).
11. Prueba el programa. Descarga el proyecto UD02_P2_1_nombreapellido.sb3 en tu ordenador yendo a Archivo / Guardar en tu ordenador y seleccionando la carpeta en que guardas tus trabajos.

Ejercicio 3. Simular movimiento

1. Para simular movimiento, inicia el programa arrastrando hasta el área de código el bloque al presionar tecla espacio, de la categoría Eventos.
2. Añade debajo el bloque cambiar disfraz a ..., de la categoría Apariencia, y selecciona avery walking-b en el desplegable.
3. Anida a continuación el bloque esperar ... segundos, de la categoría Control, e incluye un tiempo de 0.5 segundos.
4. Repite tres veces los pasos 2 y 3. Te deben quedar nueve bloques anidados juntos.
5. Modifica las instrucciones cambiar disfraz a ... seleccionando los distintos disfraces de tu objeto: deben quedar en este orden: avery walking-b, c, d y a (figura 20).
6. Prueba el programa. Descarga el proyecto UD02_P2_2_nombreapellido.sb3 en tu ordenador yendo a Archivo / Guardar en tu ordenador y seleccionando la carpeta en que guardas tus trabajos.

## Lectura facilitada

Un error habitual
Al iniciar un programa, es un error habitual en principiantes el no situarse sobre el objeto sobre el que se quiere programar. Si estamos situados sobre el escenario en lugar de en el objeto sobre el que queremos programar, no aparecerán los bloques decir, cambiar disfraz, etc.

# 2. Describe la función de los siguientes bloques

En esta actividad vas a trabajar de forma individual en tu cuaderno o en el ordenador, describe la función de cada uno de los bloques de las categorías de control y operadores de la siguiente tabla:

Bloques | Descripción

# 3. Aumenta la interactividad con el uso de sensores

Los bloques de sensores en Scratch es una categoría que se utiliza para detectar diferentes elementos de un proyecto y se caracteriza por su color cian.

Normalmente se utilizarán los bloques de sensores junto a bloques de control.

Con su uso en un programa se pueden crear condiciones al tocar un borde de la pantalla, colores específicos, contacto con el ratón o con otros personajes.

En definitiva, nos permiten hacer que los personajes interactúen con otros o con condiciones del entorno.

Los bloques de sensores de Scratch permiten detectar las siguientes acciones:

1. Tocar un objeto determinado.
2. Tocar un color determinado.
3. Cuando un color determinado toca a otro color concreto.
4. Entrada del valor de variables por medio del teclado.
5. Si se presiona alguna tecla del ratón.
6. Si se presiona alguna tecla en particular.
7. Distancia de nuestro objeto a otro.
8. Lectura de los puertos de comunicaciones del ordenador para leer las señales de los sistemas robóticos.

A continuación, se muestran los bloques de la categoría de sensores de Scratch y una breve descripción.

## Lumen dice Este vídeo te puede servir de ayuda

En el siguiente vídeo tienes información sobre los bloques de control y los operadores que te puede ayudar a comprender mejor este apartado.

## Ponte aprueba

Ejercicio 1. Realizar la interfaz

1. Inicia un nuevo proyecto yendo a Archivo / Nuevo. Llámalo UD02_P4_nombreapellido. Elimina el personaje Objeto1 que viene por defecto.
2. Ve a Elige un fondo y selecciona la opción Pinta. Con la herramienta Rectángulo, dibuja un rectángulo y píntalo de rojo seleccionando este color en el desplegable Rellenar (figura 28).

Ve a Elige un objeto y escoge el personaje Cassy Dance, de la categoría Bailar.

Ejercicio 2. Interaccionar con el usuario

1. Vamos a ver una bailarina que se mueve cuando el usuario pulsa la barra espaciadora, siguiendo al puntero del ratón, y cambia de postura cuando golpea su pie con un objeto situado en el fondo (en este caso, el rectángulo rojo que has pintado antes). Comienza el programa con el bloque al presionar tecla espacio de la categoría Eventos.
2. Ahora ubicaremos el objeto y definiremos su disfraz de partida. Elige cambiar disfraz a ... en la categoría Apariencia y selecciona cassy-a. Elige apuntar en dirección ... en la categoría Movimiento y señala 90. Así te aseguras de que, cada vez que se presione la tecla espacio, el objeto esté en posición vertical y con el disfraz cassy-a (figura 29).
3. Para indicar al objeto que debe seguir la posición del puntero del ratón, elige el bloque ir a ... de la categoría Movimiento y selecciona puntero del ratón.
4. Incluye a continuación, yendo a la categoría Control, el bloque si ... entonces. Luego elige, en la categoría Sensores, el bloque ¿color ... tocando ...? y deslízalo hasta situarlo dentro del bloque si ... entonces, en el espacio que hay entre las dos palabras (figura 29).
5. Pincha en uno de los colores del bloque ¿color ... tocando ...?. Selecciona el cuentagotas y sitúalo sobre el pie del personaje para elegir el color de su zapato (figura 30). Verás que el punto donde seleccionas se convierte en una lupa para que captes mejor el color exterior, que es el que va a tocar. Realiza la misma operación con el otro color del bloque. En este caso, selecciona el color rojo del rectángulo del fondo.
6. Anida en el bloque de control el bloque cambiar disfraz a ... y elige cassy-b. Luego incluye los bloques apuntar en dirección 180 y pensar ¡Vamos! durante 1 segundos (figura 31).
7. Descarga el proyecto UD02_P4_1_nombreapellido.sb3 en tu ordenador yendo a Archivo / Guardar en tu ordenador.

Ejercicio 3. Interacción entre objetos

1. Ahora incluiremos en el programa anterior un nuevo objeto. Para ello, ve a Elige un objeto y escoge Ten80 Dance.
2. Selecciona el programa del ejercicio anterior. En la categoría Sensores, ve al bloque ¿tocando ...? y en el menú desplegable selecciona Ten80 Dance. Elimina el bloque anterior ¿color ... tocando ...? y coloca este en su lugar, dentro del bloque de control.
3. Elimina también el bloque apuntar en dirección 180; modifica cambiar disfraz a ... eligiendo cassy-c; y en el bloque pensar ¡Vamos! durante 2 segundos cambia el texto “¡Vamos!” por “Baila conmigo” (figura 32).
4. Descarga el proyecto UD02_P4_2_nombreapellido.sb3 en tu ordenador yendo a Archivo / Guardar en tu ordenador.

## Lectura facilitada

Trabajar con más de un objeto en un programaFíjate bien, cuando tengas más de un objeto, a la hora de programar sus acciones. Comprueba que tienes seleccionado el objeto sobre el que quieres realizar la programación para evitar equivocarte y modificar las acciones de otro objeto.

# 4. Empareja la función o características de los bloques de sensores

Vamos a comprobar lo que hemos aprendido sobre los sensores en Scratch.

Trabaja de forma individual. Pincha y arrastra cada explicación de la parte inferior con su correspondiente bloque sensor superior.

# 5. La aleatoriedad en los videojuegos de Scratch

Tenemos disponible en Scratch un bloque de programación que nos permite simular la generación de números aleatorios.

Este bloque puede dar mucho juego a nuestro reto "Mi primer videojuego" con Scratch y queremos ayudarte a descubrirlo.

Este bloque se encuentra dentro de la categoría de operadores y es de color verde:

Cada vez que ejecutemos esta instrucción devolverá un número diferente entre un rango dado.

Por defecto entre 1 y 10, pero puedes cambiar estos valores para utilizar los que necesites.

Es algo parecido a lanzar una moneda o un dado.

Generalmente, la utilización de los números aleatorios en Scratch lleva asociado la utilización de una variable para almacenar el valor y utilizarlo en el programa.

En los videojuegos hay ocasiones en las que necesitamos que el comportamiento de los personajes sea de manera aleatoria, al azar. A veces, de una forma y otras veces de otra.

## Aleatoriamente

Definición

Hecho que depende del azar o de la casualidad.

Ejemplo

Se han elegido a esas personas aleatoriamente.

# 6. Pon en práctica la aleatoriedad con Scratch

En este ejercicio vas a poner en práctica la aleatoriedad en un videojuego.

Cambia la posición de inicio y la dirección de caída de la bola en el siguiente videojuego del Pong por una posición y movimiento aleatorio de la misma.

NOTA: Utiliza el ratón para mover la pala.

## Lumen dice ¿Necesitas ayuda con los números aleatorios?

Ya sabes que puedes generar un comportamiento aleatorio con este bloque.

En este caso es un bloque que elige un número aleatorio entre 0 y 360.

Este bloque se encuentra en la categoría de operadores de Scratch, es de color verde, contiene el texto "número aleatorio entre...".

En el caso de giros, sustituimos los valores 1 y 10 que vienen por defecto por 0 y 360 grados o el rango de grados que desees.

Para una posición aleatoria, tendrás que programar que la bola vaya al inicio de la partida a una posición "x" aleatoria, ya que la posición "y" será un valor fijo que establece la parte superior de la pantalla.

# 7. ¿Cómo quieres controlar el videojuego?

Un aspecto importante que se debe decidir cuando se diseña un videojuego consiste en elegir el periférico o mando que permitirá al usuario interactuar con los elementos del videojuego.

A continuación, te presentamos los bloques de programación para controlar un videojuego desde diferentes periféricos.

## Control con el teclado

Es uno de los controles más usados.

Los bloques de programación para controlar con el teclado el movimiento de un objeto en los ejes x-y pueden ser los siguientes:

Haz clic sobre la imagen para ampliarla.

## Controlar con el ratón

Es la otra forma de control más usada de los elementos en Scratch.

Para controlar los movimientos en el eje x de un objeto con el ratón, se pueden usar bloques de programación como los siguientes.

## Control con la cámara web

Es un control avanzado de los elementos de Scratch.

Se utiliza la extensión Sensor de vídeo. Si quieres saber más sobre ella, aquí tienes los bloques y un vídeo sobre su uso.

## Controlar con Makey Makey

Puede ser otra opción diferente de control de los elementos del videojuego.

Makey-Makey es una placa electrónica que permite convertir prácticamente cualquier objeto que sea conductor eléctrico en algo parecido a un teclado o ratón.

El ordenador conectado a la Makey Makey recibe sus señales como si trata de un teclado o ratón.

En Scratch se incorpora a la programación del videojuego como una extensión.

Aquí te paso los bloques asociados a esta extensión.

A continuación tienes un vídeo para que veas las posibilidades de control de un videojuego con una placa Makey Makey.

## Periférico

Definición

Cualquier accesorio o dispositivo que se conecta a la Unidad Central de Procesamiento de un ordenador.

Ejemplo

Los altavoces son un periférico de un ordenador.

## Pongámonos manos a la obra

Extensiones de Scratch. Integración de gráficos y sonidos

Vocabulario

1. Inicia un nuevo proyecto yendo a Archivo / Nuevo. No hace falta que le pongas nombre al proyecto, no lo vamos a guardar.
2. Debajo de las categorías de bloques, en la esquina inferior izquierda, tienes el botón Añadir extensión. Púlsalo y verás que te aparecen las extensiones de Scratch (figura 48), que son una serie de funcionalidades que te permiten programar tanto software como hardware.
3. Selecciona las siguientes extensiones de software: Música, Lápiz, Texto a voz y Traducir. Verás que se incorporan a la columna de categorías de bloques. Observa los bloques que contienen estas extensiones, pruébalos y trata de imaginar qué podrías hacer con cada uno de ellos. Estas extensiones son muy útiles, nos sirven para lo siguiente:
   - Música: para tocar instrumentos
   - Lápiz: para dibujar con los objetos
   - Texto a voz: para hacer que tus proyectos hablen
   - Traducir: para traducir textos a muchos idiomas
4. A continuación, usando un procesador de texto, redacta un documento en el que expongas todo lo que has imaginado sobre los bloques de extensiones de software. Guarda el documento como UD02_P8_nombreapellido.
5. Ahora selecciona la extensión de hardware Sensor de vídeo, para interaccionar con la webcam. Observa los bloques que contiene esta extensión, pruébalos y trata de imaginar qué podrías hacer con ellos. A continuación, escríbelo también en tu documento, y luego guárdalo y ciérralo.
6. Por último, prueba la extensión Makey Makey (figura 49) y observa sus bloques (figura 50). Esta extensión sirve para convertir cualquier cosa en un teclado y la vamos a probar en las prácticas de taller (en las siguientes páginas).

El hardware es la parte física del ordenador. Scratch permite programar varios dispositivos, como por ejemplo una webcam o la placa Makey Makey. El software son los programas, como los que hacemos con Scratch.

El hardware es la parte física del ordenador. Scratch permite programar varios dispositivos, como por ejemplo una webcam o la placa Makey Makey. El software son los programas, como los que hacemos con Scratch.

# 8. Cambia los controles del juego

En este ejercicio que vas a trabajar en pareja, prueba cambiar los controles de un videojuego.

Piensa y realiza los cambios necesarios en el siguiente videojuego Pong para que el control de los movimientos de la pala con el ratón pasen a ser controlados con las flechas direccionales del teclado.

Página 14 de 21

Obra publicada con Licencia Creative Commons Reconocimiento No comercial Compartir igual 4.0

Creado con eXeLearning (Ventana nueva)