Mobil Tastatur i Unity WebGL: En Fuld Guide

At udvikle spil og applikationer i Unity er en fornøjelse for mange, men når det kommer til at implementere mobil input – specifikt det virtuelle tastatur – i en WebGL-build, kan man støde på uventede udfordringer. Det er et frustrerende scenarie: Du trykker på et inputfelt på din mobiltelefon i en WebGL-applikation, og intet sker. Tastaturet dukker simpelthen ikke op. Dette problem kan fuldstændigt ødelægge brugeroplevelsen for enhver, der forsøger at interagere med tekstfelter, logge ind, indtaste navne eller udfylde formularer i din applikation. Heldigvis findes der løsninger, der kan afhjælpe denne specifikke udfordring, ligesom der er standardmetoder til at håndtere tastaturinput på tværs af mobile platforme generelt i Unity.

Denne artikel vil dykke ned i de tekniske detaljer bag, hvorfor dette problem opstår i Unity WebGL, og præsentere konkrete skridt til at løse det. Vi vil udforske en anerkendt 'workaround' kaldet WebMobileInputFix, som specifikt adresserer WebGL-udfordringerne, og vi vil også gennemgå Unitys indbyggede TouchScreenKeyboard-funktionalitet, som er standarden for mobil tastaturhåndtering. Ved at forstå begge tilgange kan du sikre, at dine Unity WebGL-projekter leverer en problemfri og intuitiv brugeroplevelse på mobile enheder.

WebMobileInputFix: Løsningen for Virtuelt Tastatur i Unity WebGL

Når det kommer til Unity WebGL på mobile enheder, er det et velkendt problem, at det virtuelle tastatur sjældent udløses automatisk, når en bruger trykker på et inputfelt. Dette er en betydelig barriere for interaktivitet og funktionalitet. WebMobileInputFix er en skræddersyet løsning designet til at omgå netop denne begrænsning. Det er ikke blot en løsning for at få tastaturet frem, men kan også muliggøre vigtige funktioner som kopiering og indsættelse af tekst i inputfelter, hvilket ofte er deaktiveret i standard WebGL-builds på mobil.

Hvad WebMobileInputFix Løser

Den primære funktion af denne løsning er at sikre, at det virtuelle tastatur altid udløses, når en bruger interagerer med et inputfelt i din Unity WebGL-applikation på en mobil enhed. Uden denne løsning vil brugerne opleve, at de ikke kan indtaste tekst overhovedet, hvilket gør mange applikationer ubrugelige på mobil. Udover at aktivere tastaturet, forbedrer WebMobileInputFix også interaktionen ved at understøtte kopier/indsæt-funktionalitet, som er afgørende for en fuldendt brugeroplevelse, især i applikationer, der kræver indtastning af længere tekster eller koder.

Sådan Bruges WebMobileInputFix

Implementeringen af WebMobileInputFix er bemærkelsesværdigt ligetil for udviklere. Det kræver kun et enkelt trin i din Unity-scene:

1. Tilføj KeyboardController-komponenten: Du skal blot tilføje KeyboardController-komponenten til et hvilket som helst objekt i din scene. Det kan være et eksisterende objekt som din Main Camera, eller et nyt, tomt GameObject, du opretter specifikt til formålet. Da KeyboardController.cs er implementeret som en Singleton, behøver du kun at tilføje den én gang i din scene, uanset hvor mange inputfelter du har. Singleton-mønsteret sikrer, at der kun findes én instans af denne controller, som centralt styrer bindingen af alle inputfelter og fungerer som broen mellem de native JavaScript-kald og Unitys inputfelter.

For udviklere, der anvender TMPro (Text Mesh Pro) til deres inputfelter, hvilket er en populær og anbefalet løsning for tekstgengivelse i Unity, er der en enkel konfiguration at huske. Du skal tilføje #USE_TMPRO til dine projektdefinitioner. Dette fortæller KeyboardController, at den skal håndtere TMPro-specifikke inputfelter korrekt, hvilket sikrer fuld kompatibilitet og funktionalitet.

Hvordan WebMobileInputFix Fungerer Bag Kulisserne

Denne innovative løsning er baseret på en kombination af native HTML-inputfelter og JavaScript-interaktion. Kernen i systemet er at fange input fra et indlejret HTML-inputfelt og binde disse inputs til Unitys egne InputField-komponenter. Når din Unity WebGL-applikation kører i en browser, opretter WebMobileInputFix et usynligt HTML-inputfelt i DOM'en (Document Object Model). Når en bruger interagerer med et Unity-inputfelt, videresendes fokus til dette native HTML-inputfelt. Dette tvinger browseren til at udløse det virtuelle tastatur, da det nu er et standard HTML-inputfelt, der er i fokus.

Inputtet fra dette native HTML-felt videresendes derefter tilbage til Unity via JavaScript-kald. KeyboardController fungerer som mellemmanden, der modtager disse kald fra JavaScript og opdaterer det korresponderende Unity-inputfelt med den indtastede tekst. Denne tovejskommunikation er afgørende for, at løsningen fungerer effektivt.

Vigtige Overvejelser om index.html

For at WebMobileInputFix kan fungere korrekt, er det nødvendigt at foretage specifikke tilføjelser til din index.html-fil, som er den primære HTML-fil for din WebGL-build. Disse tilføjelser inkluderer et usynligt HTML-inputfelt og nogle JavaScript-funktioner, der håndterer interaktionen mellem browseren og Unity-instansen. Hvis du bruger en brugerdefineret index.html-skabelon, skal du enten manuelt tilføje de nødvendige poster eller udnytte FixIndexFile.cs-scriptet. Dette script er en post-build proces, hvilket betyder, at det automatisk modificerer din index.html-fil efter byggeprocessen for at inkludere de nødvendige elementer. De påkrævede HTML- og JavaScript-blokke ser typisk således ud:

<script>
 function FixInputOnSubmit() {
 document.getElementById("fixInput").blur();
 event.preventDefault();
 }
</script>
<div>
 <form onsubmit="FixInputOnSubmit()" autocomplete="off" style="width: 0px; height: 0px; position: absolute; top: -9999px;">
 <input type="text" id="fixInput" oninput="gameInstance.Module.ccall('FixInputUpdate', null)" onblur="gameInstance.Module.ccall('FixInputOnBlur', null)" style="font-size: 42px;">
 </form>
</div>

Denne kodebloks formål er at oprette et skjult inputfelt (fixInput) og et par JavaScript-funktioner, der videresender events (som oninput og onblur) tilbage til Unity via gameInstance.Module.ccall. Dette er den underliggende mekanisme, der tillader den native HTML-inputoplevelse at synkronisere med Unitys inputfelter.

Kendte Begrænsninger

Selvom WebMobileInputFix er en effektiv løsning på det primære problem, er det vigtigt at være opmærksom på nogle kendte begrænsninger. Den mest fremtrædende er, at markørpositionen (caret position) og tekstvalg (text selection) muligvis ikke fungerer optimalt eller som forventet. Da løsningen bygger på at synkronisere et native HTML-felt med et Unity-felt, kan der opstå uoverensstemmelser i, hvordan markøren eller valgt tekst vises inden for Unity-feltet. Dette er en afvejning, man må acceptere for at opnå den grundlæggende funktionalitet med virtuelt tastatur i WebGL.

Unitys Indbyggede Tastaturhåndtering: TouchScreenKeyboard

Udover de specifikke WebGL-udfordringer har Unity også en robust indbygget løsning til håndtering af tastaturinput på mobile enheder: TouchScreenKeyboard. Dette er den foretrukne metode, når du udvikler for iOS eller Android, hvor Unity i de fleste tilfælde automatisk vil håndtere tastaturinput for GUI-elementer. Men det er også nemt at vise tastaturet efter behov fra et script.

Automatisk Tastaturvisning med GUI-elementer

I mange tilfælde vil Unity automatisk vise det virtuelle tastatur, når en bruger trykker på et redigerbart GUI-element. Dette gælder for standard Unity GUI-elementer som GUI.TextField, GUI.TextArea og GUI.PasswordField. Når disse elementer modtager fokus, udløses tastaturet automatisk, hvilket giver en intuitiv brugeroplevelse uden yderligere kode.

Manuel Tastaturhåndtering

For mere kontrol eller i scenarier, hvor automatisk visning ikke er ønsket, kan du manuelt åbne tastaturet ved hjælp af TouchScreenKeyboard.Open()-funktionen. Denne funktion er yderst fleksibel og giver dig mulighed for at specificere en række parametre for at tilpasse tastaturets adfærd og udseende. Dette giver udviklere finjusteret kontrol over, hvornår og hvordan tastaturet præsenteres for brugeren.

Tastaturlayout-muligheder

TouchScreenKeyboard.Open()-funktionen accepterer forskellige TouchScreenKeyboardType-parametre, som definerer tastaturets layout og de tegn, det primært viser. Dette er afgørende for at give brugeren det mest relevante tastatur til den specifikke inputopgave. Her er en oversigt over de mest almindelige typer:

• TouchScreenKeyboardType.Default: Standardtastatur med bogstaver, der kan skiftes til tal og tegnsætning.
• TouchScreenKeyboardType.ASCIICapable: Ligner 'Default' men er specifikt designet til ASCII-tegn. Kan også skiftes til tal og tegnsætning.
• TouchScreenKeyboardType.NumbersAndPunctuation: Tastatur primært med tal og tegnsætning, kan skiftes til bogstaver.
• TouchScreenKeyboardType.URL: Tastatur optimeret til URL-indtastning med skråstreg og '.com'-knapper. Kan skiftes til tal og tegnsætning.
• TouchScreenKeyboardType.NumberPad: Kun tal fra 0 til 9, optimeret til numerisk input.
• TouchScreenKeyboardType.PhonePad: Tastatur designet til indtastning af telefonnumre.
• TouchScreenKeyboardType.NamePhonePad: Bogstaver, der kan skiftes til telefon-tastatur.
• TouchScreenKeyboardType.EmailAddress: Bogstaver med et '@'-tegn, optimeret til e-mailadresser. Kan skiftes til tal og tegnsætning.

Valg af den korrekte tastaturtype forbedrer brugervenligheden markant, da det giver brugeren et tastatur, der er skræddersyet til den forventede inputtype.

Tekstforhåndsvisning

Som standard oprettes der en redigeringsboks oven på tastaturet, når det vises. Denne boks fungerer som en forhåndsvisning af den tekst, brugeren indtaster, hvilket sikrer, at teksten altid er synlig, selvom tastaturet dækker dele af skærmen. Du kan dog deaktivere denne tekstforhåndsvisning ved at sætte TouchScreenKeyboard.hideInput til true. Det er vigtigt at bemærke, at denne funktion kun virker for visse tastaturtyper og inputtilstande; for eksempel vil den ikke fungere for telefon-keypads eller flerstrenget tekstinput. I sådanne tilfælde vil redigeringsboksen altid vises. TouchScreenKeyboard.hideInput er en global variabel og vil påvirke alle tastaturer.

Synlighed og Tastaturstørrelse

TouchScreenKeyboard-klassen tilbyder tre vigtige egenskaber, der giver information om tastaturets synlighed og størrelse på skærmen:

• visible: Returnerer true, hvis tastaturet er fuldt synligt på skærmen og kan bruges til at indtaste tegn.
• area: Returnerer tastaturets position og dimensioner som et Rect-objekt.
• active: Returnerer true, hvis tastaturet er aktiveret (enten vist eller i færd med at blive vist). Denne egenskab er ikke statisk; du skal have en instans af TouchScreenKeyboard for at bruge den.

Det er vigtigt at bemærke, at TouchScreenKeyboard.area vil returnere et Rect med position og størrelse sat til 0, indtil tastaturet er fuldt synligt på skærmen. Du bør ikke forespørge denne værdi umiddelbart efter TouchScreenKeyboard.Open(). Sekvensen af tastaturbegivenheder er typisk som følger:

1. TouchScreenKeyboard.Open() kaldes.
2. TouchScreenKeyboard.active returnerer true.
3. TouchScreenKeyboard.visible returnerer false.
4. TouchScreenKeyboard.area returnerer (0, 0, 0, 0).
5. Tastaturet glider ud på skærmen. Alle egenskaber forbliver de samme.
6. Tastaturet stopper med at glide. TouchScreenKeyboard.active returnerer true.
7. TouchScreenKeyboard.visible returnerer true.
8. TouchScreenKeyboard.area returnerer tastaturets reelle position og størrelse.

Forståelse af denne sekvens er afgørende for at designe responsivt UI, der tilpasser sig tastaturets tilstedeværelse.

Sikker Tekstinput

For situationer, hvor brugere skal indtaste følsomme oplysninger som adgangskoder, er det muligt at konfigurere tastaturet til at skjule symboler under indtastning (dvs. vise stjerner eller prikker i stedet for de faktiske tegn). For manuelt at åbne tastaturet med sikker tekstinput aktiveret, kan du bruge følgende kode:

TouchScreenKeyboard.Open("", TouchScreenKeyboardType.Default, false, false, true);

Den sidste parameter, true, aktiverer den sikre inputtilstand.

"Alert" Tastatur

Unity tillader også visning af tastaturet med en sort semi-transparent baggrund i stedet for den klassiske uigennemsigtige baggrund, hvilket kan være nyttigt for at signalere en 'alert'-tilstand eller blot for æstetiske formål. Dette opnås ved at kalde TouchScreenKeyboard.Open() med en yderligere parameter:

TouchScreenKeyboard.Open("", TouchScreenKeyboardType.Default, false, false, true, true);

Den sjette parameter, true, aktiverer denne 'alert'-baggrund.

Valg af Rigtig Løsning: WebGL-specifikke Udfordringer vs. Generel Mobil Input

Det er afgørende at forstå, hvornår man skal anvende WebMobileInputFix, og hvornår Unitys indbyggede TouchScreenKeyboard er tilstrækkelig. Grundlæggende er forskellen platformspecifik: WebMobileInputFix er en målrettet løsning til at omgå en specifik fejl i Unitys WebGL-implementering på mobile browsere, mens TouchScreenKeyboard er Unitys generelle API til håndtering af virtuelle tastaturer på mobile platforme som iOS og Android.

Hvis din applikation primært er designet til at køre som en stand-alone mobilapp (builds til iOS eller Android), vil Unitys TouchScreenKeyboard sandsynligvis fungere uden problemer for alle dine inputbehov. Tastaturet vil automatisk dukke op for standard GUI-inputfelter, og du har fuld kontrol over dets adfærd via TouchScreenKeyboard.Open().

Men hvis dit mål er en Unity WebGL-applikation, der skal køre i en mobil webbrowser, er situationen mere kompleks. Her vil du sandsynligvis opleve, at TouchScreenKeyboard ikke udløses korrekt af inputfelter. Det er i disse scenarier, at WebMobileInputFix bliver uundværlig. Den fungerer som en bro mellem den webbaserede kontekst og Unitys inputsystem, og tvinger det virtuelle tastatur frem ved at udnytte native browserfunktionalitet.

Kort sagt: Brug WebMobileInputFix, hvis dit virtuelle tastatur ikke vises i Unity WebGL på mobil. Brug TouchScreenKeyboard til alle andre mobile platforme, og for at tilpasse tastaturets udseende og adfærd på de platforme, hvor det fungerer korrekt.

Tabel: Sammenligning af Løsninger

Ofte Stillede Spørgsmål (FAQ)

Hvorfor virker mit virtuelle tastatur ikke i Unity WebGL på min mobiltelefon?

Dette er et almindeligt problem. Unitys standard håndtering af inputfelter i WebGL på mobile enheder udløser ofte ikke det virtuelle tastatur automatisk. Dette skyldes en kompleks interaktion mellem browserens sikkerhedsmodeller og Unitys rendering. Løsningen er typisk at implementere en workaround som WebMobileInputFix, der bruger et skjult HTML-inputfelt til at tvinge tastaturet frem.

Kan jeg bruge TMPro Input Fields med WebMobileInputFix?

Ja, absolut. WebMobileInputFix er designet til at være kompatibel med TMPro Input Fields. Du skal blot tilføje #USE_TMPRO til dit projekts Scripting Define Symbols i Player Settings. Dette fortæller løsningen, at den skal håndtere TMPro-specifikke inputfelter korrekt.

Hvad er forskellen mellem TouchScreenKeyboard.visible og TouchScreenKeyboard.active?

TouchScreenKeyboard.active returnerer true, så snart tastaturet er aktiveret, selvom det stadig glider ind på skærmen og ikke er fuldt synligt. TouchScreenKeyboard.visible returnerer først true, når tastaturet er fuldt synligt og klar til brug. active indikerer, at en tastaturåbningsproces er i gang, mens visible indikerer, at tastaturet er fuldt operationelt.

Hvordan skjuler jeg tekst, når brugeren indtaster et kodeord i Unity?

Du kan aktivere sikker tekstinput ved at bruge TouchScreenKeyboard.Open()-funktionen. Den femte parameter i denne funktion styrer sikker input. Sæt den til true for at skjule tegnene: TouchScreenKeyboard.Open("", TouchScreenKeyboardType.Default, false, false, true);. Dette vil få tegnene til at blive vist som stjerner eller prikker.

Skal jeg altid bruge WebMobileInputFix til WebGL?

Hvis din WebGL-applikation indeholder inputfelter, og du forventer, at brugere skal indtaste tekst på mobile enheder, er svaret næsten altid 'ja'. Uden den vil mange mobile brugere ikke kunne interagere med dine inputfelter. Hvis din app kun er til desktop WebGL, eller ikke har nogen inputfelter, er det naturligvis ikke nødvendigt.

Konklusion

At sikre en problemfri tekstinputoplevelse på tværs af platforme er en fundamental del af brugervenligt design i Unity. Selvom Unitys TouchScreenKeyboard API tilbyder omfattende funktionalitet for native mobilapplikationer, præsenterer WebGL-builds på mobile browsere en unik udfordring, der kræver en mere specifik tilgang. WebMobileInputFix adresserer effektivt denne mangel ved at bygge bro mellem native HTML-input og Unitys system, hvilket sikrer, at det virtuelle tastatur dukker op, når det skal. Ved at forstå både de indbyggede Unity-funktioner og de nødvendige workarounds for WebGL, kan udviklere skabe robuste og tilgængelige applikationer, der leverer en ensartet og positiv brugeroplevelse, uanset enhed eller platform.

Husk altid at teste dine WebGL-builds grundigt på forskellige mobile enheder og browsere for at identificere og afhjælpe eventuelle inputrelaterede problemer tidligt i udviklingsprocessen. Med de værktøjer og den viden, der er præsenteret her, er du godt rustet til at overvinde de mest almindelige forhindringer for mobil tekstinput i dine Unity WebGL-projekter.

Hvis du vil læse andre artikler, der ligner Mobil Tastatur i Unity WebGL: En Fuld Guide, kan du besøge kategorien Teknologi.