Dasar-dasar Membuat Game dengan Unity Game Engine (3)

OK, pada bagian ketiga ini, kita masih melanjutkan pengenalan toolbars yang berguna untuk pengembangan game nantinya.

1. Toolbars terdiri dari lima bagian utama, sbb :

• Transform Tools -- digunakan pada saat posisi scene view aktif, berfungsi untuk menggeser, memutar, dan mengubah ukuran posisi obyek game . Anda dapat menggunakan scroll mouse untuk memperbesar dan memperkecil tampilan di layar serta bisa juga menahan mouse kanan.
•  Transform Gizmo Toggles--digunakan pada saat posisi scene view aktif, berfungsi untuk berpindah pusat rotasi obyek game dari local menjadi global dan dari pivot menjadi center (silahkan dicoba perbedaannya).
• Play/Pause/Steps Buttons--digunakanan pada saat game view aktif, berfungsi untuk menjalankan/mgenhentikan game yang kita rancang.
• Layers Drop-down, berfungsi untuk mengontrol layer yang aktif di scene view.
• Layout Drop-down, berfungsi untuk mengontrol tampilan jendela kerja, ada beberapa pilihan diantaranya 2 by 3, 4 split, wide, tall.

2.  Scene Gizmos, berfungsi untuk berpindah/mengubah sudut pandang secara cepat, letaknya di sebelah kanan atas scene view. Anda dapat berpindah-pindah sudut pandang dari perspektif, depan, belakang, atas dan bawah, kiri dan kanan,  tinggal klik saja salah satu sumbu yang aktif.

3. Inspector, merupakan bagian toolbar juga yang menampilkan secara detail bagian/sifat suatu obyek game. Perlu anda ketahui bahwa membuat game dengan untiy dibangun dengan beberapa puluh mungkin ratus obyek game, setiap obyek game ini memiliki properties seperti suara, mesh, script, cahaya dan beberapa element lainnya. Semuanya ditampilkan pada inspector ini. Cara menampilkannya, cukup anda klik salah satu obyek game pada jendela project dan anda dapat melihat inspector seperti contoh :

Pahami baik-baik !: semua properti yang ada pada inspector ini bisa dimodifikasi secara langsung. Manfaatnya kita bisa mengubah perilaku obyek game secara mudah dan cepat. caranya, nanti akan disampaikan pada saat kita mulai membuat game.

OK tahap awal pengenalan toolbars dianggap cukup dulu, nanti secara otomatis kita akan menggali tool-tool yang belum disampaikan di bagian tiga ini saat proyek pembuatan game dimulai. Tunggu di bagian empat tentang pembuatan dasar game sebagai proyek awal kita.

Dasar-dasar Membuat Game dengan Unity Game Engine (2)

Pada saat tulisan ini dibuat, Unity sudah mengeluarkan versi terbaru yaitu versi 3.5. Saya masih menggunakan versi 3.4, karena tidak terlalu jauh perbedaannya. Tahap awal turorial, mari mengenal jendela kerja dulu sbb :

1. Preview Jendela Kerja

2. User Interface Untiy terdiri dari :

Jendela Utama : Scene dan Game View. 

Kita dengan mudah bisa berpindah antara scene (rancangan yang kita buat dengan game view (aktual gameplay-nya)

Jendela Project

Jendela project merupakan tempat asset berada. Asset terdiri dari  scene, script, 3d model, tekstur, gambar dan file audio. Berikut preview-nya :

Jendela Hierarchy

Jendela hierarchy merupakan tempat obyek game yang sedang aktif dalam suatu scene. Artinya, tidak semua yang ada di dalam asset pada Jendela Project ada di Jendela Hierrarchy....begitu maksudnya.....

OK, untuk bagian kedua sementara sekian dulu, saya mau jalan-jalan dulu, nantikan bagian ketiga ya...


  

Dasar-dasar Membuat Game dengan Unity Game Engine (1)

Tulisan ini memerlukan waktu ekstra dalam menyusunnya, tujuannya agar mudah difahami oleh semua pembaca, termasuk saya. Insya Alloh kita akan gali fitur-fitur game engine Unity ini secara bertahap. Are U ready ???
Mari kita susun pertanyaan dulu...
1. Apa sih Unity itu ?
Unity adalah salah satu tool/software berbayar (ada versi trial-nya) yang didesain untuk merancang/membangun sebuah game from zero to hero hehe...
2. Mengapa Unity ?
Karena mudah dipelajari, support terhadap beberapa bahasa pemograman yang populer, dan support terhadap beberapa 3d modelling tools....dan...banyak lagi deh...
3. Dimana saya mendapatkan software ini ?
Anda dapat mendapatkannya di tautan ini..

Untuk lebih jelasnya silahkan lanjutkan ke bagian 2 ya...karena bagian 1 ini hanya pemanasan aja...

Teknik Slice di Photoshop untuk Website

Photoshop adalah editing tool yang banyak digunakan oleh para web designer. Untuk keperluan membuat header dan background misalnya, salah satu tool yang bisa digunakan adalah photoshop. Permasalahannya, apabila desain cukup banyak menggunakan gambar, maka ukuran file akan menjadi besar, walaupun sudah memakai fasilitas save for web yang sudah tersedia di Photoshop. Dampak lainnya adalah kecepatan akses web menjadi terhambat karena loading yang lambat.

Fasilitas slice yang terdapat di photoshop cukup efektif memecah gambar menjadi beberapa bagian, kelebihan lainnya adalah dapat mempercepat proses loading browser saat mengakses website yang bersangkutan.

OK, kita mulai, misalnya kita akan membuat header sbb :

Header tersebut bisa saja kita potong menjadi 4 bagian dengan menggunakan slice tool. Sebelum menggunakan slice tool, kita ikuti langkahnya step by step pembuatan header tersebut. 

1. Buka Photoshop.

2. Buat file baru dengan menggunakan Ctrl+N

3. Set ukuran file menjadi 745 x 200 pixel, resolusi 100 pixel/inc, bg color transparent

4. Pilih rectangular marquee tool. 

5. Beri fill merah

6.Buat Layer baru, beri fill abu tua, (pastikan layer 2 ada dibawah layer 1),  lihat gambar sbb :

7. Beri efek emboss dan drop shadow, caranya, klik kanan di layer 1>Blending Option. NAnti akan muncul layer style. Centang embos dan drop shadow. Hasil penerapan style ini, maka layer merah berkesan timbul dan ada bayangan.

8. Buka file baru berupa gambar mobil misalnya, sbb :

9. Drag gambar mobil ke gambar background rancangan kita, lihat gambar :

10. Pastikan letaknya di layer antara layer 1 dan 2. Pilih eraser tool, sesuaikan ukuran eraser untuk menghapus sebagian gambar mobil tadi. lihat contoh :

11. Ketikan huruf sbb, sehingga hasilnya seperti ini :

OK...urusan desain anggap selesai....sekarang kita akan menerapkan bagian penting dalam tulisan ini yaitu teknik slice, siaaaap ?

12. Klik slice tool :

14. Lalu potong gambar tersebut menjadi tiga bagian (boleh lebih) mirip kita memotong kue, hehe....

Nanti akan ada  gambar amplop disertai angka yang menunjukkan urutan nama file slice yang kita buat. Misalnya nama file background_01, backgorund_02 dan background_03. lihat contoh.

15. urusan slice ternyata gampang ya...akhirnya kita selesai, dan terkahir, pilih save for web, OK.

16. Pilih format file JPG dan resolusi high, lalu tekan save. Selesai......

Catatan : nanti anda akan memiliki 3 file, dan photoshop akan membuat secara otomatis folder image, sehingga akan mendapatkan sbb :

dan...gambar siap digunakan.....! S E L E S A I

Teknik Dasar Membuat Website dengan Flash (4)

Tulisan ini adalah bagian terakhir dari tiga tulisan sebelumnya.
Lanjuut...

1. Buka kembali file flash yang sudah dibuat sebelumnya;
2. Click layer konten, buat kotak dengan fill : None dan stroke: abu-abu;
3. Tekan F8, pilih movie clip, beri nama : konten_mc , tekan OK;
4. Double click konten_mc, klik frame 1 buat tulisan sbb (lihat gambar) :

5. click frame 2, tekan f6 untuk membuat keyframe, lalu hapus tulisan

    dan ganti dengan gambar apa saja (lihat contoh) :

6. click frame 3, tekan f6 untuk membuat keyframe, lalu hapus gambar

    dan ganti dengan tulisan (lihat contoh) :

OK...pembuatan konten sudah selesai, tinggal membuat navigasi menggunakan button dan script ya...siaap ?

7. Pilih button HOME, click kanan>action, ketikkan script sbb :

on(release) {

konten_mc.gotoAndStop(1);

}

Penjelasan : script ini untuk memberikan respon, saat mouse di-click di button Home, maka halaman akan 

berpindah ke movie clip yang sudah diberi nama konten_mc, frame ke-1

8. Pilih button PRODUCT, click kanan>action, ketikkan script sbb :

on(release) {

konten_mc.gotoAndStop(2);

}

8. Pilih button CONTACT, click kanan>action, ketikkan script sbb :

on(release) {

konten_mc.gotoAndStop(3);

}

9. Double click konten_mc, pilih frame 1, ketikkan script sbb :

stop();

Tujuannnya agar pada saat masuk ke movie clip konten_mc, maka tidak langsung menjalankan frame berikutnya, tetapi nunggu respon user menekan button. Coba tekan ctrl+enter untuk mencobanya.

Selesai sudah pekerjaan kita di flash, selanjutnya web siap di-publish, caranya...?

10. Buka Dreamweaver>HTML, pilih design view.

11.Pilih Common> Media:Flash, lalu buka file flash tadi, kemudian simpan dan tekan F12...beres deh...!

Preview-nya seperti ini :

dan ini adalah web yang siap dipublish, dan sudah bisa dilihat di browser :

Selesai....sampai ketemu di tutorial selanjutnya, diantaranya Corel Draw, Photoshop, 3D Max, After Effect, PHP, MYSQL, dll...

Teknik Dasar Membuat Website dengan Flash (3)

OK...lanjut lagi ya..., lihat posting sebelumnya disini dan disini..

Pada bagian ketiga dan keempat,  kita akan menambahkan komponen sebagai berikut :
1. Tombol Navigasi (button) beserta penggunaan action script;
2. Content Web berupa halaman beserta isinya dengan konsep movie clip;
3. Mengimport file flash (*.swf) ke dreamweaver.

Lets Go!

1. Buka file flash yang tadi.
2. Buat dua buah layer baru dengan nama konten dan navigasi (lihat gambar) :

3. Click layer navigasi, pilih Text Tool, ketikkan tulisan sbb : HOME
4. Tekan F8, pilih Button, beri nama home_btn.
5. Ketikkan PRODUCT dan CONTACT, lalu ulangi langkah 3 dan 4 untuk membuat button,
    beri nama masing-masing product_btn dan contact_btn.
Lihat gbr sbb :

6. Double click tombol HOME, sehingga saat ini kita bekerja di home_btn

7. Buat layer baru, lalu arahkan kursor ke frame hit di layer 2.

8. Drag layer 2 ke bawah layer 1 (lihat gambar).

9. Buat kotak hijau dibelakang tulisan HOME, tujuannya untuk memberikan respon 

    kepada user saat mouse memasuki area button HOME, maka akan ada animasi warna hijau.  

10. Perhatikan baik-baik gbr berikut :

11. Terapkan langkah 6 sd 9 untuk button PRODUCT dan CONTACT. OK ?

sementara bagian tiga istirahat dulu sampai disini, besok lanjut ke bagian empat (akhir yaaa..)

Teknik Dasar Membuat Website dengan Flash (2)

OK, mandi, sholat, makan (soliskan) udah...kita lanjut lagi ya...yang baru baca lihat sebelumnya ya..

Mempercantik tampilan dengan sentuhan animasi. Caranya :
1. Buat layer baru, ubah namanya menjadi animasi.
2. Buat kotak 126x210 pixel beri fill black.tempatkan rata kiri dengan background.
3. Tekan F8 untuk mengubahnya menjadi movie clip,
     ubah name menjadi : animasi dan type : movie clip
4. Double click untuk mengedit movie clip, buat layer baru, ubah namanya menjadi animasi,
    sehingga kita memiliki dua layer yaitu layer animasi dan layer kotak hitam tadi.
     Ubah namanya menjadi kotak.
5. buat animasi motion tween, dengan cara :
    - pilih layer kotak, arahkan mouse di frame 100, tekan F6 untuk membuat keyframe,
       lakukan hal yang sama untuk layer  animasi.
    - klik kanan di layer animasi>create motion tween
    - geser layer animasi di frame 0 ke ujung kiri, dan di frame 100 ke ujung kanan.
    - buat masking dengan cara klik kanan layer kotak> Mask (untuk lebih jelasnya lihat gambar)
 

6. Kembali ke jendela Scene 1 dengan cara klik scene 1, lalu tekan Ctrl+Enter....dan...

    horee..animasi  berhasil hehe....(bersambung... )

Tunggu bagian (3) ya, tentang teknik navigasi halaman dengan button,  movie clip.& polesan Action Script..sekarang saya mau bulutangkis dulu....

Teknik Dasar Membuat Website dengan Flash (1)

Langkahnya adalah sebagai berikut :

1. Buat desain background di Photoshop 600 x 400 pixel,

    kira-kira desainnya seperti ini (lihat tutorial photoshop) :

2. Buka Flash (saya menggunakan Flash 8)

3. Buat file baru: Create New>Flash Document

4. Pilih panel properties, ubah size menjadi 600 x 400 pixel.

5. Tekan Ctrl+R (import to stage) file yang tadi dibuat di Photoshop.

6. Ubah layer menjadi bg, tampilannya sbb :

berlanjut ya...(mau mandi dulu hehe...)