Uz hyperPad možete kreirati svoj projekt za više uređaja i veličina ekrana. Kada je u pitanju podrška za različite uređaje postoje dvije vrste projekata, projekti specifični za uređaj i univerzalni projekti.

Projekti specifični za uređaj: Kreirajte odvojenu verziju svog projekta za svaku platformu koju želite podržati. Kada kreirate svoj projekt, odredite jedan uređaj za svoj projekt. Na primjer, ako želite napraviti igru samo za iPad, odaberite SAMO iPad (4:3) prilikom kreiranja svog projekta.

Univerzalni projekti: Podržavajte više uređaja s jednim projektom. Kada kreirate svoj projekt, odaberite više od jednog ciljanog uređaja. To znači da isti projekt može raditi i na iPhone-u i na iPadu bez potrebe za stvaranjem dviju odvojenih verzija.

Postoje prednosti i nedostatci za oba pristupa. Za projekte koji zahtijevaju potpunu kontrolu nad ekranom i onim što želite da bude vidljivo u svakom trenutku, pristup specifičan za uređaj može biti koristan. Međutim, to dolazi s troškom ponovnog stvaranja vaše igre/projekta za svaku novu platformu.

Korist univerzalnih projekata je u tome što morate stvoriti svoju igru ili aplikaciju samo jednom. Međutim, imate manje kontrole nad tim što se prikazuje na ekranu. Na primjer, na širem uređaju, možda ćete vidjeti više sadržaja koji inače ne bi bio uočljiv. hyperPad pruža određene alate i ponašanja za kontrolu određenih elemenata, ali ponekad jednostavno trebate potpunu kontrolu i projekat specifičan za uređaj bi imao više smisla.

Ovaj članak se uglavnom fokusira na univerzalne projekte, jer se bavite višestrukim omjerima stranica i uređajima. Za projekte specifične za uređaj, sve što trebate učiniti je osigurati da vaš sadržaj stane u zeleni prostor na platnu.

Kreiranje univerzalnog projekta

Kada kreirate novi projekt, bit ćete upitani da odaberete uređaje koje želite podržati. Po zadanim postavkama, odabran je samo iPad (4:3). Možete dodirnuti druge uređaje da omogućite podršku za njih također. Ako imate više od jednog odabranog uređaja, vaš projekt se smatra "Univerzalnim projektom".

Ciklus uređaja

Kada odaberete više uređaja za podršku, to znači da morate osigurati da sadržaj vašeg projekta odgovara ekranu za svaki uređaj/omjer stranica.

Zeleni pravokutni prostor na platnu je vidljivi ekran prostor. Sve što je postavljeno unutar vidljivog ekran prostora će se vidjeti kada vaš projekt radi. Imajte na umu da svaki uređaj koji ste omogućili prilikom kreiranja projekta ima svoj vlastiti vidljivi ekran prostor.

Da biste osigurali da vaš sadržaj stane unutar vidljivog ekran prostora za svako područje, dodirnite ikonu Ciklus uređaja na alatu.

Zapamtite, neki uređaji poput iPhonea imaju više veličina ekrana i omjera stranica. Ako razvijate projekt za te uređaje i želite podržati stariju verziju iOS-a, morate osigurati da vaš sadržaj radi na svakoj verziji tog uređaja. Dakle, ako odaberete iPhone, morate osigurati da vaš sadržaj stane unutar vidljivog ekran prostora za iPhone 4 (3:2), i ekran prostora za iPhone 5,6,6+ (16:9).

Dizajniranje vašeg projekta za više uređaja

Obično, kada razvijate igru ili aplikaciju, želite izbjeći ponavljanje svega za svaki projekt. S univerzalnim projektima možete koristiti pametni dizajn kako biste smanjili količinu posla koji trebate ponovo raditi.

hyperPad koristi sve veličine ekrana od donjeg lijevog ugla, zatim se povećava i pomiče udesno za veće uređaje. Ako to imate na umu, mnoge igre mogu biti stvorene jednom.

Kada dizajnirate svoju scenu, dizajnirajte tako da vaš glavni sadržaj stane unutar najmanjeg uređaja, a vaša pozadina tako da stane na najveći. Kada kreirate svoj projekt, najveća veličina označena je kao "Dizajnerska rezolucija". Na taj način mnogi projekti automatski izgledaju sjajno na svim uređajima.

Na primjer, ako želite napraviti platformu koja će raditi i na iPhoneu i na iPadu. Možete dizajnirati glavni nivo (prizemni prepreke, itd.) da stane unutar najmanjeg iPhone ekrana (16:9 omjer stranica), a zatim imati vašu pozadinu koja stane na najveći uređaj (iPad). Na najmanjem iPhone-u igra će se pojaviti točno kako ste je dizajnirali. Za veće uređaje (iPad 4:3 ili Desktop 16:10), igra će prikazivati više vertikalnog sadržaja duž vrha. Budući da ste svoju pozadinu učinili da odgovara najvećoj veličini, uvijek će biti nešto vidljivo i nećete ostati s praznim crnim prostorom.

Dok ciklišete kroz različite uređaje, primijetite da se vidljivi ekran prostor ne mijenja u širini. hyperPad koristi prilagođenu rezoluciju kako bi održao širine konzistentnim na svim uređajima. Samo se visina mijenja prikazujući više ili manje sadržaja vertikalno.

U nastavku se nalazi tabela koja prikazuje različite omjere stranica uređaja i rezolucije.

Omjeri stranica	Ikona	Uređaji	Dizajnerska rezolucija
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. generacije, iPod 6. generacije	2048 px x 1158 px
3:2		iPhone 3GS, iPhone 4, iPhone 4S, iPod 4. generacije	2046 px x 1364 px
16:10		Računalni monitori	2048 px x 1280 px

Napomena o starijim iPhone-ima (3GS, iPhone 4, 4S, i iPod 4. generacije): Ovi uređaji koriste 3:2 omjer stranica. Da bi se održala dosljednost širine svih uređaja, vidljivi ekran prostor za 3:2 uređaje je zapravo viši od fizički većih iPhone 5, 6+ (16:9) uređaja. Ako želite razviti za iPhone i podržati iOS 9 i starije, MORATE također osigurati da vaš projekt stane unutar 3:2 ekran prostora.

Ako samo želite podržati iOS10 i novije, onda se ne morate brinuti o tome da vaš sadržaj stane unutar 3:2 ekran prostora.

Uvoz sredstava

hyperPad automatski skalira vaš projekt da bi izgledao sjajno na svim uređajima. Da biste održali svoj projekt lijepim na svim uređajima, uvijek biste trebali uvesti svoje slike tako da stanu unutar Dizajnerske rezolucije. Dizajnerska rezolucija se daje u retinalnom formatu, tako da kada uvezete slike, ne-retinalna slika će se automatski generirati za vas.

Na primjer, ako uvezete sliku od 512x512 piksela, stvorit će se slika od 256x256 piksela.

Također napomenite da se dizajnerska rezolucija mjeri u pikselima. Na stvarnom uređaju, sve se mjeri u točkama. To znači da je 2048x1536 piksela zapravo 1024x768 točaka (na retinalnom uređaju).

Apsolutna i relativna pozicija

Postoje dva načina pozicioniranja objekata u hyperPad-u. Apsolutna i relativna. Apsolutne pozicije postavljaju objekt na određenu lokaciju u pikselima na platnu i mjere se u metrima. Relativne pozicije postavljaju vaš objekt na osnovu postotka vidljivog ekran prostora.

Uz apsolutne pozicije, vaši objekti se mogu činiti izvan ekrana na manjim uređajima. To se događa zato što se koordinatni sustav ne mijenja na temelju svakog uređaja (1 metar je isti na iPhone-u, iPadu i bilo kojem drugom uređaju).

Uz relativne pozicije, vaš objekt će se pojaviti na istoj relativnoj poziciji bez obzira na uređaj. Ako stavite svoj objekt u sredinu ekrana, bit će u sredini i na iPhone-u, iPadu, i bilo kojem većem uređaju poput TV-a ili računala.

Prema zadanim postavkama, svi objekti koje stavite na redovne slojeve koristit će apsolutne pozicije, a sve što stavite na UI slojeve će biti postavljeno na pozicije temeljene na postotku. Na taj način ne morate brinuti o tome da su vaši gumbi, trake zdravlja ili joystick-i izvan ekrana za svaki uređaj.

Na gifu ispod, možete vidjeti efekat relativnih pozicija. "Tap" znakovi i ruka koriste relativne pozicije i uvijek ostaju u sredini za svaki uređaj.

Da biste promijenili vrstu pozicioniranja vašeg objekta, odaberite svoj objekt i u Svojstvima objekta, prebacite se na Transformacijska kartica i dodirnite ikonu "%" na polju pozicije. To će pretvoriti vašu trenutnu poziciju u postotak ekrana.

Ako ciklišete kroz uređaje koje podržavate iz alata, možete vidjeti svoje relativne objekte kako ostaju unutar vidljivog ekran prostora.

Da biste zadržali objekt potpuno centriranim, X i Y pozicije trebaju biti na 50%.

Prilagođene radnje na osnovu veličine ekrana

Ponekad želite da vaš projekt izgleda i osjeća se pomalo drugačije za svaki uređaj. Na primjer, želite da gumb bude dostupan samo na iPadu, a ne na iPhone-u.

Za to možete koristiti ponašanje "Dohvati ekran" da saznate veličinu trenutnog ekrana i s IF ponašanjem da sakrijete gumb na iPhone-u.

U gornjem primjeru, koristili biste "Dohvati ekran", a zatim ishodili omjer stranica u IF ponašanju, koji provjerava je li to iPhone (16:9).

Zatim koristite ponašanje za skrivanje grafike da sakrijete gumb ako je veličina ekrana 16:9.

Više veličina ekrana i uređaja