Flera skärmstorlekar och enheter

Med hyperPad kan du skapa ditt projekt för flera enheter och skärmstorlekar. När det kommer till att stödja olika enheter finns det två typer av projekt, Enhetsspecifika projekt och Universella projekt.

Enhetsspecifika projekt: Skapa en separat version av ditt projekt för varje plattform du vill stödja. När du skapar ditt projekt specificerar du en enda enhet för ditt projekt. Till exempel, om du vill göra ett spel enbart för iPad, välj ENDAST iPad (4:3) när du skapar ditt projekt.

Universella projekt: Stöd flera enheter med ett enda projekt. När du skapar ditt projekt väljer du mer än en målenhet. Detta innebär att samma projekt kan fungera på både iPhone och iPad utan att ha två separata versioner.

Det finns fördelar och nackdelar med båda tillvägagångssätten. För projekt som kräver total kontroll över skärmen och vad du vill ha synligt hela tiden kan en enhetsspecifik metod vara fördelaktig. Men detta kommer med kostnaden att behöva återskapa ditt spel/projekt för varje ny plattform.

Fördelarna med universella projekt är att du bara behöver skapa ditt spel eller app en gång. Men du har mindre kontroll över vad som visas på skärmen. Till exempel, på en bredare enhet kan du se mer innehåll som annars kanske inte skulle vara märkbart. hyperPad tillhandahåller dock vissa verktyg och beteenden för att kontrollera vissa element, men ibland behöver du bara total kontroll och ett enhetsspecifikt projekt ger mer mening.

Denna artikel behandlar främst universella projekt, eftersom du hanterar flera bildförhållanden och enheter. För enhetsspecifika projekt är det så enkelt som att se till att ditt innehåll passar inom det gröna området på canvasen.

Skapa ett universellt projekt

När du skapar ett nytt projekt blir du ombedd att välja de enheter du vill stödja. Som standard är endast iPad (4:3) vald. Du kan trycka på de andra enheterna för att också aktivera stöd för dem. Om du har mer än en enhet vald, så betraktas ditt projekt som ett "Universellt projekt".

Cykla enheter

När du väljer flera enheter att stödja innebär det att du måste se till att innehållet i dina projekt passar på skärmen för varje enhet/bildförhållande.

Det gröna rektangulära området på canvasen är den synliga skärmytan. Allt som placeras inom den synliga skärmytan kommer att synas när ditt projekt körs. Kom ihåg att varje enhet som du aktiverade när du skapade projektet har sin egen synliga skärmyta.

För att se till att ditt innehåll passar inom den synliga skärmytan för varje område, tryck på ikonen Cykla enhet i verktygspaletten.

Kom ihåg att vissa enheter som iPhone har flera skärmstorlekar och bildförhållanden. Om du utvecklar ett projekt för dessa enheter och vill stödja en äldre version av iOS måste du se till att ditt innehåll fungerar på varje version av den enheten. Så om du väljer iPhone måste du se till att ditt innehåll passar inom iPhone 4s skärmutrymme (3:2) och iPhone 5, 6, 6+ (16:9) skärmutrymme.

Designa ditt projekt för flera enheter

Typiskt när du utvecklar ett spel eller en app vill du undvika att göra om allt för varje projekt. Med universella projekt kan du använda smart design för att minimera mängden arbete du behöver göra igen.

hyperPad har alla skärmstorlekar som börjar från nedre vänstra hörnet, och skalar uppåt och till höger för större enheter. Om du har detta i åtanke kan många spel skapas en gång.

När du designar din scen, designa så att ditt huvud-innehåll passar inom den minsta enheten, och din bakgrund så att den passar den största. När du skapar ditt projekt är den största storleken märkt som "Designupplösning". Genom att göra detta ser många projekt automatiskt bra ut på alla enheter.

Till exempel, du vill göra ett plattformsspel som fungerar på både iPhone och iPad. Du kan designa huvudnivån (markhinder, etc.) för att passa inom den minsta iPhone-skärmen (16:9 bildförhållande), och sedan ha din bakgrund som passar den största enheten (iPad). På den minsta iPhone kommer spelet att se exakt ut som du har designat det. För de större enheterna (iPad 4:3, eller Desktop 16:10) kommer spelet att visa mer vertikalt innehåll längs toppen. Eftersom du gjorde din bakgrund för att passa den största storleken finns det alltid något synligt och du lämnas inte med tomt svart utrymme.

Vid cykling av de olika enheterna, notera att den synliga skärmytan inte förändras i bredd. hyperPad använder en anpassad upplösning för att hålla bredden konsekvent över alla enheter. Endast höjden ändras och visar mer eller mindre innehåll vertikalt.

Nedan finns en tabell som representerar de olika enhetens bildförhållanden och upplösningar.

Bildförhållanden	Ikon	Enheter	Designupplösning
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 5th generation, iPod 6th generation	2048 px x 1158 px
3:2		iPhone 3GS, iPhone 4, iPhone 4S, iPod 4th generation	2046 px x 1364 px
16:10		Skrivbordsdatorer	2048 px x 1280 px

En anteckning angående de äldre iPhone-modellerna (3GS, iPhone 4, 4S och iPod 4th generation): Dessa enheter använder ett 3:2 bildförhållande. För att hålla bredden på alla enheter konsekvent, är den synliga skärmytan för 3:2 enheter faktiskt högre än den fysiskt större iPhone 5, 6+ (16:9) enheter. Om du vill utveckla för iPhone, och stödja iOS 9 och lägre, MÅSTE du även se till att ditt projekt passar inom 3:2 skärmutrymmet.

Om du bara vill stödja iOS10 och nyare behöver du inte bekymra dig om ditt innehåll passar inom 3:2 skärmutrymmet.

Importera tillgångar

hyperPad skalar automatiskt ditt projekt så att det ser bra ut på alla enheter. För att hålla ditt projekt snyggt på alla enheter bör du alltid importera dina bilder så att de passar inom designupplösningen. Designupplösningen anges i Retina, så när du importerar bilder kommer en icke-Retina-bild automatiskt att skapas för dig.

Till exempel, om du importerar en bild på 512x512 pixlar kommer en bild på 256x256 pixlar att skapas för dig.

Observera också att designupplösningen mäts i pixlar. På den faktiska enheten mäts allt i poäng. Det betyder att 2048x1536 pixlar faktiskt är 1024x768 poäng (på en Retina-enhet).

Absolut och Relativ position

Det finns två sätt att positionera objekt i hyperPad. Absolut och Relativ. Absoluta positioner placerar ett objekt på en specifik pixelplats på canvasen och mäts i meter. Relativa positioner placerar ditt objekt baserat på procenten av den synliga skärmytan.

Med absoluta positioner kan dina objekt verka utanför skärmen för mindre enheter. Detta händer eftersom koordinatsystemet inte ändras baserat på varje enhet (1 meter är densamma på en iPhone, iPad och vad som helst annat).

Med relativa positioner kommer ditt objekt att visas i samma relativa position oavsett enhet. Så om du placerar ditt objekt i mitten av din skärm, kommer det att vara i mitten på iPhone, iPad och på alla större enheter som en TV eller dator.

Som standard kommer alla objekt du placerar på vanliga lager att använda absoluta positioner, och allt som placeras på UI-lager sätts till procentbaserade positioner. På så sätt behöver du inte oroa dig för att dina knappar, hälsorutor eller joysticks flyttas utanför skärmen för varje enhet.

I gif:en nedan kan du se effekten av relativa positioner. "Tryck"-skyltarna och handen använder relativa positioner och håller alltid sig i mitten för varje enhet.

För att ändra positioneringstypen av ditt objekt, välj ditt objekt och från Objektets egenskaper, växla till Transformationsfliken och tryck på "%"-ikonen på positionfältet. Detta kommer att omvandla din nuvarande position till en procent av skärmen.

Om du cyklar genom dina stödja enheter från verktygspaletten kan du se dina relativa objekt som förblir inom den synliga skärmytan.

För att hålla ett objekt helt centrerat bör X- och Y-positionerna vara på 50%.

Anpassade åtgärder baserat på skärmstorlek

Ibland vill du att ditt projekt ska se och kännas något annorlunda för varje enhet. Till exempel, du vill bara att en knapp ska vara tillgänglig på iPad och inte på iPhone.

För detta kan du använda "Hämta skärm"-beteendet för att ta reda på storleken på den aktuella skärmen, och med ett IF-beteende för att dölja knappen på iPhone.

I exemplet ovan skulle du använda Hämta skärm, sedan skriva ut bildförhållandet till ett IF-beteende, som kontrollerar om det är en iPhone (16:9).

Därefter använder du dölja grafik-beteendet för att dölja knappen om skärmstorleken är 16:9.