Skab Intuitive Kontroller: Virtuel Joystick til Mobilspil

I den konstant udviklende verden af mobilspil er det afgørende at tilbyde intuitive og responsive kontroller for at sikre en fængslende brugeroplevelse. En populær løsning, der har vundet indpas, er den virtuelle joystick – et berøringsbaseret kontrolsystem, der efterligner den fysiske joystick. Denne artikel vil dykke ned i, hvordan du kan skabe en virtuel joystick til dine mobilspil, hvilket forbedrer gameplay og brugerinteraktion markant.

Virtuelle joysticks giver spillere en velkendt og komfortabel måde at navigere på, selv uden fysiske knapper. De eliminerer behovet for eksternt hardware og gør spil tilgængelige for et bredere publikum, der udelukkende bruger touchskærmen. Ved at mestre implementeringen af en virtuel joystick kan du løfte dine spil til et nyt niveau af brugervenlighed og immersion.

Hvad er en Virtuel Joystick?

En virtuel joystick er et grafisk element på skærmen, der reagerer på spillerens berøring for at styre bevægelser eller handlinger i et spil. Den består typisk af en ydre cirkulær "container" og et indre "håndtag", som spilleren trækker i. Når håndtaget bevæges væk fra midten, registreres retning og afstand, som derefter oversættes til spillets logik, f.eks. at flytte en karakter eller sigte med et våben. Den største fordel er dens tilpasningsevne og det faktum, at den kan placeres hvor som helst på skærmen, hvilket giver en fleksibel kontroloplevelse.

Opbygning af den Virtuelle Joystick: HTML og CSS

For at komme i gang med at skabe vores virtuelle joystick, skal vi først definere dens struktur ved hjælp af HTML og give den et visuelt udtryk med CSS. Dette grundlæggende design vil danne fundamentet for vores interaktive kontrol.

HTML-Strukturen

Vi starter med at tilføje følgende HTML-kode til vores projekt:

<div class="joystick"> <svg class="joystick-outline" viewbox="-7 -7 310 310"> <path d="M150,0 A150,150 0 1,1 150,300 A150,150 0 1,1 150,0" fill="none" stroke="rgba(255, 255, 255, 0.4)" stroke-width="5" stroke-dasharray="205 30" stroke-dashoffset="221" /> </svg> <div class="joystick-handle-container"> <div class="joystick-handle"></div> </div> </div> 

I denne struktur har vi en ydre div med klassen joystick, som fungerer som den samlede beholder. Indeni finder vi et svg-element, som bruges til at tegne joystickens ydre omrids. Dette omrids er en stor cirkel med en stiplet kant, hvilket opnås ved at manipulere stroke-dashoffset og stroke-dasharray egenskaberne. Endelig har vi en joystick-handle-container, der indeholder selve joystick-handle, som er den del spilleren interagerer med.

Styling med CSS

For at give vores joystick et komplet udseende, styler vi den med følgende CSS:

body { width: 100vw; height: 100vh; overflow: hidden; margin: 0; padding: 0; } .joystick { width: 20vmax; height: 20vmax; position: absolute; bottom: 1vmax; left: 1vmax; background-color: rgba(0, 0, 0, 0.2); border-radius: 50%; } .joystick-outline { width: 100%; height: 100%; } .joystick-handle-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .joystick-handle { position: absolute; width: 8vmax; height: 8vmax; border-radius: 50%; background-color: rgba(255, 255, 255, 0.6); top: 50%; left: 50%; margin-left: -4vmax; margin-top: -4vmax; } 

Denne CSS definerer størrelsen og placeringen af joysticken, gør den cirkulær og giver den en gennemsigtig baggrund. Joystick-håndtaget er også centreret inden i sin container og har en lysere, gennemsigtig farve, der skiller sig ud. Brugen af vmax enheder sikrer, at joysticken skaleres responsivt på tværs af forskellige skærmstørrelser, hvilket er essentielt for mobilspil.

Interaktion med Joystick'en: Touch-logik

Nu hvor vores joystick er visuelt klar, skal vi tilføje logikken, der gør den interaktiv. Dette involverer at lytte efter berøringshændelser og reagere på dem.

Lytning efter Berøringshændelser

Først skal vi hente referencer til vores joystick-elementer og tilknytte en lytter til touchstart-hændelsen:

const joyStickHandle = document.querySelector(".joystick-handle"); const joyStickContainer = document.querySelector(".joystick"); joyStickContainer.addEventListener("touchstart", handleJoystickStart); function handleJoystickStart(event) { // Logik for når berøring starter } 

Da vi ønsker at flytte vores finger for at styre joysticken, skal vi tilføje hændelseslyttere for touchmove og touchend. Disse lyttere tilføjes til document i touchstart-funktionen, så de fortsætter med at lytte, selvom fingeren bevæger sig uden for joystick-containeren, og fjernes igen i touchend-funktionen for at undgå unødvendige lyttere og potentielle konflikter.

function handleJoystickStart(event) { document.addEventListener("touchmove", handleJoystickMove); document.addEventListener("touchend", handleJoystickEnd); handleJoystickMove(event); // Flyt håndtaget med det samme ved berøring } function handleJoystickMove(event) { // Logik for når fingeren bevæges } function handleJoystickEnd() { document.removeEventListener("touchmove", handleJoystickMove); document.removeEventListener("touchend", handleJoystickEnd); joyStickHandle.style.transform = ""; // Nulstil håndtagets position joyStickHandle.parentElement.style.transform = ""; // Nulstil rotationen } 

Beregning af Joystick-håndtagets Position

Den næste udfordring er at beregne den korrekte position for joystick-håndtaget baseret på spillerens berøring. Vi vil bruge en tilgang, hvor vi roterer håndtagets container og derefter flytter håndtaget langs Y-aksen for at simulere bevægelse i alle retninger. Dette gør det lettere at begrænse bevægelsen til en cirkel og udlede retning og afstand.

Beregning af Vinklen

Vi skal først beregne vinklen mellem joystickens centrum og berøringspunktet. Vi ønsker at behandle joystickens centrum som koordinatsystemets nulpunkt. Dette kan gøres ved hjælp af JavaScripts indbyggede Math.atan2-funktion, som beregner vinklen mellem (0,0) og de angivne Y- og X-koordinater. Vi laver en hjælpefunktion kaldet calculateAngle:

function calculateAngle(centerX, centerY, pointX, pointY) { const deltaX = pointX - centerX; const deltaY = pointY - centerY; const angleInRadians = Math.atan2(deltaY, deltaX); let angleInDegrees = (angleInRadians * 180) / Math.PI + 90; if (angleInDegrees < 0) angleInDegrees += 360; return angleInDegrees; } 

Her opretter vi deltaX og deltaY for at simulere joystickens centrum som nulpunkt. atan2 returnerer vinklen i radianer, som vi konverterer til grader. Vi tilføjer 90 grader, da et polært koordinatsystem har 0 grader til venstre for centrum, mens CSS-rotation starter fra toppen. Endelig sikrer vi, at vinklen altid er positiv.

Beregning af Cirkelvinkel og Afstand

Nu skal vi bruge denne funktion til at beregne både vinkel og afstand fra joystickens centrum til berøringspunktet. Vi opretter en ny funktion calculateCircleAngleAndDistance:

function calculateCircleAngleAndDistance(clientX, clientY) { const { x, y, width, height } = joyStickContainer.getBoundingClientRect(); const centerX = x + width / 2; const centerY = y + height / 2; let distance = Math.sqrt( Math.pow(clientX - centerX, 2) + Math.pow(clientY - centerY, 2) ); distance = clamp(distance, 0, height / 2); return { angle: calculateAngle(centerX, centerY, clientX, clientY), distance, }; } 

Denne funktion får joystick-containerens position og dimensioner. Den beregner afstanden mellem berøringspunktet (clientX, clientY) og joystickens centrum. Vi bruger også en clamp-funktion til at sikre, at afstanden ikke overstiger joystickens grænser (halvdelen af dens højde/bredde):

function clamp(value, min, max) { return Math.min(Math.max(value, min), max), max); } 

Endelig returnerer funktionen den beregnede vinkel og den begrænsede afstand.

Flytning af Håndtaget og Nulstilling

Med vinklen og afstanden klar kan vi nu flytte joystick-håndtaget.

Anvendelse af Transformationer

I handleJoystickMove-funktionen anvender vi de beregnede værdier til at transformere håndtaget:

function handleJoystickMove(event) { const { angle, distance } = calculateCircleAngleAndDistance( event.touches[0].clientX, event.touches[0].clientY ); joyStickHandle.style.transform = `translateY(${ -distance }px)`; joyStickHandle.parentElement.style.transform = `rotate(${ angle }deg)`; } 

Vi bruger event.touches[0] for at få det første berøringspunkt. Joystick-håndtaget flyttes langs Y-aksen (translateY), og dets forældreelement roteres (rotate) for at simulere bevægelsen i den korrekte retning. Denne dynamiske visuelle feedback er afgørende for en god brugeroplevelse.

Nulstilling af Joysticken

Ligesom fysiske joysticks, der vender tilbage til midten, når de slippes, skal vores virtuelle joystick også nulstilles. Dette gøres i handleJoystickEnd-funktionen ved at fjerne de anvendte transformationer:

function handleJoystickEnd() { joyStickHandle.style.transform = ""; joyStickHandle.parentElement.style.transform = ""; document.removeEventListener("touchmove", handleJoystickMove); document.removeEventListener("touchend", handleJoystickEnd); } 

Ved at fjerne transform-egenskaberne vender håndtaget øjeblikkeligt tilbage til sin oprindelige, centrerede position.

Test af Løsningen i et Mobilt Miljø

Da den virtuelle joystick er designet til mobilspil med berøringsinput, er det vigtigt at simulere dette miljø for at teste vores UI korrekt. Dette kan gøres ved at konfigurere din spilmotor eller testmiljø til at behandle input som berøring. For eksempel, i nogle udviklingsmiljøer, kan du tilføje et flag som --input touch til din eksekverbare fil:

start "Player" /d "%wd%" "..\Player\Player.exe" --player "--url=coui://uiresources/Internal/DragAndDrop/drag-n-drop.html" --input touch 

Dette sikrer, at dit system fortolker museklik og andre input som berøringshændelser, hvilket giver en mere realistisk test af din joystick-funktionalitet.

Tilslutning af Joystick til Spillets Logik (C#)

At have en fungerende virtuel joystick på skærmen er kun halvdelen af arbejdet; den skal også kommunikere med spillets underliggende logik. I Unity eller andre C#-baserede spilmotorer kan dette gøres effektivt.

Behandling af Touch-Input i C#

For at forbinde joysticken til din karakter eller spilmekanik, skal du have et C#-script, der kan læse joystickenes uddata (vinkel og afstand) og oversætte det til spilbevægelse. Selvom vi har fokuseret på UI-delen, er principperne for input-mapping universelle.

For at bruge touch-kontrol i mobilspil skal du først tilføje din joystick-UI til spillet og derefter tilknytte et C#-script til den. Scriptet vil tillade joysticken at bevæge sig til brugerens berøringsposition og vende tilbage til sin oprindelige position, når brugeren ikke længere rører skærmen. Til sidst skal du tilføje et andet C#-script til din spiller for at modtage disse input.

Mapping af Input

For en fysisk joystick, der er tilsluttet en pc, bruger man typisk Input.GetAxis("Vertical") og Input.GetAxis("Horizontal"). Sørg for at mappe disse akser i dine projektindstillinger under "Input Manager".

For touch-input er det også ligetil med Input.GetTouch(0).position. Dette giver dig skærmkoordinaterne for den første berøring. Hvis du har brug for at oversætte disse 2D-skærmkoordinater til 3D-verdenskoordinater i dit spil, kan du bruge raycasting:

private static Vector3 GetPositionFromScreenPosition(Vector3 screenPosition) { Ray ray = Camera.main.ScreenPointToRay(screenPosition); if (Physics.Raycast(ray, out RaycastHit hit)) { return hit.point; } return Vector3.zero; } 

Denne funktion sender en stråle fra kameraet gennem berøringspunktet på skærmen og returnerer det punkt i spilverdenen, hvor strålen rammer noget. Dette er yderst nyttigt for at placere objekter eller beregne bevægelsesveje baseret på berøring.

Begge metoder – Input.GetAxis for joysticks og Input.GetTouch for touch-skærme – kan fungere problemfrit i den samme Update() eller FixedUpdate() metode, hvilket giver dig fleksibilitet i din input-håndtering.

Ofte Stillede Spørgsmål (FAQ)

Hvordan fungerer touch-kontrol i mobilspil?

Touch-kontrol i mobilspil fungerer ved at detektere og tolke brugerens berøringer på skærmen. Dette inkluderer enkeltberøringer (taps), træk (swipes), knib (pinches) og flere berøringer (multi-touch). En virtuel joystick er et eksempel på touch-kontrol, hvor fingerens position og bevægelse oversættes til spillets input. Spilmotoren registrerer disse hændelser og bruger dem til at styre spilobjekter, navigere i menuer eller udføre specifikke handlinger. Essentielt er det en direkte interaktion med spilverdenen via fingerspidserne.

Hvordan mapper jeg input til en joystick i Unity/C#?

For at mappe input fra en joystick (enten virtuel eller fysisk) i Unity med C#, bruger du typisk Input.GetAxis() for at få værdier langs akser (f.eks. "Horizontal" og "Vertical"). Disse værdier ligger typisk mellem -1 og 1. For touch-input kan du bruge Input.GetTouch(index).position for at få 2D-skærmkoordinaterne af en specifik berøring. For en virtuel joystick, som den vi har bygget, ville du i C# modtage data (vinkel og afstand) fra UI-laget (f.eks. via et JavaScript-kald eller et event-system) og derefter omsætte disse til bevægelsesvektorer for din spiller eller kamera. Det er vigtigt at konfigurere Input Manager i Unity (Edit > Project Settings > Input Manager) for at definere de akser, du vil bruge, især for fysiske joysticks.

Konklusion

At skabe en virtuel joystick til mobilspil kan markant forbedre brugeroplevelsen ved at levere intuitive og responsive kontroller. Ved at følge de trin, der er beskrevet i denne artikel, har du nu en solid forståelse af, hvordan du implementerer en virtuel joystick i dit spil, fra den grundlæggende HTML-struktur og CSS-styling til den komplekse JavaScript-logik for berøringsbehandling og beregning af position. Uanset om du er en erfaren udvikler eller lige er startet, vil mestring af denne teknik tilføje en værdifuld færdighed til dit spiludviklingsværktøj. Husk, at en velfungerende kontrolmekanisme er hjertet i ethvert mobilspil. God kodning, og må dine spil blive endnu mere engagerende!

Hvis du vil læse andre artikler, der ligner Skab Intuitive Kontroller: Virtuel Joystick til Mobilspil, kan du besøge kategorien Mobilspil.