loading...

Jiří Hýsek

nájemný programátor
 

Blogu většinou o programování mobilních aplikací - pro iOS v Rubymotion, multiplatformních mobilních her Corona SDK a webových aplikací v Ruby on Rails.

Multiplatformní mobilní hra krok za krokem, část 1

Multiplafromgamecorona

Připravil jsem krátký seriál o tom, jak udělat jednoduchou mobilní hru, která poběží na Androidu i na iOS. Bude se dobře zobrazovat nezávisle na velikosti obrazovky nebo poměru stran.

Seriál je určen lidem, kteří zatím mobilní hru nebo aplikaci neprogramovali a třeba myslí, že to bude kdoví jak složité. Nebude. Projdeme si to od začátku pěkně krok za krokem a uvidíte.

Protože chci hlavně vysvětlit postup a použitou technologii, samotná hra nebude moc složitá. Budem dělat hledání pěti rozdílů mezi dvěma obrázky. Angry Birds si třeba uděláme později, až budete mít v malíčku tohle :) 

V tomhle prvním díle se budu zabývat hlavně takovou tou přípravou. Je to potřeba projít, aby se nám pak líp programovalo. Není to složíté, jen se bojím, že je to spíš trochu nudné. Ale překousněte to, další díl vypustím brzy, tak programování (tzn. ta zábavná část) bude brzy následovat.

Vývojová platforma

Použijeme vývojovou platformu Corona SDK. Je to komerční produkt, ale nabízejí i bezplatnou verzi, která pro naše účely bude úplně stačit. Pro stažení je potřeba se na jejich webu zaregistrovat, ale nechtějí skoro žádné informace, je to jen pro autentizaci při buildování aplikace - aplikace se builduje na jejich serverech. Mají verzi pro WIndows a Mac.

Můžeme začít úplně od nuly, ale já použiju vlastní základní předkonfigurovanou aplikaci, o které jsem psal před pár dny.

  $ git clone git@github.com:jhysek/Minimal-Corona-SDK-Template.git Rozdily
  $ cd Rozdily

Souřadnice a pozicování

Tato šablona obsahuje nastavení, která se nám budou hodit na to, abysme se správně vypořádali s různými rozlišeními a různými poměry stran různých zařízení, na kterých chceme, aby naše hra fungovala. V souboru config.lua jsou důležité tři zvýrazněné řádky:

application={
  content={
    width=360,
    height=640,
    scale="zoomEven" 
....

width a height udává šířku a výšku virtuální velikost obrazovky (v konfiguraci se uvádí rozměry při orientaci displeje na výšku), kterou budeme ve hře používat. Corona se už postará o zvětšení/zmenšení na skutečnou velikost displeje. Tzn. i když hru spustíme na iPhone 6 plus, které má na delší straně displeje 1920 pixelů, bude obraz zabírat celý displej i přesto, že máme nastavenou výšku 640. Souřadnice 0 bude úplně nahoře (potažmo vlevo při orientaci na šířku), 640 úplně dole (vpravo).

scale zase určuje, jakým způsobem se bude obraz škálovat. Zde máme nastavený poměr výška:šířka 16:9. Ale jak se to má zobrazit např. na iPadu, který má poměr stran 4:3? Tohle je řečeno proměnnou scale. Možnosti jsou 3. "letterbox", "zoomEven" a "zoomStretch". Rozdíl mezi nimi je dobře vidět na obrázku vypůjčeného z dokumentace. Oranžově ohraničená oblast je obrazovka naší hry, černá plocha znázorňuje displej zařízení.

U možnosti "letterbox" se celá obrazovka naší hry přizpůsobí velikosti displeje tak, aby byla vždy vidět (a zároveň vyplňovala co nejvíce místa). To znamená, že na zařízeních, které větší poměr šířka:výška než máme nastaveno config.lua, zůstanou na bocích černé, nevyužité pruhy. Možnost "zoomEven" vyplní celou obrazovku, ale může se stát, že se naopak některé části naší hry na obrazovku nevejdou a nebudou se tudíž zobrazovat. Třetí možnost "zoomStretch" vyplní přesně celou obrazovku, ale pouze za cenu deformace obrazu. Pokud bysme tedy naši hru s nastaveným poměrem stran 16:9 spustili např. na iPadu, pak by se v případě nastavení scale na "zoomStretch" obraz horizontálně "zmáčknul", aby se vešel na obrazovku.

Deformace obrazu se mi vůbec nelíbí a černé, nevyužité pruhy taky ne. Proto používám zoomEven. Počítám s tím, že se část může oříznout. Ale jde většinou jen o pozadí - důležité prvky budeme umísťovat relativně ke skutečnému začátku obrazovky. Pokud např. budeme chtít něco zobrazit v levém horním rohu, nebudeme používat souřadníci 0x0, protože ta se může nacházet mimo obrazovku.

Naštěstí získat v Coroně souřadnici skutečného začátku obrazovky je snadné. A díky předdefinovaným proměnným, které najdeme v main.lua, to bude ještě snadnější. Jde o ty, které začínají podtržítkem (to je jen takové moje rozlišení, aby se to nemohlo s ničím plést, jinak se můžou jmenovat jakkoli):


local composer=require("composer")

_W=display.contentWidth    -- celková šířka obrazovky dle configu
_H=display.contentHeight   -- celková výška obrazovky dle configu
_AW=display.actualContentWidth  -- šířka viditelné části obrazovky 
_AH=display.actualContentHeight -- výška viditelné části obrazovky
_T=display.screenOriginY   -- vrchní souřadnice viditelné části obrazovky
_B=_T + _AH                -- spodní souřadnice viditelné části obrazovky
_L=display.screenOriginX   -- levá souřadnice viditelné části obrazovky 
_R=_L + _AW                -- pravá souřadnice viditelné části obrazovky

display.setStatusBar( display.HiddenStatusBar )
composer.gotoScene("app.game")

 

Při umisťování prvků nebudeme jako x-ovou souřadnici začátku obrazovky používat 0, ale proměnnou _L. Stejně tak y-ová souřadnice začátku bude _T. Šířka viditelné obrazovky bude _AW, výška _AH. Pokud budeme chtít nějaké prvky umisťovat relativně ke spodní části obrazovky nebo k pravé části, poslouží nám proměnné _B, resp. _R.

Objekty se v Coroně implicitně pozicují od jejich středu. Takže když text umísítíme v ose x do _W / 2, pak to znamená, že prostředek textu bude v polovině obrazovy. Nezávisle na tom, jak je text široký. Např. text uprostřed obrazovky, 50 bodů od spodního okraje bude mít souřadnice (_W / 2) x (_B - 50).

Pozicování od středu objektu je většinou šikovnější než od levého horního okraje, jen je potřeba s tím počítat. Je možné snadno nastavit i jiný způsob pozicování, ale o tom až později.  

Teorie myslím bylo proteď dost, příště si něco naprogramujeme. Pokud chcete být informováni o dalších dílech, sledujte mě na twitteru, facebooku, linkedinu nebo si blog přidejte do RSS čtečky. A nebo se sem jen občas mrkněte :) 

 

Zpět na seznam článků