1
00:00:14,640 --> 00:00:18,640
En esta ocasión vamos a empezar a familiarizarnos con App Inventor

2
00:00:18,640 --> 00:00:25,019
haciendo una aplicación simple en la que utilizaremos un sensor del teléfono, así como algunos sprites.

3
00:00:25,519 --> 00:00:30,500
Lo primero que haremos será crear un nuevo proyecto y ponerle un nombre, como por ejemplo Pelota.

4
00:00:31,600 --> 00:00:36,740
Y en cuanto se disponga la interfaz, vamos a arrastrar algunos componentes que nos hacen falta.

5
00:00:37,520 --> 00:00:42,640
Para empezar, pondremos un Vertical Layout para crear una pequeña franja arriba

6
00:00:42,640 --> 00:00:50,960
que mostrará las puntuaciones. El resto de la pantalla será un canvas. Continuaremos agregando

7
00:00:50,960 --> 00:00:58,200
a la sección de puntuación un horizontal layout y dentro del mismo añadiremos dos labels, uno para

8
00:00:58,200 --> 00:01:06,299
la puntuación y el otro para contar cuánto tiempo lleva el jugador en nuestro juego. Renombramos

9
00:01:06,299 --> 00:01:21,719
los labels con nombres más fáciles de recordar, por ejemplo, puntuación y tiempo. Bien, y ahora

10
00:01:21,719 --> 00:01:28,019
de la sección Drawing and Animation, añadimos nuestro canvas en la parte más alta del vertical

11
00:01:28,019 --> 00:01:34,920
y pasamos a configurar los tamaños. Vamos a configurar este layout vertical diciéndole

12
00:01:34,920 --> 00:01:41,359
que el Width sea un Fill Parent para que llene toda la pantalla y el alto también. Al canvas

13
00:01:41,359 --> 00:01:46,840
le diremos también que llene toda la pantalla en horizontal y un Fill Parent en Height para

14
00:01:46,840 --> 00:01:56,189
que llene toda la pantalla a lo alto. Pero, fijaos que no ha llenado toda la pantalla.

15
00:01:56,650 --> 00:02:01,950
Esto es un error muy común. Nos sucede porque en el componente Screen, que es el componente

16
00:02:01,950 --> 00:02:07,209
principal de la pantalla, no hemos especificado cuál es la orientación de la pantalla. Le

17
00:02:07,209 --> 00:02:13,310
vamos a decir que veremos la pantalla en Portrait, vertical, e inmediatamente nos arregla todo

18
00:02:13,310 --> 00:02:20,770
esto. Al layout horizontal le vamos a decir que nos rellene toda la pantalla y a los text

19
00:02:20,770 --> 00:02:30,729
igual. Fill parent en uno y fill parent en el otro. Le daremos valor de 0 a uno y a otro

20
00:02:30,729 --> 00:02:38,500
y ya está más o menos configurado. Ahora, de la misma sección de dibujo y animación

21
00:02:38,500 --> 00:02:46,219
añadimos dos sprites al canvas. Uno va a ser el personaje, vamos a renombrarlo como

22
00:02:46,219 --> 00:03:09,990
tal. Y el otro será el objetivo, lo renombramos igual. Bien, vamos a añadir también un clock o

23
00:03:09,990 --> 00:03:17,830
timer, que lo encontramos dentro de sensores, al cual llamaremos reloj. Un timer o acelerómetro

24
00:03:17,830 --> 00:03:26,900
fuera de la ventana para que no estén visibles y que utilizaremos al final de la lección. Vamos

25
00:03:26,900 --> 00:03:56,819
a cargar un par de imágenes para los sprites. Cargamos otra para el segundo. Cambiamos

26
00:03:56,819 --> 00:04:02,500
los tamaños para que sean más pequeñitas, tanto de ancho como de alto y, claro, en las

27
00:04:02,500 --> 00:04:25,990
dos imágenes. Ahora, lo primero que haremos será mover la pelota. Para ello, nos iremos

28
00:04:25,990 --> 00:04:30,569
al área de programación, la sección de los bloques, y dentro de las propiedades de

29
00:04:30,569 --> 00:04:39,569
personaje, que es la pelota, vemos que hay un evento que es buen personaje, flung, do. El flung es un

30
00:04:39,569 --> 00:04:45,269
evento que se produce cuando se arrastra un objeto de un lugar a otro y lo que hará será captar la

31
00:04:45,269 --> 00:04:51,250
velocidad de la pelota y la orientación hacia donde lo han arrastrado y nosotros las aprovecharemos

32
00:04:51,250 --> 00:04:57,930
para establecer con ellas los valores de la pelota. Así que le vamos a decir que el heading adquiera

33
00:04:57,930 --> 00:05:10,800
la orientación con la que lo han arrastrado y le vamos a decir que el

34
00:05:10,800 --> 00:05:15,680
speed, que sería la velocidad, adquiera también la misma velocidad con la que lo

35
00:05:15,680 --> 00:05:20,459
han arrastrado. De esta forma vamos a cargar el emulador.

36
00:05:21,160 --> 00:05:25,839
Vamos a la pestaña de Connect y seleccionamos Emulador. A ver si nos

37
00:05:25,839 --> 00:05:34,600
funciona. Y ahora podemos comprobar que si arrastro la pelota a un lugar u otro

38
00:05:34,600 --> 00:05:39,160
adquiere la orientación y velocidad infringida con el arrastre del cursor.