Hvordan lage fliser i din HTML5 spill

December 1  by Eliza

En flis-basert verden er en teknikk som brukes i HTML5-spill for å gi interessante fleksible bakgrunn uten store minne kostnader. Den grunnleggende ideen er å ta en rekke små bilder og bruke dem i kombinasjon for å bygge en komplett bakgrunnsbilde.

Hvordan lage fliser i din HTML5 spill


Vanligvis vil du bygge en flis objektet, som inneholder en rekke små (32 x 32 piksler) bilder. Hver flis objekt kan vise noen av bildene på kommando. Denne ordningen har en rekke interessante fordeler:

  • Minnekrav kan være svært liten. Hvert bilde lastes inn i minnet bare én gang, slik at du kan lage en veldig stor verden med et lite minne fotavtrykk.
  • Du kan bruke mange forskjellige fliser. Du kan bygge en ekstremt kompleks verden med noen av de vakre brikkesett du kan laste ned fra nettsteder som OpenGameArt.org.
  • Kartet er dynamisk. Bildet vises i hver flis kan endres under kjøring.
  • Fliser kan ha gameplay effekter. Du kan bruke fliser å skape interessante taktiske situasjoner, som vann som ikke kan krysses eller fjellene som gir en fordel til en forsvarer.
  • Kartene er rett og slett matriser av heltall. Hvis du vil lagre en filbasert kart, trenger du ikke å lagre flisene i det hele tatt. I stedet, du bare holde styr på flisen stater.
  • Kartene kan være mye større enn skjermen. En flis kartet kan være en hvilken som helst to-dimensjon rekke heltall.
  • Rulle en brikker er enkel. Det er lett å gjøre store rulling verdener med en flis system, fordi skjermen er atskilt fra dataene. Flisene selv flytte sjelden.
  • Fliser er egnet for flere spilltyper. Fliser er ofte brukt for rollespill, samt brettspill, taktiske spill, og siderullende plattform spill.

Hvordan du oppretter en Tile objekt

Tile objekt er grunnlaget for filbasert kart. Her er koden for en enkel flis prototype:

Var GRASS = 0;
Var DIRT = 1;
Var VANN = 2;
Var NUMSTATES = 3;
funksjon Tile () {
tTile = ny Sprite (scene, "grass.png", 32, 32);
tTile.setSpeed ​​(0);
tTile.state = GRASS;
tTile.images = new Array ("grass.png", "dirt.png", "water.png");
tTile.row = 0;
tTile.col = 0;

tTile.setState = function (stat) {
this.state = tilstand;
this.setImage (this.images [this.state]);
} // End setState

tTile.getRow = function () {
returnere this.row;
} // End getRow

tTile.getCol = function () {
returnere this.col;
} // End getCol;

tTile.getState = function () {
returnere this.state;
} // End getState

tTile.checkMouse = function () {
if (this.isClicked ()) {

newstate = this.state;
newstate ++;
if (newstate> = NUMSTATES) {
newstate = 0;
} // End if

this.setState (newstate);
} // End if
} // End if

returnere tTile;
} // End Tile konstruktør

Den viktigste delen av en flis er dens multi-state natur. Den har flere stater. Hver stat viser et annet bilde. Her er hvordan du skal skrive det:

  1. Forberede bildene dine.

    De mest synlige delene av filbasert system er de ulike bildene. Bygge eller få (med de nødvendige tillatelser, selvfølgelig) noen fliser du kan bruke.

  2. Bygg konstanter for delstatene.

    Den enkleste måten å jobbe med stater er å tildele konstanter for dem. Konstanter har fordelen av å være lett leses av mennesker og grei heltall til maskinen.

  3. Bygge en standard sprite.

    Flisen er fortsatt i hovedsak en sprite. Det gjør ikke vanligvis bevege seg, slik at du kan stille hastigheten til 0. Bruk en av sprite bildene du ønsker som standard.

  4. Tilordne standardtilstanden.

    Den statlig eiendom er det viktigste aspektet av en flis. Det viser hvilken tilstand flisen vises i øyeblikket. Staten verdien bør alltid være en av de statlige konstanter.

  5. Lag en rekke bilder.

    Hver flis vil ha tilgang til alle mulige bilder. Lagre dem i en matrise. Kontroller at matrisen ordre linjer opp med konstante verdier.

  6. Satt en rad og kolonne.

    Platene er vanligvis plassert i et to-dimensjonalt rutenett, slik at det kan være svært nyttig for å spore den aktuelle flis rad og kolonne.

  7. Legg en setState () -metoden.

    Denne metoden gjør det mulig å enkelt endre en flis til noen av de statlige verdier. Bruk en konstant for å sikre staten er anerkjent av dine fliser. Staten eiendommen er endret for å gjenspeile den nåværende tilstanden, og bildet er også endret, slik at riktig bilde vil vises på neste oppdatering.

  8. Gi data henteteknikker.

    Disse funksjonene returnere rad, kolonne, og nåværende tilstand av flisen.

  9. Tillate en redigering oppførsel.

    Den checkMouse () metode avgjør om flisen har blitt klikket. I så fall er staten økes og den nye staten vises.

Hvordan bygge et spill kart fra fliser

Hver flis er et kraftig verktøy, men den reelle makten i flisen basert struktur er hvordan flisene er kombinert for å skape et komplett kart. Den brikker er en to-dimensjon rekke fliser stedene. Som de fleste to-dimensjonale arrays, er det normalt forvaltes av et par nøstede løkker. Her er koden for å sette opp brikker:

funksjons setupTiles () {
brikker = new Array (rader);
for (p = 0; rad <PINNER; rad ++) {
Trow = new Array (COLS);
for (col = 0; col <COLS, col ++) {
Trow [col] = ny Tile ();
XPOS = 16 + (32 * col);
yPos = 16 + (32 * rad);
Trow [col] .setPosition (XPOS, yPos);
Trow [col] .row = rad;
Trow [col] .col = col;
} // End col for loop
brikker [rad] = Trow;
} // End rad for loop;
} // end setupTiles

Det er bare noen få punkter å huske på her:

  • Den brikker er en matrise. Hvert medlem av brikker matrise er faktisk en rad. Bygg en rekke lengde rader.
  • Gå gjennom hver rad. Bruk en standard for løkke til å gå gjennom alle radene.
  • Hver rad er en rekke lengde COLS. En to-dimensjon matrise er faktisk en rekke arrays. Gjør en rekke lengde COLS for hver rad.
  • Gå gjennom kolonnene. Lag en for løkke som skjer en gang per kolonne. Du har nå to tellende variabler (rad og col), som sammen beskriver posisjonen til hver flis i to-dimensjon struktur.
  • Lag en ny flis. Bare bruk flis konstruktør til å bygge en ny flis.
  • Sett flisen stilling. Det kan mangedoble rad og kolonne av bredden og høyden av cellen for å bestemme en grov plassering.
  • Tildele rad- og kolonnedataene til sprite. Bare kopier rad- og col data til egenskapene til sprite.