Web GL
Hegyek és völgyek
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:
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:
Nem néz ki rosszul, de egyelőre hemzseg a hibáktól, lássuk nagyítva a hibákat típus szerint:
- 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!
Hozzászólások
6Apocalypse KÖZÖS
You are the Michelangelo of your life. The David that you are sculpting, is you. And you're doing it with your THOUGHTS.



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?
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:
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.