Animación Título

Actividades de Cierre

Estimados alumnos de 5to. B.P. del Normal 10:  nos restan solamente dos lunes, y por ende, nos estamos empezando a despedir.

 Fue muy grato compartir este taller con ustedes, y les deseo lo mejor en esta nueva etapa de sus vidas, que inicia exactamente el día siguiente a finalizar el secundario.

 Volviendo al taller, para finalizar les propongo dos actividades:

1.) Finalizar el juego del gato y la pelota incluyendo las penalizaciones descriptas en la clase 5


2.) Descargar de la página web de Scratch (scratch.mit.edu) entrando con el usuario y contraseña del curso, un juego sencillo de tipo educativo en inglés, y adaptarlo al idioma español



 Exitos!

Clase 5


En el Scratch que diseñamos en la clase anterior, vimos que el juego terminaba cuando la pelota tocaba 10 veces al gato.

El tema es que aquí hay dos fallas en el diseño del juego, una a favor de la pelota y otra a favor del gatito, veamos:

1. Situación favorable a la pelota:
La pelota tiene todo el tiempo del mundo para tocar 10 veces al gato. Esto lo determina la orden "por siempre" que se ejecuta luego de presionar la bandera verde.

2. Situación favorable al gatito:
El gato puede cometer una infracción desleal que le permitiría ganar siempre. ¿Cómo? Situándose en una esquina neutral, en la cual la pelota nunca lo toque y quedándose quietito. Además, si se desplaza con el mouse, la pelota no lo atrapa nunca.

Veamos entonces como penalizar ambas situaciones para que aquí no haya "gato encerrado":

Penalización de la situación 1
Penalizaremos a la pelota si no puede tocar al gatito 10 veces en menos de 25 segundos.
Si el gato resiste 25 segundos sin ser tocado 10 veces, ganará el juego. En cambio si la pelota toca al gato 10 veces en menos de ese tiempo, ganará la pelota.
Para ello usaremos las siguientes instrucciones dentro del objeto PELOTA:


  • Reiniciar cronómetro: pone el cronómetro en cero. Será la primera acción luego de pulsar la bandera verde. Todos los juegos arrancan en cero.  La imagen a continuación es una programación del escenario:

NOTA IMPORTANTE: COMO EL CRONOMETRO Y EL CONTADOR DE TOQUES SON ACCIONES INDEPENDIENTES DE LA PELOTA O EL GATITO, SE PONEN COMO PROGRAMACION PROPIA DEL ESCENARIO. Para ello, la única consideración que debe ser tenida en cuenta es que las variables, por ejemplo "contador de toques" deben ser declaradas como "válidas para todos los objetos" al momento de ser creadas.


  • Cronómetro: Es una variable que lleva el tiempo de juego. En nuestro caso, el límite a considerar valdrá 25 segundos.

Este último valor deberá estar siendo chequeado dentro del ciclo "por siempre" preguntando si el cronómetro vale más o menos que 25. Si vale más que 25, el juego se detiene y debe ser declarado ganador el gato. Si vale menos que cien, no se toma ninguna acción significativa, se debe dejar que el juego continúe hasta que se cumplan los 25 segundos, o hasta que la pelota toque 10 veces al gato.


Penalización de la situación 2.
Penalizaremos al gatito si se esconde en los bordes, si se escapa del tablero, o si se mueve con el mouse, en todos los casos forzándolo a moverse al centro del tablero.
Para ello usaremos las siguientes instrucciones dentro del objeto GATITO:


con estos tres sensores (familias de controles de color celeste) prácticamente impedimos que el gato se quede en un rincón o que salga del tablero o que se maneje por mouse: solo lo podrá hacer con flechas de dirección.
La orden "ir a X: -14 Y: -4" corresponde más o menos al centro del tablero. La idea es que cada vez que el jugador intente cometer alguna de las 3 deslealtades, el gato responda moviéndose al centro del tablero para que esté mas alcanzable por la pelota.

Actividades para hacer en clase:

Abrir el juego desarrollado en la clase anterior, y modificarlo según las siguientes consignas:
- Agregarle en el Escenario: a) un fondo; b) la programación descripta arriba
- Renombrar el Objeto1 como gatito; y el Objeto 2 como pelota. ¿Qué pasa con las líneas de programación que hacían mención a Objeto1 y a Objeto2 previamente?
- Agregar en la programación del gatito y la pelota las penalizaciones correspondientes.
- La pelota puede, según el ángulo inicial de rebote, adquirir un comportamiento previsible, con lo cual nuevamente, el gato si se oculta en un rincón inaccesible ganará seguro. Mejorar esta situación aplicando en el movimiento de pasos de la pelota, la orden 

- Una vez finalizado, guardar el archivo con los nombres de los alumnos, y compartir el proyecto en scratch.mit.edu, con el usuario del taller.(tallervje)

Clase 4: tomando el control de los objetos


Vimos en la clase 3 como mover distintos objetos (el perro, el gatito) en distintos escenarios, y a la vez, como cambiar el aspecto de dichos escenarios de fondo.
También vimos que tanto los sprites como los escenarios son pasibles de recibir órdenes de programación.
Pero... hasta ahora hemos movido los animalitos basándonos en instrucciones programadas sin mediar interacción con el usuario.
Sin dudas, esto es un gran avance, pero todavía insuficiente, dado que es muy común en los videojuegos que los usuarios tomen el control de los objetos moviendo algunas pocas teclas del teclado (flecha arriba, flecha abajo, flecha derecha, flecha izquierda, barra espaciadora por citar algunas) y de esa manera desplacen u orienten el sprite en la dirección que ellos quieran.

Eventos:

Un evento es un llamado de atención que alerta a un programa de computación que está ejecutándose, reclamando su atención y esperando una respuesta en consecuencia. 

Un ejemplo: 
Hay un evento al cual estamos acostumbrados, que es la Bandera Verde para empezar el programa.
Pero hay un segundo evento que lo interrumpe: al presionar la tecla Barra Espaciadora, todos los sonidos se interrumpen un momento (que suerte!) para continuar resonando luego. 

Prueben este ejemplo en su Scratch: 

Traten de que al ejecutarlo, puedan presionar las cuatro teclas de dirección (arriba, abajo, izquierda, derecha) y ver como se comporta el sprite.

Actividad 1: jugando al Pac-Man con Scratch

Teniendo como personajes un gatito y una pelota, diseñaremos el siguiente juego:
a) Objeto 1: el gato se moverá con los movimientos de flecha descriptos arriba

b) Objeto 2: Pelota; se moverá según la siguiente programación:

El objetivo será tratar de que el gatito escape de la pelota, sin dejar que lo toque.
No obstante, si la pelota lo llega a tocar, tendrá una vida menos.
El máximo de vidas del gatito es de 10.

¿Se animan?
Para ello debemos tener en cuenta además de las programaciones del gato y la pelota estos conceptos:

  1. Es necesario contar los toques que la pelota le hizo al gato. Para ello debemos:
  • Ir al objeto Pelota, y crear una variable llamada contador de toques, y fijar su valor inicial en cero

  • En el objeto Pelota, con cada toque que la pelota le haga al gato, debemos incrementar la variable en una unidad.

(ver que el toque de la pelota se refleja en la expresión "Si tocando objeto 1?" )

  • Por último si el número de toques es 10 o más, debemos abortar el juego:


En resumen, teniendo en cuenta todos los factores mencionados, el código final perteneciente a la pelota es el siguiente:

Consulta: después de jugar dos o tres veces... ¿cuál creen que será la mejor estrategia de supervivencia del gatito para que escape de la endomoniada pelota???

Bonus Track:
Para el que lo quiera visitar, les dejo mi página de Scoop.it!


Clase 3 - Scratch

En las dos clases anteriores vimos como se podía programar el movimiento del objeto, y que el Escenario por donde se movía el gatito, también era factible de ser programado.

Además agregamos sonido y movimiento a las primeras animaciones, a través de los disfraces de un mismo personaje, que simulaban en el caso del gatito, la acción "caminar".

Ahora intentaremos complicar de a poco la cuestión, pero no se asusten, todas las herramientas de Scratch son muy intuitivas y no va a costar nada lograr animaciones complejas.

Actividad 1

Para recordar lo que estuvimos aprendiendo en las 2 clases anteriores haremos mover un perrito en varias direcciones dentro de un teatro, pero esta vez trabajando con coordenadas (x;y):

  1. Abrir un nuevo scratch
  2. Importar de la galería de personajes, en la carpeta Animales, los personajes dog-1a y dog-1b
  3. Eliminar los dos disfraces del gatito, ya que no lo vamos a usar
  4. Importar el escenario chalkboard, en la carpeta Indoors
  5. Eliminar el fondo pre-existente para no tener dos escenarios.
  6. Cambiar el nombre al personaje. Donde dice Objeto 1 poner Perrito
  7. Arrastrar el perrito a la posición izquierda inferior de la pantalla; tendría que quedar una coordenada lo más próxima posible a x:-144; y: -126. Dirección : 90 grados (esto se ve debajo del nombre del objeto, luego de arrastrar el perrito con el mouse)
  8. Ir a Programas, bandera verde
  9. Ir a la familia azul
  10. arrastrar el control deslizar de manera tal que sus ejes cartesianos queden en la parte superior izquierda del escenario
  11. mover 100 pasos
  12. girar en sentido horario 45 grados
  13. deslizar en 4 segundos al ángulo inferior derecho /traducir en coordenadas x;y
  14. Girar en -15 grados en sentido antihorario
  15. deslizar a la posición de inicio
Correrlo.

Notar que el perrito quedó con la trompa apuntando al piso.
Para corregirlo, luego del punto 15 pondremos de la familia azul, la orden apuntar en dirección 90 grados, y de esa manera lograremos que al darle bandera verde varias veces seguidas el perrito se acomode nuevamente en su posición original.


Si al final del ejercicio ponemos mover 800 pasos, el animal va a salir del escenario. 
Para evitar eso, poner de la familia azul, la orden rebotar si está tocando un borde.

Es importante saber siempre la dirección que lleva, para tener un control de su movimiento.

Actividad 2

Trataremos ahora de editar escenarios y objetos, y agregarle efectos especiales a ambos.
Para ello:
  1. Importar el escenario School
  2. En el techo gris poner con la herramienta texto ENS 10 (herramienta texto)
  3. El corredor de acceso ponerlo con una alfombra roja (herramienta tacho de pintura)
  4. Aplicar la herramienta sello para trazar una bicisenda en la alfombra roja
  5. Girar la escuela unos 15 grados moviendo su punto de rotación (botones de flechas curvas)
  6. Guardar y volver al programa
  7. Añadir un objeto sorpresa
  8. Ahora nos queda el gatito y el personaje sorpresa
  9. A continuación probar cuatro efectos con el gatito,
  10. Vamos a decir Hola y reemplazamos Hola por Aumento de tamaño
  11. Vamos a la familia de Apariencias y elegimos para el gatito un tamaño de 200 mediante el control fijar tamaño.
  12. Arrastramos decir Hola nuevamente y reemplazamos por efecto "ojo de pescado"
  13. Arrastramos fijar efecto, y reemplazamos color por ojo de pescado
  14.  Arrastramos decir Hola y reemplazamos Hola por Remolino
  15. Arrastramos fijar efecto, y reemplazamos por remolino
  16. Arrastramos decir Hola y reemplazamos Hola por Pixelizar
  17. Arrastramos fijar efecto y pixelizamos
  18. Arrastramos decir Hola y reemplazamos Hola por Desvanecer
  19. Arrastramos fijar efecto y desvanecer

Subir ambas actividades al sitio scratch.mit.edu, con usuario tallervje y password suministrada por el profesor

Clase 2 - Scratch

Hemos visto ya las primeras nociones de movimientos, disfraces y repeticiones.

Nos faltó aclarar un concepto clave en relación con los objetos.

Hasta ahora nos venimos manejando con un solo objeto, el gatito, pero esto no será siempre así. 

Entonces conviene poner nombre a los objetos, para poder identificar luego cada objeto por su nombre cuando la cantidad de objetos en danza empiece a complicarse. 

Por ejemplo, al objeto1 (nombre por default) le pondremos gatito

Antes


Después


Ver también que el nuevo nombre gatito también cambió en el área de objetos y escenarios. 

Escenarios

Ahora veremos algunas variaciones del escenario.

El escenario es donde transcurre la acción principal del juego o la animación. 

Lo primero que intentaremos hacer es cambiar la imagen del fondo.
El programa ya viene con algunos fondos pre-diseñados, así que por ahora elegiremos uno de los que se nos ofrece. Probemos por ejemplo con un desierto. Para ello: 
1. Hacemos click en Escenario

(no teman si desaparece el programa! Haciendo click alternativamente entre gatito y escenario, intercalamos el fondo con el programa que ya teníamos escrito antes).

2.  Hacer click en la solapa fondos
3. Hacer click en Importar
4. Hacer click en Nature
5. Hacer click en Desert

Con eso logramos el fondo desértico que buscábamos.

Ejercicio: 

Volver al programa del repetir 10
a) Agregarle una espera de 0,1 segundo entre disfraz y disfraz para que se visualicen bien los pasitos.

b) ¿Se animan a cambiar el fondo por uno de Outdoor? ¿Y luego por uno de Interiores? (A elección!)
c) Presionar bandera verde para ver como queda el gatito caminando por cada uno de los fondos elegidos.
d) Dejar un solo fondo en el escenario, el que se llama desert, y eliminar haciendo click en la equis, todos los sobrantes.


Sonidos

En el momento actual tenemos un objeto, al que llamamos gatito, y un fondo desértico.
Ambos tienen una pestaña de sonido asociado.
En el caso del gatito, esta pestaña está con un sonido llamado miau.
Pero no se escucha en la animación, porque aún no le hemos dado la orden.
Procedamos así:
En la familia de colores Lilas ("Sonidos") agregaremos la orden tocar sonido.
tocar bandera verde para ver como queda.

Ahora asociaremos un sonido para el escenario.
Como pueden suponer, Scratch trae varios sonidos pre-diseñados para ser utilizados. Si ninguno de ellos nos satisface, podemos presionar el botón Importar para importar sonidos o canciones en mp3 para que puedan ser utilizados por Scratch.

Supongamos entonces que queramos brindarle al escenario un sonido de fondo. Presionamos Escenario, dentro de él, ir a la solapa Sonidos, y luego Importar.  En la solapa Percusión hay un sonido Shaker que puede ser adecuado al efecto de aprender como manejar sonidos en el escenario.  Lo importamos.

Ahora vemos que al presionar la bandera Verde, el gatito dice Miau pero no sale el sonido de percusión que elegimos. ¿Qué paso habremos omitido? 
Bien, veamos:
Esta es la situación en la cual todos tendríamos que estar a este momento: 
El sonido del escenario es el Shaker, pero no suena... hmmm, pues bien, falta hacer click en la solapa Programas, y allí agregamos este bloque:


Como ven, el atributo de programación no aplica solamente al gatito, sino también al Escenario. 
Con esto le estamos diciendo que el sonido de fondo permanezca audible mientras dure la animación.
Probemos con bandera verde y veamos que sucede!


Ejercicio:

Al escenario básico del desierto con el gatito, añadir dos animalitos más con su propio sonido y movimiento, y eliminar el sonido Shaker y reemplazarlo por una música de fondo en mp3 de su celular o bajada de Internet. Prueben a ver si sale! 
Al finalizar debemos cada grupo debe guardar este ejercicio en la PC y luego subirlo a Scratch con el nombre de Clase2_Ej2_xxx donde XXX es el número de pc que utilizaron, para ello:
- guardar el ejercicio en la PC en la carpeta Mis Documentos
- hacer click en la opción Compartir del menú principal
- hacer click en la sub-opción "Compartir este proyecto en línea"
- nombre de usuario tallervje
- contraseña: consultar al profesor

Para verificar su correcta subida:
- ir a Internet
- abrir el link scratch.mit.edu
- loguearse con usuario tallervje y contraseña suministrada por profesor
- buscar el proyecto propio entre todos los subidos por los compañeros.



Clase 1 - Scratch

Para empezar haremos caminar al gatito unos pasos. 
Para eso tipear: 

<Familia Naranja> Al presionar bandera verde

Esto indica que tipo de acción queremos tomar para iniciar el programa

<Familia Azul>      mover 10 pasos

Los bloques deben quedar encastrados uno debajo del otro para que se traduzcan en código válido de programación:


Ahora haremos correr el programa. Para ello damos click en la bandera verde que se encuentra en el escenario y el gato debería caminar los pasos indicados.

¿Qué pasó?  ¿Se pudo observar algún cambio en la posición inicial? Muy leve fue la caminata, quizás deberíamos incrementarla en 100 pasos. Para eso hacemos click en el cuadro donde está el número 10 y le agregamos un cero de modo de indicar al gato que camine 100 pasos.

¡Probemos nuevamente!

¿Verdad que sí ahora se notó? ¡Bien! este fue nuestro primer experimento con Scratch.

Ángulo de avance:

Veamos ahora variar el ángulo de avance.
El ángulo por defecto es de 90º. Esto quiere decir que avanza siempre en línea recta de izquierda a derecha.
Ahora bien, podemos girar el ángulo de avance en la medida que necesitemos hacerlo.
Una de las maneras es la siguiente:



Notar que de los tres botones que están a la izquierda del gatito, uno está con fondo celeste.
Esto significa que tiene el giro habilitado. Si bajamos con el mouse el hocico del gato hacia abajo, notaremos que el número 90 indicado en dirección (ver arriba de la solapa "Sonidos") va cambiando, probar por ejemplo, poner un angulo de 141º y presionar la bandera verde para ver como avanza el objeto.

El botón del medio es que el gato gire nada más de izquierda a derecha.

Y el último es que no se permite el giro.

El otro método es mediante la familia de controles azules, y la orden girar
Ejemplo:

Notar que intercalamos una orden de la familia naranja para que podamos visualizar el cambio de dirección.

Ahora veamos que más tengo aparte del área de programas. Vemos que contigua a la solapa de programas, aparecen las de "Disfraces" y "Sonidos"

Si hago click en la solapa Disfraces, me ofrece dos prediseñados para el objeto actual.
La idea es simular que el gato mueve las patitas caminando lo más naturalmente posible alternando entre un disfraz 1 y el disfraz 2.
Veamos como es modificando el primer programa


Vemos que añadimos una nueva familia de controles, la de color violeta, que es la de Apariencias.
Al presionar bandera verde vemos que apenas se ve el movimiento; tratemos de hacerlo más "repetitivo" para que salga la caminata lo más naturalmente posible.
Con la orden "Repetir" tantas veces, lo que logramos es que el sector de órdenes que queda encapsulado dentro de la secuencia de repetición, se reitere tantas veces como lo indiquemos en este caso, 10.

Resumiendo entonces, a través de una rutina de generación muy simple, hemos generado un cambio de disfraz del objeto y además logramos hacerlo "caminar".