Több, mint két hete nem írtam új blog bejegyzést WebGL ügyben. Egyrészt kevesebb időm volt a projekttel foglalkozni, másrészt amikor volt időm, akkor egy elég nagy falatot rágcsáltam: az overlay kezelést.

Miről is van szó?

A térképnek lehetnek olyan elemei, ami a szereplőket takarhatja. A szereplők többnyire takarják a terep elemeit (pl fű, virágok, stb.) Voltak eddig is olyan tereptárgyak (amiket fixturáknak neveztem a kódban), amik takarhatták a szereplőket, pl fák koronája és bokrok felső része, és persze a szereplők is takarhatták egymást. Most nem ezekről van szó.

Amiről most írok, azok olyan elemek, amik a terep részei, de látszólag "magasabban" vannak a szereplő sprite-oknál. Példa lehet egy kifeszített zászló, egy sátorponyva, ami alá be lehet menni, vagy egy sziklaszirt felső vége. Az, hogy egy képelem milyen magasan található, azt a múltkor említett metaadat-szerketsző által szolgáltatott adatokból olvasható ki. Ahhoz, hogy a játék megfelelően jelenjen meg, a következőt kell csinálni:

1. Kirajzolni az "alap" terepet (pl fű, víz, homok, stb.)
2. Rárajzolni azon overlay rétegeket, amiknek nincs "magassága".
3. Felülről lefele haladva kirajzolni a sprite-okat és az overlay sorokat összefűzve azok y gyökere szerint rendezve.
   1. A sprite-ok y gyökere általában a sprite legalja, vagyis ahol a szereplő lába van.
   2. Az overlay-ek gyökere annyi mezővel van lejjebb, mint ahova ténylegesen kirajzoljuk őket, mint ami az adott overlay "magassága".
4. És már készen is vagyunk! Wow!

Ahhoz, hogy mindez elfogadható sebességgel történjen, lehetőleg minél több információt előre össze kell lapátolni a videókártya memóriájába! Ezt a következőképpen csinálom:

• A terep, és a 0 magasságú overlay-ek egy grafikus bufferbe kerülnek. Ezeket így egyben ki lehet rajzolni, mind a 200.000 vertex ponttal!
• A magassággal rendelkező overlay elemeket sorokba rendezem. Például a 10. overlay sorba kerül a 9. sorban található, 1-es "magassággal" rendelkező overlay elemek, vagy a 7. sorban található, 3-as "magassággal" rendelkezőek.
• A fixtúrákat (fák, bokrok) y szerint sorrendbe rendezve egy bufferbe forgatom.

Ezek után a kirajzolás úgy néz ki, hogy a sprite-okat, overlay-eket és a fixtura buffer megfelelő részeit kell szépen összefésülni. Ez egyike a bonyolultabb metódusoknak a programban.

Aztán persze az egész meg van vadítva azzal, hogy jó lenne mindezt szerkeszthetővé is tenni. Ouch! Pedig milyen szép egyszerűen indult minden...

Jelenleg a játék megjelenítésére a program egy nagy textúrát használ. Ennek a mérete 2048 * 1024, vagyis 64 * 32 "mező"(tile). (A mező az az elem, amiből a térkép felépül, egy mező mérete 32 * 32 képkocka – emez konfigurálható.)

Maga a textúra egy png file, amit kb úgy lapátoltam össze egyelőre a netről összerabolt képelemekből. Csakhogy, ez a kép nem hordozza azokat az információkat, amik szükségesek ahhoz, hogy a játékban ezek a képelemek megfelelően működjenek. Mik is ezek az információk?

• A bejárhatóság (passability) azt fejezi ki, hogy az adott képelemen a szereplők átgázolhatnak-e, vagy sem. Például, a fű bejárható, de a víz nem. (Az RPG játékokban senki sem tud úszni.)
• Az magasság (elevation) az a mérőszám, hogy a képelem mennyire hajlamos takarni. Egy magasabban elhelyezkedő képelem takarhat egy olyan mozgó elemet is, amelyiknek az Y koordinátája nagyobb. A magasság formálisan egy 0-tól 5-ig terjedő szám (ugye, a fák nem nőnek az égig!), leegyszerűsítve azt fogalmazza meg, hogy az adott képelem takarási szempontból hány mezővel van lejjebb a képernyőn.
• Kitöltöttség (solidity): Különböző rajzolási optimalizációkat tesz lehetővé, ha eltárolom, hogy egy mező teljesen kitöltött-e, vagy vannak átlátszó részei.

Hogy ezeket ne kelljen kézzel csinálnom kockás papíron, és ne hülyüljek meg, csináltam egy primitív metaadat szerkesztőt. Az egész nagyon egyszerűen működik: A billentyűzeten "P", "E" vagy "S" gombokkal, vagy a felső gombsorral lehet váltogatni az üzemmódok között. Szerencsére a kitöltöttséget nem is kell kézzel megcsinálnom, nagyjából 30 sor kód kiszámolja nekem szépen. A többi az én feladatom, kitartó kattintgatást igényel.

Felül látható a bejárhatóság szerkesztő. A nyilak azt mutatják, hogy az adott mezőről milyen irányokba haladhat tovább a T. játékos. Érdemes megfigyelni, hogy a fák koronája bejárható (mögötte fog menni a szereplő, a később feltűnő magasság beállítás miatt), de a töve nem. A zöld fennsík bejárható, de nem minden irányban: a nyilakból látszik, hogy a játékos nem mehet le a szélén.

Íme a magasság beállítások. Látszik, hogy mik azok a részek, amik mögé a játékos berambózhat, és ott takarásban lesz.

Hát ennyit mára.

A szerkesztő most már képes a térképeket egy-egy wikioldalba kimenteni, és onnan betölteni. Például itt a Maps/Wilderness1 oldal, amire rákattintva az oda lementett térképet lehet kipróbálni, illetve szerkeszteni.

Enjoy!

Továbbfejlesztettem a térkép szerkesztőt: be lehet állítani az új térkép méretét, és a szerkesztés közben ki lehet próbálni a szerkesztés alatt álló pályát.

Így néz ki egy 50x50-es barlang pálya, amikor ugyanannyi emberke rohangál benne, mint az amúgy 128x128-as erdős pályán:

Gondoltam, megosztom veletek, mert viccesnek tűnt. :)

A tegnapi hegyeken felbuzdulva nekiláttam egy új térkép generátornak. Ez a korábbi erdős-mezős-vizes terep helyett egy kicsit nyomasztó színvilágú barlangot generál:

A barlang falain látható, hogy a tegnapi hegyrajzoló algoritmus építi fel a falakat.

Így néz ki egy teljes barlang térkép 10%-ra kicsinyítve:

A barlang kamrákat kialakító, sejtautomatán alapuló algoritmus mellékterméke egy másik generátor, ami nagyjából véletlenül jött létre; ez egy tagolt szigetvilágot készít: