Design af Adaptivt UI i Unity: En Dybdegående Guide

I den moderne verden af spil og applikationer er det afgørende, at din brugergrænseflade (UI) kan tilpasse sig et utal af forskellige skærmopløsninger og -formater. Fra små smartphones til store tablets og desktop-skærme – brugernes oplevelse afhænger i høj grad af, hvor godt dit UI præsenteres. Unitys UI-system tilbyder en række robuste værktøjer, der netop er designet til at håndtere denne udfordring, og som kan kombineres på forskellige måder for at opnå det ønskede resultat. Denne guide vil dykke ned i disse værktøjer og give en praktisk forståelse af, hvordan du kan skabe et UI, der er både æstetisk tiltalende og funktionelt på tværs af alle enheder. Vi vil udforske de grundlæggende principper og derefter anvende dem på et simpelt, men illustrativt eksempel for at belyse de forskellige teknikker i praksis.

Lad os forestille os et simpelt scenarie: Vi har tre knapper placeret i hjørnerne af skærmen – én øverst til venstre, én nederst til venstre og én nederst til højre. Målet er at sikre, at disse knapper bevarer deres relative position og størrelse, uanset om applikationen kører på en telefon i høj opløsning (HD) i portræt- eller landskabsformat, eller på en telefon i standardopløsning (SD) i både portræt- og landskabsformat. Specifikt vil vi overveje fire skærmopløsninger: Telefon HD i portræt (640 x 960) og landskab (960 x 640), samt Telefon SD i portræt (320 x 480) og landskab (480 x 320). Vores oprindelige layout er designet med Telefon HD portræt-opløsningen som referencepunkt. Ved at mestre de teknikker, vi gennemgår her, vil du være i stand til at skabe et UI, der er sandt responsivt og brugervenligt for alle.

Forstå Unitys UI-system

Før vi dykker ned i de avancerede teknikker, er det vigtigt at have en grundlæggende forståelse af Unitys UI-system. Kernen i systemet er Canvas-komponenten, som fungerer som en tegneflade for alle dine UI-elementer. Hvert UI-element, såsom knapper, tekstfelter og billeder, er et Game Object med en Rect Transform-komponent. Denne komponent definerer elementets position, størrelse, rotation og skalering inden for Canvas' rektangel. I modsætning til traditionelle Transform-komponenter, der bruges til 3D-objekter, er Rect Transform optimeret til 2D-layouts og introducerer begreber som ankere og pivots, som er afgørende for responsivt design. Canvas-komponenten kan køre i forskellige render modes (Screen Space - Overlay, Screen Space - Camera, World Space), men for de fleste UI-formål, der skal tilpasse sig skærmstørrelse, er Screen Space - Overlay eller Screen Space - Camera med en Canvas Scaler de mest relevante. Systemet er bygget til at være intuitivt og fleksibelt, hvilket giver udviklere fuld kontrol over, hvordan deres UI ser ud og fungerer på tværs af en bred vifte af enheder og skærmforhold.

Unitys UI-system er en del af Unity Engine, og det er ikke en mobilbrowser i sig selv. Det er et kraftfuldt værktøjssæt til at bygge brugergrænseflader til spil og applikationer, der kan køre på mange platforme, herunder mobil (iOS/Android), desktop (Windows/macOS/Linux), konsoller og web (via WebGL). Når et Unity-spil eksporteres til WebGL, genereres en HTML-fil med et JavaScript-modul, der indeholder spillet, og en <canvas>-tag, hvor spillet renderes. Eventuelle skaleringsproblemer i en mobilbrowser skyldes ofte, hvordan denne <canvas>-tag interagerer med browserens viewport og CSS-regler, snarere end en fejl i Unitys interne UI-system.

Udfordringen med Flere Skærmopløsninger

Moderne enheder kommer i et utal af skærmstørrelser, opløsninger og billedformater. En applikation, der ser perfekt ud på en tablet i portrættilstand, kan se skæv ud eller have elementer, der forsvinder uden for skærmen, når den køres på en smartphone i landskab. Standardadfærd for UI-elementer i Unity er at være forankret i midten af deres overordnede rektangel. Dette betyder, at de opretholder en konstant forskydning fra midten. Hvis opløsningen ændres til et landskabsformat med denne standardopsætning, kan knapperne ende med slet ikke at være inden for skærmens rektangel, eller de kan klumpe sig sammen i midten, hvilket ødelægger layoutet og brugervenligheden. Dette er især problematisk for spil og apps, der kræver præcis placering af UI-elementer for optimal interaktion. Pixel-perfekte designs, der fungerer på én opløsning, vil sjældent oversættes direkte til en anden uden en form for tilpasning. Derfor er det essentielt at implementere en strategi for adaptivt UI-design, der tager højde for disse variationer fra starten af udviklingsprocessen.

Ankere: Grundstenen i Adaptivt UI

En af de mest grundlæggende og effektive måder at holde UI-elementer inden for skærmen og bevare deres relative positioner er ved at bruge ankere. Ankere definerer de punkter på den overordnede Rect Transform, som et UI-elements Rect Transform er bundet til. Forestil dig, at du har et billede eller en knap, og du vil have den til at sidde fast i øverste venstre hjørne af skærmen, uanset skærmstørrelsen. Det er her ankere kommer ind i billedet.

Som standard er UI-elementer forankret til midten af det overordnede rektangel. Dette betyder, at de opretholder en konstant forskydning fra midten. Hvis opløsningen ændres til et landskabsformat med denne opsætning, vil vores knapper, der oprindeligt var placeret i hjørnerne, sandsynligvis bevæge sig væk fra hjørnerne og potentielt endda uden for skærmen. Dette skyldes, at deres position defineres i forhold til midten, som flytter sig relativt til hjørnerne, når billedforholdet ændres.

For at holde knapperne inde i skærmen og forankre dem til deres respektive hjørner, skal vi ændre layoutet. Ankrene for knappen øverst til venstre kan indstilles til øverste venstre hjørne ved hjælp af rullemenuen 'Anchors Preset' i Inspector-panelet, eller ved at trække de trekantede ankerhåndtag direkte i Scene View. Det er bedst at gøre dette, mens den nuværende skærmopløsning, der er indstillet i Game View, er den, layoutet oprindeligt er designet til – hvor knaplaceringen ser korrekt ud. På samme måde kan ankrene for knapperne nederst til venstre og nederst til højre indstilles til henholdsvis nederste venstre hjørne og nederste højre hjørne.

Når knapperne er forankret til deres respektive hjørner, vil de 'klæbe' til disse hjørner, når opløsningen ændres til et andet billedformat. Dette sikrer, at de altid forbliver synlige og korrekt placeret i forhold til skærmens kanter. Men hvad sker der, når skærmstørrelsen ændres til en større eller mindre opløsning (f.eks. fra HD til SD)? Knapperne forbliver forankret til deres hjørner, men da de bevarer deres oprindelige størrelse (specificeret i pixels), kan de komme til at fylde en større eller mindre del af skærmen. Dette kan være ønskeligt eller uønsket, afhængigt af hvordan du ønsker, at dit layout skal opføre sig på skærme med forskellige opløsninger. I vores tilfælde ved vi, at de mindre opløsninger for Telefon SD Portræt og Landskab ikke svarer til fysisk mindre skærme, men snarere skærme med en lavere pixeltæthed. På disse skærme med lavere tæthed bør knapperne ikke fremstå større end på skærme med høj tæthed – de bør i stedet fremstå med samme relative størrelse. Dette er, hvor den næste komponent, Canvas Scaler, kommer ind i billedet for at løse skaleringsudfordringen.

Canvas Scaler: Skalering efter Skærmstørrelse

Selvom ankere er fremragende til at bevare elementers relative position, løser de ikke problemet med, at UI-elementer opretholder en fast pixelstørrelse, når skærmens samlede dimensioner ændres. Dette er især relevant, når man arbejder med forskellige pixeltætheder, som det ses mellem HD- og SD-skærme. For at sikre, at UI-elementerne skalerer proportionelt med skærmstørrelsen, kommer Canvas Scaler-komponenten til undsætning.

Canvas Scaler-komponenten kan tilføjes til en rod-Canvas – et Game Object med en Canvas-komponent på, som alle UI-elementer er børn af. Den tilføjes også som standard, når du opretter en ny Canvas via GameObject-menuen. I Canvas Scaler-komponenten kan du indstille dens 'UI Scale Mode' til 'Scale With Screen Size'. Med denne skaleringsmetode kan du angive en referenceopløsning. Hvis den aktuelle skærmopløsning er mindre eller større end denne referenceopløsning, indstilles Canvas' skaleringsfaktor tilsvarende, så alle UI-elementer skaleres op eller ned sammen med skærmopløsningen.

I vores eksempel indstiller vi Canvas Scaler til at bruge Telefon HD portræt-opløsningen på 640 x 960 som reference. Når vi nu indstiller skærmopløsningen til Telefon SD portræt-opløsningen på 320 x 480, skaleres hele layoutet ned, så det fremstår proportionalt det samme som i fuld opløsning. Alt skaleres ned: Knapstørrelserne, deres afstande til skærmens kanter, knapgrafikken og tekstelementerne. Dette betyder, at layoutet vil fremstå ens i Telefon SD portræt-opløsningen som i Telefon HD portræt; kun med en lavere pixeltæthed. Dette er yderst effektivt til at opnå et ensartet udseende på tværs af enheder med forskellige pixeltætheder, da det simulerer, at UI-elementerne har samme fysiske størrelse.

Én ting, man skal være opmærksom på: Efter at have tilføjet en Canvas Scaler-komponent er det vigtigt også at tjekke, hvordan layoutet ser ud ved andre billedformater. Ved at indstille opløsningen tilbage til Telefon HD landskab (960x640), kan vi se, at knapperne nu fremstår større, end de burde (og plejede at gøre). Årsagen til de større knapper i landskabsformat skyldes, hvordan Canvas Scaler-indstillingen fungerer. Som standard sammenligner den bredden af den nuværende opløsning med bredden af Canvas Scaler-referencen, og resultatet bruges som skaleringsfaktor til at skalere alt med. Da den nuværende landskabsopløsning på 960 x 640 har en 1,5 gange større bredde end portræt-Canvas Scaler-referencen på 640 x 960, skaleres layoutet op med 1,5.

Komponenten har en egenskab kaldet Match, som kan være 0 (bredde), 1 (højde) eller en værdi derimellem. Som standard er den indstillet til 0, hvilket sammenligner den nuværende skærmbredde med Canvas Scaler-bredden som beskrevet. Hvis 'Match'-egenskaben i stedet indstilles til 0.5, vil den sammenligne både den nuværende bredde med referencebredden og den nuværende højde med referencehøjden og vælge en skaleringsfaktor, der er midt imellem de to. Da landskabsopløsningen i dette tilfælde er 1,5 gange bredere, men også 1,5 gange kortere, udligner disse to faktorer hinanden og producerer en endelig skaleringsfaktor på 1, hvilket betyder, at knapperne bevarer deres oprindelige størrelse og proportioner. På dette tidspunkt understøtter layoutet alle fire skærmopløsninger ved hjælp af en kombination af passende forankring og Canvas Scaler-komponenten på Canvas'en. Denne kombination af ankere for position og Canvas Scaler for størrelse er nøglen til at skabe et robust og adaptivt UI i Unity.

Praktisk Anvendelse og Eksempel

Lad os opsummere vores case study og se, hvordan vi opnår det adaptive layout med vores tre knapper:

1. Initial Opsætning: Vi starter med vores tre knapper placeret i hjørnerne i Telefon HD portræt-opløsningen (640 x 960). Knapperne er initialt forankret til midten.
2. Ankring af Knapper:
   • Knap øverst til venstre: Indstil ankrene til øverste venstre hjørne.
   • Knap nederst til venstre: Indstil ankrene til nederste venstre hjørne.
   • Knap nederst til højre: Indstil ankrene til nederste højre hjørne.

   Dette sikrer, at knapperne altid klæber til deres respektive hjørner, når billedformatet ændres. Test dette ved at skifte til Telefon HD landskabsformat (960 x 640) – knapperne er nu korrekt placeret i hjørnerne, men de er stadig i deres faste pixelstørrelse og virker derfor for store i landskabsformat.

3. Tilføjelse af Canvas Scaler: Find din Canvas Game Object (som er forælder til dine knapper). Hvis der ikke allerede er en Canvas Scaler-komponent på den, tilføj den.
4. Konfiguration af Canvas Scaler:
   • Indstil 'UI Scale Mode' til Scale With Screen Size.
   • Indstil 'Reference Resolution' til 640 x 960 (vores design-opløsning).
   • Indstil 'Match' til 0.5. Dette er afgørende for at håndtere både bredde- og højdeændringer korrekt og sikre, at UI'et skalerer proportionelt på tværs af forskellige billedformater.
5. Test og Finjustering: Test nu dit layout i alle fire definerede opløsninger:
   • Telefon HD portræt (640 x 960): Oprindeligt design.
   • Telefon HD landskab (960 x 640): Skal nu se korrekt ud pga. 'Match'-indstillingen.
   • Telefon SD portræt (320 x 480): Hele UI'et skaleres ned proportionalt, så knapperne ser ud til at have samme fysiske størrelse som i HD.
   • Telefon SD landskab (480 x 320): Også her skaleres UI'et ned og forbliver korrekt placeret.

Ved at kombinere ankere og Canvas Scaler på denne måde opnår du et robust og fleksibelt UI, der ser godt ud på et bredt spektrum af enheder og skærmforhold. Denne metode er standardpraksis i professionel Unity-udvikling og er fundamentet for at levere en ensartet brugeroplevelse.

Unity og Mobile Browsere: En Specifik Udfordring

Den information, du har givet om et Unity-spil, der ikke passer til skærmen i en mobilbrowser, selvom det burde være mindre end skærmens opløsning, er en klassisk udfordring, når man distribuerer Unity-spil via WebGL. Først og fremmest er det vigtigt at slå fast: Unity er ikke en mobilbrowser. Unity er en spilmotor, der kan eksportere indhold til webplatformen via WebGL, hvilket betyder, at spillet kører i en browsers <canvas>-element.

Problemet, du beskriver, hvor spillet er for stort i landskabsformat på en smartphone (f.eks. FullHD 1920x1080), selvom Canvas Scaler er indstillet til 1280x720, skyldes sandsynligvis en kombination af faktorer relateret til, hvordan WebGL-udgangen og browseren interagerer, snarere end en fejl i Unitys interne UI-system (ankre og Canvas Scaler fungerer som forventet *inden i* Unitys viewport).

Potentielle Årsager og Løsninger:

1. HTML Canvas Størrelse og CSS: Selvom du har sat <div id="gameContainer" style="width: 1280px; height: 720px; margin: auto"></div>, er dette en fast størrelse. Mobilbrowsere prøver at skalere websider for at passe til skærmen. Hvis gameContainer har en fast pixelstørrelse, kan browseren forsøge at zoome ind på den, især i landskabsformat, hvor bredden er mere begrænset i forhold til den faktiske enheds pixelbredde. For at gøre canvas'en responsiv i browseren, bør du typisk bruge procentbaserede bredder og højder, og lade browseren håndtere skaleringen af selve canvas-elementet.
   Løsning: Ændr din CSS til at gøre gameContainer og den underliggende canvas-element mere fleksibel. F.eks.:

   #gameContainer {
    width: 100vw; /* 100% af viewport bredde */
    height: 100vh; /* 100% af viewport højde */
    margin: auto;
    overflow: hidden; /* For at undgå scrollbars */
   }

   Og sørg for, at Unitys genererede canvas-element også er indstillet til at fylde sin forælder. Ofte justerer Unitys WebGL-template dette automatisk, men det er værd at dobbelttjekke.

2. Meta Viewport Tag: Du nævner, at meta viewport ødelagde alt andet. Dette er ofte nøglen til mobil responsivitet på web, men den skal konfigureres korrekt. En forkert viewport-indstilling kan forårsage underlige skaleringsproblemer. Den korrekte brug sikrer, at browseren renderes ved enhedens faktiske pixelbredde.
   Løsning: Sørg for at have denne linje i din HTML-<head>-sektion:

   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

   width=device-width fortæller browseren at indstille viewport-bredden til enhedens bredde i CSS-pixels. initial-scale=1.0 forhindrer indledende zoom. user-scalable=no forhindrer brugeren i at zoome ind/ud, hvilket ofte er ønskeligt for spil. Hvis den ødelagde alt, kan det have været i kombination med din faste width: 1280px på gameContainer, hvilket skaber en konflikt.

3. Unity Canvas Scaler's 'Match' Indstilling: Selvom din Canvas Scaler i Unity er sat til 1280x720, kan 'Match'-indstillingen (som vi diskuterede tidligere) stadig spille en rolle for, hvordan det interne UI skaleres *inden i* Unitys rendering. Hvis 'Match' er sat til 0 (bredde), vil UI'et skalere baseret på bredden af den *interne* Unity-opløsning, som derefter renderes til WebGL canvas'en. Hvis browseren derefter strækker eller komprimerer denne canvas, kan det forvrænge UI'et yderligere. Den korrekte 'Match' (ofte 0.5) er vigtig for at UI'et ser korrekt ud, uanset om det er portræt eller landskab, *før* det overhovedet når browseren.
4. Browserens Standard Skalering: Nogle mobile browsere har en tendens til at forsøge at 'passe' indholdet til skærmen på deres egen måde, især hvis der er faste pixelstørrelser defineret. I portræt er bredden typisk mere begrænset, så en 1280px bred canvas vil sandsynligvis blive skaleret ned for at passe. I landskab kan bredden af canvas'en (1280px) overstige den faktiske viewport-bredde på en telefon i landskab (f.eks. 960px for HD-telefonen i vores eksempel, eller endda 1080px for FullHD-telefonen, hvis den bruger 'device-width' korrekt), hvilket fører til, at browseren viser en del af canvas'en uden for skærmen eller zoomer ind.
5. WebGL Build Settings: Tjek Unitys WebGL Build Settings. Under 'Resolution and Presentation' kan du ofte vælge 'Default Canvas' eller 'Match Browser Window'. 'Match Browser Window' er ofte det bedste valg for responsive WebGL-applikationer, da det forsøger at tilpasse canvas'en til browserens vindue.

Kort sagt, problemet med WebGL-skalering på mobile browsere handler ofte om at sikre, at din HTML og CSS er indstillet til at være fuldt responsiv, og at browseren får lov til at skalere <canvas>-elementet korrekt til enhedens viewport, mens Unitys interne Canvas Scaler tager sig af, at UI'et inden i spillet er proportionalt og ser godt ud, uanset den interne renderingopløsning.

Ofte Stillede Spørgsmål (FAQ)

Hvad er forskellen mellem ankere og Canvas Scaler?

Ankere definerer, hvor et UI-element er fastgjort til sin forælder (f.eks. et hjørne, en kant eller midten). De sikrer, at elementets position forbliver relativ til disse ankerpunkter, når forælderens størrelse eller billedformat ændres. De påvirker ikke elementets egen størrelse i pixels. Canvas Scaler derimod, er en komponent på rod-Canvas'en, der skalerer hele UI'et (alle elementer på den Canvas) baseret på skærmstørrelsen eller pixeltætheden. Den justerer elementernes faktiske pixelstørrelse, så de fremstår proportionelt ens på tværs af forskellige skærme. Du skal bruge begge dele for et fuldt adaptivt UI: Ankere for position og Canvas Scaler for størrelse.

Hvorfor ser min UI forkert ud på forskellige skærme?

Dette skyldes ofte, at dit UI ikke er designet til at være responsivt. Uden de korrekte ankerindstillinger kan UI-elementer flytte sig væk fra deres tiltænkte positioner, eller endda forsvinde uden for skærmen, når opløsningen eller billedformatet ændres. Uden en Canvas Scaler (eller med forkerte indstillinger) kan UI-elementer fremstå for store eller for små på skærme med forskellig pixeltæthed, hvilket påvirker læsbarheden og brugervenligheden. Tjek dine ankerindstillinger og din Canvas Scaler-komponents 'UI Scale Mode' og 'Match'-egenskab.

Skal jeg altid bruge Canvas Scaler?

For de fleste spil og applikationer, der skal understøtte et bredt udvalg af skærmstørrelser og opløsninger (især på mobil), er det stærkt anbefalet at bruge Canvas Scaler med 'Scale With Screen Size'. Hvis dit spil kun kører på en enkelt, fast opløsning, eller hvis du har specifikke grunde til at bevare pixel-perfekt skarphed uden skalering, kan du overveje 'Constant Pixel Size'. Dog vil 'Scale With Screen Size' give den bedste brugeroplevelse på tværs af enheder.

Hvordan tester jeg min UI på forskellige opløsninger?

I Unitys Game View kan du nemt skifte mellem forskellige foruddefinerede opløsninger (f.eks. 'Standalone', 'iPhone X', 'iPad Pro') eller oprette dine egne brugerdefinerede opløsninger. Dette giver dig mulighed for hurtigt at se, hvordan dit UI tilpasser sig. Det er også afgørende at teste på faktiske enheder, da simulatorer ikke altid kan fange alle nuancer af ydeevne og rendering på tværs af forskellige hardware og software versioner, især for WebGL builds i browsere.

Er Unity en mobilbrowser?

Nej, Unity er ikke en mobilbrowser. Unity er en spilmotor, der bruges til at udvikle 2D- og 3D-spil og interaktive oplevelser. Disse spil kan derefter eksporteres til forskellige platforme, herunder mobiltelefoner (som native apps til iOS og Android) og webbrowsere (via WebGL). Når et Unity-spil kører i en mobilbrowser, er det en WebGL-build, der renderes inden i browserens <canvas>-element. Eventuelle skaleringsproblemer i denne kontekst relaterer sig ofte til, hvordan HTML, CSS og browserens viewport interagerer med WebGL-canvas'en.

Konklusion

At designe et UI, der er både funktionelt og visuelt tiltalende på tværs af et utal af skærmstørrelser og -opløsninger, er en afgørende del af moderne spil- og appudvikling. Unitys UI-system giver dig de nødvendige værktøjer til at mestre denne udfordring. Ved effektivt at kombinere brugen af ankere for at opretholde relative positioner og Canvas Scaler for at håndtere proportional skalering, kan du skabe en brugergrænseflade, der tilpasser sig dynamisk til enhver enhed. For WebGL-udgivelser er det desuden vigtigt at sikre, at din HTML-template og CSS er optimeret til responsivitet, så browseren korrekt kan håndtere visningen af spillets canvas. Ved at anvende disse principper og strategier kan du sikre en ensartet og professionel brugeroplevelse, uanset hvor og hvordan dit spil eller din app bliver spillet.

Hvis du vil læse andre artikler, der ligner Design af Adaptivt UI i Unity: En Dybdegående Guide, kan du besøge kategorien Mobil.