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!
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.