dis9034-2024-1
clase-15-Examen
En esta solemne vamos a intentar a hacer la programación de un juego en Scratch. https://scratch.mit.edu
1. ¿Qué es Scratch? Una Introducción
Scratch es la comunidad más grande de codificación para niños, por lo mismo utiliza un lenguaje de programación con una interfaz visual sencilla y pedagógica para facilitar su aprendizaje. Lo que permite que jóvenes sin conocimientos de programación puedan programar de forma diferente la creación de historias digitales, juegos, y animaciones. Scratch está diseñado, desarrollado, y moderado por Fundación Scratch, una organización libre de lucro. Fuente: https://scratch.mit.edu/about
Scratch está diseñado especialmente para personas entre los 8 y 16 años, pero es usado por personas de todas las edades.
Opciones de la página de inicio
En la página de inicio encontramos en el menú superior las opciones de:
- Crear: Comenzar tu propio proyecto
- Explorar: Ver contenido de otros usuarios de Scratch, dicha página puede también seleccionar contenido según tus preferencias, añadir proyectos que te gusten a tu biblioteca y seguir personas que creen contenido de tu interés.
- Ideas: Ideas sobre lo que podrías hacer en Scratch: ver tutoriales, comenzar un proyecto, ver otro proyectos, etc.
- Acerca de: Información sobre Scratch como programa.
¿Debería crearme una cuenta?
Para acceder a todas estas funciones no es necesario crearse una cuenta, sin embargo, es muy recomendable que te crees una. Esto es porque es gratuito, no pone condiciones de uso tediosas, puedes compartir tu contenido con el resto de la comunidad y lo más importante, te permite guardar tu proyecto en la web y así trabajar desde cualquier ordenador.
Creación de un proyecto
Como dijimos antes, para iniciar un proyecto debes apretar en la opción crear en la parte superior del menú. La interfaz de creación de Scratch te recibe inmediatamente con un “sprite” de un gatito de ejemplo y una ventana de video tutorial, el que te enseña lo básico de cómo moverte en el programa (usando de ejemplo al gatito) y el tutorial te permite trabajar en conjunto a tiempo real.
Ejemplo de trabajo junto a un tutorial dentro del programa
https://github.com/BelenVeAg/dis9034-2024-1/assets/163448892/1d6fdbb5-d504-44ac-a18a-ed2bf9bc6c38
En la barra superior de la página existe una opción que dice Tutoriales, ahí puedes seleccionar el tutorial que quieras y al seleccionarlo aparecerá sobre la página de creación para trabajar en conjunto como vimos en el ejemplo anterior.
*Dato curioso: Al presionar Editar aparece una opción llamada “Activar el modo turbo”, si lo haces los programas se ejecutan a la mayor velocidad que permite el ordenador.
El tutorial con el que te recibe el programa por primera vez se llama “Cómo empezar” y te muestra las funciones básicas del menú de herramientas (que está en la parte izquierda), el cómo empezar a crear.
Tutorial “Cómo empezar”
Menú de herramientas izquierdo, apartado de “Código”
¿Cuáles son las herramientas del menú?
- Código: apartado de la programación y las acciones que quieres que ocurran en los elementos de tu proyecto. Dichos elementos pueden ser un “objeto” o un “fondo”.
- Disfraz/Fondo: apartado para hacer modificaciones visuales de un objeto u fondo. Es muy similar a lo que sería la interfaz de Photoshop, aunque trabaja con vectores en lugar de píxeles. También puedes subir tus propios archivos.
-
Sonido: apartado para poner y modificar sonidos de los elementos o el fondo.
*Tanto la herramienta de sonido y disfraz/fondo tienen una biblioteca en la que puedes explorar contenido o subir tus propios archivos y trabajar con ellos. En el caso de los objetos es recomendable que se encuentren en png.
*Las herramientas van a hacer modificaciones al elemento que tengas seleccionado, por ejemplo, en la imagen de abajo se está modificando al “dog2”, pero si hago click en otro objeto o en el fondo, las herramientas trabajarán en la nueva selección. Es por esto que debes tener en cuenta en qué elemento de tu proyecto estás trabajando.
IMPORTANTE para deshacer una acción NO aprietes cmd+z o ctrl+z, tienes que usar las flechitas de deshacer que están en el menú de opciones.
Grabación mostrando el cambio de opciones entre objeto y fondo
https://github.com/BelenVeAg/dis9034-2024-1/assets/163448892/d72fd4b7-7120-4244-bc82-07a05b7f1eb5
Problema que se convirtió en oportunidad: Scratch estuvo en mantenimiento el viernes por lo que tuve que descargar la app “Scratch3” que mostró el mismo sitio para avanzar en mi proyecto. La interfaz es muy similar a la web y funciona offline, por lo que el mantenimiento no la afectó. Otro descubrimiento es que en mi propio computador no me causó problemas usar el cmd+z para deshacer, ni en la web ni en la aplicación. Por lo tanto el problema anterior debe ser del computador de la sala de trabajo.
Imagen de Scratch en mantenimiento, abajo sale la opción para descargar la app
Proceso de editar una foto en “Disfraz”
https://github.com/BelenVeAg/dis9034-2024-1/assets/163448892/4792518d-40aa-4868-a50d-ed79e0f48329
2. Comenzado más formalmente el proyecto
Finalmente decidí que quería hacer un acercamiento a un juego de tipo RPG y novela visual. Los juegos que me inspiraron para esto fueron principalmente unos que personalmente me gustan mucho, el “Pokemon Heartgold/Soulsilver” y Danganronpa 2.
El Pokemon Heartgold/Soulsilver me sirvió como referente por su variedad de diseños de sprites para sus criaturas (los pokemon) y la idea de rugido que tienen.
https://github.com/BelenVeAg/dis9034-2024-1/assets/163448892/974aac89-5bd7-45c8-9b33-1e778545e8c3
En el caso de Danganronpa es el único juego de tipo novela visual que he jugado, he visto pocos gameplays de otros del formato, pero decidí quedarme con lo conocido y que me gusta.
Proceso de creación de una imagen png en disfraz
https://github.com/BelenVeAg/dis9034-2024-1/assets/163448892/0a1ff2d4-7343-4f31-a5fe-0bacdb1e4779
https://github.com/BelenVeAg/dis9034-2024-1/assets/163448892/4996ddaf-26d1-4290-90f1-8ec1819996fe
Final
Para este personaje hice 2 sprites: 1 en Scratch (de tipo vectorial) y otro en la app de procreate (de tipo pixel art).
Sprite en pixel art:
Con estos comandos podemos hacer que nuestro objeto se mueva con las flechas del teclado, definiendo el movimiento según la posición de mi elemento en el eje x, por lo tanto, 10 (número positivo) para avanzar a hacia adelante/la derecha y -10 (número negativo) para avanzar hacia atrás/la izquierda.
Para que los elementos no se vieran en los fondos que no quería, en cada uno tuve que poner un código para ocultarlos cuando cambiara a los fondos a los que no corresponden.
¿Cómo subir tu proyecto de la app a tu cuenta de internet?
https://github.com/BelenVeAg/dis9034-2024-1/assets/163448892/4fd74512-568b-4de8-a81f-0916e150dec6
Este programa es de mucha experimentación, prueba y error, aquí se ve como estaba jugando con la edición de un audio para crear el rugido de mi criatura.
https://github.com/BelenVeAg/dis9034-2024-1/assets/163448892/09a1b13a-512e-4a39-811e-723277675c35
En un principio no entendía bien la función de elementos y disfraces, por lo que no sabía cómo programar los diálogos del inicio de juego.
Primero traté estas cajas de diálogos como elementos/objetos diferentes y no encontraba una forma de hacer que cambiara a otro elemento utilizando la tecla A. Más tarde entendí que una forma de hacerlo era que en vez de tratarlos como elementos completamente distintos, era más fácil tratarlos como diferentes disfrazes de un mismo elemento, para así programarlos con el bloque “Cambiar disfraz Quería que al apretar la tecla A mi elemento de inicio cambiara a otro elemento, pero no me dejaba hacerlo. Después me di cuenta de que había una opción que me dejaba “cambiar de disfraz” al activar un comando. Por lo tanto, en vez de cambiar elementos, decidí cambiar los disfraces y para eso, transformé todas las cajas de diálogo en disfraces de un mismo elemento.
https://github.com/BelenVeAg/dis9034-2024-1/assets/163448892/8fde3fdd-73a3-4445-bbc7-351927025189
Ejemplos útiles de algunos tutoriales
Tutorial 1:
Tutorial 2:
También existen unos tutoriales de Cartoon Network que explican acciones más avanzadas.
¿Cómo ver el código de otros proyectos?
Quería utilizar ciertos elementos del código del juego de @UnaPrimavera: https://scratch.mit.edu/projects/1022723321/
Por lo tanto, necesitaba ingresar a su código para entender su proceso, lo que logré de esta forma:
https://github.com/BelenVeAg/dis9034-2024-1/assets/163448892/a29a8a83-dbcf-4b58-9961-a989e60df6a1
Lamentablemente, no logré conseguir la información que buscaba en su código, pero recomendó tutoriales de @griffpatch que tiene tanto una cuenta de Scratch como un canal de youtube con tutoriales. Con él aprendí a usar la función de crear variables, en donde puedo definir una función con un grupo de bloques de código para luego agregarlo en el código principal
Cuenta y canal de @griffpatch
https://github.com/BelenVeAg/dis9034-2024-1/assets/163448892/56c74406-56f8-421a-b6a9-18fcbe89d056
Mi ejemplo de función: Definí una “función de movimiento” para definir cómo quería que se moviera mi perrito de la biblioteca de Scratch. La primera columna es la definición del movimiento, mientras que la segunda es la implementación de esta función en el código principal.
Más cosas que aprendí en el camino:
Si pongo dos acciones que ocurren con un mismo actuador de forma separada, ambas van a ocurrir simultáneamente.
Errores que en un futuro pueden servir de algo:
https://github.com/BelenVeAg/dis9034-2024-1/assets/163448892/29c8d62f-0240-4217-aff8-b9f6fbcb1f4a
Código final de cada elemento
“Errores” (cosas que no deberían pasar, pero pasan de todas formas) y Cosas que quedaron pendientes
A veces al mover el Dog2 de forma no lineal el código se salta pasos y se mezclan los elementos. Mi teoría es que como solo mostré/oculté los elementos del código y no logré ver cómo activarlos/desactivarlos según corresponda, todos los elementos trabajan siempre al mismo tiempo tiempo, por lo tanto, el Dog3 también se mueve y al llegar a la posición de programación del cambio de escenario, el cambio aparece cuando no debería.
https://github.com/BelenVeAg/dis9034-2024-1/assets/163448892/b6f2f64e-3a8a-435c-9e1c-de4763e0fd22
No logré hacer un cambio de sprite entre dos disfraces cuando el perrito se movía, solo mantener un sprite fijo o que todos los sprites se intercalan sin poder seleccionar solo 2.
https://github.com/BelenVeAg/dis9034-2024-1/assets/163448892/16cc00da-828e-461e-93f9-afc26e8a829a
Código final funcionando bien
https://github.com/BelenVeAg/dis9034-2024-1/assets/163448892/1b93dd0e-3801-4331-aa56-f0563c7fde1e