Web GL

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
Szavazás letiltva.

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
Szavazás letiltva.

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
Szavazás letiltva.

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
Szavazás letiltva.

2013.IV.29

Szerkesztőprogram

Az erdei sétán felbuzdulva elkezdtem írni egy webes szerkesztő programot is a játékhoz:

upload:WebGL/editor_0.1.jpg

Ezt most még nem tudjátok megnézni, de hát sok látnivaló nincs is:

  • Baloldalt van a textúra, amiből a játék világa felépül. Itt ki lehet jelölni egy területet, amit majd be akarsz másolni a játéktérbe.
  • Jobboldalt a térkép díszeleg, itt kattintgatva... hát egyelőre víz lesz, mindegy hogy mit jelöltél ki :D
  • Mindkettő részt külön lehet ki-be zoomolni (a játéktér pl 75%-os kicsinyítésben jelenik meg éppen)
  • A két panelt elválasztó függőleges csíkot huzigálva lehet átméretezni a paneleket.

A program maga lassú mint a tetű, mert minden egyes változtatásnál újraszámolja az egész térképet. Ezen még finomhangolni kell.

Ami az igazából izgalmas volt ebben a kis gyakorlatban az az, hogy ennek apropóján elkezdtem megtanulni a jQuery nevű szörnyeteg használatát. Aki még nem hallott volna róla, ez egy javascript-es könyvtár, ami a weboldalak fejlesztését hivatott egyszerűbbé tenni, továbbá elfedni a böngészők közötti egyenetlenségeket. Az első benyomásaim jók: a dokumentáció jól olvasható, és a működése is elég tiszta.

Tagek:
 
Utoljára módosította UPi 2013.IV.29 08:45-n; 1 hozzászólás
Bejegyzés módosítása | PermaLink
Szavazás letiltva.