Activa JavaScript para disfrutar de los vídeos de la Mediateca.
5.- Canvas, sprites y aplicaciones con más de una pantalla - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Ahora que ya hemos aprendido lo más básico de App Inventor y hemos utilizado algunos de sus elementos más fáciles, vamos a ver dos más que nos serán indispensables a la hora de hacer cualquier tipo de juego.
00:00:15
Estos elementos son el canvas y los sprites, y los podemos encontrar en la sección de dibujo y animación.
00:00:29
Empezaremos viendo el canvas. Este elemento será el lienzo en el cual pintaremos nuestros personajes y por encima del cual se moverán.
00:00:36
vamos a arrastrar un canvas y lo vamos a situar en la pantalla
00:00:45
haremos que el ancho se ajuste a la pantalla y el alto le pondremos unos 300
00:00:51
píxeles ahora vamos a añadir un sprite como veis a la derecha nos salen muchas
00:00:57
propiedades algunas de las cuales nos serán muy útiles y nos ahorrarán mucho
00:01:06
trabajo primero cargaremos alguna imagen para nuestro sprite en mi caso utilizaré
00:01:11
esta imagen de una pelota. Le cambiamos el tamaño a 30 píxeles por 30 píxeles. Ahora le daremos un
00:01:19
poco de velocidad en la casilla Speed y en la propiedad Heading le escribiremos un 45. Este 45
00:01:33
son los grados que indican hacia dónde apunta el objeto. Vamos a probarlo y como podéis ver se ha
00:01:42
movido en la dirección que le hemos indicado, hasta tocar el borde donde ha quedado atrapado.
00:01:57
Podemos cambiarle el ángulo y la velocidad. Y aquí lo tenemos. Se vuelve a enviar y,
00:02:02
como veis, ya se mueve en otra dirección y más rápido. Aquí vemos cómo se queda atrapado en
00:02:13
una esquina. Más adelante veremos qué bloques hemos de utilizar para trabajar con estos sprites
00:02:21
y Canvas y ya haremos instrucciones más complejas. Vamos a ver de forma rápida y sencilla cómo
00:02:27
crear aplicaciones con más de una pantalla. En la parte de arriba tenemos un desplegable
00:02:35
que dice Screen 1 y un botón que dice Añadir pantalla, Add Screen. Entonces, con estos
00:02:40
botones añadiremos pantallas o conmutaremos entre ellas. Hago un clic y le digo que me
00:02:47
haga una pantalla que se llame Screen 2. La creará. Ahora estoy en la pantalla 2 y si hago clic en el
00:02:54
desplegable vuelvo a la pantalla 1. Voy a crear un botón en una pantalla que diga abrir y en la
00:03:01
segunda pantalla hago otro botón que diga cerrar. Bien. En la sección de bloques voy a encontrar
00:03:16
unos llamados Open Screen Name y Close Screen que me permiten abrir y cerrar pantallas. Voy a hacer
00:03:31
que al pulsar el botón se abra una pantalla y le escribo el nombre de la pantalla. Cambio a la
00:03:46
pantalla 2 y en la pantalla 2 al botón le digo que al pulsar el botón cierre la pantalla. Vuelvo al
00:04:02
principal y cargo el emulador. Se abre la segunda pantalla y al pulsar el botón
00:04:19
cerrar volveré a la primera pantalla.
00:04:34
- Subido por:
- Jesús P.
- Licencia:
- Reconocimiento - No comercial
- Visualizaciones:
- 207
- Fecha:
- 17 de abril de 2022 - 20:39
- Visibilidad:
- Público
- Centro:
- IES LA DEHESILLA
- Duración:
- 04′ 48″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1280x720 píxeles
- Tamaño:
- 86.45 MBytes
