Welcome to tridi game development

In this blog, i'll try to explain how to create game, tips and tricks to develop game, especially using my 3D engine, tridi - in English and Indonesia.

Tampilkan postingan dengan label modelling. Tampilkan semua postingan
Tampilkan postingan dengan label modelling. Tampilkan semua postingan

Bricks, Modelling With Blender (Indonesia)

Blender

Blender adalah program gratis untuk membuat, memanipulasi dan membuat animasi objek 3D. Dan Blender juga dimanfaatkan untuk membuat film-film animasi. Di kesempatan ini kita akan belajar memakai blender untuk membuat objek dengan teksturnya, belum menggunakan animasi.

Untuk mendownload blender terbaru silahkan: Blender 2.46 fr Windows

Memakai Blender

Pertama-tama, anda perlu memiliki panduan shortcut, berikut adalah gambar shortcut untuk 2 mode. SIlahkan download dan kalo perlu dicetak.



Atau kunjungi situs : Blender Interface

Ayo mulai memakai blender. Jalankan blender dan anda akan mendapatkan tampilan seperi ini.

Mulau membuat model Papan

Pada saat membuka blender, anda akan melihat sebuah kotak, kecuali blender sudah anda seting2. Untuk mengubah pandangan dari depan, hidupkan numlock dan tekan tombol "1" di numpad.

Pilih kotak tadi dengan klik kanan. Kemudian tekan Tab untuk masuh ke mode edit. Akan terlihat titik2 berwarna kuning/ungu. Tekan "a" 1 ato 2 kali sampe titik2 tersebut berwarna kuning.

Nah sekarang kotak tersebut perlu diskala, tekan "s" diikuti "z", maksudnya skalanya hanya untuk sumbu z saja, kemudian gerakkan mouse.

Nah, papan sudah siap. Zoom +, - menggunakan scroll mouse. Klik dan tahan tombol tengah mouse gerakkan ke bawah dan sedikit ke kiri ato kanan. Tekan "z" untuk mengubah mode preview, usahakan sampai seperti ini.

Setelah itu lepas pilihan titik-titik dengan tombol "a". Pilih 2 titik berdekatan vertikal di pojok kiri. Caranya dengan menahan tombol Shift kemudian mengklik kanan kedua titik. Tanpa menekan shift, anda akan hanya memilih 1 titik saja.

Image Hosted by ImageShack.us

Kemudian tekan "Ctrl"+e, trus pilih "Mark as seam". Lakukan untuk sudut2 yang lain (ada 4 sudut) sampai seperti ini. Kalau salah, bisa dihilangkan dengan "Clear seam"

Image Hosted by ImageShack.us

Seam digunakan blender untuk membantu proses UV unwrap. Tanpa seampun sebenernya bisa, tapi hasilnya kurang maksimal.

Setelah selesai membuat seam, mari kita ganti mode window di bawah dengan UV/Image editing.

Image Hosted by ImageShack.us

Setelah itu, letakkan cursor mouse di window bawah, kemudian pilih menu Image->New image atau menekan tomvol "Alt"+"n". Set ukurannya ke 256x256. Setelah itu, geser cursor mouse ke window 3D (atas) kemudian pilih semua titik dengan "a" (1/2 kali). Kemdian tekan tombol "u" pilih unwrap (atas sendiri). Atau arahkan cursor mouse ke window UV editing, trus tekan "e". Hasilnya seperti ini.

Image Hosted by ImageShack.usUntuk mulai menggambar tekstur, geser dulu header dari window UV/Image editing, caranya klik mouse tengah dan tahan di tulisan menu (sembarang), kemudian geser ke kiri sampai terlihat tombol pensil.Lepas mouse kemudian klik tombol pensil tersebut. nah sekarang anda bisa menggambar di window ini, untuk mengubah opsi kuas yang digunakan tekan tombol "c". Agar tampil di objek 3D pilih mode preview ke "Textured".

Image Hosted by ImageShack.us

Atau anda bisa langsung menggambar di objek 3D (3D window), namun harus mengeset mode editnya ke Texture Paint..

Image Hosted by ImageShack.us

Tip:

  • Pakai klik+tahan+drag tombol tengah mouse untuk merotasi tampilan 3D.
  • Gunakan "Shift" + langkah diatas untuk menggeser tampilan ke kiri,kanan, atas,bawah.
  • Scroll untuk zoom.
  • Numpad 1:tampilan muka, 3:samping, 7:atas

Namai objek tersebut dengan menkan tombol "n" pada 3D window. Ganti OB:Cube menjadi OB:pad. Kata OB: tidak bisa diganti :) . Tekan "n" lagi untuk menutup window properti.

Simpan file ini dengan nama bricksmodel.blend, simpan juga gambar teksturnya dengan menekan tombol "Alt"+"s" tapi cursor mouse harus di window UV editing. Beri nama "player", trus ganti type menjadi BMP (defaultnya kalo gak salah "Targa" atau "PNG").

Membuat bola

Ubah tampilan dengan "z" sampai mendapatkan mode wireframe (garis saja). Ubah pandangan dari depan ("1" numpad) klik kiri di tengah layar (di titik tengah kotak tadi), ubah dari atas ("7" numpad). Klik tengah kotak tadi. Ini supaya nanti bolanya di tengah.

Tekan tombol "spasi" pilih add->mesh->icosphere. Kemudian tekan "n" (object properties) dan set LocX,LocY,LocZ ke 0,0,0. beri nama juga, sebagai "ball". Resize bola dengan menekan tombol "s" sampai seperti ini kira-kira.

Image Hosted by ImageShack.us

Mari fokus ke bola saja. Pilih kotak papan (klik kanan) kemudian tekan "h". Untuk memunculkannya lagi, tekan "Alt"+"h". Zoom ke bola kemudian tekan "tab" untuk masuk ke Edit mode.

Seperti kotak tadi, kita perlu memberikan seam ke objek bola ini. Caranya mudah, kita belah saja bola ini. Pertama lepas semua titik dengan tombol "a", kemudian dengan cara pemilihan yg khusus. Tekan "b" 2 kali sampai mendapat cursor berbentuk lingkaran. Gunakan scroll untuk membesar kecilkan lingkaran. Pilih dengan cara seperti menarik garis/menggambar ke semua titik diagonal. Kemudian tekan "tab" setelah itu tekan "Ctrl"+"e" dan pilih "mark seam".

Memilih dengan klik kanan hanya akan memilih titik yg tampak saja, sedangkan dengan "b" akan memilih titik-titik yg tidak tampak juga (titik di belakang).

Image Hosted by ImageShack.us

Setelah itu tinggal di Unwrap, pilih semua titik dengan tombol "a" kemudian tekan "u" pilih Unwrap. hasilnya akan seperti ini.

Image Hosted by ImageShack.us

Jangan lupa mengimpan file simpan juga tekstur bola sebagai ball.bmp

Untuk membuat model bata , caranya sama seperti membuat papan, atau lebih baik papannya diduplikat saja dengan "Shift"+"D". Trus untuk tekstur, buat gambar baru (New image).

  1. Beri nama "brick", set LocX,Y,Z ke 0,0,0
  2. Save texture as brick.bmp
Hasilnya kira-kira seperti ini:



Setelah puas dengan hasilnya, maka perlu dicek lagi. Pilih objek papan, tekan "n" dan set DimX, DimY, DimZ ke 2,2,0.25. Set dimensi bola ke 0.3,0.3,0.3 dan batu bata ke 1,1,0.5.

Angka-angka tersebut nantinya akan memudahkan membuat logic tubrukan antara bola dengan papan dan bata.

Terakhir, kita buat background dinding, ini diperlukan supaya efek bayangan bisa terjadi.

Tambahkan objek dengan menekan
"Space"->Add->Mesh->Plane. Set LocX,Y,Z ke 0,0,0.
Anda dapat menyembunyikan objek2 lain dengan menekan tombol "/" pada numpad. Masuk ke edit mode("tab").
Setelah itu tekan "w" dan pilih subdivide beberapa kali, sampai memperoleh kotak2 sebanyak 16x16. Boleh lebih atau kurang sebenarnya, tergantung selera. Nah model lembaran seperti ini tidak perlu dibuatkan semas, cukup buka editor gambar, buat texture baru (new image), ukuran 512x512 dan tekan "e" ada editor gambar untuk mendapatkan UV mapping.



Jangan lupa objek ini dinamai "wall" dan teksturnya "wall.bmp".

Nah anda sudah memiliki modelnya. Selanjutnya akan kita bahas bagaimana membuat game bricks dengan model yang sudah anda buat.

Bricks, Modelling With Blender

Blender

Blender is a free tool to create, manipulate and animate 3D objects. Actually you can make CG movie too using blender, but at this point, what we need to learn is creating object with texture using blender.

To download latest blender please go to: Blender 2.46 fr Windows

Using Blender

First, you need to know blender shortcuts, here an image of belnder shortcuts. I suggest, you download and print those images.



Or you can visit Blender Interface

Lets start using blender. First when you run blender, you got a user interface just like this.

Lets model the player pad

First open blender, you will get a box already. Now we will modify this box. Turn on your numlock. Press "1" on mumpad. This will change the view orientation from front.

Select the box using "right click" on the box. Press "tab" to enter edit Mode. When you in the edit mode you will see some yellow/pink pixel indicates model vertices. Press "a" to select/deselect all vertices. Press "a" 1 or 2 times until your vertices pixel all in yellow.

Now we will scale this model. Press "s", followed by "z" - this mean we scale the z only. Now move your mouse pointer to scale the object.

Now, you have the pad ready. Time to apply textures. Zoom in by scrolling the mouse scroll. Then Click and hold the middle mouse button and move the mouse down and little bit right or left until you got like this. Press the "z" until you got preview like this too.

After that, deselect all vertices, press "a" once or twice, until all vertices are pink. Select 2 vertices on the left side of the pad by holding the "shift" key and right-click near of the vertices.

Image Hosted by ImageShack.us

After that, press "ctrl"+"e", and select "Mark as seam". Do it on the other edges, dont forget to deselect vertices first. Until you got like this.

Image Hosted by ImageShack.us

Seam is used to help blender create UV mapping for this object. Without seam, blender still can unwrap this object, but not as good when we define seam.

After seam defined, to make a texture for this object. We have to change the bottom window. We change it to UV/Image Editing.

Image Hosted by ImageShack.us

After we change the window, we must "on" the window (move mouse cursor inside the bottom window) create new texture by press "alt"+"n" or use mouse and click the image menu. Set the new texture size 256x256. After that, select all vertices.Move your mouse cursor to 3D window (top) first then press "a". After that press "u", and select top most menu (unwrap). Or, you can press "e", if your mouse cursor is in the UV editor window (bottom). Here the result.

Image Hosted by ImageShack.usNow, to draw directly to the textures, you must scroll the UV window header (where the menu lies) by move mouse cursor to the header (anywhere, for ex, on the "UVs" menu). Click and hold the middle button and then move mouse (drag) left. Until you found pencil button. Release the mouse. Click the pencil button, then press "c" to view brush option and you ready to go. To move the image left, right, up and down click,hold and drag the middle mouse button. To zoom in and out, use mouse scroll. To draw, use left mouse click (hold) and move/draw directly on the image.

Image Hosted by ImageShack.us

Or you can draw directly to the 3D window (object) by selecting Texture Paint in the object mode selection combo.

Image Hosted by ImageShack.us

Tips:

  • Use click+hold+move/drag of the middle mouse button to rotating the view.
  • Use "Shift" + click+hold+move/drag to translate the view up/down/left/right.
  • Mouse Scroll to zoom in/out.
  • Numpad 1:front view, 3:side view, 7:Top view

Give the object name, open object properties ("n" button) and change OB:Cube to OB:pad (you cant change the OB:). Close again by press "n".

Now save this document, name it, bricksmodel.blend, then save the image too, move cursor to the UV editor press "Alt"+"s" or use menu "image". Save the image as "player.bmp", dont forget to change the image type to BMP, default type is PNG. You dont have to write the extension after the filename. Just set the image type to BMP and blender will automatically add .bmp.

So, this box width is 2 unit, and heith is 0.285 (on my file). To know about the size, press "n" in the 3D window, but you must exit the edit mode first (by pressing Tab).

Make the ball

Change the preview mode using "z" until we got wireframe mode. Change to the fron view using "1" at numpad. Click the center of the 3D window. Change to the top view (numpad "7") Again, click the center window, why we do this ? to ensure that center object we created later is at the point we click earlier.

Press "space" select add->mesh->icosphere. Now press "n" (object properties) and set LocX,LocY,LocZ to 0. And give name this object to "ball". Resize the ball by press "s" and move the mouse button. The ball size must be like this, compared to pad size.

Image Hosted by ImageShack.us

Lets focus on the ball. Select the "pad" object and press "h" to hide it. To un-hide, press "Alt"+"h". Select the ball, zoom the ball (mouse scroll), and change to edit mode , press "tab".

Now we have to add seams, texture, just like what we do before. Make the seams like this. To do this, first deselect all vertices (using "a"). Use special select mode, press "b" twice. Until you got circle mouse cursor. Resize the cursor using mouse scroll. Then select these vertices by left click, hold and move the cursor to those vertices. Then press tab to back to edit mode. And then make the seams using "Ctrl"+"e" and select mark as seam.

Image Hosted by ImageShack.us

By using this select method, we select all visible and invisible vertices. If we use right-click, we only can select the visible vertices. After that, we just need to create new image, size must be 256x256. And then select all vertices, and press "u" or "e" in the UV editor window. Make sure the pencil button is not pressed. And then after unwrap, press the pencil button and draw the texture (or draw directly to object).

Image Hosted by ImageShack.us

Dont forget to save the file, sometimes Blender crash (rarely). Save the texture image to as ball.bmp

To model the bricks, i think you can do the same you model the pad, or you can duplicate pad by selecting it and press "Shift"+"D" and click. The difference is only the size. But remember these :

  1. Name object as "brick", set LocX,Y,Z to 0,0,0
  2. Save texture as brick.bmp
The brick size must be like this:



Now, after you satisfied with the result, you must do final adjusment. Select pad, press "n" and set DimX, DimY, DimZ to 2,2,0.25. Set dimension for ball to 0.3,0.3,0.3 and then set brick dimension to 1,1,0.5.

Those number will help us to make gameplay logic, because tridi engine doenot have 3D collision detection we must create 2D collision using those dimension.

Last , we must make a wall for background image. We need 3D model for wall because to get "shadow" effect. Shadow only can be drawed on 3D object.

To make shadow, add object by press "Space"->Add->Mesh->Plane. Make this object LocX,Y,Z to 0,0,0. You can hide all other object and focus on this object by press "/" at numpad while this object selected. And then press "tab" to edit mode. After that, press "w" and select subdivide. Do it again until you got 16x16 box. You can go further but it will slow down our game. So now lets make the texture. A plane doesn't need a seam to get best UV unwrap. Just open the UV/Image editor, make a new image, but this time use 512x512 texture resolution. And then press "e" to unwrap (cursor on UV editing). You will got something like this.



Dont forget to name the object as "wall" and the texture as "wall.bmp".

Now, you have the model. Next we will learn how to start simple tridi application and loading 3D file.