Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

6. Aplicaciones simples Parte I - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 2 de mayo de 2022 por Jesús P.

231 visualizaciones

Más información Transcripción

Descargar la transcripción

En esta ocasión vamos a empezar a familiarizarnos con App Inventor 00:00:14
haciendo una aplicación simple en la que utilizaremos un sensor del teléfono, así como algunos sprites. 00:00:18
Lo primero que haremos será crear un nuevo proyecto y ponerle un nombre, como por ejemplo Pelota. 00:00:25
Y en cuanto se disponga la interfaz, vamos a arrastrar algunos componentes que nos hacen falta. 00:00:31
Para empezar, pondremos un Vertical Layout para crear una pequeña franja arriba 00:00:37
que mostrará las puntuaciones. El resto de la pantalla será un canvas. Continuaremos agregando 00:00:42
a la sección de puntuación un horizontal layout y dentro del mismo añadiremos dos labels, uno para 00:00:50
la puntuación y el otro para contar cuánto tiempo lleva el jugador en nuestro juego. Renombramos 00:00:58
los labels con nombres más fáciles de recordar, por ejemplo, puntuación y tiempo. Bien, y ahora 00:01:06
de la sección Drawing and Animation, añadimos nuestro canvas en la parte más alta del vertical 00:01:21
y pasamos a configurar los tamaños. Vamos a configurar este layout vertical diciéndole 00:01:28
que el Width sea un Fill Parent para que llene toda la pantalla y el alto también. Al canvas 00:01:34
le diremos también que llene toda la pantalla en horizontal y un Fill Parent en Height para 00:01:41
que llene toda la pantalla a lo alto. Pero, fijaos que no ha llenado toda la pantalla. 00:01:46
Esto es un error muy común. Nos sucede porque en el componente Screen, que es el componente 00:01:56
principal de la pantalla, no hemos especificado cuál es la orientación de la pantalla. Le 00:02:01
vamos a decir que veremos la pantalla en Portrait, vertical, e inmediatamente nos arregla todo 00:02:07
esto. Al layout horizontal le vamos a decir que nos rellene toda la pantalla y a los text 00:02:13
igual. Fill parent en uno y fill parent en el otro. Le daremos valor de 0 a uno y a otro 00:02:20
y ya está más o menos configurado. Ahora, de la misma sección de dibujo y animación 00:02:30
añadimos dos sprites al canvas. Uno va a ser el personaje, vamos a renombrarlo como 00:02:38
tal. Y el otro será el objetivo, lo renombramos igual. Bien, vamos a añadir también un clock o 00:02:46
timer, que lo encontramos dentro de sensores, al cual llamaremos reloj. Un timer o acelerómetro 00:03:09
fuera de la ventana para que no estén visibles y que utilizaremos al final de la lección. Vamos 00:03:17
a cargar un par de imágenes para los sprites. Cargamos otra para el segundo. Cambiamos 00:03:26
los tamaños para que sean más pequeñitas, tanto de ancho como de alto y, claro, en las 00:03:56
dos imágenes. Ahora, lo primero que haremos será mover la pelota. Para ello, nos iremos 00:04:02
al área de programación, la sección de los bloques, y dentro de las propiedades de 00:04:25
personaje, que es la pelota, vemos que hay un evento que es buen personaje, flung, do. El flung es un 00:04:30
evento que se produce cuando se arrastra un objeto de un lugar a otro y lo que hará será captar la 00:04:39
velocidad de la pelota y la orientación hacia donde lo han arrastrado y nosotros las aprovecharemos 00:04:45
para establecer con ellas los valores de la pelota. Así que le vamos a decir que el heading adquiera 00:04:51
la orientación con la que lo han arrastrado y le vamos a decir que el 00:04:57
speed, que sería la velocidad, adquiera también la misma velocidad con la que lo 00:05:10
han arrastrado. De esta forma vamos a cargar el emulador. 00:05:15
Vamos a la pestaña de Connect y seleccionamos Emulador. A ver si nos 00:05:21
funciona. Y ahora podemos comprobar que si arrastro la pelota a un lugar u otro 00:05:25
adquiere la orientación y velocidad infringida con el arrastre del cursor. 00:05:34
Subido por:
Jesús P.
Licencia:
Reconocimiento - No comercial
Visualizaciones:
231
Fecha:
2 de mayo de 2022 - 20:39
Visibilidad:
Público
Centro:
IES LA DEHESILLA
Duración:
05′ 49″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
124.80 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid