Róth Gergő roth@dcs.uni-pannon.hu 1
Oktatók Smidla József (smidla@dcs.uni-pannon.hu) Róth Gergő (roth@dcs.uni-pannon.hu) Bejárás nem kötelező Tárgy adatai Gyakorlati Nem kötelező Szabadon választható Neptun kód - VEMISVSA32J Tananyag (példakódok, dokumentációk, stb.) smidla.mik.uni-pannon.hu/jatek oktatas.mik.uni-pannon.hu Aláírás feltétel Rövid (15 perces) ZH a szorgalmi időszak végén Jegy kialakítása Beadandó feladat készítése csapatban Vizsgán történő bemutatás Ajánlott irodalom Jason Gregory: Game Engine Architecture Szirmay-Kalos László: Háromdimenziós grafika, animáció és játékfejlesztés ( Sünis könyv ) Nyisztor Károly: Grafika és játékprogramozás DirectX-szel Nyisztor Károly: Shaderprogramozás - Grafika és játékfejlesztés DirectX-szel Varga Márton: 3D grafika - Modellezés és megjelenítés 2
Ha hibát találtok az előadás fóliáiban a dokumentációkban a példa forráskódokban... jelezzétek írásban vagy szóban. Igyekszünk kijavítani mindent. 3
Bevezetés C / C++ kód fordítása Grafikus felületek programozásának alapjai OpenGL grafikus könyvtár Transzformációk (eltolás, átméretezés, forgatás) Transzformációk OpenGL-lel Blender Irrlicht Engine UDK bevezető Kismet, animációk Unreal Script nyelvi elemei Fejlesztés Unreal Scriptben 4
5
A játékfejlesztés több területből áll. A kódolás csupán egy része a munkáknak. Példák az elvégzendő feladatokra: Tervezés Kódolás Modellezés Textúrázás Pályaszerkesztés Animálás... Többnyire minden terület tovább bontható további részterületekre. 6
Az elvégzendő feladatokat eszközök segítik. Ezen eszközök két kategóriába sorolhatóak: Runtime Olyan eszközök, melyek futási időben kerülnek felhasználásra. Offline Olyan eszközök, melyek a játék futása során nem kerülnek felhasználásra. 7
3D Studio Max Maya Blender (ingyenesen használható bármilyen célra) 8
Photoshop Gimp (ingyenesen használható bármilyen célra) 9
Unreal Development Kit (UDK) Valve Hammer Editor Might & Magic: Heroes VI 10
Shader szerkesztő szoftverek Zeneszerkesztő szoftverek Pl.: Audacity (ingyenes) Material szerkesztő szoftverek Többnyire tartalmazzák a modellező, vagy pályaszerkesztő szoftverek Részecskerendszer szerkesztő szoftverek... 11
Nyersanyag (asset, resource) importálása (exportálása) a játékba (játékból) 3D modell Textúra Zene Pálya Részecskerendszer Material Shader Animáció... 12
Matematikai könyvtár Hálózati kommunikáció kezelés (TCP, UDP, stb.) Fizika Ütközésdetektálás Részecskerendszer Mechanika Statika Hanglejátszás Rajzoló rutinok Animációlejátszás... 13
14
15
inicializálás() A függvény célja, hogy betöltse az alkalmazás futtatásához szükséges nyersanyagokat, valamint, hogy inicializálja a megfelelő változókat, alrendszereket. inicializálás(); while (játékfut()) { eseménykezelés(); animálás(); fizikaszámolás(); rajzolás(); } felszabadítás(); A fő ciklusban végrehajtott függvények listája nem teljes. Több funkció is elképzelhető. 16
eseménykezelés() A függvény kezeli le a játékos interakcióit. Egér Billentyűzet Joystick stb. inicializálás(); while (játékfut()) { eseménykezelés(); animálás(); fizikaszámolás(); rajzolás(); } felszabadítás(); A fő ciklusban végrehajtott függvények listája nem teljes. Több funkció is elképzelhető. 17
animálás() A függvény meghatározza az animált objektumok következő állapotát. inicializálás(); while (játékfut()) { eseménykezelés(); animálás(); fizikaszámolás(); rajzolás(); } felszabadítás(); A fő ciklusban végrehajtott függvények listája nem teljes. Több funkció is elképzelhető. 18
fizikaszámolás() A függvény számolja a betöltött világ fizikáját. Szabadesés Csúszás stb. inicializálás(); while (játékfut()) { eseménykezelés(); animálás(); fizikaszámolás(); rajzolás(); } felszabadítás(); A fő ciklusban végrehajtott függvények listája nem teljes. Több funkció is elképzelhető. 19
rajzolás() A függvény rajzolja ki a betöltött világot a képernyőre. inicializálás(); while (játékfut()) { eseménykezelés(); animálás(); fizikaszámolás(); rajzolás(); } felszabadítás(); A fő ciklusban végrehajtott függvények listája nem teljes. Több funkció is elképzelhető. 20
felszabadítás() Az init() ellentéte. Felszabadítja a lefoglalt erőforrásokat. inicializálás(); while (játékfut()) { eseménykezelés(); animálás(); fizikaszámolás(); rajzolás(); } felszabadítás(); A fő ciklusban végrehajtott függvények listája nem teljes. Több funkció is elképzelhető. 21
Játéklogika Ha a játékos guggol, akkor lassabban megy Ha a játékos eléri a fát, akkor új pálya betöltése Ha a játékos meghal, akkor a legutóbbi mentés betöltése Játékmotor Megjelenítés Matematika Nyersanyag kezelés Hang kezelés Az ábrán szereplő komponensektől eltérőek is szerepelhetnek a tényleges játékban. 22
23
main.c component0.c component1.c Compiler Compiler Compiler main.o component0.o component1.o Linker a.out / a.exe 24
component0.c component1.c Compiler Compiler component0.o component1.o Archiver libownlib.a / OWNLIB.lib 25
main.c Compiler main.o libownlib.a / OWNLIB.lib Linker a.out / a.exe 26
Könyvtár készítése paranccsorból gcc c component0.c gcc c component1.c ar cvq libownlib.a component0.o component1.o Könyvtár készítése QtCreatorrel.pro fájlban TEMPLATE = app helyett TEMPLATE = lib Alapértelmezetten statikus könyvtárat készít (Windows (.dll), Linux (.so)) Statikus könyvtár készítése (libx.a) CONFIG += staticlib 27
28
Különböző módokban különböző memóriacímek írásával Módok váltása megszakítások segítségével (interrupt) 0xA000 memóriacím Képernyő pixelek színének állítása 0xB000 memóriacím Monokróm szöveg írása 0xB800 memóriacím Színes szöveg írása 29
Különböző platformokon különböző natív megoldások Windows: WinAPI Linux: X server... Léteznek különböző platform független könyvtárak A könyvtárak az adott platform natív megoldásait használják. glut OpenGL Utility Toolkit (C nyelv, elavult) SDL Simple Directmedia Library (C nyelv) Qt Cute (C++ nyelv, nagyon összetett) Nem összetévesztendő: Qt (könyvtár)!= QtCreator (IDE) 30
Egyszerűen használható Eseményvezérelt Támogatott operációs rendszerek Windows Linux Android Példa forráskód és dokumentáció SDL2-window SDL2-loop 31
32
Mi az az OpenGL? Open Graphics Library (nyílt forráskódú grafikus könyvtár) API (Application Programming Interface) Bárki írhat mögé implementációt Egy olyan könyvtár, ami segít a videokártya lehetőségeit kihasználni úgy, hogy ne kelljen a különböző grafikus kártyákra különböző programot írni. 33
FFP Fixed Function Pipeline Az OpenGL működését csak és kizárólag állapotok állításával lehet elérni GLSL OpenGL Shading Language Az OpenGL működését a GLSL programnyelvvel és állapotok állításával is befolyásolni lehet 34
Komponensek [0, 1] intervallumon 0 a komponens nem szerepel a színben 1 a komponens teljes értékkel szerepel a színben RGB színkomponensek Red (piros) Green (zöld) Blue (kék) RGBA színkomponensek Red (piros) Green (zöld) Blue (kék) Alpha (átlátszóság) Főbb színek (0, 0, 0) fekete (1, 1, 1) fehér (1, 0, 0) piros (0, 1, 0) zöld (0, 0, 1) kék 35
Grafikai glitchek kiküszöbölése Az OpenGL a háttér pufferbe rajzol Monitor az előtér pufferből olvas Rajzolás után a puffer felcserélése 36
Alapértelmezett Első bal alsó sarok (-1, -1, 1) Hátsó jobb felső sarok (1, 1, -1) glclearcolor(r, g, b, a) Beállítja a képernyő törlőszínét glclear(gl_color_buffer_bit) Beállítja a képernyő összes pixelének a színét a beállított törlőszínre 37
Csúcsadatokat tartalmazó memória megadása glvertexpointer(..) glcolorpointer(..) gltexcoordpointer(..) glnormalpointer(..) x y z r g b x y z r g b x y z r g b Pozíció Szín Pozíció Szín Pozíció Szín Csúcs 0 Csúcs 1 Csúcs 2 38
Csúcsadatok felhasználásnak az engedélyezése glenableclientstate(gl_vertex_array) glenableclientstate(gl_color_array) glenableclientstate(gl_texture_coord_array) glenableclientstate(gl_normal_array) 39
Rajzolás gldrawarrays(..) Rajzolható primitívek 40
Csúcsadatok felhasználásnak a letiltása gldisableclientstate(gl_vertex_array) gldisableclientstate(gl_color_array) gldisableclientstate(gl_texture_coord_array) gldisableclientstate(gl_normal_array) Példa forráskód és dokumentáció SDL2-OpenGL SDL2-OpenGL-simple-draw SDL2-OpenGL-color-draw 41
Textúra koordináták A képhez képes relatív koordináták Szokásos (x, y) helyett (u, v), vagy (s, t) 42
Inicializálás lépésben Textúra azonosító deklarálása Gluint texture; Textúra azonosító generálása glgentextures(1, &texture); A textúra azonosító a függvény hívása után már csak 2D-s textúrával használható glbindtexture(gl_texture_2d, texture); A nyers képpontok betöltése a videokártya memóriába glteximage2d( GL_TEXTURE_2D, 0, belső adatformátum, // GL_RGB, GL_RGBA, GL_BGR, stb. szélesség, magasság, 0, nyers képpont adatformátuma, // GL_RGB, GL_RGBA, GL_BGR, stb. GL_UNSIGNED_BYTE, nyers képpont első elemére mutató tömb); 43
Rajzolás lépésben 2D textúrázás engedélyezése glenable(gl_texture_2d); Rajzolni kívánt textúra meghatározása glbindtexture(gl_texture_2d, texture); Példa forráskód és dokumentáció SDL2-OpenGL-texture-draw 44
45
Rajzoláskor a videokártya minden csúcson végrehajt valamilyen transzformációt. Mire jó? Ugyanaz az objektum kirajzolható több helyre méretben Szemszögből A transzformációk nem a CPU-n, hanem a sokmagos GPUn hajtódnak végre, ezáltal gyorsabb (párhuzamos végrehajtás) Projekció 2D / 3D grafikában minden transzformáció egy mátrixműveletnek felel meg. 46
v 2 v 1 t t V 2 v 0 t V 1 V 0 47
V 2 v 2 V 0 V 1 v 1 v 0 48
V 1 V 2 V 2 V 1 V 0 V 0 49
Mátrix szorzása skalárral Mátrixok összeadása Csak ugyanolyan méretű mátrixot tudunk összeadni 50
Mátrix szorzása mátrixszal N x M méretű mátrixot csak M x P méretűvel lehet beszorozni Az eredmény N x P méretű mátrix A művelet nem kommutatív: A * B!= B * A A művelet asszociatív: A * (B * C) = (A * B) * C 51
N dimenziós koordinátát N x N méretű négyzetes mátrixszal is lehet transzformálni (Lineáris algebra). A transzformációs mátrix sorai az új koordinátarendszer tengelyei a régi koordinátarendszerben. a 0 a 1 a 3 a 4 a 6 a 7 a 2 a 5 a 8 v x v y v z = a 0 vx + a 3 vy + a 6 vz a 1 vx + a 4 vy + a 7 vz a 2 vx + a 5 vy + a 8 vz 52
Egységmátrix (identity matrix) 1 0 0 1 v x v y = v x v y 1 0 0 0 1 0 0 0 1 v x v y v z = v x v y v z 53
Eltolás (translation) Összeadás t x t y + v x v y = t x + v x t y + vy t x t y tz + v x v y v z = t x + vx t y + vy t z + vz 54
Átméretezés az origo középpontjából (scale) Szorzás s x 0 0 s y v x v y = s x v x s y vy s x 0 0 0 s y 0 0 0 s z v x v y v z = s x vx s y vy s z vz 55
Forgatás 2 dimenzióban az origó körül (rotate) Szorzás cos α sin α sin α cos α Forgatás 3 dimenzióban az origó körül (rotate) ll 1 cos α + cos α ml 1 cos α n sin α nl (1 cos α) + m sin α lm(1 cos α) + n sin α mm(1 cos α) + cos α nm(1 cos α) l sin α ln (1 cos α) m sin α mn(1 cos α) + l sin α nn(1 cos α) + cos α 56
CPU M transzformációs mátrix kiszámolása egy objektumra R forgatás (rotate) S átméretezés (scale) M = R * S * R * R GPU Minden csúcs beszorzása a transzformációs mátrixszal Párhuzamos végrehajtás (Single Instruction Multiple Data) M * v = R * S * R * R * v = R * (S * (R * (R * v))) Probléma Szorzás Eltolás művelete? Összeadás 57
A koordináták újabb komponenssel egészülnek ki Homogén koordináta: w 2D: (x, y) -> (w * x, w * y, w) 3D: (x, y, z) -> (w * x, w * y, w * z, w) w értéke általában 1 2D: (x, y) -> (x, y, 1) 3D: (x, y, z) -> (x, y, z, 1) 58
2D 1 0 t x 0 1 t y 0 0 1 v x v y 1 = t x + v x t y + vy 1 3D 1 0 0 1 0 0 0 0 0 t x 0 1 t y t z 0 1 v x v y v z 1 = t x + vx t y + vy t z + vz 1 59
0 3x3 transzformációs mátrix 0 0 0 0 0 1 v x v y v z 1 60
A segítségével különböző mesterséges, vagy élethű transzformációkat tudunk végrehajtani Ortografikus (merőleges) vetítés A távoli és a közeli dolgok ugyanakkorák Perspektivikus vetítés A párhuzamos élek a végtelenben összetartanak A távoli dolgok kisebbnek látszanak, mint a közeliek Homogénkoordináta bevezetésével lehetséges 61
62
OpenGL modelljében a csúcs tényleges pozíciója a képernyőn P * M * v P = projekciós mátrix M = modellnézeti mátrix V = csúcs Ehhez beépített mátrixokat használ GL_PROJECTION GL_MODELVIEW 63
Aktuális mátrix kiválasztása glmatrixmode(mátrix); Mátrix lehet GL_MODELVIEW GL_PROJECTION... Egységmátrix betöltése az aktuális mátrixba glloadidentity(); Aktuális mátrix utószorzása eltolás mátrixszal gltranslatef(x, y, z); Aktuális mátrix utószorzása átméretezés mátrixszal glscalef(x, y, z); 64
Aktuális mátrix utószorzása forgatási mátrixszal glrotatef(szög fokban, tengely x, tengely y, tengely z); Aktuális mátrix felülírása saját mátrixszal glloadmatrixf(saját mátrix mutatója); Aktuális mátrix utószorzása saját mátrixszal glmulmatrixf(saját mátrix mutatója); Aktuális mátrix verembe helyezése glpushmatrix(); Aktuális mátrix feltöltése a veremből glpopmatrix(); 65
Saját mátrix definiálása GLfloat m[16]; m[0] m[1] m[2] m[3] m[4] m[5] m[6] m[7] m[8] m[9] m[10] m[11] m[12] m[13] m[14] m[15] 66
67
Ugyanannak a 3D modellnek a kirajzolása...több helyre...több méretben...több irányból A modellt csak egyszer szükséges betölteni A különböző rajzolási transzformációknak elég csak egyegy mátrixot létrehozni 3D modell 3D transzformációs modell 3D transzformációs modell 3D transzformációs modell 68
Ellentétes transzformációk ha hátrafele akarunk mozdulni a kamerával, akkor a transzformációs mátrixnak el kell tolnia az objektumokat előre ha jobbra fordulunk a kamerával, akkor az objektumokat balra kell forgatni a kamera pozíciója körül... 69
Kamera mátrix betöltése M-be M elmentése M utószorzása az objektum transzformációjával Objektum kirajzolása M visszaállítása M elmentése M utószorzása az objektum transzformációjával Objektum kirajzolása M visszaállítása 70
glmatrixmode(gl_modelview); glloadmatrixf(camera_matrix); glpushmatrix(); glmulmatrixf(object_matrix_0); object.draw(); glpopmatrix(); glpushmatrix(); glmulmatrixf(object_matrix_1); object.raw(); glpopmatrix(); 71
72
del, majd enter kijelölt objektum törlése tab váltás az aktuális és a szerkesztés mód között space felugró parancsablak Csak szerkesztés módban Subdivide Csak objektum módban Add Cube / Monkey / UV Sphere / Cylinder / Torus stb. Minden módban Shade Smooth Shade Flat a minden objektum / csúcs / lap kijelölése n jobb oldali transzformációs panel megjelenítése / eltüntetése egér jobb klikk egér alatt levő objektum kijelölése (shift nyomvatartásával több objektum is kijelölhető) középső egérgomb + egér mozgatása kamera forgatása egér görgő kamera közelítés / távolítása shift + középső egérgomb + egér mozgatása kamera mozgatása a síkjában 73
File / Export / Wavefron (.obj) Bal alul Export obj lenyíló menüben különböző beállítási lehetőségek (a lényegesek felsorolva) Animation Az animáció összes kockáját lementi külön obj fájlokba. Selection only Csak az éppen kijelölés alatt álló objektumot menti el. Write normals Elmenti a csúcsok normálvektorait. Include Uvs Elmenti a csúcsok textúrakoordinátáit. 74
75
Szöveges (olvasható) formátum Definíciókból áll Fontosabb definíciók mtllib anyagtulajdonságokat tartalmazó fájl megadása o új objektum definiálása a megadott névvel Csúcsadatok Három különálló tömb épül fel belőlük. A formátum a tömböt a lapok meghatározásánál használja fel. Az obj formátum szerint a tömb indexelése 1-től kezdődik. v csúcs pozíciójának a megadása vn csúcs normálkoordinátáinak a megadása vt csúcs textúra koordinátáinak a megadása usemtl anyag használata f új lap definiálása Bővebb információ http://en.wikipedia.org/wiki/wavefront_.obj_file 76
f után akármennyi szóköz nélküli karakterlánc lehet a sor végéig Ezen karakterláncokból 4 féle van d 0 d 0 /d 1 d 0 //d 2 d 0 /d 1 /d 2 d 0 csúcs pozíciójának az indexe d 1 csúcs textúra koordinátáinak az indexe d 2 csúcs normálvektorának az indexe Fontos: a tömb indexelése az obj formátum szerint 1-dől kezdődik. Új lap meghatározására példa Háromszög f 1 2 3 f 1//2 3//4 5//6 Négyszög f 1 2 3 4 77
Hasonló az obj-hez Fontosabb definíciók newmtl új anyag létrehozása Kd anyag RGB színkomponenseinek a meghatározása (diffúz) d, vagy Tr anyag átlátszóságának a meghatározása map_kd anyag színének a meghatározása képből 78
79
Saját példakódok és dokumentáció Irrlicht-loop Irrlicht-string Irrlicht-mesh-draw Irrlicht-event-receiver Irrlicht-mesh-collision Irrlicht-fps-camera Hivatalos példakódok http://irrlicht.sourceforge.net/tutorials/ 80