Una vez superadas estas dos fases, se abre un mundo de posibilidades al aprendizaje del pensamiento computacional bas\u00e1ndose en el apasionante dise\u00f1o de videojuegos con Scratch. Durante este proceso se exponen conceptos y procedimientos relacionados con la creaci\u00f3n de juegos que les resultan familiares al alumnado porque los han disfrutado como usuarios y se trabajan algunos modelos b\u00e1sicos de juegos que les permiten adentrarse en este apasionante mundo del dise\u00f1o.<\/p>\n
En el dise\u00f1o y programaci\u00f3n de videojuegos ser\u00e1 necesario dominar y aplicar conocimientos de distintas \u00e1reas: matem\u00e1ticas, lengua castellana, ingl\u00e9s, m\u00fasica, ciencias, pl\u00e1stica \u2026 Precisamente explicitar estos aprendizajes constituir\u00e1 el anclaje curricular que justifica esta iniciativa en el entorno educativo.<\/p>\n
Scratch para dise\u00f1ar videojuegos<\/h2>\n
Scratch<\/strong><\/a> proporciona una herramienta de programaci\u00f3n visual muy potente para crear videojuegos. Sus caracter\u00edsticas permiten afrontar un ambicioso programa de aprendizaje de pensamiento computacional basado en el dise\u00f1o de distintos prototipos de videojuegos.<\/p>\n En este art\u00edculo se expone una propuesta de contenidos<\/strong> centrada en la teor\u00eda del dise\u00f1o de videojuegos<\/strong> que se puede tomar como referencia para proponer distintos desaf\u00edos al alumnado as\u00ed como modelos de videojuegos susceptibles de customizaci\u00f3n.<\/p>\n Son los personajes u objetos que situamos sobre el escenario. En Scratch es posible dibujar tus propios personajes o bien importarlos a partir de archivos gr\u00e1ficos en formato JPEG, GIF, PNG \u2026 Si se importa un GIF animado se crea un sprite con distintos disfraces, uno por cada estado del gif original.<\/p>\n Una de las t\u00e9cnicas m\u00e1s utilizadas en los videojuegos es la animaci\u00f3n de sprites sobre el escenario. Se puede programar un movimiento simple de traslaci\u00f3n usando un bucle forever<\/strong> (por siempre) y un bloque move <\/strong>(mover) X pasos o p\u00edxeles.<\/p>\n \u00a0<\/strong>En ocasiones es necesario animar varios personajes u objetos a la vez y de forma independiente. Todos ellos pueden iniciar su movimiento al iniciarse el juego y cada uno ejecutar\u00e1 su propia secuencia de programaci\u00f3n y distintas del resto.<\/p>\n Fuente: https:\/\/scratch.mit.edu\/projects\/317980114<\/a><\/u><\/p>\n Los personajes que disponen de una secuencia animada de disfraces se pueden mostrar mediante una animaci\u00f3n en bucle usando el bloque next custome <\/strong>(siguiente disfraz). Esto transmite la sensaci\u00f3n de realidad consiguiendo que el avatar camine o vuele.<\/p>\n Un bot\u00f3n es un sprite sobre el cual es posible realizar un clic o un tap para desencadenar una acci\u00f3n. La acci\u00f3n puede ser mostrar iniciar una animaci\u00f3n, saltar a otra escena, aparecer\/desaparecer un objeto, reproducir un sonido, etc. Es posible dise\u00f1ar un bot\u00f3n que muestre distintos aspectos o estados gr\u00e1ficos en funci\u00f3n del evento que recibe: normal (reposo), over (sobre) y press (presionado).<\/p>\n Scratch contempla la posibilidad de integrar audios en un videojuego. MP3 es el formato de archivo de audio recomendado. Los bloques b\u00e1sicos que permiten controlar la reproducci\u00f3n del audio son: play sound \u2026 until done<\/strong> (reproducir sonido \u2026 hasta terminar), start sound \u2026 <\/strong>(iniciar sonido \u2026) y stop all sounds <\/strong>(detener todos los sonidos).<\/p>\n El audio se puede reproducir como m\u00fasica de fondo o bien como sonido asociado a un evento (pulsaci\u00f3n de bot\u00f3n, colisi\u00f3n de sprites, di\u00e1logos \u2026)<\/p>\n Fuente: https:\/\/scratch.mit.edu\/projects\/318130720<\/a><\/u><\/p>\n Para controlar el movimiento del avatar en el escenario se pueden utilizar distintos medios:<\/p>\n Teclado<\/strong><\/p>\n Se utiliza cuando el juego se juega en un ordenador PC usando las teclas de flechas. Se utilizan los bloques when \u2026 key pressed <\/strong>(al presionar tecla \u2026) para capturar los eventos de pulsaci\u00f3n de las teclas y programar el comportamiento del sprite en cada caso.<\/p>\n Fuente: https:\/\/scratch.mit.edu\/projects\/318136520<\/a><\/u><\/p>\n Rat\u00f3n<\/strong><\/p>\n Al mover el puntero del rat\u00f3n sobre el escenario, el sprite lo seguir\u00e1 hasta acercarse a su posici\u00f3n. Es un medio que se puede utilizar en todo tipo de dispositivos. Se utiliza el bloque point towards mouse-pointer <\/strong>(apuntar en direcci\u00f3n puntero del rat\u00f3n) para orientar al sprite en la direcci\u00f3n del puntero del rat\u00f3n para moverse en su direcci\u00f3n X pasos.<\/p>\n Fuente: https:\/\/scratch.mit.edu\/projects\/318176221<\/a><\/u><\/p>\n Botones en pantalla<\/strong><\/p>\n El control del avatar mediante la pulsaci\u00f3n de sprites-botones situados en pantalla se utiliza cuando el videojuego se va a utilizar en un dispositivo m\u00f3vil que carece de teclado f\u00edsico. Para implementarlo en el bot\u00f3n se utiliza el bloque broadcast identificador <\/strong>(enviar identificador) que env\u00eda una se\u00f1al y en el avatar se utiliza el bloque when i received identificador <\/strong>(cuando recibo identificador) para ejecutar las acciones correspondientes cuando se recibe esa se\u00f1al.<\/p>\n Fuente: https:\/\/scratch.mit.edu\/projects\/327811840<\/a><\/u><\/p>\n Las escenas son las pantallas en que se divide y organiza un videojuego. En Scratch cada escena tiene una imagen de fondo distinta.\u00a0 La secuencia de aparici\u00f3n de las escenas se programa desde la l\u00f3gica del juego permitiendo al usuario una navegaci\u00f3n secuencial entre ellas o bien saltar de una a otra en funci\u00f3n de sus logros.\u00a0 Los bloques b\u00e1sicos que permiten cambiar la imagen de fondo son: switch backdrop to ..<\/strong>. (cambiar fondo a \u2026) y next backdrop<\/strong> ( siguiente fondo)<\/p>\n Una variable es un espacio de memoria donde se almacena un valor (num\u00e9rico, cadena de texto, verdadero\/falso …). Consta de un identificador que permite referenciarla y utilizarlo para recuperar el valor que tiene almacenado.<\/p>\n Las variables se suelen utilizar en los videojuegos para almacenar el n\u00famero de tentativas o de vidas, el marcador de puntos, etc.<\/p>\n Para crear una variable:<\/p>\n Para eliminar una variable:<\/p>\n Los bloques b\u00e1sicos que permiten trabajar con las variables son: set variable to valor<\/strong> (define el valor de la variable a ..) y change variable by 1<\/strong> (incrementa el valor de la variable en 1).<\/p>\n La clonaci\u00f3n de sprites permite crear y configurar un sprite para luego generar tantas copias como sean necesario sobre el escenario mediante programaci\u00f3n en tiempo de ejecuci\u00f3n del programa. Este sistema facilita la creaci\u00f3n de una colecci\u00f3n de obst\u00e1culos, enemigos \u2026 en tiempo real.\u00a0 Los bloques que permiten gestionar los clones son:<\/p>\n Fuente: https:\/\/scratch.mit.edu\/projects\/318219370<\/a><\/u><\/p>\n El bloque pick random<\/strong> (n\u00famero aleatorio) es un bloque que devuelve un valor num\u00e9rico de forma aleatoria dentro de un intervalo que se define. Es muy \u00fatil para introducir en el videojuego el principio de incertidumbre permitiendo comportamientos no predecibles de los sprites sobre el escenario: posiciones iniciales, trayectorias …<\/p>\n Para programar la ubicaci\u00f3n aleatoria de un sprite sobre el escenario se puede utilizar el bloque go to random position <\/strong>(ir a posici\u00f3n aleatoria).<\/p>\n Fuente: https:\/\/scratch.mit.edu\/projects\/318364653<\/a><\/u><\/p>\n Si deseamos implementar un movimiento aleatorio de un sprite \u201cpez\u201d a un lado y otro del escenario se puede utilizar la secuencia recogida en la imagen. El bloque pick random \u2026 to \u2026 <\/strong>es igual a un valor entonces genera un cambio de direcci\u00f3n de 180 grados.<\/p>\n Fuente: https:\/\/scratch.mit.edu\/projects\/318355499<\/a><\/u><\/p>\n En Scratch las rutinas o secuencias de programaci\u00f3n que se repiten a menudo se pueden modularizar creando los bloques personalizados <\/strong>en la pesta\u00f1a My Blocks <\/strong>(Mis bloques). Cada bloque personalizado consta de un identificador o nombre, uno o varios par\u00e1metros opcionales que permiten introducir valores dentro de la ejecuci\u00f3n del bloque y una secuencia de bloques que componen el bloque personalizado y que se ejecutan de arriba hacia abajo. De esta forma es posible ejecutar esa secuencia de bloques simplemente con situar el bloque personalizado con su correspondiente identificador. Esta t\u00e9cnica simplifica la codificaci\u00f3n.<\/p>\n En los videojuegos 2D se suelen utilizar distintas perspectivas o puntos de vista. Cada una condiciona el tipo de movimientos que pueden realizar los personajes dentro del escenario.<\/p>\n Vista cenital<\/strong><\/p>\n Es la vista desde arriba. El avatar se puede mover a la izquierda, derecha, arriba y abajo.<\/p>\n Fuente: https:\/\/scratch.mit.edu\/projects\/318298154<\/a><\/u><\/p>\n \u00a0<\/strong><\/p>\n Vista lateral<\/strong><\/p>\n Es la vista de perfil. Es la perspectiva t\u00edpica de los juegos de plataforma como por ejemplo Super Mario Bros.<\/p>\n Fuente: https:\/\/scratch.mit.edu\/projects\/319380670<\/a><\/u><\/p>\n Vista isom\u00e9trica<\/strong><\/p>\n La perspectiva isom\u00e9trica permite crear la sensaci\u00f3n de un juego 3D cuando en realidad el escenario y los sprites son entidades 2D o bidimensionales. Est\u00e1 formada por tres ejes (XYZ) que arrancan de un punto origen central. El escenario se estructura en cuadr\u00edculas que se van distribuyendo sobre este sistema de ejes. El movimiento de los personajes se puede realizar en 8 direcciones: N, NE, E, SE, S, SW, W y NW. Es el punto de vista m\u00e1s realista pero m\u00e1s dif\u00edcil de programar.<\/p>\n Fuente: https:\/\/scratch.mit.edu\/projects\/318219370<\/a><\/u><\/p>\n Se denomina scroll de fondo<\/strong> al movimiento en 2D del fondo de escenario de un videojuego. Este efecto proporciona la sensaci\u00f3n de que el personaje o el m\u00f3vil se est\u00e1 desplazando en una direcci\u00f3n cuando en realidad es el fondo de escenario junto con sus objetos el que lo hace en sentido contrario. El personaje corre sobre el sitio sin desplazarse. El scroll puede ser horizontal o vertical o incluso multidireccional en juegos con vista a\u00e9rea.<\/p>\n Una pr\u00e1ctica habitual en el dise\u00f1o de videojuegos es crear un scroll infinito y autom\u00e1tico usando una sola imagen. Esto permite disponer de un fondo de escenario din\u00e1mico que se muestra en desplazamiento continuo durante la ejecuci\u00f3n del juego. Se puede construir animando dos instancias de una misma imagen.<\/p>\n Fuente: https:\/\/scratch.mit.edu\/projects\/318222256<\/a><\/u><\/p>\n La detecci\u00f3n de colisiones es una tarea habitual en la programaci\u00f3n de videojuegos. Consiste en comprobar si dos o m\u00e1s objetos se llegan a tocar, superponer o intersectar en su movimiento sobre el escenario. La detecci\u00f3n de una colisi\u00f3n se utiliza para desencadenar acciones: explosiones o desapariciones de objetos, incremento de puntos, finalizaci\u00f3n de partida, etc. Se suele aplicar a situaciones del juego como por ejemplo comprobar si un personaje o veh\u00edculo m\u00f3vil choca contra un obst\u00e1culo, si el disparo de nuestro avatar alcanza a un enemigo, si un proyectil impacta en el personaje que se mueve, etc.<\/p>\n En el videojuego de control de un veh\u00edculo por una carretera en perspectiva a\u00e9rea cuando el m\u00f3vil colisiona con el \u201cgreen\u201d verde se detiene el juego. Para detectar la colisi\u00f3n, en el interior de un bucle forever <\/strong>(por siempre) que est\u00e1 escuchando en todo momento, cuando se detecta que el m\u00f3vil est\u00e1 tocando ese color, el bloque touching color \u2026 <\/strong>(tocando color \u2026)\u00a0 devuelve true <\/strong>y entonces se ejecuta la rutina \u201cgame over\u201d: <\/strong>suena el audio de error, se muestra el mensaje y se detiene el programa.<\/p>\n Fuente: https:\/\/scratch.mit.edu\/projects\/599766411<\/a><\/u><\/p>\n Uno de los principales desaf\u00edos en la programaci\u00f3n de videojuegos es la simulaci\u00f3n del mundo f\u00edsico en fen\u00f3menos como por ejemplo el rebote de una pelota contra una pared. Para controlar la colisi\u00f3n se utiliza un bucle forever <\/strong>y dentro el control de colisi\u00f3n que ofrece el bloque touching \u2026? <\/strong>(tocando el sprite \u2026) que devolver\u00e1 true <\/strong>cuando detecte que ese sprite est\u00e1 tocando el sprite indicado.<\/p>\n El cambio de direcci\u00f3n se logra con el bloque point in direction (180-direction)<\/strong> (apuntar en direcci\u00f3n) que modifica la direcci\u00f3n de desplazamiento usando la ley de reflexi\u00f3n siendo direction <\/strong>la direcci\u00f3n del m\u00f3vil en el instante en que se produce el choque. Para generar un efecto m\u00e1s cre\u00edble gira la pelota sobre s\u00ed misma un \u00e1ngulo aleatorio entre -20 y +20 grados.<\/p>\n Fuente: https:\/\/scratch.mit.edu\/projects\/318259976<\/a><\/u><\/p>\n En el dise\u00f1o del cl\u00e1sico juego Pong <\/strong>cuando la pelota colisiona con la pala entonces se simula el rebote.<\/p>\n Una de las acciones habituales en algunos videojuegos es pulsar sobre objetos o personajes situados sobre el escenario para hacerlos desaparecer. Estos objetos pueden estar en reposo o en movimiento aleatorio. El bloque que controla el evento de pulsar sobre un sprite es when this sprite clicked <\/strong>(al hacer clic en este objeto). Se le a\u00f1ade el bloque change puntos by 1 <\/strong>para incrementar el marcador en un punto y a continuaci\u00f3n el bloque hide <\/strong>(para ocultarlo).<\/p>\n Fuente: https:\/\/scratch.mit.edu\/projects\/318355499<\/a><\/u><\/p>\n Una acci\u00f3n habitual en los videojuegos es la posibilidad de arrastrar y colocar sprites sobre el escenario. Se pueden utilizar los bloques set drag mode draggable \/ undraggable <\/strong>(fija modo de arrastre a arrastrable \/ no arrastrable) para activar o desactivar la posibilidad de que un sprite se puede pinchar y arrastrar sobre el escenario.<\/p>\n Fuente: https:\/\/scratch.mit.edu\/projects\/337688336<\/a><\/u><\/p>\n La acci\u00f3n de disparar se suele utilizar en algunos videojuegos. En t\u00e9rminos de programaci\u00f3n el disparo se codifica como una caso avanzado de colisi\u00f3n:\u00a0 un sprite que se activa al presionar una tecla, se muestra en una posici\u00f3n concreta, describe una trayectoria definida y que puede impactar con una diana o bien perderse por\u00a0 un lado del escenario.<\/p>\nSprites<\/strong><\/h2>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid001-1024x798.png\")
Animaci\u00f3n simple<\/strong><\/h2>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid002.jpg\")
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid003.jpg\")
Botones<\/strong><\/h2>\n
Audios<\/strong><\/h2>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid004.jpg\")
Control del avatar<\/strong><\/h2>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid005.jpg\")
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid006.jpg\")
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid007.jpg\")
Escenas<\/strong><\/h2>\n
Variables<\/strong><\/h2>\n
\n
\n
Clonaci\u00f3n de sprites<\/strong><\/h2>\n
\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid008.jpg\")
Aleatoriedad<\/strong><\/h2>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid009.jpg\")
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid010.jpg\")
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid011.jpg\")
Funciones<\/strong><\/h2>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid012.jpg\")
Perspectivas<\/strong><\/h2>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid013.jpg\")
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid014.jpg\")
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid015.jpg\")
Scroll de fondo<\/strong><\/h2>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid016.jpg\")
Colisiones<\/strong><\/h2>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid017.jpg\")
Rebotes<\/strong><\/h2>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid018.jpg\")
Click destructivo<\/strong><\/h2>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid019.jpg\")
Drag&Drop<\/strong><\/h2>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid020.jpg\")
Shooting<\/strong><\/h2>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid021.jpg\")
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/vid022.jpg\")