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

Oprette isometrisk verdener: En Primer for Spilu Dviklere

by
Difficulty:IntermediateLength:LongLanguages:

Danish (Dansk) translation by Hamdan Veerlax (you can also view the original English article)

I denne vejledning giver jeg dig et bredt overblik over, hvad du behøver at vide for at skabe isometriske verdener. Du vil lære de isometriske projektion er, og hvordan til at repræsentere isometrisk niveauer som 2D arrays. Vi vil formulere relationer mellem visningen og logik, således at vi kan nemt manipulere objekter på skærmen og håndtag flise-baseret kollisions. Vi vil også se på sortering af dybde og karakter animation.

Relaterede Indlæg

Vil endnu flere tips om at skabe isometrisk verdener? Tjek den opfølgn-ing post, Oprette Isometrisk Verdener: En Primer for Gamedevs, Fortsat, og Juwals bog, Stær Spil Udvikling Essentials.


1. De Isometriske Verden

Isometrisk er en visning, der bruges til at skabe en illusion af 3D for et ellers 2D spil - undertiden benævnt pseudo 3D eller 2.5 D. Disse billeder (taget fra Diablo 2 og Age of Empires) illustrerer, hvad jeg mener:

diablo

Diablo 2
AOE

Age of Empires

Gennemføre en isometrisk kan gøres på mange måder, men for nemheds skyld vil jeg fokusere på en flise-baseret tilgang, som er den mest effektive og udbredte metode. Jeg har overlejret hvert skærmbillede ovenfor med en diamant gitter viser hvor terrænet er delt op i fliser.


2. Flise-Baserede Spil

I den flise-baseret tilgang, er hver visuelle element opdelt i mindre dele, kaldet fliser, en standard størrelse. Disse fliser vil blive arrangeret til at danne spilverdenen forudbestemte niveau data - normalt en 2D array.

Relaterede Stillinger

For eksempel Lad os betragte en standard top-down 2D visning med to fliser - en græs flise og en væg flise - som vist her:

base 2d tiles

Nogle simple fliser

Disse fliser er hver af samme størrelse som hinanden, og hver firkant, så flise højde og flise bredde er den samme.

For en plan med græsarealer afgrænses på alle sider af vægge, vil den plan data 2D array ligne indeværende:

Her, 0 angiver en græs flise og 1 betegner en væg flise. Arrangere fliser niveau data vil producere den nedenstående niveau billede:

2d level simple

Et simpelt niveau, der vises i en top-down visning.

Vi kan forbedre dette ved at tilføje hjørnefliser og separate vandrette og lodrette vægfliser, der kræver fem ekstra fliser:

2d level complex

Forbedret niveau med flise numre

Jeg håber, at begrebet den flise-baseret tilgang er nu klar. Dette er en enkel 2D gitter gennemførelse, som vi kunne kode som så:

Her antager vi at flise bredde og flise højde er lige (og det samme for alle fliser), og matche fliser billeder dimensioner. Så er flise bredde og flise højde for dette eksempel både 50px, som udgør den samlede niveau størrelse af 300x300px - dvs, seks rækker og seks kolonner af fliser måling 50x50px hver.

I en normal flise-baseret tilgang gennemføre vi enten en top-down udsigt eller side; for en isometrisk skal vi gennemføre de isometriske projektion.


3. Isometriske Projektion

Den bedste tekniske forklaring på hvad "isometriske projektion" betyder, så vidt jeg ved, er fra denne artikel af Clint Bellanger:

Vi vinkel vores kamera langs to akser (svinge kameraet 45 grader til den ene side, derefter 30 grader ned). Dette skaber en diamant (rhombus) formet gitter hvor gitter rum er dobbelt så bredt som de er høje. Denne stil blev populariseret af strategispil og action RPG. Hvis vi ser på en terning i denne visning, tre sider er synlige (top og to modstående sider).

Selv om det lyder en smule kompliceret, er faktisk gennemfører denne visning ligetil. Skal vi forstå er forholdet mellem 2D og de isometriske plads - det vil sige forholdet mellem niveau data og se; transformation fra top-down "Kartesiske" koordinater til isometrisk koordinater.

the_isometric_grid

Kartesiske gitter vs isometriske gitter.

(Vi overvejer ikke en sekskantet flise baseret teknik, som er en anden måde at gennemføre isometrisk verdener.)

Placere Isometrisk Fliser

Lad mig forsøge at forenkle forholdet mellem niveau data gemmes som en 2D array og isometrisk - det vil sige, hvordan vi omdanne kartesiske koordinater til isometrisk koordinater.

Vi vil forsøge at skabe isometrisk til vores væg-lukket græsarealer niveau data:

I dette scenario kan vi bestemme en walkable område ved at kontrollere, om arrayelement er 0 ved at koordinere, der derved viser græs. 2D-visning gennemførelsen af de ovennævnte plan var en ligetil iteration med to løkker, placere kvadratiske fliser modregning hver med faste flise højde og flise breddeværdier.

For isometrisk forbliver koden den samme, men placeTile() funktionen ændringer.

For en isometrisk skal vi beregne de tilsvarende isometrisk koordinater inde sløjfer.
Ligninger til at gøre dette er saaledes, hvor isoX og isoY repræsenterer isometrisk x - og y-koordinater, og cartX og cartY repræsenterer kartesiske x - og y-koordinaterne:

Disse funktioner viser, hvordan du kan konvertere fra et system til et andet:

Pseudokode for løkken så ligner dette:

isolevel screenshot

Vores wall-lukket græsarealer i en isometrisk visning.

Som et eksempel, lad os se, hvordan en typisk 2D holdning bliver omdannet til en isometrisk position:

Ligeledes et input af [0, 0] vil resultere i [0, 0], og [10, 5] vil give [5, 7,5].

Ovenstående metode gør det muligt for os at skabe en direkte sammenhæng mellem den 2D plan data og isometrisk koordinaterne. Vi kan finde den flise koordinater i niveau data fra sin kartesiske koordinater ved hjælp af denne funktion:

(Her, vi hovedsageligt antager at flise højde og flise bredde er lig, som i de fleste tilfælde.)

Derfor, fra et par af skærmen (isometrisk) koordinater, kan vi finde flise koordinater ved at ringe:

Denne skærm punkt kunne være, siger, en mus klik eller en pick-up brugsstilling.

Tip: En anden metode til placering er Zigzag-model, som tager en anden tilgang helt.

Bevæger sig i Isometrisk Koordinater

Bevægelse er meget nemt: du manipulere dataene spillets verden med kartesiske koordinater og bare bruge ovenstående funktioner for at opdatere det på skærmen. For eksempel, hvis du vil flytte en karakter frem i den positive y-retning, kan du blot forøge egenskaben y og derefter konvertere sin holdning til isometrisk koordinater:

Dybde Sortering

Ud over normale placering, bliver vi nødt til at tage sig af dybde sortering for tegning af isometrisk verden. Det sikrer, at emner tættere til spilleren er trukket oven på varer længere væk.

Den enkleste dybde sorteringsmetoden er simpelthen at bruge værdien kartesiske y-koordinaten som nævnt i denne hurtige Tip: yderligere op skærmen objektet er, jo tidligere det bør drages. Dette arbejde godt, så længe vi ikke har nogen sprites, der indtager mere end en enkelt flise plads.

Den mest effektive måde at dybde sortering for isometrisk verdener er at bryde alle brikkerne i single-flise standardmål og ikke at tillade større billeder. For eksempel, her er en flise, hvilke gør ikke passe ind i standard flisestørrelsen - Se hvordan vi kan opdele det i flere fliser, der hver især passer flise dimensioner:

split big tile

Et stort billede er opdelt i flere fliser af isometrisk standardmål

4. At Skabe Kunst

Isometrisk kunst kan være pixel kunst, men det behøver ikke at være. Når der beskæftiger sig med isometrisk pixel art, fortæller Rhysd's guide dig næsten alt hvad du behøver at vide. Nogle teori kan findes på Wikipedia så godt.

Når du opretter isometrisk kunst, er de generelle regler

  • Starte med en tom isometriske gitter og overholde pixel perfekt præcision.
  • Forsøge at bryde kunst i enkelt isometrisk flise billeder.
  • Forsøge at sikre, at hver flise er enten walkable eller ikke-walkable. Det bliver kompliceret, hvis vi har brug for til at rumme en enkelt flise, der indeholder både walkable og ikke-walkable områder.
  • De fleste fliser skal problemfrit flise i en eller flere retninger.
  • Skygger kan være vanskelig at gennemføre, medmindre vi bruge en lagdelt tilgang, hvor vi trækker skygger på jorden lag og derefter tegne helten (eller træer eller andre objekter) på det øverste lag. Hvis den metode, du bruger, ikke er multi-lag, gør sikker på skygger falder på forsiden, således at de ikke vil falde på, siger, helten, når han står bag et træ.
  • I tilfælde du skal bruge en flise billede større end standard isometrisk flisestørrelsen, prøve at bruge en dimension, som er et multiplum af flisestørrelsen iso. Det er bedre at have en lagdelt tilgang i sådanne tilfælde, hvor vi kan opdele kunsten i forskellige stykker baseret på dens højde. For eksempel, et træ kan opdeles i tre stykker: roden, stammen og løv. Dette gør det nemmere at sortere dybder, som vi kan trække stykker i tilsvarende lag, som svarer til deres højder.

Isometrisk fliser, der er større end enkelt flise dimensioner vil skabe problemer med dybde sortering. Nogle af spørgsmålene, der diskuteres i disse links:


5. Isometrisk Tegn

Gennemføre tegn i isometrisk er ikke kompliceret, som det kan lyde. Karakter kunst skal være oprettet i henhold til bestemte standarder. Først vi bliver nødt til at fastsætte, hvor mange retninger af bevægelse er tilladt i vores spil - normalt spil vil give fire-vejs bevægelse eller ottevejs bevægelse.

Eight-way navigation directions in top-down and isometric views

8-vejs navigation retninger i top-down og isometriske visninger.

For en top-down se, kunne vi skabe et sæt af tegn animationer står i én retning, og blot rotere dem for alle de andre. For isometrisk karakter kunst skal vi igen gøre hver animation i hver af de tilladte retninger - så for otte-måde bevægelse skal vi oprette otte animationer til hver handling. For at lette forståelse betegne vi normalt retninger som Nord, Nord-Vest, Vest, Sydvest, Syd, Syd-Ost, Mod Ost, og Nord-Ost, mod uret, i nævnte rækkefølge.

spriteSheet

En isometrisk karakter står i forskellige retninger.

Vi placerer tegn på samme måde, vi lægge fliser. Flytning af en karakter opnås ved beregning af bevægelse i kartesiske koordinater og derefter konvertere til isometrisk koordinater. Lad os antage, vi bruger tastaturet til at styre karakteren.

Vi vil sætte to variabler, dX og dY, baseret på retningstasterne trykket. Som standard disse variabler vil være 0, og vil blive opdateret som pr nedenfor diagram, hvor U, D, F og L betegne op, ned, højre og venstre piletasterne, henholdsvis. En værdi af 1 under en nøgle repræsenterer nøglen er trykket; 0 angiver, at nøglen ikke trykkes.

Nu, ved hjælp af værdierne af dX og dY, vi kan opdatere de kartesiske koordinater som så:

dX og dY står for ændring i x - og y-position karakter, baseret på at taster trykkes ned.

Vi kan let beregne de nye isometrisk koordinater, som vi allerede har drøftet:

Når vi har den nye isometriske position, skal vi flytte karakteren til denne position. Baseret på de værdier, vi har for dX og dY, kan vi afgøre, hvilken retning karakteren står og bruge den tilsvarende karakter kunst.

Sammenstød Afsløring

Kollisionsdetektion sker ved at kontrollere, om fliser på den beregnede nye position er en ikke-walkable flise. Så når vi finder den nye holdning, vi straks flytte ikke karakter der, men første check at se, hvad flise indtager rummet.

I funktion isWalkable() undersøge vi, om niveau data array-værdi på en given koordinat er en walkable flise eller ej. Vi skal sørge for at opdatere den retning hvor karakteren står over for - selv om han ikke flyttes, som i tilfælde af ham at ramme en ikke-walkable flise.

Dybde Sortering Med Tegn

Overveje et tegn og et træ fliser i isometrisk verden.

For at forstå korrekt dybde sortering, må vi forstå, at når figurens x - og y-koordinaterne er mindre end dem af træet, træet overlapper karakter. Når figurens x - og y-koordinaterne er større end i træet, overlapper tegnet træet.

Når de har den samme x-koordinat, så vi beslutter, baseret på den y-koordinat alene: der har højere y-koordinaten overlapper den anden. Når de har samme y-koordinat, så vi beslutter, baseret på den x-koordinat alene: der har højere x-koordinaten overlapper den anden.

En forenklet version af dette er at bare sekventielt tegn niveauer fra den fjerneste flise,   flise [0] [0] - derefter tegne alle brikkerne i hver række én efter én. Hvis en person indtager en flise, vi drage jorden flise først og derefter gøre karakter flise. Dette vil fungere fint, fordi karakteren ikke kan indtage en væg flise.

Dybde sortering skal gøres, hver gang nogen flise ændringer holdning. For eksempel, skal vi gøre det når som helst tegn flytte. Vi opdaterer derefter viste scenen, efter at have udført den dybde form, for at afspejle ændringerne, dybde.


6. Har en Go!

Nu, sætte din nye viden til god brug ved at skabe en fungerende prototype, med tastatur kontrol og korrekt dybde sortering og sammenstød afsløring. Her er min demo:

Klik her for at give SWF fokus og derefter bruge piletasterne. Klik her for fuld-størrelse version.

Du kan finde denne nytte klasse nyttig (jeg har skrevet det i AS3, men du skal kunne forstå det i alle andre programmeringssprog):

Hvis du virkelig sidder fast, er her den fulde kode fra min demo (i Flash og AS3 tidslinje kodeform):

Registrering Point

Tage særlige hensyn til punkterne registrering af fliser og helten. (Registrering punkter kan opfattes som oprindelse point for hver særlig sprite.) Disse generelt ikke vil falde inde i billedet, men snarere vil være øverst venstre hjørne af den sprite afgrænsningsrammen.

Vi bliver nødt til at ændre vores tegning kode for at lave registrering point korrekt, primært til helten.

Sammenstød Afsløring

Et andet interessant punkt at bemærke er, at vi beregne kollisions baseret på det punkt, hvor helten er.

Men helten har volumen, og ikke kan præcist repræsenteres af et enkelt punkt, så vi skal repræsentere helten som et rektangel og check for kollisioner mod hvert hjørne af dette rektangel, således at der er ingen overlapning med andre fliser og dermed ingen dybde artefakter.

Genveje

I demoen gentegne jeg simpelthen scene igen hver ramme baseret på den nye placering af helten. Vi finde den flise, som helten indtager og tegne helt på toppen af jorden flise, når rendering sløjfer når fliserne.

Men hvis vi ser nærmere, vil vi finde, at der er ingen grund til at sløjfe gennem alle brikkerne i dette tilfælde. Græs fliser og de øverste og venstre vægfliser er altid tegnet før helten er trukket, så vi ikke behøver at gentegne dem på alle. Også, de nederste og højre vægfliser er altid foran helten og dermed trukket efter helten er trukket.

Det væsentlige, så vi kun skal udføre dybde sortering mellem væg inde i det aktive område og hero - det vil sige to fliser. At mærke disse typer af genveje vil hjælpe dig med at spare en masse behandlingstid, som kan være afgørende for ydeevne.


Konklusion

Ved nu, bør du have en stor grundlag for bygning isometrisk spil på din egen: du kan gøre verden og objekter i det, repræsenterer niveau data i simple 2D arrays, konvertere mellem kartesiske og isometrisk coordiates og beskæftige sig med begreber som dybde sortering og karakteranimation. Nyd skaber isometrisk verdener!

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.