Brick Breaker

Autor/a: Queralt Pons

Les principals característiques d’aquesta APP són:

  • Diferents pantalles com a menú principal, tria de nivell, resultat final,…
  • Un submenú amagat dins d’una pantalla a partir de la possibilitat de mostrar i amagar elements segons l’evolució del joc.
  • La possibilitat de crear tants nivells de dificultat com es vulguin (cada un en una pantalla nova) i que en cada nivell canviïn el nombre de blocs, la velocitat de la pilota i la barra, el nombre de vides,…
  • Creació d’una base de dades del resultat ja que sinó al tancar la APP perdríem tota la informació del joc. Aquesta info es mostrarà a la pantalla de Total Score.

 

Determinació de paràmetres:

El primer que farem al Blocks Editor serà configurar tots els paràmetres del joc com ara nombre de vides, velocitat i mides de la pilota, què és el que veiem i el què no a l’inici del joc,…

Això ho farem a partir de determinar diferents procedures que configuraran les diferents respostes a les diferents accions.

El mostrat a continuació es tracta del Set up central dels paràmetres del joc:

Sin título-1

Configuració d’accions:

Hem creat tots els procedures anteriors per a poder configurar totes les accions del joc que principalment es basaran en atorgar una funció a cada botó de la pantalla i a evolució dels paràmetres anteriors segons si el jugador guanya o perd.

A continuació veiem la programació del bloc del temps (Timer) i de la pilota (Ball). També la de cadascún dels blocs de la pantalla que aniràn desapareixent.

Sin título-3Sin título-2

És una aplicació que agrupa les principals funcions bàsiques de l’App Inventor i està bé per practicar-les de cara a la nostre aplicació personal.

 

cómo crear una panorámica arrastrando la imagen.

http://puravidaapps.com/snippets.php#stopCannibalism

Autora:  Haizea Galarreta Fernández

FLUNG

flung 2

(number x, number y, number speed, number heading, number xvel, number yvel, boolean flungSprite).

Utilidades:

  • Permite  visualizar toda la panorámica sin que tengas que reducir la anchura de la imagen.
  • Permite la opción de pasar de una imagen a otra con el gesto de arrastrar.

A tener en cuenta:

  • No equivocar con la opción drag.

Introducción

Para que al hacer un gesto de arrastrar una imagen funcione hay que crear un canvas para obtener una posición inicial (x,y). Además, se obtiene la velocidad y el punto de partida del gesto, al igual que componente de la velocidad X e Y del vector de arrastre.

ejes

En screen 1 los componentes que necesitamos son screen uno (screenorientation<landscape) y un canvas con la imagen de la habitación en background image.

 1.      Definimos dos variables con dos nombres diferentes:

  • A una se le asigna un número.
  • A la otra le añadimos una lista donde subiremos las fotos que compongan la panorámica (en este caso serían dos).

variables

2.      Para que al tocar con el dedo la pantalla podamos arrastrar la imagen hacia la izquierda y derecha necesitamos canvas.flung.

  • Necesitamos condiciones if else.
    • If  la velocidad de la coordenada X es menor a 0. Se cumplirá la función de que se pase de la primera variable a la variable con la lista (es decir, algo así a rotarla) hacia la izquierda.
    • If  la velocidad de la coordenada X es mayor a 0. Se cumplirá la función de que se pase de la primera variable a la variable con la lista (es decir, algo así a rotarla) hacia la derecha.
  • Hay que añadir la opción canvas. Background image y le agregaremos la lista de las dos variables (de número y de lista) con las que hemos estado trabajando. 

Este tutorial también sirve con el gesto de arrastrar queremos que se den transiciones de imágenes. Para ello, añadiríamos las imágenes con las que se quiere intercambiar a la lista.

todo

Problemas:

  • No consigo averiguar si existe la opción de poder conseguir una panorámica con una sola imagen. Es decir sin tener que dividirla y dotarle de izquierda o derecha a cada lado.
  • en el caso de que utilice el emulador, la pantalla no permite la opción de girarla horizontalmente.

 

QuizMe: Treball amb varies llistes de variables relacionades mitjançant la variable índex.

http://beta.appinventor.mit.edu/learn/tutorials/quizme/quizme.html
Autor: Isaac Rodríguez Ramos

Fent el tutorialQuizMe, que ofereix la web oficial de App Inventor, es poden aprendrevaries funcions noves d’aquest programa, tals com:

  • Fer una variable que sigui una llista d’elements i que aquests siguin seleccionats.
  • Crear una variable que unifiqui totes les variables que continguin una llista d’elements, fent així que si hi ha una llista de preguntes, respostes i fotografies, tota pregunta vagi amb la seva corresponent fotografia i resposta.

Creació de llista de variables

Per a crear una variable que sigui una llista es tant simple com crear la variable, adjuntar-li un “make a list” i en els diferents items anar especificant els elements que vulguem incloure, sempre amb la funció “text”.

 1

Crida de variables

Així doncs, tenim una variable que inclou al mateix temps molts items o subvariables. Per a poder-les ‘cridar’ s’ha de seleccionar quan la volem (per exemple quan inicies la aplicació), on han de ser traslladades (per exemple a un “Label”), quina llista (en aquest cas “QuestionList”) i quina variable (com en tenim tres en la “QuestionList”, del 1 al 3). És important veure que la numeració a les llistes de variables a App Inventor comença al 1, a diferencia del Processing que començava al 0, creant confusions entre programes.

Per tant, per dur a terme aquesta ‘crida’ de, posem per cas, la subvariable 1, haurem de agafar la funció “Screen1.Initialize”, incloure en aquesta “QuestionLabel.Text”, posteriorment “selectlistitem” i a “list” triar la llista en qüestió i a “index”, mitjançant “number”, indicar quina variable, en aquest cas “1”.

2

Variable Índex o Guia

No obstant, en aquest cas, sempre que s’obri la pantalla apareixerà la subvariable 1. Si volem que, al clicar un botó cada cop aparegui una subvariable diferent, en crearem una altre anomenada en el tutorial com a “currentQuestionIndex”. Aquesta servirà  com a guia a totes les llistes; la variable índex.

3

Col·locarem la variable índex com a “index” en el “selectlistitem”. Llavors, quan cliquem un botó, abans de seleccionar cap item, indiquem que la variable “currentQuestionIndex” augmenti x de valor (normalment 1, en el cas de que vulguem que surtin per ordre) o col·loquem un “randominteger” from “1” to “lenght of list” juntament amb la llista corresponent, en el cas de que vulguem que les subvariables surtin saltejades atzarosament.

4

Com veiem en la captura de pantalla, cada cop que es cliqui al botó, apareixerà la variable següent a la llista “QuestionList”

Aquest sistema, si ho volem fer sempre per ordre de la llista, crea un problema. Quan s’arriba al final de la llista i no queden subvariables, la app es bloqueja. Per tant, haurem de crear una funció com a retorn a la primera subvariable. Ho farem mitjançant un “if” quan cliquem el botó, fent que si la variable “currentQuestionIndex” arriba al final de la llista, aquesta retorni al valor “0”.

9

Coordinació de llistes

Així doncs, mitjançant una variable guia oíndex com la “currentQuestionIndex” podem fer que moltes llistes vagin coordinades. En aquest tutotial, per exemple, les preguntes han d’anar coordinades amb la seva corresponent fotografia. Així doncs, es crea el següent esquema:

6

Amb tot això, haurem pogut crear un “Label” i una “Image” que aniran canviant conjuntament  a mida que es cliqui un botó gràcies a les llistes de variables i les seves corresponents funcions. A més, mitjançant una variable guia o índex, farem que cada element d’una llista correspongui a un d’una altre llista.

A més, si agafes aquesta variable guia i, en el Blocks Editor, la cliques amb el botó dret i selecciones “watch” al mateix moment que tens l’aplicació connectada amb el dispositiu mòbil, et permet veure quin valor té en aquell moment. Aquesta funció et permet trobar errors.

7

Donar resposta correcte o incorrecte

Pel que fa les respostes, es fa mitjançant un “ifelse”, doncs si la solució que dóna l’usuari correspon en exactitud a la variable de la llista de solucions, serà correcte i, sinó, incorrecte. Veiem com també a cada pregunta correspon la seva solució intervenint la variable “currentQuestionIndex”.

8

Inconvenients de la app QuizMe

Com a coses negatives a aquesta aplicació, no es molt viable el fet de que s’hagi descriure idènticament la solució com està a la llista, doncs el fet de que escriguis una lletra majúscula o minúscula diferent ja et dóna error. Això es podria solucionar donant varies opcions de resposta o fent una llista dins de la llista donant les varies alternatives a la resposta (amb majúscules, minúscules, accents…)

Per altra banda, no m’ha acabat de funcionar a la perfecció en el meu dispositiu mòbil, però aquest fet pot ser degut a problemes de format o incompatibilitat…

Tutorial: Treball amb múltiples pantalles (+ Drag & Drop)

[Us podeu descarregar aquí l'App d'exemple que conté també l'exemple de Drag & Drop: Drag_and_Drop_3pantalles]

Treballar amb múltiples pantalles amb APP Inventor és molt senzill, però cal tenir en compte el següent:

  • Cada pantalla tindrà els seus propis components i el seu propi Blocks Editor
  • Crear, esborrar i navegar entre pantalles es fa mitjançant la pàgina de Disseny.
  • No podem canviar el nom de la primera pantalla (de les altres sí) però sí el text que apareix a dalt de tot de l’App a la tauleta o telèfon, al camp TITTLE de les propietats de la pantalla.
  • Podem esborrar totes les pantalles excepte la primera.
  • Quan treballem amb varies pantalles a l’APP Inventor, quan canviem de pantalla mitjançant la part de disseny hem d’esperar que el Blocks Editors carregui els blocs corresponents a la pantalla que hem seleccionat abans de tocar res. Si no ho fem, es poden produir errors irreversibles amb els blocs.
  • Ni amb l’emulador ni amb el telèfon o tauleta es pot provar el canvi de pantalles en la connexió a temps real. Caldrà sempre finalitzar l’APP i passar-la al telèfon o emulador per a provar-ho.

Crear pantalles:

A la interfície de disseny, cal clicar ADD SCREEN. Un cop tinguem varies pantalles, ens apareixeran a la dreta de Screen1 per a poder navegar entre elles durant la creació de l’App.

AI_Multiples_Pantalles_01

Duplicar pantalles:

A vegades ens podem trobar amb la necessitat de duplicar una pantalla (per crear-ne una altra de molt semblant dins la mateixa APP, per exemple).

App inventor no contempla aquesta possibilitat, però hi ha una manera de fer-ho:

  1. Baixar el projecte en format ZIP (des de my projects: More options/Upload Source amb l’App que voleu baixar seleccionada)
  2. Descomprimir-lo
  3. Navegar a src/appinventor/ai_[el_vostre_nom]/[nom de l’APP]
  4. Duplicar els arxius .blk i .smc i canviar-los el nom (el mateix a tots dos)
  5. Tornar a comprimir els arxiu en un ZIP, de nom diferent al que heu baixat, i pujar-lo a APP Inventor (des de my projects: More options/Upload Source)
  6. Si l’obriu, haurien d’aparèixer dues pantalles idèntiques amb el nom original i el que heu posat vosaltres

Font: https://groups.google.com/forum/?fromgroups=#!topic/programming-with-app-inventor/b9neMJXBJ2A [obriu el primer missatge]

 

Navegació entre pantalles dins l’App:

Per fer la navegació entre pantalla en codi, és a dir, dins l’APP finalitzada, heu d’utilitzar el bloc open another screen que trobareu a l’apartat de blocs Built-in/Control.

Aquesta acció de crida l’haureu de posar en el context necessari. A la imatge, dins l’esdeveniment Click d’un botó anomenat Football.

Finalment, la pantalla on voleu navegar no us apareixerà com a component al menú de blocs, sinó que haureu de fer servir un bloc de text i escriure el nom exacte de la pantalla a la que voleu navegar.

AI_Multiples_Pantalles_02

A l’aplicació Drag_and_DropV5_3pantalles.zip [a l’aula global], ho podeu veure.

Recordeu que això només es pot provar un cop l’APP s’ha finalitzat i passat al telèfon, tauleta o emulador.

 

Canvi de pantalla

Per afegir un canvi de pantalles a la nostra aplicació s’ha de pensar de la mateixa manera que ho fem per crear vàries screens independents, només afegint el fet que s’envien missatges entre elles. El canvi de pantalles és, al cap i a la fi, enviar un missatge d’una pantalla autònoma a l’altra.

Tan és així que, quan dissenyem, cada pantalla té el seu espai i els seus components propis, i igual en el Blocks Editor, on només podrem veure els components corresponents a la pantalla que tinguem activa, i cap element d’alguna altra pantalla de l’app. És important recordar que cap component o variable que definim en una pantalla serà accessible des d’una altra, i que per tant els blocs del codi vinculats a una pantalla no es poden referir al blocs del codi d’una altra pantalla.

És important recordar que quan creem un projecte, per defecte, App Inventor anomena la primera pantalla com a Screen 1, i que tot i que li podem canviar el nom al menú de propietats, l’opció de reanomenar-la del tot no hi és, i quan es treballi al Blocks Editor s’haurà de tenir en compte.

Quan s’afegeix una altra pantalla, des de l’opció Add Screen, a la part superior del Design Editor, sí que se’ns permet donar-li un nom, i si es treballa amb vàries pantalles, és important donar-li un nom significatiu per evitar problemes a posteriori.

Treballar amb vàries pantalles, com s’ha dit, és fàcil: es canvia d’una a l’altra, s’afegeixen els elements que siguin necessaris i s’editen com es vulguin.

Una vegada obert el Blocks Editor, ens adonem que només apareix l’editor de la pantalla que tenim oberta al Design Editor, i reiterant el que s’ha avisat abans, els elements d’una no apareixen a l’altre.

Canviar d’una pantalla a l’altre mitjançant un botó

Una vegada en el Blocks Editor, i en la primera pantalla (Screen 1), per fer el pas a la pantalla del menú principal (menu), farem servir l’opció, dins Built-in/Control, de open another screen with quan cliquem un botó. En aquest cas, en pseudocodi, seria “quan cliquem el botó de maria (mariabutton), s’obre la pantalla menú”. Aquest seria el pas que comentàvem de l’espai introductori al menú principal.

Com hem dit, la pantalla menú no apareix com a elements, ja que pertany a una altra pantalla. El que s’ha de fer és cridar a un component de text i anomenar-lo exactament igual que la pantalla on volem anar. Aquesta dinàmica funciona per totes les pantalles de la mateixa manera, i així un sol botó o n’hi hagi més, com a l’exemple següent, on es mostren els quatre canvis de pantalla des del menú principal, als quatre espais que construeixen el joc.

És important recordar que quan creem un projecte, per defecte, App Inventor anomena la primera pantalla com a Screen 1, i que tot i que li podem canviar el nom al menú de propietats, l’opció de reanomenar-la del tot no hi és, i quan es treballi al Blocks Editor s’haurà de tenir en compte.

Quan s’afegeix una altra pantalla, des de l’opció Add Screen, a la part superior del Design Editor, sí que se’ns permet donar-li un nom, i si es treballa amb vàries pantalles, és important donar-li un nom significatiu per evitar problemes a posteriori.

Treballar amb vàries pantalles, com s’ha dit, és fàcil: es canvia d’una a l’altra, s’afegeixen els elements que siguin necessaris i s’editen com es vulguin.

Una vegada obert el Blocks Editor, ens adonem que només apareix l’editor de la pantalla que tenim oberta al Design Editor, i reiterant el que s’ha avisat abans, els elements d’una no apareixen a l’altre.

Canviar d’una pantalla a l’altre mitjançant un botó

Una vegada en el Blocks Editor, i en la primera pantalla (Screen 1), per fer el pas a la pantalla del menú principal (menu), farem servir l’opció, dins Built-in/Control, de open another screen with quan cliquem un botó. En aquest cas, en pseudocodi, seria “quan cliquem el botó de maria (mariabutton), s’obre la pantalla menú”. Aquest seria el pas que comentàvem de l’espai introductori al menú principal.

canvidepantalla

Com hem dit, la pantalla menú no apareix com a elements, ja que pertany a una altra pantalla. El que s’ha de fer és cridar a un component de text i anomenar-lo exactament igual que la pantalla on volem anar. Aquesta dinàmica funciona per totes les pantalles de la mateixa manera, i així un sol botó o n’hi hagi més.

El canvi de pantalles es podrà comprovar un cop, el joc sigui passat a un mòbil o tauleta.