S hyperPad môžete vytvoriť svoj projekt pre rôzne zariadenia a veľkosti obrazoviek. Pokiaľ ide o podporu rôznych zariadení, existujú dva typy projektov, projekty špecifické pre zariadenie a univerzálne projekty.

Projekty špecifické pre zariadenie: Vytvorte samostatnú verziu svojho projektu pre každú platformu, ktorú chcete podporovať. Pri vytváraní svojho projektu určíte jedno zariadenie pre svoj projekt. Napríklad, ak chcete vytvoriť hru len pre iPad, vyberte LEN iPad (4:3) pri vytváraní svojho projektu.

Univerzálne projekty: Podporujú viac zariadení s jedným projektom. Pri vytváraní svojho projektu vyberte viac ako jedno cieľové zariadenie. To znamená, že ten istý projekt môže fungovať na iPhone aj iPad bez potreby dvoch samostatných verzií.

Obe prístupy majú svoje výhody a nevýhody. Pre projekty, ktoré vyžadujú úplnú kontrolu nad obrazovkou a tým, čo chcete mať viditeľné vždy, môže byť prístup špecifický pre zariadenie výhodný. Avšak to sa prejaví nákladmi na opätovné vytvorenie vašej hry/projektu pre každú novú platformu.

Výhodou univerzálnych projektov je, že svoj projekt alebo aplikáciu musíte vytvoriť len raz. Avšak máte menej kontroly nad tým, čo sa zobrazuje na obrazovke. Napríklad na širšom zariadení môžete vidieť viac obsahu, ktorý by inak mohol zostať nenápadný. hyperPad poskytuje niektoré nástroje a správanie na ovládanie určitých prvkov, ale niekedy jednoducho potrebujete úplnú kontrolu a projekt špecifický pre zariadenie dáva väčší zmysel.

Článok sa predovšetkým zaoberá univerzálnymi projektmi, pretože pracujete s rôznymi pomerom strán a zariadeniami. Pre projekty špecifické pre zariadenie je to také jednoduché, ako sa uistiť, že váš obsah sa zmestí do zelenej oblasti na plátne.

Vytvorenie univerzálneho projektu

Pri vytváraní nového projektu dostanete výzvu na výber zariadení, ktoré chcete podporovať. Predvolene je vybraný iba iPad (4:3). Môžete ťuknúť na ostatné zariadenia, aby ste pre ne povolili podporu. Ak máte vybrané viac ako jedno zariadenie, váš projekt je považovaný za "Univerzálny projekt".

Prevod zariadení

Keď vyberiete viac zariadení na podporu, znamená to, že musíte zabezpečiť, aby obsah vášho projektu zapadol na obrazovku pre každé zariadenie/pomer strán.

Zelený obdĺžnik na plátne je viditeľný priestor na obrazovke. Všetko, čo je umiestnené v rámci viditeľného priestoru na obrazovke, bude viditeľné, keď sa váš projekt spustí. Nezabudnite, že každé zariadenie, ktoré ste povolili pri vytváraní projektu, má svoj vlastný viditeľný priestor na obrazovke.

Aby ste zabezpečili, že váš obsah zapadá do viditeľného priestoru na obrazovke pre každú oblasť, ťuknite na ikonu Cycle Device na nástrojovej palete.

Nezabudnite, niektoré zariadenia, ako iPhone, majú viacero veľkostí obrazovky a pomerov strán. Ak vyvíjate projekt pre tieto zariadenia a chcete podporiť staršiu verziu iOS, musíte zabezpečiť, aby váš obsah fungoval na každej verzii tohto zariadenia. Takže ak vyberiete iPhone, musíte zabezpečiť, aby váš obsah zapadal do priestoru obrazovky iPhone 4 (3:2) a priestoru obrazovky iPhone 5, 6, 6+ (16:9).

Navrhovanie vášho projektu pre viac zariadení

Typicky, keď vyvíjate hru alebo aplikáciu, chcete sa vyhnúť prepracovaniu všetkého pre každý projekt. S univerzálnymi projektmi môžete využiť chytrý dizajn na minimalizáciu množstva práce, ktorú potrebujete urobiť znova.

hyperPad má všetky veľkosti obrazovky, ktoré začínajú z dolného ľavého rohu, a potom sa zväčšujú a smerujú doprava pre väčšie zariadenia. Ak to máte na pamäti, mnoho hier môže byť vytvorených raz.

Pri navrhovaní svojej scény navrhnite tak, aby váš hlavný obsah zapadol do najmenšieho zariadenia, a pozadie tak, aby zapadlo do najväčšieho. Pri vytváraní svojho projektu je najväčšia veľkosť označená ako "Rozlíšenie dizajnu". Týmto spôsobom mnoho projektov automaticky vyzerá skvele na všetkých zariadeniach.

Napríklad, ak chcete vytvoriť platformovú hru, aby fungovala na iPhone aj iPad. Môžete navrhnúť hlavnú úroveň (prekážky na zemi, atď.) tak, aby zapadala do najmenšej obrazovky iPhonu (pomer strán 16:9), a potom mať pozadie prispôsobené najväčšiemu zariadeniu (iPad). Na najmenšom iPhone sa hra zobrazí presne tak, ako ste navrhli. Pre väčšie zariadenia (iPad 4:3 alebo desktop 16:10) sa v hre zobrazí viac vertikálneho obsahu na vrchu. Pretože ste navrhli pozadie na najväčšiu veľkosť, vždy je niečo viditeľné a neostávate s prázdnym čiernym priestorom.

Pri prechádzaní rôznymi zariadeniami si všimnite, že viditeľný priestor na obrazovke sa nezmení na šírku. hyperPad používa vlastné rozlíšenie, aby si udržal šírku konzistentnú naprieč všetkými zariadeniami. Iba výška sa mení, pričom ukazuje viac alebo menej obsahu vertikálne.

Nižšie je tabuľka, ktorá predstavuje rôzne pomery strán zariadení a rozlíšenia.

Pomer strán	Ikona	Zariadenia	Rozlíšenie dizajnu
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. generácie, iPod 6. generácie	2048 px x 1158 px
3:2		iPhone 3GS, iPhone 4, iPhone 4S, iPod 4. generácie	2046 px x 1364 px
16:10		Desktopové počítače	2048 px x 1280 px

Poznámka týkajúca sa starších iPhonov (3GS, iPhone 4, 4S a iPod 4. generácie): Tieto zariadenia používajú pomer strán 3:2. Aby sa šírka všetkých zariadení udržala konzistentná, viditeľný priestor na obrazovke pre zariadenia 3:2 je vlastne vyšší ako fyzicky väčší iPhone 5, 6+ (16:9) zariadenia. Ak chcete vyvíjať pre iPhone a podporovať iOS 9 a nižšie, MUSÍTE sa tiež uistiť, že váš projekt zapadá do priestoru obrazovky 3:2.

Ako sa rozhodujete podporovať iba iOS10 a novšie, nemusíte sa obávať, že váš obsah zapadne do priestoru obrazovky 3:2.

Importovanie zdrojov

hyperPad automaticky škáluje váš projekt na skvelý vzhľad na všetkých zariadeniach. Aby váš projekt vyzeral skvele na všetkých zariadeniach, mali by ste vždy importovať svoje obrázky tak, aby zapadli do rozlíšenia dizajnu. Rozlíšenie dizajnu sa uvádza v retina, takže pri importe obrázkov sa automaticky vygeneruje obrázok bez retiny.

Napríklad, ak importujete obrázok s rozmermi 512x512 pixelov, pre vás sa vytvorí obrázok s rozmermi 256x256 pixelov.

Majte tiež na pamäti, že rozlíšenie dizajnu sa meria v pixeloch. Na skutočnom zariadení sa všetko meria v bodoch. To znamená, že 2048x1536 pixelov je vlastne 1024x768 bodov (na retina zariadení).

Absolútne a relatívne umiestnenie

Existujú dva spôsoby umiestnenia objektov v hyperPad. Absolútne a relatívne. Absolútne umiestnenia umiestnia objekt na konkrétnu pixelovú polohu na plátne a merajú sa v metroch. Relatívne umiestnenia umiestnia váš objekt na základe percenta viditeľného priestoru na obrazovke.

S absolútnymi umiestneniami sa vaše objekty môžu zjaviť mimo obrazovku pre menšie zariadenia. To sa stáva, pretože súradnicový systém sa nemení v závislosti od každého zariadenia (1 meter je rovnaký na iPhone, iPadu a akomkoľvek inom zariadení).

Pri relatívnych umiestneniach sa váš objekt bude javiť v rovnakom relatívnom umiestnení bez ohľadu na zariadenie. Takže ak umiestnite svoj objekt do stredu obrazovky, bude to v strede pre iPhone, iPad a akékoľvek väčšie zariadenie ako TV alebo počítač.

Predvolene, akýkoľvek objekt, ktorý umiestnite na bežné vrstvy, bude používať absolútne umiestnenia, a všetko, čo je umiestnené na UI vrstvách, je nastavené na percentuálne umiestnenia. Týmto spôsobom sa nemusíte obávať, že vaše tlačidlá, zdravotné bary alebo joysticky budú mimo obrazovky pre každé zariadenie.

Na gif nižšie môžete vidieť efekt relatívnych umiestnení. „Tap“ značky a ruka používajú relatívne umiestnenia a vždy zostávajú v strede pre každé zariadenie.

Aby ste zmenili typ umiestnenia vášho objektu, vyberte svoj objekt a z vlastností objektu prepnite na záložku Transformovať a ťuknite na ikonu "%" na poli umiestnenia. To zmení vaše aktuálne umiestnenie na percento obrazovky.

Ak prechádzate svojimi podporovanými zariadeniami na nástrojovej palete, môžete vidieť svoje relatívne objekty, ktoré zostávajú v rámci viditeľného priestoru na obrazovke.

Aby ste udržali objekt úplne zarovnaný, mali by byť hodnoty X a Y na 50%.

Vlastné akcie založené na veľkosti obrazovky

Niekedy chcete, aby váš projekt vyzeral a cítil sa trochu inak pre každé zariadenie. Napríklad, ak chcete, aby bolo tlačidlo dostupné iba na iPade a nie na iPhone.

Na tento účel môžete použiť správanie „Získať obrazovku“, aby ste zistili veľkosť aktuálnej obrazovky, a s generovaním správania IF skryť tlačidlo na iPhone.

V uvedenom príklade by ste použili Získať obrazovku, potom výstup pomeru strán do správania IF, ktoré kontroluje, či ide o iPhone (16:9).

Potom použite správanie skryť grafiku, aby ste skryli tlačidlo, ak je veľkosť obrazovky 16:9.

Viacero veľkostí obrazoviek a zariadení