Kelab Bina Game: Tutorial Membuat Game 3d

[zsuperxtreme 0]

KELAB BINA GAME
_______________________________________________

KELAB BINA GAME : GAME DESIGN TUTORIAL

BAHAN BAHAN UNTUK MENGIKUTI TUTORIAL
Oleh kerana kabel di Taiwan masih belum dibaiki, maka hanya senarai peralatan perisian akan disenaraikan.

1. Irrlicht 1.2 (Free)
Digunakan untuk enjin game
http://irrlicht.sourceforge.net/

2. Dev-C++ 4.9.9.2 (Free)
Digunakan untuk kompil game
http://sourceforge.net/projects/dev-cpp/

3. Anima8or (Free)
Digunakan untuk buat model
http://www.anim8or.com/main/index.html

4. G.I.M.P (Free)
Digunakan untuk lukis texture dan fx
http://www.gimp.org/

Dlm tutorial nie ada guna 3dsmax, tapi tak digalakkan sbb license. Just guna 3dsmax utk mudah buat tutorial. Cara kat Anima8or sama je, just different gui.

ASAS GRAFIK (LEVEL TUTORIAL : TERLALU MUDAH)

Ok semua tau yang grafik buat game nie mempunyai dua konsep 2d dgn 3d. Tapi mcm mana konsep ini dilaksanakan dalam game? Ok seperti yang kita ketahui 2d nie adalah imej yang rata, boleh dilihat dari depan sahaja (x,y). Manakala 3d adalah objek yang dibentuk melalui vertex-vertex pada (x,y,z) dan mempunyai permukaan normal dan setiap permukaan 3d terdiri dari imej (texture) yang menyebabkan objek itu kelihatan 3 dimensi.

VERTEX = Titik biru

Kenapa vertex ini penting dalam pembinaan game? Bukankah "Senang sahaja guna 3dsmax utk create vertex". Ok, jawapannya dengan mengenali vertex lebih mendalam, game developer boleh menguruskan UVW, BONE, COLLISION, TEXTURE, dan bermacam-macam lagi... jadi vertex ini bukan sekadar membuat box sahaja dan nilai penggunaan vertex ini perlu difahami sebelum langkah seterusnya. Maka adalah amat penting bagi game programmer mengenali apa itu vertex.

Ini adalah 2d imej yang dilukis oleh hackezz

Imej 2d itu diletak pada permukaan objek 3d diantara vertex-vertex yang disusun pada satu normal.

Edited February 3, 2007 by zsuperxtreme

[LanoV 22]

Dalam erti kata lain, kita masukkan SKIN pada permukaan sesebuah object supaya nampak bentuk 3D lebih ketara le kan. Gabungan vertex-vertex ini akan membentuk WIREFRAME yang menjadi tulang belakang sesebuah object... betul tak. Okey, teruskn sambungan, ZX.

[b1naryc0de 1]

Imej 2d tue texture untuk objek ker??

Bagaimana pulak untuk objek bulat?? Kat mana kedudukan vertex dia dan macamana nak letak texture dia??

[zsuperxtreme 0]

PENGENALAN CODE (LEVEL TUTORIAL : TERLALU MUDAH)

Ok selepas kita fahami vertex, kita akan pergi lebih lanjut kepada driver untuk melaksanakan game kita. Untuk memudahkan kefahaman mengenai aturcara maka Visual Basic dan DirectX 8.0 dipilih. Berikut adalah penerangan bagaimana setup untuk antaramuka game boleh dilakukan.

************************************************************

PEMBOLEHUBAH

Dim Dx as DirectX8
Objek yang dihubungkan kepada directx8

Dim D3D as Direct3D8
Memberikan kawalan terhadap objek dalam directx

Dim D3DDevice as Direct3DDevice8 
Mewakili perkakasan untuk tujuan melukis pada skrin (render)

************************************************************ PERMULAAN

Public Function Initialise() as Boolean
On Error Goto ErrHandler:

Dim DispMode as D3DDISPLAYMODE '//Mewakili mode display contoh 640 x 480
Dim D3DWindow as D3DPRESENT_PARAMETERS '// Mewakili skrin yang kita lihat

Set Dx = New DirectX8 '// Membina object directx 8
Set D3D = Dx.Direct3DCreate() '//Dari objek directx kita buat antaramuka directx berkenaan

D3D.GetAdapterDisplayMode D3DADAPTER_DEFAULT, DispMode '// Mendapatkan mode resolusi komputer yang dipakai

D3DWindow.Windowed = 1 '// Menggunakan skrin dalam window
D3DWindow.SwapEffect = D3DSWAPEFFECT_COPY_VSYNC '//Refresh skrin
D3DWindow.BackBufferFormat = DispMode.Format '//Menggunakan resolusi yang sedia ada

// Membuat device pada permukaan directx, iaitu ruangan untuk rendering.
Set D3DDevice = D3D.CreateDevice(D3DADAPTER_DEFAULT, D3DDEVTYPE_HAL, FrmMain.Hwnd, _
                                                     _ D3DCREATE_SOFTWARE_VERTEXPROCESSING, _
                                                     _ D3DWindow)

Initialise = True 
Exit Function
ErrHandler:
Initialise = False
End Function

************************************************************ RENDER (LUKIS PADA SKRIN)

Public Sub Render()
'//Padam segala lukisan yang terdapat pada skrin di ruangan device.
D3DDevice.Clear 0, ByVal 0, D3DCLEAR_TARGET, &HCCCCFF, 1#, 0

'//Memulakan senario game
D3DDevice.BeginScene
'//Disinilah kesetiap objek bagi directx dilukis contoh kotak, rumah, dan berbagai lagi
D3DDevice.EndScene

'//Perbaharui skrin untuk memaparkan objek yang baru.
D3DDevice.Present ByVal 0, ByVal 0, 0, ByVal 0
End Sub

************************************************************ PUSINGAN UTAMA

Private Sub Form_Load()

Me.Show 
bRunning = Initialise() //Memulakan driver directx


Do While bRunning
    Render '//Memanggil fungsi render dan memaparkan objek yang dilukis
    DoEvents '//Masa berhenti untuk cpu melakukan process yang dirender    

Loop


'//Padam directx

Set D3DDevice = Nothing
Set D3D = Nothing
Set Dx = Nothing

Unload Me
End
End Sub

**********************************************************

Ok ini adalah asas untuk memulakan antaramuka untuk membuat game... Jadi ada sesiapa yang tak faham tanya sekarang sebelum kita terus ke pengaturcaraan yang lebih detail

WARNING : Ini untuk tujuan kefahaman sahaja, jgn confuse dengan code ini, walaupun ia penting kebanyakan SDK dah sediakan. Jadi janganlah give up ok.

Tutorial seterusnya adalah mcm mana kita nak letak objek yang kita blukis diatas kedalam code, tutorial hanya dibuat selepas tiada soalan mengenai code diajukan.

Edited December 31, 2006 by zsuperxtreme

[zsuperxtreme 0]

MENJAWAB SOALAN

1. Imej 2d tue texture untuk objek ker??

Ya imej 2d tu adalah texture yang dilukis mengunakan paint, adobe photoshop, g.i.m.p atau lain lain

2.Bagaimana pulak untuk objek bulat?? Kat mana kedudukan vertex dia dan macamana nak letak texture dia??

Untuk objek yang bulat (banyak permukaan) boleh menggunakan UVW mapping seperti dibawah. Dimana setiap permukaan boleh diletakkan texture yang berlainan dan mudah digunakan. Walaubagaimanapun jika kita cuma ada 1 texture yang hendak diletak pada permukaan bulat, kita tidak memerlukan UVW editor nie, kita just drag texture dari material ke object sahaja. UVW mapping ni bila kita mahukan texture yang berlainan dan kita mahu adjust kedudukan vertex texture.

[Hackezkk 4]

wohhh

guwd2

nt aku nak mengetest wat..ko ajo lax cara nak mapping

[Adiex 0]

lol, cool tutorial, gratz pada ko zsuperxtreme

adiex

[zsuperxtreme 0]

Thanks, sapa-sapa nak menyelit tutorial selit je, tapi jgn off topic la mcm bagi tutorial nak jahit baju ke, jgn la.. hehehe.

Ok any question geng? Sapa sapa dah faham mengenai tempek texture dengan coding basic tu?

[zsuperxtreme 0]

TUTORIAL

ENJIN GRAFIK (LEVEL TUTORIAL : MUDAH)

Ok setelah kita ketahui basic startup Directx guna VB, mari kita samakan dengan enjin irrlicht percuma nie... kita takkan guna core programming, sbb terlalu susah untuk beginner, jd kita proceed dengan irrlicht supaya korang mudah faham. Irrlicht nie menggunakan C++.

//Memulakan irrlicht
#include <irrlicht.h>    
using namespace irr;

using namespace core;
using namespace scene;
using namespace video;
using namespace io;
using namespace gui;

//Menggunakan library irrlicht
#pragma comment(lib, "Irrlicht.lib")

int main()
{

//Menyediakan satu permukaan pada skrin untuk rendering
IrrlichtDevice *device =createDevice(EDT_SOFTWARE, dimension2d<s32>(512, 384), 16,false, false, false, 0);
device->setWindowCaption("Hello Dunia Putera");

//Menentukan resolusi skrin komputer
IVideoDriver* driver = device->getVideoDriver();

//Pengurusan dalam game
ISceneManager* smgr = device->getSceneManager();

//Antaramuka game
IGUIEnvironment* guienv = device->getGUIEnvironment();

//Letak text pada antaramuka iaitu pada guienv
guienv->addStaticText(L"Hello geng putera, jom rock",rect<int>(10,10,200,22), true);


//Menambahkah model ke dalam game
IAnimatedMesh* mesh = smgr->getMesh("../../media/kotak.md2");
IAnimatedMeshSceneNode* node = smgr->addAnimatedMeshSceneNode( mesh );

//Meletakkan texture pada model tadi
if (node)
{    
node->setMaterialFlag(EMF_LIGHTING, false);    
node->setFrameLoop(0, 310);        
node->setMaterialTexture( 0, driver->getTexture("../../media/kotak.bmp") );
}

//meletakkan camera dalam ruangan game, iaitu view player
smgr->addCameraSceneNode(0, vector3df(0,30,-40), vector3df(0,5,0));

// RENDER, lukis apa yang kita dah set ke dalam game
while(device->run()){
driver->beginScene(true, true, SColor(0,200,200,200));
    smgr->drawAll();     //Lukis 3 dimensi game
    guienv->drawAll();   //Lukis paparan 2d game
    driver->endScene();  //Bagitau driver takat tu je, pastu render
}

//Padam
device->drop(); 
return 0;
}

Edited January 12, 2007 by zsuperxtreme

[zsuperxtreme 0]

TUTORIAL

REKABENTUK MAP (LEVEL TUTORIAL : MUDAH)

Selepas kita berjaya memasukkan objek kotak ke dalam ruangan game, adalah baik untuk kita membina map bagi ruangan game kita yang kita boleh terokai dalam bentuk 3d. Berdasarkan tutorial satu, bina satu ruangan persekitaran seperti contoh di bawah. Selepas ini kita akan membina sebuah persekitaran 3d menggunakan irrlicht dengan menggunakan map yang kita bentuk.

[powerabu 0]

err...jgn marah..!!

software apa yang digunakan untuk ko lukis benda tu..

klau Google Sketchup boleh ker...ni jelah software 3d yg aku ada...

nak save kena dalam format apa klau dlm pembuatan game ni??

aku harap tutorial ni boleh difahami semua bahasa (c,c++,c#, Python, Vb dan apa-apa lagi lah....)

[zsuperxtreme 0]

Powerabu

Tutorial nie menggunakan 3DSMAX, selain dari 3dsmax, ko bleh guna MAYA, LIGHTWAVE, TrueSpace, dan berbagai lagi. Bagi memudahkan lagi tujuan pembelajaran nie gunalah 3dsmax

Kalau nak guna google sketch tu make sure dia boleh export kepada most popular format *.3ds.

Normally kalau nak buat game kena ada format *.3ds, *.md2, *.mdl, *.bsp, *.x, dan lain-lain.

Tutorial kita nie "aturcara majmuk", sekejap ke enjin 3d, sekejap ke C++, sekejap ke VB. Supaya korang dapat rasakan persamaan. Tapi buat masa nie kita focus ke IRRLICHT guna C++, sbb FREE. hehehe.

Edited January 3, 2007 by zsuperxtreme

[zsuperxtreme 0]

TOOLS : ANIMA8OR (FREE)

Oleh kerana kita nak guna semua tools adalah free maka, Anima8or digunakan selain menggunakan 3dsmax. Berikut adalah contoh Anima8or dan sampel bulatan yang direka. Gunakan Export seperti yang tertera pada image untuk export kepada format *.3ds.

Edited January 3, 2007 by zsuperxtreme

[LanoV 22]

Dah hampir 2 tahun aku guna Anim8or nie... software nie memang power, lightweight, mudah dan simple. Latest version update pada bulan September 2006 kalo tak silap.

Kepada powerabu, kalo nak guna 3D software yang free boleh guna Anim8or (mudah digunakan) dan Blender (open source tapi susah sket nak guna). Ko try google, mesti jumpe punya.

Okey, teruskan cikgu zsuperxtreme....

[zsuperxtreme 0]

TOOLS : BLENDER (FREE)

Ok ni adalah tools modelling free yang Lanog explain tadi. So korang bleh lah pilih antara Anima8or dengan Blender nie. Ikut kesukaan korang. Tapi yang penting kedua-dua software nie boleh convert *.3ds.

[zsuperxtreme 0]

TUTORIAL

GERAK FIRST PERSON SHOOTER (FPS) (LEVEL TUTORIAL : MUDAH)

So ok, ini adalah code untuk korang bergerak dalam model persekitaran yang korang dah buat dan telah di export kepada 3ds. Potongan code nie hendaklah diletakkan sebelum smgr->drawAll; dan sebelum loop while.

// Memasukkan model kotak yang kita lukis guna Anima8or atau Blender
scene::IAnimatedMesh* mesh = smgr->getMesh("kotak.3ds");

// Node ini mewakili view model yang hanya player nampak pada skrin
scene::ISceneNode* node = 0;

// Hanya model yang nampak pada skrin di clip kan.... cantas... supaya CPU laju
if (mesh)    node = smgr->addOctTreeSceneNode(mesh->getMesh(0));

// Meletakkan pegerakan FIRST PERSON SHOOTER... simple je.
smgr->addCameraSceneNodeFPS();

// Mouse punye icon dipadamkan.
device->getCursorControl()->setVisible(false);

Ok selepas nie kita akan see complete code, tp tunggu.....

[zsuperxtreme 0]

Untuk lebih mudah memahami mana kod yang perlu dipakai atau diubah, sila baca setiap komen yang diber pada setiap line code dan cuba faham setiap fungsi.

[MalaYneuMaya 4]

assalamualaikum...

jadi mesti ada prog. VB lah yer? kalu guna Visual C++ takleh ker?

Direct X 8.0 tu ape plak? program khas atau yg dpt free masa beli cd game tuh? pasal dlu masa main game NFSU dia pakai DX 9.0c. Yg tu ker?

lagi satu ni wat game fps kan? tutorial nih bleh guna utk wat game keta gak ker? mcm game VW golf rally dulu tuh...(modelling sya guna Milkshape3D, tpi ada convert ke .3ds ,cuma ter rotate 90 drjh..)

sya byk taktau psal programming nih...ansur2 blaja...C++ pun gagap

[zsuperxtreme 0]

Malayneumaya, oleh kerana VB menggunakan license dan kita ingin menggunakan Irrlicht maka C++ digunakan. Sila semak senarai peralatan untuk buat game pada post #1. Kesemua peralatan itu percuma. Tidak memerlukan Directx SDK untuk buat game kali ini, sbb Directx 9.0c dah ada dlm pc dalam kebanyakan user.

Tutorial kali ini lebih kepada genre FPS, RACING, SIMULATOR, RPG, PUZZLE dan lain-lain dalam bentuk 3d.

[izmal 0]

zsuperxtreme - kalau bake texture dgn alpha mcm mana plk?thx in advance

[zsuperxtreme 0]

MENJAWAB SOALAN

kalau bake texture dgn alpha mcm mana plk?

Kalau kita nak bake texture, make sure enjin atau aturcara yang di setup tu open "Alpha blending". Tp most of the enjin yang ada dah built in open. So antara format yang sesuai untuk tujuan Alpha ialah *.TGA dan *.DDS.

Kalau nak bake texture cuba guna G.I.M.P, set background as transparent and draw mcm biasa. Pastu save as *.TGA. So dia include Alpha pada format tu.

Kalau kau nak alpha pada programming interface dah tak through DirectX atau OpenGL, kau akan nampak side alpha jadi black, atau tak boleh open. So jika tak menggunakan Graphic Engine nie, ko bleh guna *.GIF, yang ini biasa je.

Alpha nie ada banyak peringkat. One color alpha, atau alpha blending, kalau one color alpha nie, satu color yang disetkan sebagai transparent sahaja dan color-color lain 100% fully visible (eg. GIF). Kalau Alpha blending nie, Setiap color ada nilai alpha (eg. TARGA FILE *.TGA). Maknanya every pixel ada alpha percentage.

Format yang tak support (built in) alpha mcm BMP, JPG, PCX juga boleh di Alphakan guna code pada engine. Contoh BMP, bila kita codekan, kita setkan &H0000000 sebagai transparent. Maka file BMP tu akan transparent pada colour hitam.

Edited January 5, 2007 by zsuperxtreme

[izmal 0]

so..kalau nak buat texture utk dinding..pakai 'normal map' utk nampak kesan2 bump?bleh ke?engine mana yg ko syor kan? sorry byk tanya..~

[zsuperxtreme 0]

Memang tutorial ini perlukan soalan mcm izmal.. hehehe.

MENJAWAB SOALAN

so..kalau nak buat texture utk dinding..pakai 'normal map' utk nampak kesan2 bump?bleh ke?engine mana yg ko syor kan?

Yes, normally dari game yang ada dalam market sekarang, kesan bump boleh dibuat pada graphic editor mcm G.I.M.P, Photoshop dan lain-lain. So ini menjimatkan process CPU. Jika gunakan 3dsmax untuk display kesan bump, maka Additional code dari format perlu diprocess.

Game engine yang bagus buat masa ini ialah Irrlicht (FREE), DarkBasic (USD 72), BlitzBasic, A6 (USD940), dan banyak lagi. Tapi aku suggest Irrlicht sebb free dan tak perlukan budget yang besar. Sbb tu la tutorial kat sini banyak focus pada Irrlicht.

[zsuperxtreme 0]

TOOLS & TUTORIAL

GUNA IRREDIT UNTUK SCENE (LEVEL TUTORIAL : MUDAH)

Ok, untuk memudahkan kita buat senario dalam game dan mahu buat world dalam irrlicht kita boleh guna irredit (FREE). Berikut adalah gambar irredit.

Code seperti berikut... sebelum while

smgr->loadScene("../../media/example.irr"); 

Kod sepenuhnya

#include <irrlicht.h>
#include <iostream>
using namespace irr;

#pragma comment(lib, "Irrlicht.lib")

int main()
{

    video::E_DRIVER_TYPE driverType;
    driverType = video::EDT_OPENGL;

    IrrlichtDevice* device =
        createDevice(driverType, core::dimension2d(640, 480));

    if (device == 0)
        return 1; 

    device->setWindowCaption(L"Contoh masukkan file *.irr");

    video::IVideoDriver* driver = device->getVideoDriver();
    scene::ISceneManager* smgr = device->getSceneManager();


                smgr->loadScene("../../media/example.irr"); 



    smgr->addCameraSceneNodeFPS();


    while(device->run())
    if (device->isWindowActive())
    {
        driver->beginScene(true, true, video::SColor(0,200,200,200));
        smgr->drawAll();
        driver->endScene();
    }

    device->drop();
    
    return 0;
}

 

Dengan menggunakan kaedah ini dapat mengabungkan MESH, LIGHT, PARTICLE, SPRITE dalam satu world dan memudahkan pengaturcaraan.

[izmal 0]

owh..maksudnye lightmap bleh buat dlm irredit?aku dulu pakai gile untuk gi pada objek..kena try irrlicht ni..hmm..menarik! thx