Hur man använder Transforma Feature i ditt HTML5 spel

September 4

Klassen Sprite har förmågan att flytta och rotera i din HTML5 spel, men dessa funktioner är inte inbyggd i vanlig JavaScript. Du kan använda omvandlings funktioner i duken taggen för att få detta beteende.

Transformationer är matematiska operationer som kan tillämpas på alla ritning eller bild för att ändra utseende. Det finns tre stora förändringar:

  • translation: Flyttar ett visst belopp i X och Y.
  • rotation: Roterar runt en viss punkt.
  • skala: Ändrar storleken på ritningen i X och Y.

Duken elementet gör alla dessa operationer på någon typ av ritning. Men hur duken elementet gör detta blir lite närmare matte än du kanske har fått tidigare. Transformationer i duken elementet kan vara svårt att förstå förrän du förstår lite om hur de verkligen fungerar.

Hur du utför transformationer på ett spel objekt

I matematik, behöver du inte verkligen omforma objekt. Istället du ändra koordinatsystem och rita din bild i den nyligen transformerade koordinatsystemet. Det är vanligt i en vektor-ritprogram att ha flera dolda koordinatsystem som arbetar på en gång. Det är viktigt, eftersom det är på det sättet canvas transformationer fungerar. I huvudsak, när du vill utföra transformationer på ett objekt, gör du följande:

  1. Meddela början på ett tillfälligt koordinatsystem.

    Huvud bilden redan sitt eget koordinatsystem som inte kommer att förändras. Innan du kan förvandla vad, måste du bygga ett nytt koordinatsystem för att hålla dessa förändringar. Den save () kommandot indikerar början på en ny definition koordinatsystem.
  2. Flytta centrum med translate ().

    Ursprunget (0, 0) startar i det övre vänstra hörnet av duken som standard. Normalt kommer du bygga dina omvandlade objekt på (ny) ursprung och flytta origo för att placera objektet. Om du översätter (50, 50) och dra sedan en bild på (0, 0), bilden kommer att dras till grund för den tillfälliga koordinatsystem, vilket kommer att vara på (50, 50) i huvud duken.
  3. Rotera koordinatsystem med rotate ().

    Rotate () kommando roterar det nya koordinatsystemet kring dess ursprung. Rotations parametern är en examen i radianer.
  4. Skala koordinatsystem i X och Y.

    Du kan även ändra det nya koordinatsystemet genom att tillämpa X- och Y-skalvärden. Detta gör att du kan skapa sträckta och kläm bilder.
  5. Skapa element i det nya koordinatsystemet.

    När du har tillämpat alla omvandlingar som du vill, kan du använda alla de vanliga duk ritteknik. Dock kommer dessa ritningar dras i den virtuella koordinatsystem du just gjort, inte på duken huvud koordinatsystem.
  6. Stäng tillfälligt koordinatsystem.

    Generellt ska du använda olika transformationer till olika delar av din duk. När du är klar med en viss transformation, använda återställnings () kommandot för att stänga det nya koordinatsystemet. Alla efterföljande ritkommandona kommer att använda förvalda koordinatsystem av duken objektet.

Hur man förvandlar ett spel bild

Det kan vara svårt att förstå hur matematiska transformationer fungerar eftersom de verkar så enkelt på ytan. Bygga ett program för att se hur allt detta hänger ihop.

Hur man använder Transforma Feature i ditt HTML5 spel

<! DOCTYPE HTML>
<Html lang = "sv">
<Head>
<Title> transform.html </ title>
<Meta charset = "UTF-8" />
<Script type = "text / javascript">
Funktionen draw () {
var ritning = document.getElementById ("ritning");
var con = drawing.getContext ("2d");
var bilen = new Image ();
car.src = "car.png";
con.save ();
con.translate (100, 100);
con.rotate (Math.PI / 4);
con.scale (3,0, 1,5);
con.drawImage (bil, -25, -25, 50, 50);
con.restore ();
// Rita en rektangel med den vanliga
// Koordinatsystem
con.strokeStyle = "red";
con.lineWidth = 5;
con.strokeRect (0, 0, 200, 200);
} // End draw
</ Script>
</ Head>
<Body onload = "dra ()">
<H1> Transformationer </ h1>
<Canvas id = "rita"
height = "200"
width = "200">
<P> Canvas stöds inte </ p>
</ Canvas>
</ Body>
</ Html>

Detta program gör det normala arbetsytan inställningar och skapar sedan en förvandling som översätter bilden till mitten av duken, roterar bilden, och ändrar bildens storlek:

  1. Skapa en sida med en duk.

    Normalt kommer simpleGame skapa duken för dig, men i detta fall, är duken elementet tillverkas för hand.
  2. Gör alla normala inställnings grejer.

    Detta innebär regelbunden städning: att få tillgång till duken och dess sammanhang och skapa bilden.
  3. Börja en ny koordinatsystem.

    Den save () kommandot egentligen inte spara någonting. Det anger början av ett nytt koordinatsystem. Eventuella ritkommandona som inträffar mellan detta spara () uttalande och matchningen återställa () kommer att följa transformationsfunktioner.
  4. Översätt det nya systemet.

    Flytta koordinatsystemet till (100, 100), som är centrum av duken.
  5. Rotera det nya systemet.

    Rotera bilden genom pi / 4 radianer, vilket är 45 procent.
  6. Skala det nya systemet.

    Multiplicera X värden genom 3 och Y-värden med 1,5.
  7. Rita en bild.

    Eftersom denna bilden ritas i en spar () / restore () blocket, det dras med transformationer intakta.
  8. Avsluta delsystemet med återställning ().

    Återställningen () kommandot stänger upp den tillfälliga koordinatsystemet så alla efterföljande kommandon kommer att hänvisa till den förälder koordinatsystem.
  9. Rita en röd rektangel i standardsystemet.

    Den röda strök rektangeln dras utanför det normala koordinatsystemet, så det är inte skalas eller roteras.

Huvud utformningen av Sprite-objektet är en bild som omges av en transformation. När du skapar en sprite, bygger den bildobjektet, och det definierar en förvandling med översättning, rotation och skala.

Som du manipulera positionen, vinkel och hastighet sprite, du är verkligen enkelt att ändra värdena som skickas till omvandla. Bilden är förskjuten så (x, y) egenskaper spriten ange mitt på spriten. På så sätt, sprites roterar runt sin center, vilket ger ett mer naturligt utseende.