# MONTAJE 9 SPRITEVOLADOR

##### <span style="color: rgb(22, 145, 121);">**¿Qué es un acelerómetro?**</span>

El acelerómetro tiene el mismo efecto que el Joystick, nos da valores en el eje X o eje Y, en el caso del Joystick lo daba la inclinación de la palanca, en este caso lo da <span style="text-decoration: underline;">**la inclinación del mismo Echidna.**</span>

Está conectado a los pines analógicos:

- A2 nos da la inclinación en el eje X
- A3 nos da la inclinación en el eje Y

Los valores van desde 250 hasta 500

![](https://libros.catedu.es/uploads/images/gallery/2022-03/embedded-image-ehbwkaem.png)

#### <span style="color: rgb(22, 145, 121);">**MONTAJE 9 SPRITEVOLADOR**</span>

<p class="callout info">Vamos a realizar un sencillo videojuego: Mover un **sprite volador**, el movimiento de un sprite con el acelerómetro y esquivando edificios que se mueven de derecha a izquierda dando la sensación de que el sprite vuela.</p>

El reto te lo complicamos con dos premisas:

- Modificar disfraces del sprite
- Reutilizar sprites externos desde [Scratch](https://scratch.mit.edu/)

Este programa tienes tres pasos

1. **Sprite volador moviéndose según acelerómetro**
    1. Le añadimos un disfraz de explosión reutilizando de otro Sprite "sun"
    2. Movimiento según acelerómetro
2. **Sprite edificios**
    1. Exportación de sprites externos de otro autor
    2. Importación a nuestro proyecto
3. **Muerte del sprite volador si toca edificio.** Aquí es el código propio del juego

#### <span style="color: rgb(22, 145, 121);">**A SOLUCIÓN CON ECHIDNASCRATCH**</span>

##### **<span style="color: rgb(22, 145, 121);">A1 Sprite PARROT moviéndose según acelerómetro</span>**

**<span style="color: rgb(22, 145, 121);">A1.1 Añadir un disfraz al PARROT de explosión. </span>**

1. <span style="color: rgb(0, 0, 0);">Quitamos el sprite del gato y añadimos el sprite **SUN**</span>
2. <span style="color: rgb(0, 0, 0);">Entramos en edición del sprite</span>
3. <span style="color: rgb(0, 0, 0);">Lo tuneamos un poco para que parezca una explosión (simplemente pintar de rojo el centro)</span>
4. <span style="color: rgb(0, 0, 0);">Lo exportamos</span>
5. <span style="color: rgb(0, 0, 0);">Guardamos con explosion.svg</span>

<span style="color: rgb(0, 0, 0);">[![2024-12-06 08_45_02-EchidnaML.png](https://libros.catedu.es/uploads/images/gallery/2024-12/scaled-1680-/2024-12-06-08-45-02-echidnaml.png)](https://libros.catedu.es/uploads/images/gallery/2024-12/2024-12-06-08-45-02-echidnaml.png)</span>

<span style="color: rgb(0, 0, 0);">Ahora añadimos el Sprite PARROT y al sprite PARROT le ponemos el disfraz de explosión:</span>

1. <span style="color: rgb(0, 0, 0);">Añadimos el sprite PARROT</span>
2. <span style="color: rgb(0, 0, 0);">Borramos el anterior SUN ya no lo necesitamos</span>
3. <span style="color: rgb(0, 0, 0);">Entramos en Edición del sprite</span>
4. <span style="color: rgb(0, 0, 0);">Menú del disfraz (costume)</span>
5. <span style="color: rgb(0, 0, 0);">Upload costume</span>
6. <span style="color: rgb(0, 0, 0);">elegimos el fichero creado anteriormente "explosion.svg"</span>
7. <span style="color: rgb(0, 0, 0);">Abrimos</span>
8. <span style="color: rgb(0, 0, 0);">Ya tenemos un disfraz añadido al Parrot. Clica en el primer disfraz pues cuando vuelvas a la ventana de código verás el de explosión si no lo haces.</span>

<span style="color: rgb(0, 0, 0);">[![2024-12-06 08_55_12-EchidnaML.png](https://libros.catedu.es/uploads/images/gallery/2024-12/scaled-1680-/2024-12-06-08-55-12-echidnaml.png)](https://libros.catedu.es/uploads/images/gallery/2024-12/2024-12-06-08-55-12-echidnaml.png)</span>

Otra manera más fácil sería simplemente añadir un disfraz de los sprite por defecto y en paz

[![2024-12-06 09_02_39-EchidnaML.png](https://libros.catedu.es/uploads/images/gallery/2024-12/scaled-1680-/2024-12-06-09-02-39-echidnaml.png)](https://libros.catedu.es/uploads/images/gallery/2024-12/2024-12-06-09-02-39-echidnaml.png)

**<span style="color: rgb(22, 145, 121);">A1.2 Movimiento del sprite PARROT </span>**

Vamos a hacer que el pájaro se mueva según el acelerómetro:

[![2024-12-06 09_12_19-EchidnaML.png](https://libros.catedu.es/uploads/images/gallery/2024-12/scaled-1680-/2024-12-06-09-12-19-echidnaml.png)](https://libros.catedu.es/uploads/images/gallery/2024-12/2024-12-06-09-12-19-echidnaml.png)

<p class="callout info">**MAPEO**: Queremos según el valor del acelerómetro, se representen en la pantalla de Scratch 2\*220 por 2\*180, es decir  
 - Eje X : el potenciómetro (vamos a llamarlo *potx*) va de 0 a 1023 y la salida (*ejex*) va de -220 a 220  
 - Eje Y : el potenciómetro (vamos a llamarlo *poty*) va de 0 a 1023 y la salida (*ejey*) va de -180 a 180  
Si vamos [a la hoja de cálculo](https://docs.google.com/spreadsheets/d/1qNbaZ2c_H1UCNhtvp2LimfWSbaGvZLVl5gJr9Wu0ifU/edit?usp=sharing), podemos sacar los valores de mapeo anteriores</p>

##### **<span style="color: rgb(22, 145, 121);">A2 Sprite EDIFICIO moviéndose de derecha a izquierda</span>**

<span style="color: rgb(0, 0, 0);">Dará sensación al sprite pájaro que está volando.</span>

<span style="color: rgb(22, 145, 121);">**A21 Exportación de Sprites externos**</span>

Vamos a ser vagos: Nos vamos a copiar de alguien externo:

Entramos en este proyecto FLY de scratch [https://scratch.mit.edu/projects/113582791/](https://scratch.mit.edu/projects/113582791/) entramos en su código y **exportamos** los edificios, nubes, etc...

[![2024-12-06 09_16_21-Fly, fly, fly !!! on Scratch.png](https://libros.catedu.es/uploads/images/gallery/2024-12/scaled-1680-/2024-12-06-09-16-21-fly-fly-fly-on-scratch.png)](https://libros.catedu.es/uploads/images/gallery/2024-12/2024-12-06-09-16-21-fly-fly-fly-on-scratch.png)

Una vez dentro del editor **EXPORTAMOS ESTOS SPRITES**

**[![2024-12-06 09_19_07-Configuración.png](https://libros.catedu.es/uploads/images/gallery/2024-12/scaled-1680-/2024-12-06-09-19-07-configuracion.png)](https://libros.catedu.es/uploads/images/gallery/2024-12/2024-12-06-09-19-07-configuracion.png)**

Simplemente botón derecho y ***EXPORTAR***

[![echidna-helicoptero2.jpg](https://libros.catedu.es/uploads/images/gallery/2023-11/scaled-1680-/echidna-helicoptero2.jpg)](https://libros.catedu.es/uploads/images/gallery/2023-11/echidna-helicoptero2.jpg)

Y guardamos esos ficheros generados **Buildings2.sprite3 Clouds.sprite3 Cloud.sprite3 Buildings.sprite3**

<span style="color: rgb(22, 145, 121);">**A22 Importación de los Sprites externos**</span>

1. Entramos en Añadir Sprite
2. Upload
3. Elegimos los ficheros exportados anteriormente en A21

[![2024-12-06 09_22_17-EchidnaML.png](https://libros.catedu.es/uploads/images/gallery/2024-12/scaled-1680-/2024-12-06-09-22-17-echidnaml.png)](https://libros.catedu.es/uploads/images/gallery/2024-12/2024-12-06-09-22-17-echidnaml.png)

<p class="callout success">**INCREIBLE** nos importa el Sprite **CON SU CÓDIGO INCLUIDO** si le das a la Bandera verás que el efecto sin apenas realizar trabajo</p>

##### **<span style="color: rgb(22, 145, 121);">A3 Muerte del PARROT</span>**

<span style="color: rgb(0, 0, 0);">Ya lo tenemos casi, añadimos al bucle de PARROT un condicional:</span>

- <span style="color: rgb(0, 0, 0);">Si PARROT toca BUILDINGS o BUILDINGS2 entonces</span>
    - <span style="color: rgb(0, 0, 0);">Cambia de disfraz **EXPLOSION**</span>
    - <span style="color: rgb(0, 0, 0);">Envía mensaje **komunikat1** que es el que utiliza el autor de los edificios para parar su movimiento, (debe de ser ruso su autor)</span>

<span style="color: rgb(0, 0, 0);">[![2024-12-06 10_07_06-EchidnaML.png](https://libros.catedu.es/uploads/images/gallery/2024-12/scaled-1680-/2024-12-06-10-07-06-echidnaml.png)](https://libros.catedu.es/uploads/images/gallery/2024-12/2024-12-06-10-07-06-echidnaml.png)</span>

<iframe allowfullscreen="allowfullscreen" height="314" id="bkmrk--16" src="//www.youtube.com/embed/aMY6qiib-Bc" width="560"></iframe>

<p class="callout success">**MEJORAS** Ya sé que colocando el helicóptero siempre arriba, siempre ganas!!  
**HAZ QUE SOLO SI TOCA BUILTING1 MUERE, PERO SI TOCA A BULDING2 QUE GANE UN PUNTO** de esta manera ya no se gana poniendo el helicóptero arriba del todo</p>

<iframe allowfullscreen="allowfullscreen" class="giphy-embed" frameborder="0" height="270" id="bkmrk--18" src="https://giphy.com/embed/f79OYWh5uwIfK" width="100%"></iframe>

Todos los programas de este curso se encuentran en este repositorio: [https://github.com/JavierQuintana/Echidna](https://github.com/JavierQuintana/Echidna)

#### <span style="color: rgb(22, 145, 121);">**B SOLUCIÓN CON mBlock**</span>

##### **<span style="color: rgb(22, 145, 121);">B1 Sprite helicóptero moviéndose según acelerómetro</span>**

**<span style="color: rgb(22, 145, 121);">B11 Añadir un disfraz al helicóptero de explosión. </span>**

Vamos a añadir un objetos: helicóptero de la biblioteca- Le vamos a añadir un disfraz explosión

1.- Añade un objeto sun, y borra el dibujo interior, y así parece una explosión

[![echidna-helicoptero1.jpg](https://libros.catedu.es/uploads/images/gallery/2023-11/scaled-1680-/echidna-helicoptero1.jpg)](https://libros.catedu.es/uploads/images/gallery/2023-11/echidna-helicoptero1.jpg)

2.- Exporta el fichero imagen svg

[![echidna-helicoptero5.jpg](https://libros.catedu.es/uploads/images/gallery/2023-11/scaled-1680-/echidna-helicoptero5.jpg)](https://libros.catedu.es/uploads/images/gallery/2023-11/echidna-helicoptero5.jpg)

3.- Añade al helicóptero el disfraz

[![echidna-helicoptero6.jpg](https://libros.catedu.es/uploads/images/gallery/2023-11/scaled-1680-/echidna-helicoptero6.jpg)](https://libros.catedu.es/uploads/images/gallery/2023-11/echidna-helicoptero6.jpg)

4.- Eligiendo el fichero svg exportado en el paso 3

[![echidna-helicoptero7.jpg](https://libros.catedu.es/uploads/images/gallery/2023-11/scaled-1680-/echidna-helicoptero7.jpg)](https://libros.catedu.es/uploads/images/gallery/2023-11/echidna-helicoptero7.jpg)  
![](https://libros.catedu.es/images/image6.png)

**<span style="color: rgb(22, 145, 121);">B12 Movimiento helicóptero</span>**

Vamos a hacer que helicóptero que se mueva según el acelerómetro: (Ver al final DETALLES MAPEO)

[![echidna-helicoptero12.jpg](https://libros.catedu.es/uploads/images/gallery/2023-11/scaled-1680-/echidna-helicoptero12.jpg)](https://libros.catedu.es/uploads/images/gallery/2023-11/echidna-helicoptero12.jpg)

En el arduino le asignamos las coordinadas a las variables globales A2 y A3

[![echidna-helicoptero11.jpg](https://libros.catedu.es/uploads/images/gallery/2023-11/scaled-1680-/echidna-helicoptero11.jpg)](https://libros.catedu.es/uploads/images/gallery/2023-11/echidna-helicoptero11.jpg)

#### <span style="color: rgb(22, 145, 121);">**B2 Solución edificio, cómo se reutiliza un sprite**</span>

<span style="color: rgb(22, 145, 121);">**B21 Exportación de un Sprites externos**</span>

<span style="color: rgb(0, 0, 0);">Esta parte es igual que A21 luego no lo repetimos</span>

<span style="color: rgb(22, 145, 121);">**B22 Importación de Sprites externos**</span>

Vamos a mblock e **IMPORTAMOS** el fichero que hemos exportado  
[![echidna-helicoptero3.jpg](https://libros.catedu.es/uploads/images/gallery/2023-11/scaled-1680-/echidna-helicoptero3.jpg)](https://libros.catedu.es/uploads/images/gallery/2023-11/echidna-helicoptero3.jpg)

Nos importa con sus disfraces Y SU CÓDIGO

Nos queda pues esta colección de objetos

[![echidna-helicoptero9.jpg](https://libros.catedu.es/uploads/images/gallery/2023-11/scaled-1680-/echidna-helicoptero9.jpg)](https://libros.catedu.es/uploads/images/gallery/2023-11/echidna-helicoptero9.jpg)

##### <span style="color: rgb(22, 145, 121);">**B3 Solución a la muerte del helicóptero**</span>

Vamos a poner que si toca un edificio, “explota” (o sea, cambia el disfraz a explosión), además envía el mensaje “komunikat1” que vemos que el script del edificio lo necesita para esconderse una vez terminado el juego (debe de ser ruso el mensaje es del autor del objeto edificio) :  
  
[![echidna-helicoptero13.jpg](https://libros.catedu.es/uploads/images/gallery/2023-11/scaled-1680-/echidna-helicoptero13.jpg)](https://libros.catedu.es/uploads/images/gallery/2023-11/echidna-helicoptero13.jpg)

El programa lo tienes aquí [https://planet.mblock.cc/project/3230430](https://planet.mblock.cc/project/3230430)

<p class="callout success">{{@5882#bkmrk-reto%3A-haz-que-solo-s}}</p>

<p class="callout warning"><span style="color: rgb(0, 0, 0);">Detalles MAPEO verlo en la situación E de mapeo: https://libros.catedu.es/books/echidna/page/mapeo</span></p>

<p class="callout success">PUEDES CAMBIAR ESTOS VALORES TESTEANDO LOS MOVIMIENTOS DEL SPRITE</p>