HyperPadin avulla voit luoda projektisi useille laitteille ja näyttökokoille. Kun on kyse erilaisten laitteiden tukemisesta, on olemassa kahta tyyppiä projekteja: laitekohtaiset projektit ja universaalit projektit.

Laitekohtaiset projektit: Luo erillinen versio projektistasi jokaiselle alustalle, jota haluat tukea. Kun luot projektisi, määrität sallitun laitteen projektille. Esimerkiksi, jos haluat luoda pelin vain iPadille, valitse VAIN iPad (4:3) projektia luodessasi.

Universaalit projektit: Tukee useita laitteita yhdellä projektilla. Kun luot projektisi, valitse enemmän kuin yksi kohdelaitteista. Tämä tarkoittaa, että sama projekti voi toimia sekä iPhonella että iPadilla ilman, että tarvitset kahta erillistä versiota.

Molemmissa lähestymistavoissa on etuja ja haittoja. Projektit, jotka vaativat täydellistä hallintaa näytöstä ja siitä, mitä haluat näkyvän koko ajan, voivat hyötyä laitekohtaisesta lähestymistavasta. Tämä kuitenkin maksaa sen, että joudut luomaan pelisi/projektisi uudelleen jokaiselle uudelle alustalle.

Universaalien projektien etuna on se, että sinun tarvitsee luoda pelisi tai sovelluksesi vain kerran. Kuitenkin sinulla on vähemmän kontrollia siitä, mitä näytetään näytöllä. Esimerkiksi, leveämmällä laitteella saatat nähdä enemmän sisältöä, joka muuten ei olisi havaittavissa. HyperPad tarjoaa joitakin työkaluja ja käyttäytymismalleja tiettyjen elementtien hallitsemiseksi, mutta joskus tarvitset vain täyden hallinnan, ja laitekohtainen projekti on järkevämpi.

Tämä artikkeli käsittelee pääasiassa universaaleja projekteja, koska käsittelet useita kuvasuhteita ja laitteita. Laitekohtaisissa projekteissa on yhtä yksinkertaista varmistaa, että sisältösi mahtuu vihreälle alueelle kankaan sisällä.

Universaalin projektin luominen

Kun luot uutta projektia, sinua pyydetään valitsemaan tukemasi laitteet. Oletuksena on valittu vain iPad (4:3). Voit napauttaa muita laitteita ottaaksesi ne käyttöön. Jos olet valinnut yli yhden laitteen, projektisi on "Universaali projekti".

Laitteiden vaihtaminen

Kun valitset useita laitteita tuettavaksi, tämä tarkoittaa, että sinun on varmistettava, että projektisi sisältö mahtuu näytölle jokaiselle laitteelle/kuvasuhteelle.

Vihreä suorakulmio kankaan sisällä on näkyvä näyttötila. Kaikki, mikä sijoitetaan näkyvään näyttötilaan, näkyy, kun projekti on käynnissä. Huomaa, että jokaisella laitteella, jonka olet aktivoinut projektia luodessasi, on oma näkyvä näyttötilansa.

Varmistaaksesi, että sisältösi mahtuu näkyvään näyttötilaan jokaisella alueella, napauta Vaihta laitteen kuvaketta työkalupaletista.

Muista, että joillakin laitteilla, kuten iPhonella, on useita näyttökoon ja kuvasuhteen versioita. Jos kehität projektia näille laitteille ja haluat tukea vanhempaa iOS-versiota, sinun on varmistettava, että sisältösi toimii jokaisessa version laitteen kanssa. Joten jos valitset iPhonen, sinun on varmistettava, että sisältösi mahtuu iPhone 4:n näyttötilaan (3:2) ja iPhone 5:n, 6:n, 6+:n (16:9) näyttötilaan.

Projektisi suunnittelu useille laitteille

Yleensä pelin tai sovelluksen kehittämisessä haluat välttää kaiken uudelleen tekemistä jokaiselle projektille. Universaalien projektien avulla voit käyttää kekseliästä suunnittelua vähentääksesi uudelleen tekemistä.

HyperPadilla kaikki näyttökoot alkavat vasemmasta alakulmasta ja skaalautuvat ylös ja oikealle suuremmille laitteille. Jos pidät tämän mielessä, monia pelejä voidaan luoda kerran.

Kun suunnittelet näyttöäsi, suunnittele niin, että pääsisältösi mahtuu pienimpään laitteeseen ja taustasi niin, että se mahtuu suurimpaan. Kun luot projektisi, suurin koko on merkitty "Suunnitteluresoluutio". Tällä tavoin monet projektit näyttävät automaattisesti hyvältä kaikilla laitteilla.

Esimerkiksi, jos haluat tehdä tasohyppelypelin, joka toimii sekä iPhonella että iPadilla. Voit suunnitella päävaiheen (maapohjaesteet jne.) niin, että se mahtuu pienimmän iPhonen näyttöön (16:9 kuvasuhde), ja sitten taustasi sovitetaan suurimmalle laitteelle (iPad). Pienimmällä iPhonella peli näyttää täsmälleen siltä, kuin suunnittelit. Suuremmilla laitteilla (iPad 4:3 tai tietokone 16:10) peli näyttää enemmän pystysuoraa sisältöä ylhäällä. Koska teit taustasi sopivaksi suurimmalle koolle, näkyy aina jotain, eikä tyhjää mustaa tilaa jää.

Kun vaihdat eri laitteiden välillä, huomaat, että näkyvän näyttötilan leveys ei muutu. HyperPad käyttää räätälöityä resoluutiota säilyttääkseen leveydet johdonmukaisina kaikilla laitteilla. Vain korkeus muuttuu, jolloin näkyy enemmän tai vähemmän sisältöä pystysuunnassa.

Alla on taulukko, joka esittää eri laitteiden kuvasuhteita ja resoluutioita.

Kuvasuhteet	Ikoni	Laitteet	Suunnitteluresoluutio
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. sukupolvi, iPod 6. sukupolvi	2048 px x 1158 px
3:2		iPhone 3GS, iPhone 4, iPhone 4S, iPod 4. sukupolvi	2046 px x 1364 px
16:10		Tietokoneet	2048 px x 1280 px

Huomautus vanhoista iPhoneista (3GS, iPhone 4, 4S, ja iPod 4. sukupolvi): Nämä laitteet käyttävät 3:2 kuvasuhdetta. Jotta kaikilla laitteilla olisi johdonmukainen leveys, 3:2 laitteiden näkyvä näyttötila on itse asiassa korkeampi kuin fyysisesti suuremmilla iPhone 5:llä, 6+:lla (16:9) laitteilla. Jos haluat kehittää iPhonelle ja tukea iOS 9:tä ja alle, sinun on myös varmistettava, että projektisi mahtuu 3:2 näyttötilaan.

Jos haluat tukea vain iOS 10 ja uudempi, sinun ei tarvitse huolehtia sisällön mahtumisesta 3:2 näyttötilaan.

Omaisuuden tuominen

HyperPad skaalaa automaattisesti projektisi näyttämään hyvältä kaikilla laitteilla. Jotta projektisi näyttäisi hyvältä kaikilla laitteilla, sinun tulisi aina tuoda kuvasi niin, että ne sopivat Suunnitteluresoluutioon. Suunnitteluresoluutio annetaan retina-resoluutiolla, joten kun tuot kuvia, ei-retina-kuva luodaan automaattisesti puolestasi.

Esimerkiksi, jos tuot 512x512 pikselin kuvan, 256x256 pikselin kuva luodaan puolestasi.

Huomaa myös, että suunnitteluresoluutio mitataan pikseleinä. Oikealla laitteella kaikki mitataan pisteinä. Tämä tarkoittaa, että 2048x1536 pikseliä on itse asiassa 1024x768 pistettä (retina-laitteella).

Ehdoton ja suhteellinen sijainti

HyperPadissa on kaksi tapaa sijoittaa esineitä. Ehdoton ja suhteellinen. Ehdoton sijainti sijoittaa esineen tiettyyn pikselisijaintiin kankaalla ja mitataan metreinä. Suhteellinen sijainti sijoittaa objektisi näkyvän näyttötilan prosenttiosuuden mukaan.

Ehdollisten sijaintien kanssa objektisi voivat näkyä ruudun ulkopuolella pienemmillä laitteilla. Tämä johtuu siitä, että koordinaattijärjestelmä ei muutu jokaisen laitteen mukaan (1 metri on sama iPhonella, iPadilla ja kaikilla muilla).

Suhteellisten sijaintien kanssa objektisi näkyy samassa suhteellisessa sijainnissa riippumatta laitteesta. Joten jos sijoitat objektisi näytön keskipisteeseen, se on keskellä iPhonella, iPadilla ja kaikilla suuremmilla laitteilla, kuten televisiolla tai tietokoneella.

käyttöliittymäkerroksiin asetetaan prosentuaalisen perusteen sijaintiin. Tämä tarkoittaa, että sinun ei tarvitse huolehtia nappien, terveyskaavojen tai joystickien näkymisestä ruudun ulkopuolella jokaiselle laitteelle.

Alla olevasta gifistä voit nähdä suhteellisten sijaintien vaikutuksen. "Napauta" -merkit ja käsi käyttävät suhteellisia sijainteja ja pysyvät aina keskellä jokaiselle laitteelle.

Jos haluat muuttaa objektisi sijaintityyppiä, valitse objekti ja siirry Objektin ominaisuudet -osioon, vaihda Muunna-välilehdelle ja napauta "%" -kuvaketta sijaintikentässä. Tämä muuttaa nykyisen sijaintisi prosentiksi näytöstä.

Kun vaihdat tukemia laitteita työkalupaletista, voit nähdä suhteellisten objektiesi pysyvän näkyvässä näyttötilassa.

Jos haluat pitää objektin täysin keskitettynä, X- ja Y-sijanteen tulisi olla 50 %.

Mukautetut toiminnot näyttökoolle perustuen

Joskus haluat, että projektisi näyttää ja tuntuu hieman erilaiselta jokaisella laitteella. Esimerkiksi, haluat vain, että painike olisi käytettävissä iPadilla eikä iPhonella.

Tätä varten voit käyttää "Hae näyttö" -käyttäytymistä selvittääksesi nykyisen näytön koon, ja käyttää IF-käyttäytymistä piilottaaksesi painiketta iPhonessa.

Edellisessä esimerkissä käyttäisit Hae näyttö, ja sitten tulostaisit kuvasuhteen IF-käyttäytymiseen, joka tarkistaa, onko se iPhone (16:9).

Sitten käytä piilota grafiikka -käyttäytymistä, jos näyttö on 16:9.

Useita näyttökokoja ja laitteita