En flise-baserede verden er en teknik, der anvendes i HTML5 spil at give interessante fleksible baggrunde uden enorme hukommelse omkostninger. Den grundlæggende idé er at tage en række små billeder og bruge dem i kombination til at bygge et komplet baggrundsbillede.
Typisk vil du bygge en flise objekt, som indeholder en række små (32 x 32 pixel) billeder. Hver flise objekt kan vise nogen af billederne på kommando. Ordningen har en række interessante fordele:
- Krav hukommelse kan være meget lille. Hvert billede belastninger i hukommelsen kun én gang, så du kan skabe en meget stor verden med en lille hukommelse footprint.
- Du kan bruge mange forskellige fliser. Du kan bygge en yderst kompleks verden med nogen af de smukke flise sæt, du kan downloade fra websteder som OpenGameArt.org.
- Kortet er dynamisk. Den vises i hver flise billede kan ændres under kørslen.
- Fliser kan have gameplay effekter. Du kan bruge fliser til at skabe interessante taktiske situationer, som vand, der ikke kan krydses, eller bjerge, der giver en fordel til en forsvarer.
- Maps er simpelthen arrays af heltal. For at gemme en flise-baserede kort, behøver du ikke at gemme fliserne på alle. I stedet skal du blot holde styr på flisen stater.
- Kort kan være meget større end skærmen. En flise kort kan være enhver to dimension array af heltal.
- Rulning en tileset er enkel. Det er let at lave store rulning verdener med en flise-system, fordi skærmen er adskilt fra data. Fliserne selv sjældent flytte.
- Fliser er velegnet til flere spiltyper. Fliser anvendes ofte til rollespil, samt brætspil, taktiske spil, og side-scrolling platform spil.
Sådan oprettes en flise objekt
Flise objekt er grundlaget for flise-baserede kort. Her er koden for en simpel flise prototype:
var GRASS = 0;
var DIRT = 1;
var VAND = 2;
Var NUMSTATES = 3;
funktion Tile () {
tTile = nye 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 = funktion (state) {
this.state = tilstand;
this.setImage (this.images [this.state]);
} // Ende setState
tTile.getRow = function () {
tilbage this.row;
} // Ende getRow
tTile.getCol = function () {
returnere this.col;
} // Ende getCol;
tTile.getState = function () {
returnere this.state;
} // Ende getState
tTile.checkMouse = function () {
Hvis (this.isClicked ()) {
nytilstanden = this.state;
nytilstanden ++;
hvis (nytilstanden> = NUMSTATES) {
nytilstanden = 0;
} // End if
this.setState (nytilstanden);
} // End if
} // End if
tilbage tTile;
} // Ende Tile konstruktør
Den væsentligste del af en flise er dens multi-state karakter. Det har flere stater. Hver stat viser et andet billede. Her er hvordan man skriver det:
- Forbered dine billeder.
De mest synlige dele af flise-baseret system er de forskellige billeder. Byg eller få (med de nødvendige tilladelser, naturligvis) nogle fliser, du kan bruge. - Byg konstanter for staterne.
Den nemmeste måde at arbejde med stater er at tildele konstanter for dem. Konstanter har den fordel at være let kan læses af mennesker og ligetil heltal til computeren. - Byg en standard sprite.
Flisen er stadig et sprite. Det er ikke typisk flytte, så du kan indstille hastigheden til 0. Brug en af sprite billeder, du ønsker som standard. - Tildel en standardtilstand.
Staten Ejendommen er det vigtigste aspekt af en flise. Der angives, hvilken stat flisen i øjeblikket viser. Staten værdi skal altid være en af de statslige konstanter. - Skabe en række billeder.
Hver flise vil have adgang til alle de mulige billeder. Opbevar dem i et array. Sørg array ordrelinjer med de konstante værdier. - Indstil en række og kolonne.
Fliser er normalt placeret i et todimensionalt gitter, så det kan være meget nyttigt at spore den aktuelle flise og -kolonne. - Tilføj en setState () metode.
Denne metode giver dig mulighed for nemt at ændre en flise til en af de statslige værdier. Brug en konstant for at sikre staten er anerkendt af dine fliser. Staten Ejendommen er ændret for at afspejle den aktuelle situation, og billedet også ændret, så det rigtige billede vil blive vist på den næste opdatering. - Giv data hentning teknikker.
Disse funktioner returnerer række, kolonne og aktuelle tilstand af flisen. - Tillad en redigering adfærd.
The checkMouse () metode bestemmer, om flisen er blevet klikket. Hvis det er tilfældet, er staten øges og den nye stat vises.
Hvordan til at bygge et spil kort fra fliser
Hver flise er et kraftfuldt værktøj, men den reelle magt i flise-baserede struktur er, hvordan fliser kombineres for at skabe et komplet kort. Den tileset er en to-dimension vifte af flise objekter. Ligesom de fleste to-dimension arrays, er det normalt administreres af et par af indlejrede løkker. Her er koden til opsætning af tileset:
funktion setupTiles () {
tileset = new Array (rækker);
for (række = 0; række <RÆKKER, rækken ++) {
Trow = new Array (COLS);
for (COL = 0; Col <COLS, col ++) {
Trow [col] = ny Tile ();
xPos = 16 + (32 * COL);
yPos = 16 + (32 * p);
Trow [col] .setPosition (xPos, yPos);
Trow [col] .row = rækken;
Trow [col] .col = col;
} // Ende col for løkke
tileset [række] = troe;
} // Ende række for løkke;
} // end setupTiles
Der er kun et par punkter at huske på her:
- Den tileset er et array. Hvert medlem af tileset array er faktisk en række. Byg en vifte af længde rækker.
- Trin gennem hver række. Brug en standard for løkke til at gå gennem alle rækkerne.
- Hver række er en vifte af længde COLS. En to-dimension array er faktisk en vifte af arrays. Lav en vifte af længde COLS for hver række.
- Trin gennem kolonnerne. Lav en for-løkke, der sker en gang pr kolonne. Du har nu to optælling variable (række og COL), der tilsammen beskriver positionen af hver flise i to-dimensionen struktur.
- Opret en ny flise. Du skal blot bruge flise konstruktøren at bygge en ny flise.
- Indstil flise position. Du kan mangedoble rækken og søjlen af bredden og højden af cellen til at bestemme en grov placering.
- Tildel data i rækker og kolonner til sprite. Du skal blot kopiere data rækken og Col til egenskaberne af sprite.