SÍGUENOS EN

imagen @megustaleerebooks

imagen @megustaleerkids

imagen @megustaleerkids

imagen @megustaleerkids

A mi madre y a mi esposa,

por su entrega y apoyo.

CREAR FORTNITE NO LLEVA UN DÍA

Dragones de bocas llameantes, osos que caminan bocabajo, ranas con bufanda, pájaros muy enfadados, bosques misteriosos, selvas pixeladas... Todo lo que conocemos e imaginamos puede construirse en un videojuego. ¿Te has dado cuenta? También es posible formar parte de sus increíbles escenarios y actuar en ellos como un personaje más. ¡Alucinante! Pero ¿cómo se consigue todo esto?

Los ordenadores, de momento, no son tan inteligentes como las personas y es necesario que reciban instrucciones, palabras muy concretas (en inglés), para que nos entiendan y puedan funcionar. A este acto de paciencia se le llama «programar».

No creas que programar un videojuego sencillo es muy muy complicado, y menos con Scratch, el lenguaje que vamos a utilizar para explicarte cómo hacerlo. Cualquiera que sienta interés y tenga ganas de divertirse puede aprender a diseñar su propio videojuego. Te aseguramos que imaginar y crear uno parecido a los que te proponemos en este libro te hará sentir como el mismísimo Shigeru Miyamoto, el diseñador más reconocido de los videojuegos modernos de NINTENDO, o la gran Dona Bailey, creadora de CENTIPEDE, un innovador videojuego en los años ochenta. ¿Te animas a inventar historias y personajes, programar tu propio juego y, después, si quieres, compartirlo con un montón de gente? ¿Sí? Pues... ¡bienvenido a SCRATCHMANÍA!

QUÉ ES PROGRAMAR

Para que navegues por Internet, enciendas la tele o te lo pases pipa con un videojuego alguien ha tenido que darle al coco y programar. La programación es un arte, te lo aseguramos, ya lo verás, y consiste en inventar muchas líneas de código, es decir, órdenes muy precisas que hacen que el ordenador (su procesador más exactamente) funcione. Menos una cuchara, una silla o cosas así, hoy en día casi cualquier objeto utiliza un código.

¿Qué pasa cuando ese código no funciona correctamente? ¡Que se lo digan a los ingenieros del Arianne 5!, el cohete más grande de Europa durante años. Cuando llevaba treinta y siete segundos de ascensión explotó. El fallo se debió a que una pequeñísima rutina de código (un pequeño programa) sufrió el llamado «desbordamiento de entero», es decir, se intentó almacenar el número 65536 en una variable que solo podía contener hasta el 65535. Ese detalle hizo que se perdieran 386 millones de euros, que fue lo que costó el proyecto. Qué faena... Así de importante es el código.

El videojuego Fortnite es muy conocido, y aunque pueda parecer que se creó en 2017, realmente la empresa que lo desarrolló llevaba trabajando en él desde 2011.

Ya verás que, algunas veces, al programar el ordenador su comportamiento nos puede resultar raro: esto siempre es debido a que lo que le estamos diciendo no es correcto y tenemos que mejorar nuestro programa.

QUÉ ES SCRATCH Y PARA QUÉ SIRVE

Existen muchos lenguajes de programación y Scratch es uno de ellos. Con él vas a crear tus propios juegos en un entorno visual, es decir, con gráficos animados. Para que te hagas una idea, podrías hacer tu propia serie, al estilo de Pokemon o de One Piece, creando tus propias animaciones. En ella harás desde personajes muy sencillos a películas animadas a golpe de teclado de tu ordenador y de movimientos de su ratón. ¡No puede haber algo que mole más!

Lo bueno que tiene Scratch es que no tenemos que volvernos locos escribiendo complicadas líneas de código: el programa ya las tiene hechas para nosotros. Es algo así como construir una casa prefabricada: solo hay que ir montando las piezas. Precisamente, a esas órdenes se las conoce como «bloques». Después te explicaremos lo fácil que es utilizarlos.

Quizá conozcas otros sistemas de programación parecidos, pero Scratch es mejor que muchos otros: no emplea «bloques y flechas», utiliza una cosa muy importante llamada «estructuras de control procedimentales», que te servirán el día de mañana para hacer código sin ayudas visuales.

Sabías que: Mucha gente mayor que se acostumbró a programar con cajas y flechas no es capaz de hacer código después porque le parece muy complicado. Scratch te ayuda a evolucionar correctamente como programador.

INSTALACIÓN DE SCRATCH ONLINE / OFFLINE

Nos ponemos manos a la obra. Con Scratch se puede programar en versión online y offline.

Offline quiere decir que descargas de Internet el programa Scratch, lo instalas en tu ordenador y la aplicación se ejecuta como un programa del tipo Open Office o League of Legends; sin necesidad de conexión a Internet pero con algunos requisitos previos.

Online quiere decir que accedes a Scratch mediante una página web. En este libro vamos a usar esta opción. La última versión del programa, la 3, que se ejecuta en un navegador. Si prefieres utilizar Scratch offline, ten en cuenta que estarás utilizando la versión 2 del programa. A lo largo del libro iremos comentando las principales diferencias entre ambas versiones para que te resulte fácil usar cualquiera de las dos.

Para usar Scratch solo tienes que ir a la página https://beta.scratch.mit.edu/. Si te fijas, hemos cambiado el gato que sale en la página web por un oso panda muy molón. Tú puedes seguir utilizando el gato, más adelante te explicaremos cómo cambiar tu personaje. ¿Empezamos?

LA VENTANA DE SCRATCH

Cubierta    Para empezar a programar en Scratch lo primero es saber qué es un escenario. Piensa en tu película favorita, seguramente en pantalla saldrá algún personaje, por ejemplo una investigadora, un aventurero o un robot, y alrededor de este personaje verás un decorado, es decir, todos los elementos que rodean al personaje. Con Scratch lo que vamos a programar son cosas parecidas, tendremos un escenario y un personaje, de forma que deberías ir pensando: «¿Qué quiero representar con mi programa? ¿Voy a hacer una escena de baile? ¿Voy a poner un muñequito que pueda controlar con las teclas del ordenador? ¿Quiero un juego espacial con una nave que me permita ir esquivando meteoritos?»

El escenario contendrá todos los elementos de tu programa: la protagonista, los elementos decorativos, el color de fondo, los personajes secundarios.

Un programa muy sencillo de hacer es, por ejemplo, simular una película, donde en la escena aparecen dos personajes y hablan entre ellos para contarse una historia. Eso es muy fácil de hacer con Scratch. Otro programa muy sencillo es colocar un personaje en el centro y poder moverlo hacia los lados usando las flechitas del teclado.

Obviamente, aparte del escenario y los personajes también necesitarás el programa que controla lo que ocurre en cada momento.

En la siguiente imagen tienes las principales secciones que forman Scratch.

BARRA DE HERRAMIENTAS

La barra de herramientas es la sección situada en la parte superior izquierda de la ventana de Scratch. Te recordamos que está formada por unos menús (opciones) desplegables que contienen las operaciones básicas que se pueden hacer en Scratch. ¡Venga, vamos a descubrir qué sorpresas guarda!

Menú Archivo

Nuevo. Sirve para crear un nuevo programa. Si en algún momento crees que necesitas empezar de cero con tu programa, usa esta opción o directamente pulsa la tecla F5 para que se actualice la página.

Cargar de tu ordenador. Con ella abrimos programas existentes. De momento no tenemos ninguno, pero te puedes bajar programas ya hechos de Internet. En los próximos capítulos harás unos programas ALUCINANTES, ya verás...

Guardar en tu ordenador. Esta opción se utiliza para guardar lo que estés haciendo en un momento determinado. Si le das aquí, el archivo se guardará en tu ordenador para que tengas una copia en tu propio ordenador y así no lo pierdas cuando cierres el navegador de Internet.

Las siguientes opciones corresponden a la versión 2 de Scratch. Puedes instalártela en tu ordenador para probar estas funcionalidades o bien continuar en el siguiente apartado.

Record Project Video. Esta opción es muy chula y te permite grabar lo que ocurre en tu escenario (stage) durante un minuto. Te vendrá bien si quieres guardar en un video cómo se ejecuta tu programa, por ejemplo, para compartir el resultado en YouTube o mandárselo por Internet a alguien.

Share to website. Permite compartir el proyecto que estás haciendo en el sitio web de Scratch. Si eliges esta opción, el programa te pide que indiques el usuario y la contraseña que utilizas en el sitio web de Scratch. Si todavía no tienes cuenta, no podrás compartir nada, ¡claro! Aunque, bueno, aún no hemos programado nada, así que la usaremos más tarde.

Check for updates. Esta opción sirve para actualizar el propio programa de Scratch. Te decimos desde ahora mismo que no la vas a usar muy a menudo; pero bueno, ahí está por si te hace falta.

Menú Editar

Restaurar objeto. Esta opción te será superútil porque te permite deshacer el último borrado que hayas efectuado. Es decir, si te equivocas y por error borras todo el programa, puedes intentar usar esta opción para recuperar lo que hiciste... NO OLVIDES usar «Guardar» a menudo para no perder lo que estés haciendo en caso de problemas.

Tampoco te preocupes demasiado si en algún momento le das a «Restaurar» y no deshace todo lo que tú querías; a veces ocurre y no pasa nada si pierdes dos o tres minutos de lo que hayas avanzado, reescribir un par de bloques lleva mucho menos tiempo que hacerlo la primera vez.

Activar el modo turbo. Esto suena superguay... TUUUURBOOOO, pero realmente no nos va a servir de mucho de momento, se usa esta opción para hacer que los programas ejecuten muy rápido con la finalidad de probar algoritmos muy complejos con muchos bucles... intenta contener el ansia por pulsar esta opción o tu programa ejecutará tan rápido que ni te enterarás de lo que ocurre.

La siguiente opción es de la versión 2 de Scratch.

Small stage layout. Redimensiona el escenario para que ocupe menos espacio; algo que te vendrá bien cuando tengas mucho código en la parte de la derecha y necesites ver todo el código a la vez.

Menú tutoriales

Esta opción contiene varios tutoriales que te ayudan a empezar a programar, de momento no lo vamos a usar, pero si en cualquier momento te apetece puedes darle aquí para ver programas ya hechos por la comunidad de Scratch.

ÁREAS DE BLOQUES

Los bloques son los elementos fundamentales de Scratch que se usan para programar, es decir, para lograr que nuestro muñequito protagonista se mueva por la pantalla y, claro, conseguir todo tipo de juegos superguais. Por ejemplo, si te fijas en la imagen, hay un bloque en el que se puede leer «mover 10 pasos». Esto quiere decir que la figurita (en este caso el oso panda) debe moverse 10 pasos.

Aunque todavía no vamos a programar grandes juegos, ahora mismo podemos ver cómo se mueve nuestro simpático oso panda, y lo hacemos en un segundo, mira... Arrastra la cajita «mover 10 pasos» hacia el área de programación o área de scripts.

A continuación, pulsa en «Eventos».

Al pulsar en «Eventos» desaparecerán los bloques azules y en su lugar aparecerán los bloques amarillos. A continuación, arrastra el nuevo bloque amarillo a «al hacer clic en este objeto» y colócalo encima del bloque «mover 10 pasos». Es importante hacer este paso con mucho cuidado: el bloque amarillo tiene que quedar pegado al azul, es decir, no separado un poquito, sino totalmente pegado, ¿vale?

Entre las versiones 2 y 3 de Scratch verás que se han hecho algunos pequeños cambios de colores; por ejemplo, los bloques marrones de la versión 2 en la versión 3 son más bien amarillos.

Una vez hecho esto, clicamos con el botón izquierdo del ratón sobre la figura del oso panda que aparece en el escenario y que debería moverse un poquito a la derecha... ¿Funciona? ¡GENIAL!

Si el oso panda no se mueve, tienes que revisar sobre todo que el programa (el script en inglés) sea igual que la imagen anterior y se debería leer de la siguiente forma:

Si funciona, ¡te damos nuestra enhorabuena! Si esta parte se te resiste un poquito, intenta que alguien te ayude a revisar el código. No te desanimes. Cuando programamos es muy habitual que un fallo obvio nos resulte difícil de ver. Si alguien te echa una mano, mejor: cuantos más ojos, más fácil es resolver el problema.

Ahora vamos a explicar en qué consisten todas las áreas de bloques y ya verás qué útiles te resultan.

Área de bloques azul «Movimiento»

En el caso de Scratch los bloques azules indican que queremos conseguir un movimiento en nuestra escena; por ejemplo, vamos a hacer que nuestro oso panda se mueva a izquierda o derecha. Ya sabemos que algunos estaréis pensando: «¡Eh, no me enrollan mucho los osos, me gustaría más que en mi pantalla apareciera un dinosaurio del Jurásico o un robot enorme». Vale, ese cambio lo podremos hacer más adelante... Por ahora, este oso panda es nuestro amigo superguay y nos quiere acompañar un poco más todavía.

Vamos a ver con detalle algunos de estos bloques azules, porque son muy curiosos.

«Si toca un borde rebotar.» Este bloque hace girar automáticamente 180 grados nuestra imagen (el oso), si llega a la pared del escenario. ¿Puedes programar los tres siguientes bloques? ¿Probamos?

A continuación, clica varias veces sobre el oso panda hasta que toque el borde de la pantalla; verás que, en vez de seguir moviéndose hacia la derecha, gira 180 grados y se dirige hacia la izquierda (bocabajo eso sí... ¡Qué mareo!).

No te preocupes porque el pobre oso panda esté bocabajo, luego mejoraremos el código para que no pase eso.

El resto de las operaciones azules (o de movimiento o motion en inglés) influyen de diferentes maneras en la posición de nuestro oso:

Girar 15 grados. / Turn 15 degrees. Hace girar el oso 15 grados en una u otra dirección.

Apuntar en dirección / Point in direction. Hace que el oso apunte en una dirección concreta siendo las direcciones parecidas a las de una brújula de la siguiente forma:

Prueba a cambiar el valor con los números del teclado del ordenador y clica en «apuntar en dirección», así puedes ver cómo el oso panda cambia su orientación. Si pruebas un valor como 45, verás que es un valor a medio camino entre 0 y 90, es decir, el oso apuntará a un rincón del escenario.

Apuntar hacia puntero de ratón / Point-towards mouse pointer. Esta opción es muy curiosa y nos va a venir muy bien después, cuando queramos hacer juegos interactivos con el ratón. Su función consiste en que hace girar el oso hacia la posición de tu ratón. A continuación, vamos a probar «apuntar hacia puntero de ratón» con este pequeño programa. Pero para eso primero debemos borrar nuestro programa anterior clicando con el botón derecho del ratón sobre él, tal y como aparece en la imagen. También podríamos guardarlo dando a menú Archivo à Guardar en tu ordenador, como tú prefieras. En la versión online de Scratch la forma más rápida de reiniciar la pantalla es pulsar F5.

A continuación programamos lo siguiente.

Fíjate en que el primer bloque es de los amarillos, tienes que hacer clic con el ratón en «Eventos» para encontrarlo y después arrastrarlo a la sección de código de la pantalla. A continuación tienes que poner debajo del bloque amarillo un bloque azul de tipo «apuntar hacia puntero de ratón» y asegurarte de que queda como en la imagen (ambos bloques deben estar pegados).

Una vez que tengas los bloques ensamblados, lo que tienes que hacer es llevar la flechita del ratón cerca del oso y pulsar la barra espacio; automáticamente el oso se girará poco a poco hacia donde tengas colocada la flechita del ratón. Si pulsas la barra espacio varias veces mientras mueves el ratón, el oso, si se porta bien, debe mirar hacia la flechita del ratón.

No vamos a explicarte en detalle cada bloque de «Movimiento» porque se haría un poco rollo; casi es mejor entender el funcionamiento básico de cada tipo de bloques y después empezar a hacer juegos guais. Ahora veamos qué puede hacer el siguiente programa, ¿te parece?

Puedes cambiar la configuración de algunos bloques con el ratón.

Este programa dice:

Puedes probarlo moviendo el ratón y pulsando la tecla de espacio varias veces.

Área de bloques amarillos «Eventos»

Recuerda que si has descargado la versión 2 del programa, habrá pequeñas diferencias en los colores. Por ejemplo, los bloques de eventos serán de color marrón en lugar de amarillos.

Los bloques amarillos corresponden a los eventos, y ya has visto que hemos utilizado un par de ellos. Con toda la razón del mundo te preguntarás por qué explicamos en qué consisten después de usarlos. Bueno, una cosa que aprenderás de la programación es que es imposible explicarlo todo antes de empezar a programar. Lo mejor es learn by doing, que traducido del inglés significa «aprender haciendo». Así, y poco a poco, vamos resolviendo dudas, de forma que siempre nos queda algo por aprender, pero al mismo tiempo cada vez sabemos más porque lo vamos practicando. Los programadores que llevan veinte años programando todavía aplican este principio básico, así que no te asustes de hacer cosas que todavía no entiendes perfectamente.

En el caso de la programación de Scratch, un evento son cosas que ocurren en tu ordenador, como pulsar el botón izquierdo del ratón o pulsar una tecla del teclado. Los eventos que Scratch es capaz de entender y aprovechar son los siguientes:

«Cuando se pulsa la bandera» / When *flag* clicked. Se refiere a una bandera que aparece en la parte superior de la pantalla en Scratch.

«Cuando se pulsa una tecla» / When space key pressed. Puede ser barra espacio o muchas otras del teclado. Esto viene muy bien para hacer juegos con el teclado; por ejemplo, para controlar un muñeco que se mueve por el escenario.

«Al hacer clic en este objeto» / When this sprite is clicked. La palabra this significa «esto», y aunque puede parecer rara, es común en programación. This hace referencia a lo que estés pulsando o haciendo en cada momento. Es decir, se refiere al elemento en el que estás haciendo clic con el ratón, en este caso concreto el oso panda. Puede resultar un poco difícil de entender, pero lo volveremos a explicar más adelante en otros ejemplos.

«Cuando el fondo cambie a backdrop1» / When backdrop switches to backdrop1. Esta opción se usa para ejecutar una acción cuando el oso panda se posiciona sobre un fondo diferente al preestablecido (el fondo es lo mismo que el background en inglés). Por ejemplo, si el oso entra en el baño puedes hacer que diga: «Estoy en el baño.» De momento no lo vamos a usar, pero ten en cuenta esta opción para más adelante.

Existen otras opciones, pero las veremos más adelante porque son más avanzadas.

Área de bloques magenta «Sonido»

Esta área permite reproducir sonidos y es bastante fácil de entender y de usar. Hacer un montón de sonidos con ella es guay, pero ¿nos permites un consejo? Ten cuidado con el volumen de tu ordenador, porque los que estén a tu alrededor pueden terminar con un gran dolor de cabeza; te lo decimos por experiencia propia.

Ya tienes un poquito de práctica y puedes intentar programar la reproducción de un sonido (vamos, que se escuche un sonido), a ver si te funciona. Recuerda subir SOLO UN POCO el volumen del ordenador.

Para poder usar un sonido en la versión online deberás seleccionarlo de la lista de sonidos existentes, crear uno propio o subirlo desde el ordenador; nosotros vamos a hacer lo más fácil, que es seleccionarlo de los sonidos existentes en Scratch Online v3. Puedes ver los pasos que tienes que seguir a continuación.

El evento que arranca este programa es pinchar en la banderita verde que verás en la parte superior de la pantalla a la derecha; al hacer esto, en el escenario deberías oír un sonido. Si no oyes ningún ruido, prueba a colocar en medio un bloque de «Movimiento», para que al menos tengas una prueba visual de que el programa realmente se ejecuta.

Añadir un movimiento a un programa que solo produce sonido es una forma estupenda de comprobar si nuestro programa realmente funciona. En informática, a resolver problemas usando diferentes mecanismos (visuales, sonoros, físicos, etc.) se le llama «depurar» y es súpermegaimportante en el día a día de un programador.

Área de bloques naranja oscuro «Variables»

Esta área se usa para almacenar variables y va a ser muy importante más adelante. Las variables son «contenedores» de valores o datos. Piensa, por ejemplo, en el oso panda, podrías crear las siguientes variables para identificar el oso:

Estas serían variables posibles para identificar el oso, y a cada variable le podemos dar un valor u otro:

Las variables deben ajustarse a su valor. Por ejemplo, el oso no puede tener como edad «Mitifú» porque «Mitifú» es un nombre, no un número; así pues, cada variable tiene que ser de un tipo concreto:

Las variables las usaremos más adelante en programas más complicados. De momento, por ejemplo, podemos crear una variable llamada finJuego o finalPartida (como prefieras)... pero no la vamos a usar de momento, solo la vamos a crear. Fíjate en que las variables se pueden crear usando guiones bajos o sin ellos, eso ya es cuestión de gustos.

Para crear una variable pulsamos en el botón «Crear una variable» y le damos el nombre «finJuego» y pulsamos «Para todos los objetos», esto hace que la variable sea global a todos los objetos que creemos (de momento solo tenemos el oso panda, luego crearemos otros objetos). Para terminar de crear la variable, pulsa Aceptar.

De momento no vamos a usar la variable que hemos creado, pero nos servirá más adelante para hacer nuestros primeros juegos.

Área de bloques naranja «Control»

La parte fundamental de un programa es donde se ponen condiciones para hacer que el oso panda vaya para un lado u otro dependiendo de lo que pulsemos. Esta área es muy importante si, por ejemplo, queremos hacer un juego de plataformas. Los bloques de «Control» nos permiten indicar cuándo toca el oso una plataforma concreta o si choca contra una pared. Así impediremos que se empotre, porque... no queremos que se haga daño, ¿no?

En esta área hay algunos bloques que tienen una forma parecida a la de un «bocadillo», es decir, puedes poner otros bloques dentro como si fuera la mortadela del bocadillo. En la siguiente imagen lo vemos claramente.

Como ves en la imagen anterior, hemos pintado el bloque del área «Eventos» debajo del bloque de «Control» llamado «Repetir 10» y curiosamente tenemos un hueco dentro del bloque «Repetir». En ese hueco vamos a introducir un bloque de «Movimiento» del tipo «mover 10 pasos». Ojo, asegúrate de que quede tal y como lo ves en la imagen.

El bloque «Repetir» es lo que llamamos en inglés loop, que también se puede traducir como «bucle». Su función consiste en repetir 10 veces las instrucciones que pongas dentro del bucle. Fíjate en la imagen; su significado es: «repetir 10 veces, mover 10 pasos», es decir, el oso va a andar 100 pasos en total porque 10 veces x 10 pasos = 100 pasos.

Si a continuación pulsas la barra espacio para ejecutar el programa, verás que el oso avanza mucho hacia la derecha; si pulsas varias veces la barra espacio, verás que el oso se sale del escenario. Para que el oso panda regrese al centro de la pantalla, debes poner el valor de x a cero. La x determina la posición sobre el eje horizontal del oso panda. Es decir, para mover el oso hacia delante o hacia atrás necesitaremos modificar el valor de la x.

Verás que el oso se sale por el borde derecho de la escena. La razón es que no hemos controlado que rebote en la pared...; pero, curiosamente, ¡ya hemos visto en este libro cómo hacer que el oso rebote en la pared! ¿Recuerdas qué bloque hace que el oso rebote en la pared?... Te damos una pista: está en el área de bloques «Movimiento». Vamos a programar de modo que el oso pueda moverse de lado a lado sin salirse de escena.

Por fin tenemos un programa que puede ejecutarse un montón de veces y que consigue que no perdamos de vista el oso panda. Para que esto suceda, lo más importante es poner el bloque «Si toca un borde, rebotar» dentro del bloque «Repetir». De este modo, si durante la ejecución del bucle el oso choca con la pared, se da la vuelta. Te explicamos bloque a bloque el anterior programa:

Dejamos por el momento el área «Control», pero esta es tan importante que tenemos que dedicarle un poco de tiempo a varios de sus bloques.

MI PRIMER PROGRAMA COMPLICADILLO

Los bloques en los que aparece la palabra «si» (if en inglés) van a ser requeteimportantes. Mira el siguiente ejemplo e intenta programarlo (usa un bloque del área «Sensores»; si no sabes cómo ponerlo, ahora te explicamos cómo se coloca).

Vamos por partes, que este programa tiene tela.

Coloca los elementos básicos: Empezamos con el bloque de la banderita para indicar cómo se empezará el juego.

A continuación ponemos el bloque «si-si no» para poder poner las condiciones.

Ahora le ponemos un par de bloques del área «Apariencia» para comprobar en qué parte del condicional entramos.

A continuación, añade del área «Sensores» una condición al bloque «si». Es la primera vez que haces este paso y puede parecerte raro, pero, como verás, es muy sencillo. Solo tienes que arrastrar el bloque azul «Tecla espacio presionada» hasta el hueco que hay en el bloque «si», de forma que se vea exactamente así:

Si en algún momento ves que lo que has hecho no es exactamente igual a lo que aparece en las imágenes, no te cortes a la hora de borrarlo. Para ello debes pulsar con el botón derecho del ratón sobre el bloque, darle a «Eliminar bloque» y rehacerlo: cuando se empieza a programar es mejor rehacer lo que llevamos hecho que intentar arreglarlo de cualquier manera si la hemos liado mucho.

Ahora tenemos que cambiar la configuración de los bloques, es decir, hay que toquetear en los bloques que tienes en el área de programación varias cosas, en primer lugar, abre el desplegable azul y selecciona «a» en lugar de «espacio».

Y por último, cambia los textos de los bloques morados y escribe lo siguiente en cada uno:

imagen En el primero: «Has pulsado la tecla A y la bandera»

imagen En el segundo: «Has pulsado la bandera pero no la tecla A»

Escribe los textos que ves en el bloque «Decir», say en inglés. El programa debe quedar tal y como aparece en la imagen de arriba, y si lo leemos con cuidado se interpreta de la siguiente manera:

Para ver en ejecución este programa necesitamos pulsar con el ratón la bandera verde y el oso nos debería decir: «Has pulsado solo la bandera», pero si antes de pulsar la bandera con el ratón tenemos pulsada la tecla A, entonces el oso dirá: «Has pulsado la bandera y la letra A.»

Esta es la pinta que tiene que tener el programa al ejecutar pulsando la bandera verde.

Área de bloques azul claro «Sensores»

Los bloques «Sensores» se van a utilizar de dos formas diferentes: como condiciones de bloques de «control» (como una condición dentro de un «si») y como bloques independientes. En la siguiente imagen se ve la idea.

¿Por qué son diferentes las esquinas de los bloques, a veces en punta a veces en círculo? Porque no todos los bloques se pueden usar en todos los sitios; es decir, al igual que los ingredientes de un plato, algunos bloques se combinan bien, pero otros no se pueden juntar. Por ejemplo, el bloque «Tecla espacio presionada» lo utilizamos anteriormente junto con el bloque «si» pero no se puede usar suelto. Durante las prácticas posteriores iremos aprendiendo qué piezas pueden ir juntas... Ya sabes, learn by doing.

Área de bloques verde claro «Operadores»

Esta área es con diferencia la más rara de todas, más incluso que la de «Variables» y la explicaremos más adelante. Por ahora, todo lo que debes saber es que sirve para hacer operaciones matemáticas u operaciones de texto, como contar el número de letras de una palabra. Parece muy muy seria... pero realmente las matemáticas que usarás en tus programas van a ser de momento supersencillas, por ejemplo, sumar, restar y cosas así.

Área de bloques fucsia «Mis bloques»

Solo la nombramos porque no la vamos a usar en nuestros primeros programas, así que no le hagas mucho caso.

LOS OBJETOS Y MI SEGUNDO PROGRAMA COMPLICADO

Hasta ahora, cuando queríamos referirnos al oso panda lo llamábamos «imagen» o «muñequito», pero desde este momento lo bautizamos con el nombre de «objeto». Objeto es una palabra genérica para referirse a cualquier elemento que tenga un comportamiento en nuestro juego.

Así que, a partir de ahora, el oso panda es un «objeto». ¿No te gustan los osos? No pasa nada. Puedes hacerte objetos con la apariencia de una vaca, un perro o un coche, o lo que quieras. En el propio Scratch tienes una colección de objetos que puedes usar como base para tus propias creaciones. En la web de la Liga Nacional de Robótica también tenemos otras imágenes que te puedes bajar para crear objetos en Scratch, entre ellos ¡el oso panda!

Cubierta    Por ejemplo, allí encontrarás la imagen del robot VeloEdu, un cochecito que sigue una línea.

Para poder usar esta imagen en Scratch necesitamos importarlo, es decir, meterlo en Scratch. Te explicamos cómo a continuación. En primer lugar puedes borrar el oso panda u objeto que tengas en la parte inferior derecha de la pantalla pulsando el botón derecho del ratón y dándole a «borrar» (esto borrará el programa que tengas hecho) y la pantalla debería quedar sin el oso panda.

Como puedes ver, esta sección se llama «objetos». Muy bien, ahora tienes que darle en «Elegir un objeto» y «Subir objeto», y a continuación indicar dónde está el archivo con la imagen que quieres importar. Por ejemplo, si te has bajado el dibujo de Internet, seguramente lo tienes en la carpeta Descargas.

Una vez importado con éxito, deberías verlo en Scratch como un objeto tal, y como aparece en la imagen superior.

Además vamos a volver a añadir el oso panda para que se vea que podemos tener varios objetos en Scratch a la vez y que cada uno puede tener su propio programa (en Scratch el programa está dentro de los objetos). En la siguiente imagen ves ambos objetos a la vez; si en tu pantalla no ves ambos puede ser que el oso panda esté tapando al coche, puedes moverlo a un lado usando el ratón.

El oso panda es demasiado grande, así que vamos a hacerlo más pequeño, por ejemplo puedes reducir el tamaño del oso panda pulsando en «Tamaño» en el área de «Objetos» y poner como tamaño un valor de 50 en vez de 100 y se reducirá su tamaño a la mitad.

¡Y ya está!, ya puedes usar tu nuevo objeto en el escenario para programar con bloques su comportamiento. Cada objeto tiene su propia área de programación, es decir, si quieres mover el programa del oso para que pueda hacer lo mismo con el coche, deberías volver a hacerlo, pero también puedes arrastrar bloques de un objeto a otro dejando caer los bloques de código sobre el objeto. (Sí, un poco raro, pero funciona en la versión 3.)

Para practicar vamos a repetir en el objeto coche el programa del oso que hace que el robot se mueva de lado a lado rebotando en las paredes. Cuando lo hagas, acuérdate de borrar el oso que hemos añadido previamente. (Una sugerencia: la organización es importante cuando programamos). Te explicamos ahora cómo hacer desaparecer a nuestro sufrido oso.

El oso se borra pulsando con el botón derecho del ratón y dando a «borrar». Una vez borrado, en la escena solo debe quedar el coche. Seguimos. Ahora programamos su movimiento y la acción de «rebotar» contra la pared, como ya hicimos con el oso. Es cierto que podríamos haber guardado el código anterior, pero vamos a dar caña a nuestras neuronas y a reprogramar. ¿Te acuerdas cómo hacerlo? ¿Qué bloques necesitamos para programar el movimiento? Repasa mentalmente.

— Recuerda que hacía falta alguna forma para arrancar el programa (bloque de tipo «Eventos»).

— Recuerda que usamos un bloque azul de «movimiento» (bloque de tipo «Movimiento»).

— Recuerda que usamos otro bloque azul para «Rebotar» en la pared (bloque de tipo «Movimiento»).

— Recuerda que, si quieres que el coche se mueva mucho, necesitas un bucle (bloque de tipo «Control»).

¿Qué tal tu memoria?, ¿en forma? En programación es importante no olvidar lo aprendido y eso solo se consigue si practicas constantemente.

Aquí tienes un programa que resuelve el problema que te hemos planteado, aunque quizá tú lo programes de otra forma.

Fíjate en que al ejecutar este programa el coche no queda «bocabajo» porque al girar el coche su imagen sigue siendo «recta», es decir, es simétrico y, por lo tanto, no sale del revés.

Este programa se arranca (como los que hemos visto hasta ahora) clicando en la bandera verde, pero a diferencia de los anteriores este programa no termina de ejecutarse hasta que pinchas en el botón rojo de al lado. ¿Qué piensas que hará este programa? Hace que el coche se mueva de lado a lado y rebote.

Cuando un programa se ejecuta, el perfil de los bloques brilla como en la figura siguiente.

Cubierta 
   ¿Puedes ver cómo el coche se mueve de lado a lado sin parar? ¿Sí? Pues ya tenemos nuestro primer objeto creado en Scratch y nuestra primera animación más o menos coherente. ¿Subimos de nivel? ¿Hacemos algo más guay?

Disfraces y fondos de escenario

Si los objetos son elementos fundamentales, los «disfraces» son cambios visuales que les puedes poner a los objetos para que tengan una pinta diferente; es decir, podrías coger el oso panda y ponerle después un «disfraz» de forma que el oso panda salga con gafas o, por ejemplo, estirando el brazo.

Esto se usa para generar, por ejemplo, una animación, ¿sabes cómo en los videojuegos un personaje mueve las piernas o abre la boca para hablar? Pues eso se consigue usando diferentes disfraces para el mismo objeto. En la siguiente imagen puedes ver cómo estamos dibujando una boca para el oso panda; si hacemos esto en un nuevo disfraz, posteriormente podremos alternan los dos disfraces para que veamos movimiento en la boca.

Los disfraces en Scratch también se pueden usar si quieres hacer un cohete que se enciende y va cambiando el fuego que echa por la cola o para hacer que un árbol se mueva por el viento, son muy útiles.

Vamos a hacer que nuestro oso abra y cierre la boca. Recuerda antes de empezar reiniciar la página web para empezar de cero, después borra el gato de Scratch y añade la imagen del oso panda (puedes hacerlo con el gato si prefieres).

A continuación vamos a dibujar nuestro disfraz para el oso panda, para ello le damos a la pestaña «Disfraces» y ponemos el cursor del ratón sobre el oso panda pequeñito que sale arriba a la izquierda y le damos a la opción «Duplicar». Aquí te mostramos los pasos:

Al duplicar el disfraz ambos serán iguales, así que necesitamos cambiar el segundo disfraz para que tenga alguna diferencia con el primero; por ejemplo, le puedes poner una sonrisa.

El programa que tienes que intentar programar tú, debe hacer lo siguiente:

Esto también se podría hacer moviendo el oso panda añadiendo el bloque «Mover 10 pasos». ¡Intenta hacerlo tú mismo!

Si ejecutas este programa varias veces dándole a la bandera verde verás que el oso panda además de moverse modifica la posición de sus labios, esto da un poco la impresión de que nuestro oso panda está moviendo la boca, no en plan como si fuera un juegazo, pero cada pequeña mejora es un gran avance, así que ¡¡¡disfrútalo!!!

¿Qué harías para conseguir que el oso panda se moviera constantemente meneando la boca y que además rebotara en las paredes cuando llegara al límite del escenario? Si te ves capaz de programarlo puedes intentar hacerlo basándote en el que ya hemos hecho y te puedes bajar la solución de la página web de la Liga Nacional de Robótica (programa OSO_REBOTADOR); pero si te parece muy complicado sigue leyendo y en el siguiente capítulo verás un programa paso a paso para ir ampliando nuestros programas.

Ah, enhorabuena, ¡ya eres un programador informático!

ANIMACIONES

A partir de aquí vamos a usar lo que hemos aprendido, y ya verás qué cantidad de cosas tan alucinantes vas a hacer con todo ello. Puede parecer que nos queda mucho para conseguir hacer juegos muy chulos, pero estamos muy cerca de nuestro objetivo y tenemos todos los elementos básicos para cumplirlo con éxito. ¡Vamos a resumir todo lo que sabes!

- Cambiar el gato que viene de serie por otra imagen (el oso panda).

- Controlar la posición de nuestro oso panda.

- Interactuar con el teclado o el ratón para que se mueva nuestro oso.

- Cambiar la apariencia de nuestro oso.

- Reproducir sonidos.

- Poner condiciones y hacer bucles.

No eres un sabio de la programación..., pero SABES UN MONTÓN sobre ella.

Animaciones para fondos

Ahora vamos a utilizar los fondos para hacer algo más complicado: películas animadas.

¿Has pensado alguna vez cómo se hacen las pelis de dibujos animados? Seguro que sí. El movimiento de un elemento se consigue combinando muchas imágenes independientes y luego poniéndolas en secuencia rápidamente. Utilizando los fondos y los disfraces nosotros podemos hacer lo mismo con Scratch: animar una imagen.

Fíjate en los siguientes fondos.

Estas imágenes son diferentes fondos de un solo objeto, así que vamos a configurarlo.

1. Primero le damos a F5 para iniciar el proyecto de cero.

2. Pinchando en «Borrar» borramos el gato de la escena.

3. A continuación importamos nuevos fondos para el escenario (en la parte inferior derecha) hasta tener todas las imágenes importadas.

Esto que acabas de hacer también puedes hacerlo tú creando las imágenes de cero; es decir, no tienes por qué usar las que te facilitamos, sino que puedes pintar tu propio escenario. Por ejemplo, pinta un círculo amarillo que haga de sol. Una vez que tengas pintado el sol, pulsa sobre el fondo1 con el botón derecho del ratón y haz clic en «Duplicar». Con esta acción se crea un nuevo fondo de escenario idéntico al que teníamos y que puedes modificar añadiendo a la herramienta de dibujo otro elemento, por ejemplo, la arena o un árbol.

Nosotros le hemos dibujado al sol unos rayos de luz. Así podemos hacer una animación que tenga dos fondos y directamente probar el programa. Tú, si quieres, puedes crear el número de disfraces que te apetezca e ir añadiendo elementos en cada nuevo disfraz, por ejemplo, rayos de luz al sol.

Si te animas a crear muchas escenas, al final tendrás algo parecido a lo que ves en la siguiente imagen, igual o parecido a lo que hubieras tenido si las hubieras subido desde tu disco duro.

No te cortes y dibuja cualquier cosa que se te ocurra, por muy rara que te parezca. Lo más importante es que vayas duplicando los disfraces, así los nuevos que añadas tendrán las mismas propiedades que los anteriores, eso es lo que provoca el efecto de animación.

Ahora ya solo nos queda crear el programa, algo que te va a resultar muy fácil porque ya hemos programado el cambio de disfraz del oso anteriormente. Ahora usaremos un bloque de programación parecido al que vimos antes. En este caso, el bloque de «Cambiar fondo» nos va a ir mostrando los disfraces de que disponemos para nuestro escenario, de forma que este se construya poco a poco a medida que se ejecuta cada línea de código. Aquí tienes el programa.

Tienes que poner tantos bloques de «Cambiar fondo» como fondos hayas creado... menos uno. Es decir, si tienes cinco fondos, tienes que poner cuatro bloques de «Cambiar fondo», porque como el primer fondo ya lo tienes al empezar el programa, solo tienes que cambiar de fondo cuatro veces.

¡Ya sabes hacer tus propias animaciones! En este caso hemos usado las animaciones para crear una escena, como si fuera el fondo (en inglés, el «background») de nuestro escenario, pero también las puedes usar para hacer, por ejemplo, explosiones, plantas que crecen, huevos que se abren... Las posibilidades son ilimitadas, podrías incluso hacer tu propia peli de dibujos animados ¡interactiva!

Disfraces para dar movimiento a los objetos

Por el momento hemos cambiado el fondo, ¡pero queremos que nuestro programa sea A-LU-CI-NAN-TE! Vamos a intentar controlar las animaciones de los personajes que aparecen en nuestros juegos. ¿Te animas?

Lo primero que tienes que tener en cuenta es que conseguir efectos de movimiento realistas es difícil. Las imágenes hay que crearlas con muchísimo cariño y dedicación para que al ponerlas en secuencia tengan un movimiento fluido, es decir, que realmente parezcan estar «vivas». Así que, para facilitarte el trabajo te vamos a dar hechas algunas imágenes de cómo se abre un huevo.

Estas imágenes parecen iguales, pero todas tienen una pequeña modificación: una grieta que se va haciendo en el huevo que se asemeja al resquebrajamiento de su cascarón justo antes de que nazca, por ejemplo, un pajarito y haga pío pío. Oh, qué adorable... Aunque pensándolo bien, también podría ser un dinosaurio robotizado con cañones termonucleares. Como es tu juego, del huevo puede nacer lo que quieras.

Para poder montarlo en Scratch, es necesario que repitas los pasos del ejercicio anterior. En este caso no tienes que crear los disfraces, sino que debes «importarlos», es decir, seleccionarlos desde la carpeta del ordenador donde estén las imágenes del huevo.

Este esquema te ayudará bastante, pero lo mejor es que practiques por tu cuenta todos los pasos, ¿vale?

1. Reinicia Scratch pulsando F5.

2. Usando la opción «Subir objeto» selecciona la primera imagen y añádela a Scratch, eso creará un objeto con el huevo intacto.

3. Pulsa en el objeto del huevo y pulsa en la pestaña de «Disfraces».

4. Añade las imágenes del huevo al objeto del huevo para que tenga varios disfraces con la opción «Carga un disfraz».

Al final la pantalla tiene que tener una pinta como ves en la siguiente imagen…

Lo que nos falta por hacer es lo más interesante: el programa que permite mostrar la evolución del huevo. Vamos a utilizar el mismo procedimiento que hemos usado con el fondo del sol, es decir, vamos a ir cambiando los disfraces del huevo. Para empezar, intenta dibujarlo tú mismo. Si no lo consigues, lo puedes descargar de la web de la Liga Nacional de Robótica e importarlo. Cuando lo tengas, verás que en este programa el huevo se rompe poco a poco. Prueba a cambiar el tiempo de espera entre las diferentes imágenes para ver cómo queda, ¿a que es mono?

Ya hemos terminado de programar animaciones. Ahora vamos a seguir con temas de «Control», que es lo que nos va a permitir hacer juegos interactivos.

Control de personajes

Reto: Utilizando un programa de dibujo intenta terminar la apertura del huevo haciendo que su parte superior se mueva hacia arriba y aparezca en ella una cabeza del animal que desees.

CONTROL DE PERSONAJES

Si alguna vez has jugado a juegos de ordenador, quizá sepas que las letras W, A, S y D son letras importantes. En los juegos antiguos era muy habitual que estas letras se usaran para generar movimiento, y en algunos juegos de ordenador se usan todavía:

- La letra A mueve un personaje a la izquierda.

- La letra D mueve un personaje a la derecha.

- La letra S mueve un personaje hacia abajo.

- La letra W mueve un personaje hacia arriba.

Vamos a hacer un programa que nos permita controlar el oso panda por el escenario, de la siguiente manera: cuando pulsemos la letra «a», que el oso se mueva a la izquierda; cuando pulsemos la letra «d», que se mueva a la derecha; y así con las cuatro letras. Como siempre, vamos por pasos.

1. Creamos un nuevo proyecto pulsando F5.

2. Borramos el gato de Scratch y añadimos el oso panda como ya hicimos anteriormente.

3. Añadimos el siguiente programa.

Vamos a leer lo que hace este programa:

- Cuando se pulse la letra «d»

- Apunta hacia la derecha (90 grados es la derecha en Scratch)

- Muévete 10 pasos. (Realmente no son pasos, sino píxeles, pero en Scratch lo llaman pasos)

Ahora ya puedes pulsar la letra «d» del teclado: el oso debe moverse hacia la derecha.

Para que el oso se mueva también hacia la izquierda, tenemos que añadir un segundo «Evento» que queremos controlar. El evento es, precisamente, la pulsación de tecla; así que tenemos que añadir lo que ves en la siguiente imagen.

Si pruebas el programa, verás que ocurre una cosa poco deseable: el oso se gira sobre sí mismo y está bocabajo... ¡Qué rollo!, no mola mucho que se quede así, ¿verdad? ¿A que prefieres que siga mirando hacia la derecha? Y desde luego no queremos que se ponga bocabajo. Vamos a hacer un truco, que consiste en revisar los bloques para que el programa haga mejor lo que queremos.

Fíjate en la siguiente imagen.

Primero tira los bloques que ves en la imagen separados:

- Bloque verde con un símbolo «menos» en medio.

- Bloque azul que pone «posición en x».

Con estos bloques le vamos a decir a Scratch: «Oye, Scratch, quiero que cuando alguien pulse la letra «a», la posición del oso sea su posición actual MENOS 10 pasos».

Sí, esto es raro, y estamos seguros de que con un dibujo lo vas a entender mejor.

¿Ves esa X y esa Y en la imagen anterior? La X y la Y te permiten saber la posición del oso; a medida que el oso se mueve de izquierda a derecha, la X va aumentando; y si el oso se mueve de derecha a izquierda, la X va disminuyendo.

¿Qué piensas que hará la combinación de bloques de la imagen anterior donde aparece «posicion_en_x» combinado con «-10»?

NOTA: Tienes que leer esta línea de la siguiente forma: posición del oso MENOS 10.

Ahora sí, vamos con la explicación. Imagínate que la posición del oso fuera 40, pues al restarle 10 con esta combinación de bloques estamos consiguiendo que sea 30. O sea, el oso se moverá hacia la izquierda del escenario.

Ya solo queda indicarle a Scratch que queremos asignarle esa nueva posición al valor de X, de tal forma que el nuevo valor de X sea el valor anterior de X -10.

Esto es un poco raro, pero con el tiempo te acostumbras a ello. Sigue leyendo y verás cómo vas entendiéndolo cada vez mejor.

¿Qué es una asignación de valores?

Lo que acabamos de hacer (asignarle al oso una posición más a la izquierda de la habitual) es lo que se llama «asignar un nuevo valor a una variable».

La variable es la posición del oso, y el valor es que, cada vez que pulsamos la «a», se le vaya asignando un valor más pequeño de X. Algo como lo que ves ahora.

Posición X (horizontal) del oso = 80

Posición X (horizontal) del oso = Posición X (horizontal) del oso - 10

Sí, la segunda línea es muy difícil de entender, así que mírala con paciencia... ¿Y qué quiere decir? Se lee de la siguiente manera:

«Sea cual sea la posición del oso, vamos a hacer que sea igual a la posición que tiene restándole 10.»

Es decir, la nueva posición del oso va a ser 70.

Como todo esto aún puede sonarte un poco extraño, vamos a hacer un programa que muestre el funcionamiento moviendo el oso desde la posición X = 0 a la posición X = 100.

Sabemos lo que estás pensando: «Vaya, este programa sí que es complicado.» No te preocupes, que vamos despacio para que lo entiendas. Primero pinta todos los bloques sueltos y, a continuación, júntalos.

«Juntar» bien los bloques es superimportante y tienes que seguir este orden:

1. Arrastra el «posición en x» dentro del agujero izquierdo del bloque verde.

2. Arrastra el bloque verde con el signo + dentro del circulito del «dar a x el valor».

3. Arrastra el «posición x» que todavía no has usado y ponlo en el cuadrado del bloque «decir»

4. Coloca el bloque «decir» y el bloque «dar a x el valor» dentro del bucle «repetir» para que la posición del oso cambie tantas veces como hemos indicado en el bucle (100 veces). Este paso es muy importante.

5. Mueve todo el bloque «Repetir» y pégalo al bloque «al presionar la tecla espacio». Este es el último paso y debería quedarte como el programa completo del principio.

Cuando lo ejecutes pulsando la barra espaciadora, verás que tu oso se mueve diciendo la posición en la que está.

El número que dice el oso es su posición en X, es decir, su posición horizontal, pero también puedes cambiar la posición vertical y hacer que el oso vaya arriba o abajo.

Reto: Crea un escenario con una escalera muy sencilla (uno o dos escalones son más que suficiente). A continuación intenta que el oso suba la escalera. Para conseguirlo, tienes que modificar los valores de x e y. ¡Suerte!

El lobo feroz y los Sensores

Ya sabes que los bloques azul claro corresponden a los Sensores, y que nos van a ayudar a hacer juegos interactivos; hasta ahora hemos conseguido controlar el oso panda. Para que la cosa se ponga emocionante, vamos a buscarle un enemigo. Nosotros hemos elegido un lobo feroz (bueno quizá no tanto, vale), que intentará cazarlo. ¿Qué te parece? ¡Ah, pero hay condiciones! Si nuestro lobo se mueve y toca al oso panda, este último pierde una vida y la partida finaliza.

¿Verdad que es feroz?

A medida que avanzamos, tú sabes más sobre cómo programar y, claro, nosotros te damos menos detalles sobre cómo hacerlo. ¿Te has dado cuenta? Por eso estamos seguros de que puedes resumir paso a paso todo lo que has hecho en este proyecto e intentar crear lo que ves en la imagen inferior.

Bueno, para que no te pierdas, te ayudamos un poco con la siguiente lista:

1. Recarga el navegador pulsando F5 para limpiar lo que tengas en pantalla (guarda antes lo que quieras guardar).

2. Crea un nuevo objeto copiando de tu disco duro la imagen del lobo feroz y del oso panda.

3. Selecciona el oso panda en el área de «Objetos» y programa los bloques que ves en la pantalla:

— Un bloque amarillo de evento con la bandera verde.

— Un bloque naranja «si».

— Un bloque azul claro «tocando» como condición del bloque «si» y selecciona el lobo.

— Un bloque violeta «decir» dentro del bloque «si» que diga lo que tú quieras.

Una vez hecho esto ¡ya puedes ejecutarlo! Lo curioso de este programa es que al clicar en la bandera, dependiendo de si el oso está sobre el lobo, el oso panda dirá «Ouch» o no lo dirá. Esto nos va a venir muy bien para hacer el juego de «Esquivar al lobo», en el que nuestro oso panda perderá la partida cuando choque con el lobo.

Nuestro juego se llamará «No te choques con el lobo».

En el código anterior lo que hacemos es mover el oso panda cuando pulsamos la letra «a» y además comprobamos si cada vez que se pulsa la letra «a» el oso panda está tocando el lobo feroz, de ser así el oso dirá «¡Me has pillado!».

Si te fijas el programa es un poco tonto porque no puedes mover el lobo feroz, solo el oso panda puede lanzarse sobre el lobo, así que más adelante haremos que el lobo también se mueva, la idea es que el lobo persiga al oso panda mientras que el oso panda corre para escaparse.

Movimiento y colisiones

Con todo lo que hemos aprendido hasta aquí, por fin podemos crear un juego al que realmente podamos jugar. Su dinámica consiste en que el jugador controle el oso, mientras que el lobo se mueve él solito por la pantalla. Si en algún momento el oso panda toca el lobo, se acaba la partida.

Este tipo de juegos es complicado, así que no te preocupes, te ayudamos de nuevo. Este programa cuenta con tres partes principales; ahora solo las nombramos y más adelante te explicamos cómo funcionan.

1. Mover el objeto del lobo feroz de izquierda a derecha rebotando en las paredes.

2. Controlar el oso con el teclado.

3. Si el sensor detecta que el oso toca el lobo, hemos perdido.

Como tenemos ya programada la parte de mover el oso panda hacia la izquierda nos vamos a centrar primero en el lobo feroz para que esté constantemente moviéndose por la pantalla. Asegúrate de seleccionar el lobo feroz en la parte inferior de la pantalla para que el área de código quede libre y podamos programar el comportamiento del lobo.

Fíjate que además hemos reducido el tamaño del oso panda y del lobo feroz usando el campo «tamaño» que está en la parte de los Objetos. Así es más difícil que se choquen entre ellos y podemos apartar el oso panda a un lateral y ver cómo el lobo feroz se mueve de lado a lado.

Intenta leer el programa sin ayuda. ¿Qué dirías que hace el programa línea a línea?

— Cuando se pulsa la bandera.

— Por siempre (forever).

— Si la dirección (en la que está apuntando el lobo) es -90 (hacia la izquierda).

— Cambia la posición X restándole dos (muévelo un poco hacia la izquierda.

— Si no (entonces está apuntando a la derecha).

— Cambia la posición X aumentándole dos (muévelo un poco a la derecha).

— Al final, si estás al borde del escenario, rebota con la pared y date la vuelta.

Cuando ejecutas este programa deberías ver al lobo moverse de extremo a extremo de la pantalla, tal y como aparece en la imagen.

Ahora tenemos que controlar el oso panda porque anteriormente solo podíamos moverlo a la izquierda con la letra «a» pero queremos poder moverlo en los cuatro sentidos posibles para poder evitar al lobo feroz. Asegúrate de seleccionar el objeto del oso panda en el área de «Objetos» para que se vea el bloque que habíamos programado hace un rato con la letra «a».

Este programa que ves controla los movimientos de las flechas del teclado. Si pulsas la tecla «d», el oso debería moverse a la derecha; si pulsas la tecla «w» debería moverse hacia arriba. Básicamente el programa te permite mover el oso panda por el escenario, y como puedes ver en el parte superior del código cuando el oso panda choque con el lobo dirá «Me has pillado», que es lo que el jugador del oso pretende evitar.

Ya solo nos falta la parte de «sentir» cuando el oso panda y el lobo entran en contacto y que indica que la partida ha terminado.

Lo que hemos hecho hasta ahora nunca deja de funcionar, incluso cuando los animales chocan, así que necesitamos una variable que controle el final de la partida... lo que se llama una variable de control. Vamos a crear una variable en el área de bloques «Variables» como se ve en el pantallazo anterior. Esa variable la pondremos a 1 cuando choquen los animales, y ya solo nos queda indicarle al lobo que tiene que dejar de moverse cuando el juego haya terminado

Vamos a cambiar el bucle «por siempre» por un «repetir hasta que» de forma que podamos poner una condición de salida del bucle... es decir, que podamos decirle al lobo «Oye, que cuando pilles al oso panda ya puedes dejar de moverte» el código del lobo al final debe tener esta pinta:

Cuando pulses la banderita el lobo debería moverse porque la variable «finalPartida» vale cero, como ves en la siguiente pantalla.

Si mueves el oso panda en la trayectoria del lobo verás que el lobo deja de moverse porque la partida ha terminado; si quieres volver a jugar deberás apartar el oso panda del lobo y a continuación hacer clic con el ratón en «dar a la variable finalPartida el valor cero».

UN JUEGO MULTIPANTALLA

Aunque todavía nos quedan cosas por aprender, ya puedes hacer juegos muy chulos que sean, al menos, multipantalla; juegos en los que nuestro oso se mueva hasta el borde del escenario y la escena se transforme automáticamente. Imagínate que el oso anda por la calle y entra en una casa; una escena parecida a la siguiente imagen.

Lo que ves aquí son dos fondos (background en inglés) diferentes, que vamos a usar para que cuando el oso esté en el borde del escenario automáticamente se cambie el fondo para que se vea otro fondo.

Creamos un nuevo programa. ¿Qué código piensas que hace falta para conseguir que el fondo cambie cuando el oso esté al borde del escenario? ¿Cómo te imaginas que vamos a mover el oso hasta el lado contrario del escenario cuando cambie el fondo? Vamos poco a poco.

Para añadir nuevos fondos Scratch te permite subir imágenes que tengas en tu ordenador, aunque primero las tendrás que dibujar con alguna herramienta de dibujo.

A continuación añadimos el fondo que tenemos en nuestro ordenador uno a uno. Y por último vamos a hacer un programa que hará que cuando el oso llegue al borde de la pantalla, el fondo cambie y, automáticamente, también la posición del oso, que se situará a la izquierda, para simular el cambio de pantalla.

Leamos el programa línea a línea:

— Cuando se pulsa la tecla derecha del teclado.

— Mueve el oso panda 10 pasos.

— Si la posición de X (la posición horizontal) es mayor que 190 (borde derecho de la pantalla) entonces...

— Mueve el oso a la posición X = -140 Y = 0 (parte izquierda de la pantalla).

— Cambia el fondo al fondo 2.

Con este programa cambias el fondo cuando el oso avanza hacia la derecha. Ahora vamos a hacer que si el oso se sale por la izquierda, volvamos a tener la pantalla inicial.

Es curioso porque podría parecer que la forma de hacerlo es girar el personaje 180 grados, pero ya sabemos que eso dejaría el oso bocabajo y no queremos eso, así que para andar hacia la izquierda tenemos que usar una combinación de bloques que ya vimos hace pocas páginas... mira cómo quedaría el código para hacer andar el oso hacia la izquierda.

Con este código, al hacer andar el oso panda hacia la izquierda y derecha veremos que el fondo va cambiando y su posición también se cambia, con lo que da la impresión de que pasa de una habitación a otra (obviamente tenemos que haber cargado imágenes como fondos para poder usarlos).

Repetir y las variables de control

Hasta ahora hemos visto qué hace un bloque «si». Básicamente mira una condición, si se cumple entras en el «si», pero si no se cumple continúa ejecutando, ¿que hable el bloque «Repetir»? ¿y el bloque «hasta»? Para controlar cómo se ejecuta un bucle se usan variables de control. ¿Recuerdas la variable «finalPartida»? Pues esa variable es lo que se llama una variable de control.

Este código que te ponemos arriba es un ejemplo de bucle controlado por una variable que llega hasta 10.

Si programas este ejemplo en tu código y pulsas el espacio en el teclado una vez verás cómo el oso cuenta del 0 al 9 y termina el programa. Eso se debe al bucle de control. ¡Quizá te parece extraño! Es cierto que podría parecer que el programa tiene que contar hasta 10; pero, si miras el programa línea a línea, el bucle termina cuando la variable de control del bucle vale 10 y, por lo tanto, el oso nunca llega a decir 10.

Las variables de «Control» se pueden usar para hacer cualquier cosa:

— Cambiar la posición del oso.

— Hacer cálculos matemáticos.

— Hacer juegos que se repiten constantemente.

En los ejemplos que verás en el siguiente bloque haremos uso de estos bucles en varias situaciones.

TE TOCA A TI. HAGAMOS UN JUEGO DE JUSTAS

Ya estamos a punto de llegar al final de este libro y de programar un juego completo, ¡qué emoción! ¿Verdad que programar ha resultado muy divertido? Sabemos que has puesto todo tu cuidado, paciencia y atención a la hora de hacerlo, que es justo lo que se necesita para programar como los mejores.

Cualquier juego que sea mínimamente entretenido requiere de mucha programación; sin embargo, te vamos a presentar uno que es tan fácil tan fácil de programar que hasta puedes invitar a jugar (si los tienes) a tus hermanos pequeños. Este juego, por cierto, ha pasado el control de calidad con mi hijo de 6 años y con sobrinos de 9 y 10 años. Obviamente cualquier jugador experimentado de Fortnite dirá ¡Pero esto es una tontería! Sí, pero precisamente programar este tipo de juegos y luego jugar a ellos les puede dar la idea del esfuerzo y del trabajo que hay detrás de un buen desarrollo de software.

Hace ya mucho tiempo (en 1982) apareció un juego llamado Joust. Esta palabra en inglés significa «justa». Como seguramente no la habrás oído en toda tu vida, te explicamos que una justa es un torneo a caballo y con lanza en el que se mide la fuerza de dos adversarios. El juego del que te hablamos, sin embargo, no representa una justa normal, es un poco raro: un personaje va subido a un avestruz en vez de a un caballo, y si juegas en modo «dos jugadores», el segundo jugador monta en una cigüeña.

Lo gracioso de Joust es que ambos animales pueden volar por el escenario y deben enfrentarse hasta que gane uno de los dos. ¿Quién gana? El jugador que consigue que su figurita golpee por encima a la del contrincante... sí, ya sé que la condición de victoria es sencillita, pero en los años ochenta los juegos eran muy sencillos.

Este juego se puede construir en iteraciones, es decir, pasito a pasito. Sí, no te preocupes, te explicamos la palabreja. Una iteración es un «empujón» que le das a tu programa, es decir, que al programar siempre intentas llegar a una versión de tu juego que funcione, aunque, por supuesto, quizá podrías mejorarlo en un futuro para que fuera todavía más divertido.

Este programa tiene dos objetos que tenemos que colocar en el escenario: el del avestruz y el de la cigüeña; el programa de ambos es prácticamente igual. Debemos poder mover las figuras por el escenario usando las teclas del teclado; sin embargo, como tenemos solo un teclado para jugar hay que compartirlo con el segundo jugador. La cosa se pone interesante, ¿no?

Lo primero que tienes que hacer es dibujarte una cigüeña y un avestruz, lo puedes hacer en Paint, en Scratch o donde quieras, deben ser imágenes muy pequeñitas y luego las subes a Scratch como te hemos enseñado.

Las teclas que controlarán el avestruz son W, A, S y D, mientras que las teclas que controlarán la cigüeña son las flechas del teclado.

El programa es el siguiente:

Si pulsa letra A à Mueve avestruz a la izquierda

Si pulsa letra D à Mueve avestruz a la derecha

Si pulsa letra W à Mueve avestruz hacia arriba

Si pulsa letra S à Mueve avestruz hacia abajo

El programa de la cigüeña es muy parecido y nos permite controlar el movimiento de ambos objetos por la pantalla, de manera que dos jugadores diferentes, con cuatro teclas diferentes, puedan mover cada uno de sus objetos.

Fácil, ¿no? Ahora necesitamos aplicar lo que se llama «detección de colisiones», es decir, que cuando uno de los objetos toque el otro, se compare la posición vertical (de Y) de ambos objetos y en base a eso se decide quién ha ganado. Una forma de hacer esto es controlar en cada movimiento si un objeto está ocupando el espacio del otro, y en ese caso tendremos que mirar:

Si (posicionVerticalDeAvestruz < posicionVerticalDeCigüeña) entonces

Decir «Gana la Cigueña»

Si no

Si (posicionVerticalDeAvestruz > posicionVerticalDeCigüeña) entonces

Decir «Gana el Avestruz»

Si no

Decir «Empate»

¡Ya puedes jugar con quien tú decidas! Recuerda: el objetivo es pulsar las teclas muy rápido para que tu personaje golpee al personaje contrario por encima.

Si ves que siempre gana uno de los dos jugadores, puedes dar ventaja al que peor puntuación obtenga aumentando el valor de movimiento, es decir, que cuando pulse una tecla, una de las dos figuritas se mueva más que la otra (en vez de +2 le podéis poner +4). Así le das facilidad para moverse más rápidamente y con ellos pueda tomar algo de ventaja, esto es muy útil si estás jugando con niños pequeños de 6 años porque se moverán mucho más rápido que tú. El avestruz y la cigüeña no tienen que estar siempre uno a la izquierda y otro a la derecha. Ten en cuenta que puedes rodear por debajo el objeto de tu contrario, aunque es un poco arriesgado si tu oponente de repente baja rápidamente y te golpea en la cabeza; sí hace esto, ¡ganará!

Este juego se puede ampliar fácilmente. En la web de la Liga Nacional de Robótica te dejamos el programa disponible. Encontrarás varios niveles de perfeccionamiento, según vayas mejorando ¡podrás ir incluyendo nuevas cosas a tu videojuego!

ANEXO

Aquí tienes detallados los programas avanzados que podrás descargar en la web de la Liga Nacional de Robótica. ¿Estás preparado para programar a nivel avanzado?

- ProgramaJoustv1. Solo se mueven las criaturas.

- ProgramaJoustv2. Las criaturas se mueven y la partida se termina cuando colisionan.

- ProgramaJoustv3. Todo lo anterior + las criaturas dicen «He ganado» o «He perdido», dependido de cuál de las dos estuviera más arriba.

- ProgramaJoustv4. Añadimos un botón de «reset», que devuelve la partida al inicio para que puedas repetirla sin tener que recargar el programa.

- ProgramaJoustv5. Añadimos sonidos al programa para que los animales hagan ruiditos al moverse.

¡Scratch, la programación al alcance de los más pequeños, de la mano de los máximos expertos en España

CubiertaDragones de bocas llameantes, gatos que caminan boca abajo, ranas con bufanda, bosques misteriosos... Todo lo que conocemos e imaginamos puede construirse en un videojuego. ¡Alucinante! Pero, ¿cómo se consigue todo esto?

Para crear un videojuego solo necesitamos dar las instrucciones correctas a nuestro ordenador. A este acto de paciencia se le llama «programar». ¡No te asustes! Programar un videojuego sencillo no es muy complicado. En este libro te enseñaremos cómo utilizar Scratch, el lenguaje ideal para los que se inician en la programación.

¿Te animas a crear tu propio videojuego? ¿Sí? Pues... ¡Bienvenido a SCRATCHMANÍA!

Edición en formato digital: noviembre de 2018

© 2018, Raúl Lapeira

© 2018, Penguin Random House Grupo Editorial, S. A. U.

Travessera de Gràcia, 47-49. 08021 Barcelona

© 2018, Alejandra Morenilla, por las ilustraciones

Penguin Random House Grupo Editorial apoya la protección del copyright. El copyright estimula la creatividad, defiende la diversidad en el ámbito de las ideas y el conocimiento, promueve la libre expresión y favorece una cultura viva. Gracias por comprar una edición autorizada de este libro y por respetar las leyes del copyright al no reproducir ni distribuir ninguna parte de esta obra por ningún medio sin permiso. Al hacerlo está respaldando a los autores y permitiendo que PRHGE continúe publicando libros para todos los lectores. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, http://www.cedro.org) si necesita reproducir algún fragmento de esta obra.

ISBN: 978-84-17424-71-8

Composición digital: leerendigital.com

www.megustaleer.com