Pomocí hyperPad můžete vytvořit svůj projekt pro více zařízení a velikostí obrazovek. Pokud jde o podporu různých zařízení, existují dva typy projektů, projekty specifické pro zařízení a univerzální projekty.

Projekty specifické pro zařízení: Vytvořte samostatnou verzi svého projektu pro každou platformu, kterou chcete podporovat. Při vytváření projektu určíte jediné zařízení pro svůj projekt. Například pokud chcete vytvořit pouze hru pro iPad, vyberte POUZE iPad (4:3) při vytváření projektu.

Univerzální projekty: Podporujte více zařízení jedním projektem. Při vytváření projektu vyberte více než jedno cílové zařízení. To znamená, že stejný projekt může fungovat jak na iPhonu, tak na iPadu, aniž byste museli mít dvě samostatné verze.

Obě přístupy mají své výhody a nevýhody. Pro projekty, které vyžadují úplnou kontrolu nad obrazovkou a nad tím, co chcete mít viditelné za všech okolností, může být prospěšný přístup specifický pro zařízení. To však přichází s náklady na nutnost znovu vytvářet hru/projekt pro každou novou platformu.

Výhodou univerzálních projektů je, že svojí hru nebo aplikaci vytvoříte pouze jednou. Nicméně máte menší kontrolu nad tím, co se zobrazuje na obrazovce. Například na širších zařízeních můžete vidět více obsahu, který by jinak nebyl viditelný. hyperPad poskytuje některé nástroje a chování pro kontrolu určitých prvků, ale někdy potřebujete mít naprostou kontrolu a projekt specifický pro zařízení dává větší smysl.

Tento článek se převážně zabývá univerzálními projekty, protože pracujete s různými poměry stran a zařízeními. U projektů specifických pro zařízení je to tak jednoduché, jak jen zajistit, aby se váš obsah vešel do zelené oblasti na plátně.

Vytváření univerzálního projektu

Při vytváření nového projektu budete vyzváni k výběru zařízení, která chcete podporovat. Ve výchozím nastavení je vybrán pouze iPad (4:3). Můžete klepnout na ostatní zařízení, abyste je také aktivovali. Pokud máte vybráno více než jedno zařízení, váš projekt je považován za "Univerzální projekt".

Cyklická zařízení

Když vyberete více zařízení pro podporu, znamená to, že musíte zajistit, aby se obsah vašeho projektu vešel na obrazovku pro každé zařízení/poměr stran.

Zelená obdélníková oblast na plátně je viditelný prostor obrazovky. Dále vše umístěné v tomto viditelném prostoru obrazovky bude vidět, když váš projekt běží. Pamatujte, že každé zařízení, které jste povolili při vytváření projektu, má svůj vlastní viditelný prostor obrazovky.

Abyste zajistili, že váš obsah odpovídá viditelnému prostoru obrazovky pro každou oblast, klepněte na ikonu Cyklické zařízení na paletě nástrojů.

Nezapomeňte, že některá zařízení, jako iPhone, mají více velikostí obrazovek a poměrů stran. Pokud vyvíjíte projekt pro tato zařízení a chcete podporovat starší verzi iOS, musíte zajistit, aby váš obsah fungoval na každé verzi tohoto zařízení. Pokud například vyberete iPhone, musíte zajistit, aby se váš obsah vešel do prostoru obrazovky iPhonu 4 (3:2), a do prostoru obrazovky iPhonu 5,6,6+ (16:9).

Navrhování vašeho projektu pro více zařízení

Obvykle, když vyvíjíte hru nebo aplikaci, chcete se vyhnout opakování všeho pro každý projekt. S univerzálními projekty můžete použít chytrý design, abyste minimalizovali množství práce, kterou musíte udělat znovu.

hyperPad má všechny velikosti obrazovek začínající z levého dolního rohu, a poté se zvětšuje a posouvá doprava pro větší zařízení. Pokud to budete mít na paměti, mnoho her může být vytvořeno jednou.

Při návrhu své scény navrhněte tak, aby váš hlavní obsah vyhovoval nejmenšímu zařízení, a vaše pozadí tak, aby vyhovovalo největšímu. Při vytváření projektu je největší velikost označena jako "Design Resolution". Tímto způsobem mnoho projektů automaticky vypadá skvěle na všech zařízeních.

Například, pokud chcete vytvořit platformní hru, která bude fungovat jak na iPhonu, tak na iPadu. Můžete navrhnout hlavní úroveň (překážky, atd.) tak, aby vyhovovala nejmenší obrazovce iPhonu (16:9 poměr stran) a pozadí tak, aby vyhovovalo největšímu zařízení (iPad). Na nejmenším iPhonu se hra zobrazí přesně tak, jak jste navrhli. Na větších zařízeních (iPad 4:3 nebo Desktop 16:10) se ve hře zobrazí více vertikálního obsahu na vrchu. Protože jste pozadí navrhli, aby odpovídalo největší velikosti, je vždy něco viditelného a nezůstáváte s prázdným černým prostorem.

Při přepínání mezi různými zařízeními si všimněte, že viditelný prostor obrazovky se nezmění v šířce. hyperPad používá vlastní rozlišení, aby byly šířky konzistentní napříč všemi zařízeními. Pouze výška se mění, takže se zobrazuje více či méně obsahu vertikálně.

Níže je tabulka, která zobrazuje různé poměry stran zařízení a rozlišení.

Poměry stran	Ikona	Zařízení	Design Resolution
4:3		iPad, iPad Pro	2048 px x 1536 px
16:9		iPhone 5, iPhone 5S, iPhone 6, iPhone 6 plus, iPhone 6S. iPhone 6S Plus, iPod 5. generace, iPod 6. generace	2048 px x 1158 px
3:2		iPhone 3GS, iPhone 4, iPhone 4S, iPod 4. generace	2046 px x 1364 px
16:10		Desktop počítače	2048 px x 1280 px

Poznámka ohledně starších iPhonů (3GS, iPhone 4, 4S a iPod 4. generace): Tato zařízení používají poměr stran 3:2. Aby se šířka všech zařízení udržela konzistentní, je viditelný prostor obrazovky pro 3:2 zařízení ve skutečnosti vyšší než pro fyzicky větší iPhone 5, 6+ (16:9) zařízení. Pokud chcete vyvíjet pro iPhone a podporovat iOS 9 a nižší, MUSÍTE také zajistit, aby se váš projekt vešel do prostoru obrazovky 3:2.

Pokud chcete podporovat pouze iOS10 a novější, nemusíte si dělat starosti s tím, aby se váš obsah vešel do prostoru obrazovky 3:2.

Importování prvků

hyperPad automaticky škáluje váš projekt, aby vypadal skvěle na všech zařízeních. Abyste zajistili, že váš projekt bude vypadat skvěle napříč všemi zařízeními, měli byste vždy importovat své obrázky tak, aby odpovídaly Design Resolution. Design Resolution se udává v rozlišení retina, takže když importujete obrázky, pro vás se automaticky vytvoří nereťinový obrázek.

Například, pokud importujete obrázek 512x512 pixelů, automaticky se pro vás vytvoří obrázek 256x256 pixelů.

Také mějte na paměti, že designové rozlišení je měřeno v pixelech. Na skutečném zařízení se vše měří v bodech. To znamená, že 2048x1536 pixelů je ve skutečnosti 1024x768 bodů (na retinovém zařízení).

Absolutní a relativní pozice

Existují dva způsoby umístění objektů v hyperPad. Absolutní a relativní. Absolutní pozice umisťují objekt na specifickou pixelovou polohu na plátně a měří se v metrech. Relativní pozice umisťují váš objekt na základě procenta viditelného prostoru obrazovky.

S absolutními pozicemi se vaše objekty mohou zdát mimo obrazovku pro menší zařízení. K tomu dochází, protože souřadnicový systém se nemění v závislosti na každém zařízení (1 metr je stejný na iPhonu, iPadu a na čemkoliv jiném).

Na druhou stranu, s relativními pozicemi se váš objekt bude jevit na stejné relativní pozici, bez ohledu na to, které zařízení máte. Pokud umístíte svůj objekt do středu obrazovky, bude to uprostřed pro iPhone, iPad i jakékoliv větší zařízení jako TV nebo počítač.

Ve výchozím nastavení použije jakýkoliv objekt, který umístíte na běžné vrstvy, absolutní polohy a cokoliv umístěného na UI vrstvách je nastaveno na procentní polohy. Takto se nemusíte obávat, že by vaše tlačítka, ukazatele zdraví nebo joystick byly mimo obrazovku pro každé zařízení.

Na gif níže můžete vidět efekt relativních pozic. „Dotkněte se“ značek a ruka používají relativní pozice a vždy zůstávají ve středu pro každé zařízení.

Abyste změnili typ pozicování vašeho objektu, vyberte svůj objekt a z vlastností objektu přepněte na Transformace a klepněte na ikonu "%" v poli umístění. To přepne vaši aktuální pozici na procento obrazovky.

Pokud přepínáte mezi podporovanými zařízeními z palety nástrojů, můžete vidět, jak vaše relativní objekty zůstávají v rámci viditelného prostoru obrazovky.

Aby byl objekt zcela centrován, měly by být hodnoty X a Y na 50 %.

Vlastní akce podle velikosti obrazovky

Někdy chcete, aby váš projekt vypadal a působil mírně jinak pro každé zařízení. Například, chcete, aby tlačítko bylo dostupné pouze na iPadu a ne na iPhonu.

Pro toto můžete použít chování „Získat obrazovku“, abyste zjistili velikost aktuální obrazovky, a s chováním IF skrýt tlačítko na iPhonu.

Ve výše uvedeném příkladu byste použili Získat obrazovku, poté výstup poměru stran do chování IF, které zkontroluje, zda se jedná o iPhone (16:9).

Pak použijte chování skrýt grafiku, abyste skrýli tlačítko, pokud je velikost obrazovky 16:9.

Více velikostí obrazovek a zařízení