Web GL

2013-05

2013.V.31

A Metaadat szerkesztő


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.

upload:WebGL/passability_editor.png

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.

upload:WebGL/elevation_editor.png

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

Tagek:
 
Utoljára módosította UPi 2013.V.31 07:55-n; 0 hozzászólás;
Bejegyzés módosítása | PermaLink
Votes disabled.

2013.V.21

Kóstoljátok meg a szerkesztőt!


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!

Tagek:
 
Utoljára módosította UPi 2013.V.21 15:09-n; 1 hozzászólás;
Bejegyzés módosítása | PermaLink
Votes disabled.

2013.V.15

Tömegnyomor a barlangban


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:

upload:WebGL/crowded_cave.jpg

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

Tagek:
 
Utoljára módosította UPi 2013.V.15 05:44-n; 0 hozzászólás;
Bejegyzés módosítása | PermaLink
Votes disabled.

2013.V.13

További térkép generátorok


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:

upload:WebGL/thecave.jpg

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:

upload:WebGL/thecave_zoomout.jpg

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:

upload:WebGL/archipellago.jpg

Tagek:
 
Utoljára módosította UPi 2013.V.13 10:30-n; 0 hozzászólás;
Bejegyzés módosítása | PermaLink
Votes disabled.

2013.V.12

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:

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!

Tagek:
 
Utoljára módosította UPi 2013.V.12 12:05-n; 6 hozzászólás;
Bejegyzés módosítása | PermaLink
Votes disabled.

2013.V.10

Alakulgat a térkép szerkesző


Gondoltam, itt az ideje megosztani dicső veletek a térkép szerkesztőt!

Ez átmeneti jelleggel a következő címen lakozik: http://apocalypse.rulez.org/~upi/webgl/upigl/index.html?editor

Lehet benne:

  • A térképet scrollozni a görgetősávokkal, vagy a középső gombbal.
  • Zoomolni vagy az alul található műszerrel, vagy az egér görgővel.
  • A terepet szerkeszteni.
  • Fákat és bokrokat ültetni és kiszedni.
  • Beállítani a terep mezőinek a bejárhatóságát (vagyis hova mehetnek a figurák).

Hát, egyelőre ennyi.

Tagek:
 
Utoljára módosította UPi 2013.V.10 20:16-n; 0 hozzászólás;
Bejegyzés módosítása | PermaLink
Votes disabled.

2013.V.09

Ha harc, hát legyen harc


Megkezdődött a játék fejlesztésének az a szakasza, ahol véget ér a béke!

A harci mód egyelőre, mint minden a játék összes többi eleme is, eléggé vázlatos. Összesen kétféle parancsból választhat a játékos: támadás vagy védekezés. Ezek közül a védekezés nem csinál az égvilágon semmit. :)

A támadás már izgalmasabb. Először is ki lehet választani, hogy ki legyen az áldozat. A választás után az aktív karakter odarongyol, nyom egy tockost, aztán szépen visszaballag a helyére. Vannak számítógép által irányított szereplők (NPC-k) is: ők véletlenszerűen választanak áldozatot a másik csoportból.

upload:WebGL/battle_mode.jpg

A harc körökre osztott: minden karakternek van egy harci sebessége, amit a képernyő alján egy csík jelez. Amikor a csík "megtelik", akkor léphet az adott szereplő.

Addig tart a csata, amíg az egyik csoport összes tagja el nem halálozik.

Implementációs szempontból úgy néz ki a történet, hogy megjelent az objektumok egy új osztálya, amit nemes egyszerűséggel Controller-nek hívok. A Controller hivatott arra, hogy az akciót megjelenítse, és a játékos kattintgatását értelmezze. Az eddigi kód egy része átköltözött egy "OverworldController" nevű objektumba, az új kód, ami pedig a bunyóért felel, egy "Battle" nevű objektumban lakozik.

Mindkettőjük közös ismerőse a "Game" objektum, ami azért felel, hogy a jelenleg aktív Controller megfelelő tempóban üzemeljen és időnként rajzoljon.

Várható még további Controller-ek megjelenése a kódban:

  • IntroController: Ez lesz a játék bejelentkező képernyője, ami képes lesz a játékot betölteni, vagy új játékot indítani.
  • GameOverController: Amikor a főszereplő elhalálozott, ez fogja a játékost vígasztalni vagy kigúnyolni.
  • InventoryController: A játékos által eddig összeharácsolt anyagi javakban lehet majd itt gyönyörködni.
  • És még sokan mások.
Tagek:
 
Utoljára módosította UPi 2013.V.09 08:17-n; 12 hozzászólás;
Bejegyzés módosítása | PermaLink
Votes disabled.

2013.V.02

Na mizu?


Ki lehet próbálni: az erdő lakói most már hajlandóak szóba állni veled!

upload:WebGL/dialog.png

Ha rákattintasz valakire, akkor a főszereplő odabandukol hozzá (vagy esetleg hosszan kergeti), és utána megtudhatod, milyen mély mívű bölcsesség lakozik elméjében.

A kódot szerkezetileg eléggé átdolgoztam. A struktúra kb. a következő:

  • Van egy Game objektum, ami csak adminisztratív feladatokat lát el, és mozgásban tartja az eseményeket.
  • A Game objektum támaszkodik egy Kontroller objektumra. A Kontroller az, amelyik valamilyen folyamatát a játéknak szabályozza.
  • Kontrollerből egyelőre kétféle van:
    • Az "overworld" kontroller felelős az erdőben mászkálásért.
    • A "dialog" kontroller végzi a párbeszédet (ami egyelőre csak egy kósza mondatból áll, de hát minden kezdet ilyen).

Próbáljátok ki szeretettel. 100 pontot ér, ha megtaláljátok a Ghostbusters referenciát! A véletlenszerűen generált nevek között is van néhány fura példány...

Tagek:
 
Utoljára módosította UPi 2013.V.02 22:57-n; 8 hozzászólás;
Bejegyzés módosítása | PermaLink
Votes disabled.