Web GL

2013-04

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
Votes disabled.

2013.IV.25

Sétafika az erdőben


Arnold és barátai úgy döntöttek, hogy elmennek gombát szedni az erdőbe. Találtak is egy csomó gombát, amitől mindenki megy a feje után ész nélkül. Az erdőben lakik néhány sárkány is. Szerencsére mindegyik vegetáriánus...

upload:WebGL/walking.png

Szóval megjelentek a mozgó ojjektumok! A program tudja megfelelően kezelni a takarásokat (vagyis ha egy figura a fa mögött tevékenykedik, akkor a fa takarni fogja, és nem fordítva), és van benne egy nagyon egyszerű akadály-modell is. Ez annyit tesz, hogy nem ültet fákat a vízre, és a figurák nem mennek keresztül a vízen vagy a fákon.

További újdonság a fullscreen mód: ha a mozgó képre kattintasz, majd Enter gombot nyomsz, akkor (ha minden jól megy) teljes képernyőn fog megjelenni a minden. Ez egy kicsit szenvedős, mert pl. Firefox hajlamos szétlapítani a képet, ha a képernyő oldalarányai nem azonosak a canvas oldalarányaival, Chrome-ot meg úgy kell babusgatni, hogy légyszi már, had legyen egy kicsit nagyobb a kép.

Szokásos módon az élő változat megtekinthető itt: WebGL

Tagek:
 
Utoljára módosította UPi 2013.IV.25 08:39-n; 5 hozzászólás;
Bejegyzés módosítása | PermaLink
Votes disabled.

2013.IV.23

Az erdő


Eredetileg úgy terveztem, hogy írogatok még egy kicsit a shaderek világáról. Ezt a projektet egyelőre elnapolom, helyette lássátok az új változatot:

  • A nézet méretét felnyomtam 800 * 450 -re (16:9 képarány)
  • Megcsináltam, hogy a víz "hullámozzék", amit textúra animációval oldottam meg. Ez azért fasza dolog, mert a geometriához nem kell nyúlnom két rajzolás között. Erről még mesélek.
  • Beraktam egy fát. Jól nézett ki, úgyhogy beraktam még ezret. Ez a laptopom integrált videokártyájának meg se kottyan: továbbra is a maximális 60fps-sel rajzolja a holmit.
  • A háttér 64 x 64 mező, kb 69.000 képpontból (23.000 háromszögből) áll. Nagy része nem látszik a fáktól :D

upload:WebGL/forest.png

Tagek:
 
Utoljára módosította UPi 2013.IV.23 07:29-n; 8 hozzászólás;
Bejegyzés módosítása | PermaLink
Votes disabled.

2013.IV.22

Mijaza WebGL?


Különös jószág a WebGL szabvány. Amikor legutóbb foglalkoztam OpenGL-lel, akkor még igencsak másképp nézett ki.

Had meséljek erről egy kicsit. A WebGL (ami az OpenGL ES 2.0 szabványon alapul) például meg se moccan addig, amíg két ún. shader programot meg nem írsz. Vagy, ha teszemazt lusta vagy megírni, akkor lemásolsz valamit a netről, csak akkor gőzöd sem lesz arról, hogy mi folyik itt. (Ugyan a WikiPedia:Cargo_cult_programming -ot a törvény nem bünteti, de igény lenne rá!)

A két kötelezően választható shader a következő:

  • A vertex shader feladata az, hogy a bemenetül szolgáló három dimenziós pontokat (és egyéb bemeneti paramétereket) leképezze a megjelenítő eszköz két dimenziós koordinátáira. Itt dől el, hogy milyen típusú a leképzés (perspektivikus? ortogonális? 2D?), és hogy milyen egyéb, kiegészítő adatokkal etetjük meg a következő shadert, ami nem más, mint:
  • A fragment shader a vertex shader által legyártott holmit hivatott képpontonként kiszínezni. Olyan izgalmas dolgok dőlnek itt el, hogy mi milyen színű, milyen textúrával lesz kitöltve, és még ki tudja, mi minden.

A továbbiakban ezen a blogon fogom leírogatni kalandjaimat a WebGL világában, és közben lehet, hogy még egy játékot is írok. Talán. A blogon igyekszem mindig megtekinthetővé tenni a program legújabb változatát.

Tagek:
 
Utoljára módosította UPi 2013.IV.22 06:29-n; 0 hozzászólás;
Bejegyzés módosítása | PermaLink
Votes disabled.