Itt az ideje kicsit érdekesebbé tenni a terepet! Ennek az RPG-kben egy visszatérő módja a táj tagolása hegyekkel. Ugyanez a technika kell barlangok, szurdokok és ehhez hasonló területek kialakításához is.

A kiindulópont, mint a terep felépítésénél is, valamilyen grafikus minta, amiből a program darabokat vág ki, és azokból felépíti a játékot. Esetünkben ez a minta a következőképpen néz ki:

upload:WebGL/hill_tiles.png

Világoskék vonallal jelöltem be, hogy hol vannak a mezők határai. Szóval ez az alapanyag. Ebből építünk hegyeket.

A hegyek úgy épülnek fel, hogy kijelölök a térképen úgynevezett fennsíkokat. A fennsík nem más, mint egy összefüggő füves terület, és egy magasság attribútum, ami azt fejezi ki, hogy hány mező magasan van az alföldhöz képest a fennsík. A fenti minta például megfelel egy 3x3-as fennsíknak, aminek a magassága 3 mező.

Rajzolásnál felhasználom a felső részt a fennsík körvonalazásához, és az alsó részt a fennsík alatt található mezők kitöltéséhez. Ezzel azt az érzetet keltem, hogy az adott terület magasabban helyezkedik el.

Ha több fennsík is található a térképen, akkor ezek megfelelő módon kell, hogy takarják egymást, például ha egy magasabb hegy található egy kicsit hátrébb, az takarhatja a lejjebb található, de alacsonyabb fennsíkot.

Külön figyelmet kell fordítani a fennsíkok felső, oldalsó, és alsó széleire. A nyugati határokhoz másik kitöltő mintát kell használni, mint a keleti határokhoz. Még bonyolultabb a fennsíkok felső szélei és a hegyoldalak alsó szélei, ezek ugyanis kombinálódnak a környéken található tereppel, vagy a takarásban levő másik fennsíkkal!

Lássuk hát az első próbálkozásom a fentiek megvalósítására:

upload:WebGL/hill_firsttry.jpg

Nem néz ki rosszul, de egyelőre hemzseg a hibáktól, lássuk nagyítva a hibákat típus szerint:

upload:WebGL/hill_firsttry_zoom.jpg

  • Piros karika: Itt a fennsík felső széle rosszul kombinálódik: az alul található, elvben láthatatlan tereppel párosítja a program a környező hegy helyett! Ez elég bonyolult probléma, és elsőre még nincs fiz ötletem arra, hogy hogyan oldható meg legegyszerűbben.
  • Narancs karika: Sarok elem hiányzik. Ez nem olyan vészes, de jobban fog kinézni, ha majd megcsinálom szépen. Nem bonyolult, van rá grafikai elem, csak még nem használom illendően.
  • Kék karika: Ez szebben nézne ki, ha a fűszálak részben fednék a hegyoldal alját. Van erre grafikai elem, de egyelőre nem használja a program.
  • Árnyék: Marha jól nézne ki, ha a hegyoldal keleti széle árnyékot vetne a tőle jobbra található mezőre!

Folytatása következik!

Utoljára módosította UPi 2013.V.12 12:05-n
Bejegyzés módosítása | PermaLink
Szavazás letiltva.

Hozzászólások

6

Wigy 2013.V.13 11:48

Jujj, de csúnya! Mármint nem a hibák csúnyák, hanem a sok-sok fennsík szakadékokkal.

Fel lehet majd ugrándozni 1 platformnyit, vagy mi a terv? Amúgy WebGL-ben nem lehetne egy olyan projekciót választani, ami implementálja a vágást neked? (3D hasábokat képzelek el, aminek az oldala a szakadék, teteje a fennsík. A projekció meg egy axonometrikus trafó volna: x = X, y = Y+Z)


UPi 2013.V.13 14:30

(Válaszképp erre)

Valami ilyesmire gondolsz?

[IMAGE:http://2.bp.blogspot.com/_8y3w0YbjE2o/S3aPbHNNOWI/AAAAAAAAArk/Y-qwXUZvuRY/s400/axonometric.gif]


Descant 2013.V.13 16:13

(Válaszképp erre)

Ez már sokkal szebb.


Wigy 2013.V.14 20:55

(Válaszképp erre)

Ez a kép egyfajta axonometrikus ábrázolást használ, amit izometrikus ábrázolásnak hívnak. Axonometrikus ábrázolás sokféle van.

Ahogyan te kezdted rajzolni a bejegyzés elején, ott a 3D-s X és Y tengelyt meghagytad vízszintesnek és függőlegesnek, a Z tengely pedig szintén felfelé mutatott.


UPi 2013.V.15 06:03

(Válaszképp erre)

Ezt értem, azt nem értem hogy mit jelent az, hogy "(3D hasábokat képzelek el, aminek az oldala a szakadék, teteje a fennsík. A projekció meg egy axonometrikus trafó volna: x = X, y = Y+Z"


Wigy 2013.V.15 16:07

(Válaszképp erre)

Úgy látszik 1 kép felér 1000 szóval. Ha egymás mellett ülnénk, 1 perc alatt eljutottunk volna a közös megértésig.

Az oldalon szereplő legelső képen lilára színeztem a vízszintes, sárgára a függőleges részeket. Mellérajzoltam, hova esnek az általad implicite használt axonometrikus vetület koordinátái:

upload:Wigy/hill_tiles_axo.png

Szerintem ez a hegy egy hasáb. A sárga palástját és a lila tetejét berakod 3D felületnek, beállítod a vetítést és a takarást a gép kiszámolja neked.

Tagek: