Skaler Unity UI perfekt til alle telefonstørrelser

At udvikle et mobilspil i Unity, især et der er så afhængigt af brugergrænsefladen som et idle clicker- eller management-spil, indebærer en af de mest frustrerende udfordringer: at få din UI til at skalere smukt og ensartet på tværs af et utal af telefonskærmstørrelser og -opløsninger. Mange udviklere støder på problemet, hvor elementer ser perfekte ud på deres egen enhed, men bliver enten for store, for små, forskudte eller simpelthen ødelagte på andre skærme. Du har måske allerede eksperimenteret med Canvas Scaler og Ankre, kun for at opdage, at dit spil stadig ikke ser ud, som det skal. Frygt ikke! Denne omfattende guide vil dykke ned i de afgørende koncepter og bedste praksisser for at sikre, at din Unity UI ser professionel og fuldstændig responsiv ud, uanset hvilken portrættelefon den vises på.

Forstå Canvas: Hjertet af Din UI

Forestil dig et Canvas som det lærred, hvorpå al din brugergrænseflade males. I Unity er en Canvas et komponent/objekt, der indeholder alle dine UI-elementer og tegner dem på skærmen. Når du opretter en ny Canvas, tilføjer Unity automatisk tre vigtige komponenter: en Rect Transform, en Graphic Raycaster og en Canvas Scaler. Derudover oprettes et nyt GameObject kaldet EventSystem.

Selvom Graphic Raycaster-komponenten og EventSystem-GameObjectet er afgørende for håndtering af input (f.eks. klik på knapper eller musens bevægelse og træk), vil vi ikke dykke dybere ned i dem her. Det er vigtigt at vide, at Canvases render UI-elementer baseret på hierarkiets rækkefølge; det første element i hierarkiet renderes først, hvilket kan have betydning for, hvordan elementer overlapper hinanden. Vigtigt: Canvas er grundlaget for al din brugerflade, så en korrekt opsætning her er essentiel.

Canvas Skalering: Tilpasning til Skærmen

Når din Canvas er på plads, er det afgørende at sikre, at den skalerer korrekt baseret på skærmens opløsning. Dette opnås primært gennem Canvas Scaler-komponenten.

Render Mode

• Screen Space – Overlay: Dette er den mest almindelige og anbefalede indstilling for de fleste mobil-UI'er. UI-elementerne tegnes direkte oven på alt andet i spillet, og Canvas'en tilpasses automatisk skærmens størrelse.
• Screen Space – Camera: Denne indstilling får Canvas'en til at passe til kameraets frustum. Det kan være nyttigt i visse situationer, men kræver ofte mere manuel justering og er mindre fleksibel for generel UI-skalering på tværs af forskellige skærmforhold.

UI Scale Mode: Nøglen til Responsivitet

For at opnå en brugerflade, der tilpasser sig 100% til skærmen, skal du indstille UI Scale Mode til Scale with Screen Size. Dette er den absolutte nøgle til at få din UI til at skalere proportionelt, da den forsøger at opretholde en ensartet størrelse på UI-elementer, uanset skærmens opløsning.

Reference Resolution: Grundlaget for Din Skalering

Dette er et afgørende punkt, som mange misforstår. Din Reference Resolution er ikke din egen telefons opløsning (f.eks. 720x1560, som du måske bruger). I stedet bør det være en standardopløsning, som f.eks. 1920x1080 (Full HD) eller 1280x720. Ved at bruge en mere generisk referenceopløsning kan Canvas Scaler bedre beregne, hvordan dine UI-elementer skal tilpasses for at se ensartede ud på tværs af en bred vifte af enheder. Hvis du bruger en referenceopløsning, der er for specifik eller usædvanlig, kan det føre til uforudsigelige skaleringsproblemer.

Screen Match Mode: Balancen Mellem Bredde og Højde

Indstil Screen Match Mode til Match Width Or Height. Denne indstilling giver dig en skyder, der lader dig bestemme, om Canvas Scaler primært skal matche skærmens bredde (skyderen mod 0) eller dens højde (skyderen mod 1). For portrætspil, som idle clickers typisk er, kan det ofte være bedst at matche højden (en værdi tættere på 1) eller en balance i midten (0.5). Hvis du matcher bredden, vil UI-elementer opretholde deres bredde i forhold til skærmens bredde, og højden vil justere sig, og omvendt. Eksperimenter med denne indstilling for at finde den optimale balance, der passer bedst til dit spils æstetik og layout.

Rect Transform: Kontrol over UI-Elementer

Alle UI-elementer i Unity har en Rect Transform-komponent, som er den 2D-modpart til den almindelige Transform-komponent. Den repræsenterer et område, der indeholder dit UI-element, og det er her, du kontrollerer elementets position, størrelse, rotation og skalering. Rect Transform giver dig mulighed for at ændre Bredde (Width) og Højde (Height) samt justere dets Pivot og Ankre. Det er fundamental for præcis placering og dimensionering af dine UI-elementer.

Pivot: Drejepunktet

Pivot er det punkt, hvorom rektanglet/Rect Transform-området roterer. Det er også referencen for elementets position. En pivot på (0,0) er nederst til venstre i rektanglet, (0.5, 0.5) er i midten, og (1,1) er øverst til højre. At forstå pivoten er vigtigt for at placere elementer præcist, især når du arbejder med relative positioner eller rotationer.

Ankre (Anchors): Din UI's "Kroge"

Ankre er måske den mest afgørende del af dette puslespil, når det kommer til at opnå proportional skalering. Forestil dig dem som "kroge", der forbinder dit UI-element til dets forældres Rect Transform. Når forælderen ændrer størrelse, vil dit element følge med, afhængigt af ankerindstillingerne.

Hvert anker består af en Minimum- og en Maksimum-værdi (typisk mellem 0 og 1). Jo større spændet er mellem Min og Max, jo mere vil elementet tilpasse sig:.

• Hvis Min er det samme som Max (f.eks. Min X = 0.5, Max X = 0.5), vil værdien være konstant, uden skalering i den pågældende akse. Dette er ideelt for elementer, der skal forblive faste i forhold til et bestemt punkt, f.eks. en knap der altid er centreret øverst.
• Hvis Min er 0 og Max er 1, vil ankeret være "kroget" til dets forælder 100% på den pågældende akse. Det betyder, at elementet vil strække sig sammen med sin forælder.

Hvis begge akser (X og Y) har Min på 0 og Max på 1, vil Rect Transform'en ændre sig proportionalt 1:1 i alle koordinater. Dette er yderst nyttigt for baggrundsbilleder eller paneler, som du ønsker skal fylde hele skærmen eller et givent område af den forælder, de er en del af.

Forudindstillinger (Presets) for Ankre

Unity tilbyder praktiske forudindstillinger for ankre, som du kan finde ved at klikke på ikonet øverst til venstre i Rect Transform-komponenten. Disse forudindstillinger giver en klar indikation af, hvor og hvordan dit objekt vil blive "ankret". Funktionen "Stretch" (stræk) svarer til det 0-1-område, vi netop har beskrevet. De "røde linjer" i forudindstillingerne angiver de akser, der vil forblive konstante (Min = Max). Vær opmærksom på, at ankre altid refererer til deres forælders Rect Transform. Hvis du f.eks. vil ankre et billede kaldet "A" til et panel "B", skal "A" være et barn af "B" i hierarkiet.

Ankre er afgørende for responsivt design og korrekt placering af dine UI-elementer på tværs af forskellige skærmstørrelser.

Tekstskalering: Læsbarhed på Enhver Skærm

Udover at strække Rect Transforms er det også nødvendigt at skalere størrelsen på din tekst, så den forbliver læsbar på tværs af forskellige opløsninger. For Legacy Text UI (den ældre tekstkomponent) er den vigtigste egenskab Best Fit. Her kan du indstille en Min Font Size og en Max Font Size, og teksten vil automatisk tilpasse sig for at fylde hele Rect Transform-området, mens de konstante proportioner bevares.

Vi anbefaler dog på det kraftigste at bruge TextMesh Pro-pakken, som er tilgængelig gratis i Unitys Package Manager og erstatter Legacy Text UI. TextMesh Pro tilbyder overlegen tekstgengivelse og ydeevne. Her finder du en lignende funktion kaldet Auto Size, der fungerer på samme måde som Best Fit, hvilket sikrer, at din tekst altid er let at læse. Tekstlæsbarhed er vital for brugeroplevelsen i dit spil.

Auto Layout Grupper: Organiser Din Brugerflade

Udover Rect Transforms og Ankre findes der en række andre komponenter, der giver dig endnu mere kontrol over placeringen og organisationen af UI-elementer. Disse kaldes Layout Groups.

Layout Groups placerer automatisk deres underordnede elementer side om side, baseret på dine indstillinger. Du kan kontrollere afstanden mellem dem, deres størrelse og meget mere:

• Horizontal Layout Group: Placerer sine underordnede elementer ved siden af hinanden langs X-aksen. Ideel til rækker af knapper eller ikoner.
• Vertical Layout Group: Placerer sine underordnede elementer vertikalt, oven på hinanden. Perfekt til lister eller menuer.
• Grid Layout Group: Placerer elementer i et gitter, hvor du kan definere antallet af rækker og kolonner, cellestørrelse og afstand. Nyttigt for inventarsystemer eller niveauselektionsskærme.

Komponenten Layout Element giver dig desuden mulighed for at tilsidesætte størrelsen på et specifikt UI-element (minimum, foretrukken eller fleksibel størrelse), især når det er placeret inde i en Layout Group. Dette er nyttigt, hvis du f.eks. ønsker, at et billede skal opføre sig anderledes end de andre elementer i en layoutgruppe. Layout Groups muliggør automatisk og dynamisk organisering af din UI, hvilket reducerer behovet for manuel justering.

UI Eksempel: Strukturering af et Idle Clicker Spil

Lad os samle alle disse koncepter og forestille os, hvordan du kan strukturere UI'en til dit idle clicker-spil, så det skalerer perfekt på tværs af portrætskærme. Et typisk idle clicker-spil har ofte en central spilzone, sidepaneler med information eller knapper, og en bundbjælke til navigation.

Her er et eksempel på, hvordan du kan opsætte dine hovedpaneler:

• Midterpanel (Main Game Area): Dette panel indeholder typisk spiltitlen, den centrale klik-mekanisme, og de vigtigste spilknapper.

- Canvas Scaler: Sørg for at den globale Canvas har 'Scale with Screen Size' med en 'Reference Resolution' som 1920x1080 og 'Screen Match Mode' sat til f.eks. 0.5 (balanceret mellem bredde og højde).

- Rect Transform & Ankre: For Midterpanelet kan du indstille ankre til at strække sig fra f.eks. Min(0.1, 0.2) til Max(0.9, 0.8). Dette vil sikre, at panelet optager en central del af skærmen, uanset opløsning. Brug en Vertical Layout Group inden i panelet til at organisere spiltitel, klik-knap og andre centrale elementer.

• Højre Panel (Side Buttons/Info): Dette panel kan indeholde knapper til opgraderinger, statistik eller andre sekundære funktioner.

- Rect Transform & Ankre: Ankre for dette panel kan sættes til Min(0.7, 0) og Max(1, 1) for at strække sig langs hele skærmens højde på højre side. Inden i dette panel kan en Vertical Layout Group organisere de individuelle knapper, og TextMesh Pro med Auto Size vil sikre, at knapteksterne er læsbare.

• Bundpanel (Navigation/Main Menu): Typisk en bjælke med hovednavigationsknapper.

- Rect Transform & Ankre: Ankre for dette panel kan indstilles til Min(0, 0) og Max(1, 0.1) for at strække sig over hele skærmens bredde i bunden. Brug en Horizontal Layout Group inden i panelet til at fordele navigationsknapperne jævnt.

Her er en overskuelig tabel, der opsummerer nogle af disse anbefalinger:

Ofte Stillede Spørgsmål (FAQ)

Spørgsmål: Min UI ser stadig mærkelig ud på små skærme, hvad gør jeg?

Svar: Start med at dobbelttjekke din Reference Resolution og Screen Match Mode i Canvas Scaler. Sørg for, at din referenceopløsning er en generisk standard (f.eks. 1920x1080) og ikke din specifikke telefons opløsning. Overvej, om du matcher bredde eller højde bedst for et portrætspil – ofte giver en match på højden eller en 50/50-balance de bedste resultater. Gennemgå derefter dine Ankre for hvert UI-element. Mange problemer opstår, fordi ankre er indstillet forkert, især når elementer skal strække sig eller forblive faste. Husk, at ankre definerer, hvordan elementet tilpasser sig forældrens størrelse. Brug forudindstillingerne for ankre for at starte, og finjuster derfra.

Spørgsmål: Skal jeg bruge min egen telefons opløsning som Reference Resolution?

Svar:Absolut ikke! Dette er en almindelig fejl. Din Reference Resolution skal være en generisk, standardopløsning som 1920x1080 (Full HD) eller 1280x720 (HD). Ved at bruge en standardopløsning giver du Canvas Scaler et optimalt udgangspunkt for at beregne, hvordan UI'en skal skalere op og ned for at passe til alle andre skærmstørrelser. Hvis du bruger en meget specifik eller usædvanlig opløsning, kan det føre til uforudsigelig og inkonsekvent skalering på andre enheder.

Spørgsmål: Hvorfor er tekst svært at læse på nogle skærme?

Svar: Tekstlæsbarhed er kritisk. For at sikre, at din tekst altid er læsbar, skal du bruge Best Fit (for Legacy Text) eller Auto Size (for TextMesh Pro). Det er også vigtigt at indstille en passende Min Font Size og Max Font Size for at give systemet et interval at arbejde inden for. Sørg også for, at tekstens Rect Transform har tilstrækkelig plads og er korrekt ankret, så teksten kan skalere inden for dens tildelte område uden at blive klemt eller for lille.

Spørgsmål: Hvad hvis jeg har et element, der skal være en fast størrelse uanset skærmen?

Svar: Hvis du har et element, der skal opretholde en bestemt fast størrelse uanset skærmopløsningen (f.eks. et lille ikon), kan du stadig bruge ankre. Indstil ankre, hvor Min og Max er ens (f.eks. Min X = 0.5, Max X = 0.5 for centrering på X-aksen). Derefter kan du justere bredde og højde via elementets Rect Transform offset-værdier (Width og Height). Hvis elementet er inde i en Layout Group, kan du også bruge komponenten Layout Element til at tilsidesætte standardstørrelsen og tvinge en fast Minimum, Preferred eller Flexible størrelse.

Konklusion

At mestre UI-skalering i Unity kræver en solid forståelse af Canvas Scaler, Rect Transforms, og især Ankre. Ved at anvende de principper, der er beskrevet her – herunder valg af en generisk Reference Resolution, korrekt brug af Screen Match Mode, præcis forankring af UI-elementer og intelligent brug af Layout Groups – kan du skabe en brugergrænseflade, der ser fejlfri ud på enhver portrætmobiltelefon, uanset skærmstørrelse eller opløsning. Det kan virke komplekst i starten, men med praksis og eksperimentering vil du snart kunne levere en problemfri og professionel UI-oplevelse til dine spillere. Din indsats vil blive belønnet med et poleret spil, der skiller sig ud.

Hvis du vil læse andre artikler, der ligner Skaler Unity UI perfekt til alle telefonstørrelser, kan du besøge kategorien Teknologi.