V minulosti som pridával článok, akým spôsobom je možné pomerne jednoducho a bez väčších znalostí programovania vytvoriť mobilnú aplikáciu - https://www.dkubinsky.sk/clanok/jednoduche-vytvorenie-mobilnej-aplikacie-bez-znalosti-programovania
Dnes si ukážeme postup pre vytvorenie inej aplikácie s názvom Basketbal. Ide skôr o ukážku možnosti jednoduchého programovania mobilných aplikácií, než vytvorenie profi hry. Zadanie aplikácie je nasledovné:
Mobilná aplikácia sa bude volať Basketbal. V mobile po inštalácii bude mať ikonku lopty. Po otvorení aplikácie sa zobrazí biela plocha na celú obrazovku, menšia basketbalová lopta v hnedej farbe a väčší kôš v čiernej farbe. Nakláňaním telefónu sa bude lopta pohybovať v smere náklonu a ak príde až do koša hra sa skončí. Kôš zmení sa zafarbí na červeno, basketbalová lopta zmizne a vypne sa sledovanie náklonu telefónu. Aplikácia bude obsahovať tlačidlo Štart, ktorým sa hra spustí opäť.
Vytvorenie plátna, nastavenie na celú obrazovku, ako aj nastavenie farby, pridanie názvu aplikácie a ikonky už nebudeme opakovať. Celý postup je popísaný tu: https://www.dkubinsky.sk/clanok/jednoduche-vytvorenie-mobilnej-aplikacie-bez-znalosti-programovania
Začneme pridaním lopty a koša. V ľavom stĺpci hľadáme položku Drawing and Animation (1). Po otvorení zvolíme Ball (2). Kliknutím na túto položku a presunutím do strednej časti s vizuálom mobilného telefónu ju pridáme do projektu. Následne ju uvidíme v pridaných komponentoch (3). Tu nastavíme farbu pozadia BackgroundColor podľa zadania. Veľkosť lopty nastavíme v časti Radius (4) podľa seba. Kôš posunieme do hornej časti obrazovky, lopta môže byť v spodnej časti. Aby sa mi ľahšie v práci orientovalo, jednotlivé komponenty si správne pomenujem.
Teraz pridáme tlačidlo Štart. V ľavom stĺpci hľadáme položku User Interface (1). Po otvorení zvolíme Button (2). Kliknutím na túto položku a presunutím do strednej časti s vizuálom mobilného telefónu ju pridáme do projektu. Následne ju uvidíme v pridaných komponentoch (3). Tu nastavíme text tlačidla, v našom prípade Štart.
Na záver v režime dizajnéra potrebujeme pridať funkciu, ktorá dokáže sledovať zmeny náklonu telefónu. V ľavom stĺpci prejdem na položku Sensors (1) a zvolím OrientationSensor (2). Práve to je senzor na zistenie zmien pohybu a orientácie. Opäť naň kliknem a ťahaním ju presuniem do strednej časti obrazovky s vizuálom mobilného telefónu. MIT App Inventor mi tento nástroj pridá ako Non-visible components, teda neviditeľný komponent.
Programovanie mobilnej aplikácie
Z dizajnérskeho pohľadu by toto malo byť všetko, prejdime k programovaniu pomocou blokov. Keďže už základné postupy zo skladania blokov poznáme z minulého článku, pridám sem rovno celý kód a stručne si ho popíšeme.
1. Ak sa mení poloha
Zavolá sa funkcia pre zmenu polohy lopty v zmysle, že X súradnica lopty bude získaná ako údaj od senzoru orientácie v tomto prípade Roll. To isté platí pre Y súradnicu, kde použijeme parameter Pitch. Možno nasledujúci obrázok nám umožní lepšie pochopiť, prečo Roll a prečo Pitch. Finálne číslo môžem vynásobiť -1, aby som dosiahol opačný efekt, ak ho budem potrebovať. Teda lopta buď pôjde v smere gravitácie, alebo opačne.
2. Ak sa lopta zrazí s košom
Nastaví sa farba koša na červenú, nastavíme viditeľnosť lopty na false, teda lopta nebude viditeľná a zároveň nastavím OrientationSensor.Enabled na false, teda senzor sa vypne.
3. Ak stlačím tlačidlo Štart
OrientationSensor.Enabled sa nastaví späť na true, teda senzor sa opätovne zapne. Kôš sa zafarbí na čierno, pre loptu sa zmení viditeľnosť na true. A posledná časť je nastavenie východiskovej pozície lopty na mnou definované súradnice. Ak nechcem tipovať náhodné čísla súradníc, tak v dizajnérovi si loptu graficky umiestnim, kde chcem a súradnice si z tade rovno prepíšem.
Projekt hry Basketbal sa da rozšíriť aj o ďalšie jednoduché komponenty, napríklad spočítavanie bodov, keď bude lopta v koši, prípadne integráciu časovača atď...
Následne môžem celý projekt publikovať, stiahnuť do mobilného telefónu a otestovať. Celý proces, akým spôsobom dostanem projekt z MIT App Inventor do mobilu som popísal v predchádzajúcom článku - https://www.dkubinsky.sk/clanok/jednoduche-vytvorenie-mobilnej-aplikacie-bez-znalosti-programovania
Pridať komentár k článku