Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Tile-Based Games
Gamedevelopment

Inleiding tot die Maak van 'n Kaart Masjien

by
Difficulty:IntermediateLength:LongLanguages:

Afrikaans (Afrikaans) translation by Seurion (you can also view the original English article)

In hierdie handleiding, sal ek jou help om 'n vlak vir enige spel genre te skep en die ontwerp van vlakke makliker te maak. Jou sal leer hoe om jou eerste plotkaartmasjien te skep vir gebruik in jou toekomstige projekte. Ek gebruik altyd Haxe met OpenFL , maar jou moet dit in enige taal kan volg.

Hier is wat ons sal bespreek:

  • Wat is 'n teël-gebaseerde spel?
  • Vind of skep jou eie teëls.
  • Skryf die kode neer om die teëls op die skerm te vertoon.
  • Verander teël uitlegte vir verskillende vlakke.

Kry 'n goeie begin vir nuwe spel idees ook!


Wat is 'n Teël-Gebaseerde Spel?

Die oorspronklike, Wikipedia het 'n in-diepte definisie van teël-gebaseerde speletjies, maar om die basiese essensie te kry, is daar net 'n paar dinge om te weet:

  1. Teëls is klein, gewoonlik reghoekige of isometriese beelde, wat soos legkaartstukke werk om groter beelde te bou.
  2. 'N Kaart is 'n groepering van verenigde teëls om "afdelings" (hopelik) visueel aantreklik te maak (soos 'n vlak of area).
  3. Tile-gebaseerde verwys na die bouvlak metode in een wedstryd. Die kode sal die teëls in sekere plekke reël om die betrokke gebied te sluit.

Om meer basies te wees, sê ek so:

'N teël-gebaseerde spel skets die teëls om elke vlak te bou.

Met verwysing na algemene teël tipes - reghoeke en isometries - sal ons reghoekige teëls in hierdie artikel gebruik om dit eenvoudig te maak. As jy eendag besluit om die isometriese vlak te probeer, is daar addisionele wiskunde wat dit laat werk. (Sodra jou klaar hier is, sien hierdie wonderlike begin in die skep van 'n isometriese wêreld.)

Daar is 'n paar groot voordele wat jou kry van die gebruik van 'n teël masjien. Die voor die hand liggende voordeel is dat jy nie vir elke individuele vlak groot tekeninge per hand hoef te maak nie. Dit sal die tyd verkort en die lêer grootte verminder. Met 50 beelde 1280x768px vir vlak 50 speletjies versus een prentjie met 100 teëls maak 'n groot verskil.

Nog 'n effek is om dinge maklik op jou kaart te gebruik. In plaas daarvan om te kyk na dinge soos botsings gebaseer op die regte pixels, 'n vinnige en maklike formule wat jou kan gebruik om te bepaal watter teëls nodig moet wees. (Ek sal dit later bespreek.)


Vind of Maak Jou Eie Teëls

Al wat jy moet doen, is om eers 'n teëlmasjien te bou. Daar is twee opsies: gebruik 'n ander persoon se teël, of skep self een.

As jou besluit om die teëls wat jou gemaak het te gebruik, kan jou al die kuns gratis op die web vind. Die nadeel hiervan is dat die kuns nie spesifiek vir jou spel gemaak is nie. Aan die ander kant, as jou net 'n prototipe maak of probeer om 'n nuwe konsep te leer, sal gratis teëls die truuk doen.

Waar om Jou Teëls te Vind

Daar is baie kunsbronne daar buite wat gratis verkry kan word. Hier is 'n paar plekke om jou soektog te begin:

  1. OpenGameArt.org
  2. Let's Make Games
  3. Pixel Prospector

Hierdie drie skakels sal jou baie plekke gee om geskikte teëls vir jou prototipe te vind. Voordat jou gek maak, kry alles wat jou kry, maak seker dat jou verstaan ​​watter lisensies almal onder gedek word en watter beperkings hulle bring. Baie lisensies sal jou toelaat om kuns vrylik en kommersieel te gebruik, maar mag toewysing vereis.

Vir hierdie handleiding gebruik ek 'n paar teëls van The Open Game Art Bundle vir platform. Jou kan aflaai my scaled-down versions of  the originals.

Hoe om Jou Eie Teëls te Maak

As jou nie daarin geslaag het om kunswerk vir jou spel te skep nie, kan dit 'n bietjie intimiderend wees. Gelukkig is daar wonderlike en eenvoudige sagteware wat jou dik maak sodat jy kan begin oefen.

Baie ontwikkelaars begin met die kuns van pixels vir hul speletjies en hier is 'n paar goeie gereedskap hiervoor:

  1. Aseprite
  2. Pyxel Edit
  3. Grafiese Gale
  4. Pixen vir die Mac gebruikers

Dit is sommige van die gewildste programme vir die skep van pixelkuns. As jou iets effens sterker wil hê, GIMP is die regte raad. Jou kan ook 'n vektorkuns skep met Inkscape en volg 'n paar van die meer wonderlike tutoriale 2D Game Art For Programmers.

Sodra jou die software optel, kan jou begin eksperimenteer met die maak van jou eie teëls. Aangesien hierdie handleiding bedoel is om jou te wys hoe om jou kaartplot masjien te maak sal ek nie te veel detail hê om die teël self te skep nie, maar daar is een ding wat jou altyd in gedagte hou:

Maak seker dat jou teëls gladder is, en voeg 'n paar variasies by om dit interessant te hou.

As jou teëls 'n duidelike lyn tussen hulle vertoon wanneer hulle saamgevoeg word, sal jou spel nie baie goed lyk nie. Maak seker jou neem die tyd om 'n mooi "teël" te maak deur dit gladder te maak en 'n bietjie verskeidenheid by te voeg.


Die kode Skryf om Teëls te Vertoon

Noudat ons al die kuns dinge het, kan ons diep in die kode ingaan om die nuutgeskepte (of gemaakte) teëls op die skerm te plaas.

Hoe om 'n Enkele Teël op die Skerm te Vertoon

Kom ons begin met die basiese taak deur 'n teël op die skerm te vertoon. Maak seker dat jou teëls dieselfde grootte het en in 'n aparte prentlêer gestoor word (ons sal later meer oor die sprietblad praat).

Sodra ouy die teëls in jou projekbatelêer het, kan jou 'n baie eenvoudige Tile klas skryf. Dit is 'n voorbeeld van 'n Haxe

Aangesien alles wat ons doen nou een plot op die skerm plaas, is een ding om te doen om 'n plotbeeld uit die batelêer in te voer en dit as 'n kind by die voorwerp te voeg. Hierdie klas kan baie wissel, gebaseer op die programmeertaal wat u gebruik, maar u moet 'n gids kan vind om die prent op die skerm te vertoon.

Noudat ons 'n Tile klas het, moet ons 'n afgeleide van Tile skep en dit by die Primêre klas voeg:

Die Hoofklas skep 'n nuwe Teël wanneer die konstruktor (nuwe () funksie, genoem word wanneer die spel begin), en voeg dit by die vertoningslys.

Wanneer die spel hardloop, sal die hoof () funksie ook genoem word, en 'n nuwe Hoof voorwerp sal by die verhoog gevoeg word. Jou moet nou die teëls bo links van die skerm vertoon. So ver, so goed.

Wenk: As niks van dit sin maak nie-moenie bang wees nie! Dit is net die standaard Haxe ketelplaat kode. Die belangrikste ding om te verstaan ​​is om 'n Tile voorwerp te skep en dit by die skerm te voeg.

Gebruik Skikkings om 'n uit te lê Hele Skerm van Teëls

Die volgende een is vind uit hoe om die hele skerm met teëls te vul. Een van die maklikste maniere om dit te doen is om 'n skikking met heelgetalle te vul wat elk 'n teël ID verteenwoordig. Herhaal dan deur die skikking om te bepaal watter grafiek om te vertoon en waar om dit te vertoon.

Jou het die keuse om 'n tipiese skikking te gebruik of 'n 2-dimensionele skikking te gebruik As jou nie die 2-dimensionele skikking verstaan ​​nie, is dit basies 'n skikking wat gevul is met verskeie skikkings. Die meeste tale sal dit as nameOfArray[x][y] waar x en is 'n indeks om toegang tot een element te verkry.

Aangesien x en y as skermkoördinate gebruik word, kan dit sinvol wees om x en y as ons titelkoördinate te gebruik. Die truuk met 'n 2D skikking is om te verstaan ​​hoe heelgetalle georganiseer word. Miskien moet jou y en x tydens iterasie deur die skikking omkeer (voorbeeld hieronder).

Opmerklik in hierdie toepassing is die element "0" in die skikking 'n skikking, van vyf heelgetalle. Dit beteken dat jou 'n ander deel van die skikking betree via y dan x. As jou probeer om aan te meld exampleArr[1][0], jou gaan na tot sesde.

As jy nie nou 2 dimensionele skikking verstaan ​​nie, moenie bang wees nie. In hierdie handleiding gebruik ek gewone reëling in eenvoudige en maklik om te visualiseer:

Bogenoemde voorbeeld is hoe 'n normale skikking eenvoudig is. Ons kan presies visualiseer in die gebruik van 'n eenvoudige formule (moenie bekommerd wees nie, dis daar!) Om die teëls te kry wat ons wil hê.

Lê nou 'n paar kode om die skikking te skep en vul dit saam met die ander. Nommer een sal die ID wees wat ons eerste teël verteenwoordig.

Eerstens moet ons 'n veranderlike in ons primêre klas skep om ons skikking te hou:

Dit kan 'n bietjie vreemd lyk, so ek sal dit vir jou deel.

Die veranderlike naam is 'n kaart en ek gee dit 'n baie spesifieke tipe: Array. Die <Int> gedeelte vertel slegs die program dat die skikking slegs die heelgetalle sal hou. Skikkings kan byna enige tipe wat jy wil, stoor, so as jy iets anders gebruik om jou teëls te identifiseer, voel vry om die parameters hier te verander.

Volgende moet ons 'n paar kode by ons voeg Main klasbouer (onthou, dit is die nou () funksie) sodat ons 'n voorbeeld van ons kaart kan skep:

Hierdie lyn sal 'n leë skikking skep wat dadelik gevul kan word met wat ons getoets het. Eerstens, laat ons sekere waardes definieer wat ons sal help met wiskunde:

Ek het hierdie waardes gemaak statiese publiek want dit sal ons 'n manier gee om in verskeie programme te kom (via Main.Tile_WIDTH en so aan). Ook, jou het dalk opgemerk dat dit verdeel word SCREEN_WIDTH deur TILE_WIDTH  gee ons 10 en verdeel SCREEN_HEIGHT  gee ons TILE_HEIGHT  deur 6. Albei getalle sal gebruik word om te besluit hoeveel heelgetalle in ons skikking gestoor gaan word.

In hierdie blok kode stel ons 10 en 6 om w en h, soos ek hierbo gesê het.  En ons moet spring na for lus om die gepaste skikking te skep 10 * 6  heelgetalle. Dit sal genoeg wees om die teëls op die skerm te vul.

tileMapDiagram1

Nou het ons 'n basiskaart gebou, maar hoe gaan ons die teëls vertel om op die regte plek te kom? Daarvoor moet ons teruggaan na die Tile klas en 'n funksie skep wat die teëls rondom kan skuif:

Wanneer ons die funksie noem setLoc(), ons sal slaag x en y koördinate volgens ons kaartklas (formule kom gou, belowe ek!). Die funksie neem daardie waardes en vertaal hulle in pixelkoördinate deur hulle te vermenigvuldig met TILE_WIDTH en TILE_HEIGHT, onderskeidelik.

Die enigste ding om te doen om ons teëls te sien is om ons te vertel Main klas om 'n teël te maak en plaas dit op grond van hul ligging in die kaart. Kom ons gaan terug na Main en implementeer dit:

O ja! Dit is reg, ons het nou 'n skerm vol teëls. Kom ons verduidelik wat hierbo gebeur het.

Die Formule

Die formule wat ek genoem het, is hier.

Ons bereken x deur die modulus (%) van i en w (wat 10 is, onthou) te neem.

Modulus is slegs die res na heelgetalafdeling: \ (14 \ div 3 = 4 \ teks {restant} 2 \) so \ (14 \ text {modulus} 3 = 2 \).

Ons gebruik dit omdat ons die waarde van x wil terugstel na 0 aan die begin van elke lyn, dus teken ons elke teël heel links:

tile_grid_cols

Wat y betref, neem ons die vloer () van die i / w (dit is, ons het die resultaat afgerond) omdat ons net wil hê dat y moet toeneem nadat ons die einde van elke lyn bereik het en een vlak beweeg:

tile_grid_rows
Wenk: Die meeste tale vereis nie dat jou Math.floor () moet skakel wanneer heelgetalle verdeel word nie; Haxe hanteer slegs heelgetalafdeling anders. As jou 'n taal gebruik wat die heelgetalafdeling gebruik, kan jou net i / w gebruik (as dit albei heelgetalle is).

Laastens, Ek wil graag 'n bietjie noem oor die rolvlak. Gewoonlik sal jou nie vlakke skep wat perfek in jou visie pas nie. Jou kaart kan veel groter wees as die skerm en jou wil nie voortgaan met die teken van beelde wat nie vir die speler sigbaar is nie. Met 'n paar vinnige en maklike wiskunde, behoort jou te kan bereken watter teëls op die skerm moet wees en watter teëls moet vermy word.

Byvoorbeeld: U skerm grootte is 500x500, u teëls is 100x100, en u wêreldgrootte is 1000x1000. Jou moet net 'n vinnige tjek doen voordat jou 'n teël teken om te sien watter teëls op die skerm is. Gebruik die ligging van jou uitgawe - sê ons 400x500 - jou sal slegs teëls van rye 4 tot 9 en kolomme 5 tot 10 moet teken. Jou kan die nommers kry deur die ligging volgens die grootte van die plot te verdeel, en verreken dan die waardes volgens skermgrootte gedeel deur die grootte van die plot. Eenvoudig.

Dit lyk dalk nie veel nie, aangesien al die teëls dieselfde is, maar die fondament is amper daar. Die enigste ding wat nog te doen is om verskillende soorte teëls te skep en ons kaarte te ontwerp sodat hulle goed georganiseer is.


Tile Layouts vir Verskillende Vlakke Wysig

Goed, ons het nou 'n kaart wat vol is van die wat die skerm dek. Op hierdie punt moet jou meer as een teël tipe hê, wat beteken dat ons ons Tile bouer moet verander om dit te verantwoord:

Aangesien ek ses verskillende teëls vir my kaart gebruik, benodig ek 'n skakelstaat wat getalle een tot ses insluit. Jou sal sien dat die konstrukteur nou 'n heelgetal as 'n parameter neem sodat ons weet watter soort teël om te skep.

Nou, moet ons terug na ons Hoof konstruksie gaan en die teëlskepping in ons vir lus regstel:

Al wat ons moes doen, was om die kaart [i] na die Tile bouer te slaag om dit weer te laat werk. As jou probeer om te hardloop sonder om 'n heelgetal na Tile te stuur, sal dit jou foute gee.

Byna alles is daar, maar nou het ons 'n manier nodig om die kaart te ontwerp, nie net met willekeurige teëls nie. Eerstens, verwyder die vir lus in die Hoof konstruksie wat elke element aan een stel. Dan kan ons ons eie kaart vir die hand skep:

As jou die skikking soos hierbo beskryf, formaat, kan jou maklik sien hoe ons teëls georganiseer sal word. Jou kan net die skikking as een lang reël getalle intik, maar die voormalige is lekker omdat jou 10 oor en 6 kan sien.

As jou probeer om die program nou uit te voer, moet jou 'n paar nulwysers uitsonderings kry. Die probleem is dat ons nul op ons kaart gebruik en die Tile klas weet ons nie wat om met nul te doen nie. Eerstens, sal ons die konstruktor regmaak deur in 'n tjek by te voeg voordat ons die beeldkind byvoeg:

Hierdie vinnige tjek maak seker dat ons geen nulkinders by die Tile voorwerpe wat ons skep byvoeg nie. Die laaste verandering vir hierdie klas is die setLoc () funksie. Op die oomblik probeer ons die x en y waardes vir 'n veranderlike te stel wat nie geinitialiseer is nie.

Kom ons voeg nog 'n vinnige tjek by:

Met twee eenvoudige regstellings in plek, en die teëls wat ek hierbo gegee het, behoort u die spel te kan hardloop en 'n eenvoudige platformvlak te sien. Aangesien ons 0 as "nie-teël" verlaat, kan ons dit deursigtig (leeg) laat. Vvoordat jou die teëls sit; Ek het net 'n ligte blou gradiënt bygevoeg om soos die lug in die agtergrond te lyk.

tileMapDiagram2

om jou vlak te wysig. Probeer 'n bietjie eksperimenteer met die skikking en kyk watter ontwerpe jou vir ander vlakke kan skep.

Derdeparty-Software vir die Ontwerp van Vlakke

Nadat jou basisse gekry het, kan jou oorweeg om 'n paar ander gereedskap te gebruik om jou vinnig te ontwerp en te sien hoe dit lyk voordat jou dit in die spel plaas. Een opsie is om jou eie vlakredakteur te skep. Die alternatief is om van die software wat beskikbaar is gratis te gebruik. Twee gewilde gereedskap is die Tile Map Editor en die Ogmo Editor. Hulle maak beide vlak redigering baie makliker met verskeie uitvoer opsies.


Jou het net 'n Tile-Gebaseerde Enjin Geskep!

Nou weet jou wat 'n teël-gebaseerde spel is, hoe om teëls op jou vlak te gebruik, en hoe om jou hande te vryf en kode vir jou masjien te skryf, en jyoukan selfs basiese vlakbewerking met eenvoudige uitlegte doen. Onthou net dat dit net die begin is; Daar is baie eksperimente wat jy kan doen om 'n beter enjin te maak.

Ook, ek het die bron lêers vir u voorsien om na te gaan. Hier is hoe die finale SWF lyk:

Laai die SWF hier af.

... en hier, weer, is die skikking dat dit gegenereer word van:

Moenie hier stop nie!

Jou volgende taak is om navorsing te doen en 'n paar nuwe dinge uit te probeer om te verbeter wat jy hier gemaak het. Sprite sheets is 'n goeie manier om prestasie te verbeter en die lewe makliker te maak. Die truuk is om 'n stewige kode te kry wat uitgelê word vir die lees van 'n sprite-blad, sodat jou spel nie elke prent individueel moet lees nie.

Jy moet ook jou kunsvaardighede begin oefen deur 'n paar teëls van jou eie te maak. Op dié manier kan jy die regte kuns vir jou toekomstige speletjies kry.

Soos altyd, laat 'n paar opmerkings hieronder oor hoe jou enjin vir jou werk - en dalk selfs 'n paar demo's sodat ons jou volgende teëlspel kan probeer.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.