Jump to content
LanoV

Kelab Bina Game: Tutorial Buat Game 2d

Recommended Posts

Pergh siap ada company nak guna GE tu.. :D menarik sungguh.... aku ingat company ko tu kena upah LanoG jadi Consultant GE.. hehehe.

Hahaha... jadi consultant? Kena ada lesen consultancy tuh.. kekekeke.

Aku rasa nak sambung tutorial nie dalam masa terdekat, mungkin beberapa hari dari sekarang. So, jangan ketinggalan kawan2 semua untuk mengikuti sambungan tutorial buat game 2D shooting dengan GE ini. :ph34r:

Share this post


Link to post
Share on other sites

assalamualaikum...

sambung tutorial..? silakan LanoG.. :)

zx pon nmpk gaya nk sambung tutorial 3d dia tuh...

LanoG 2d + zx 3d = mau nyala gak pale otak nnti...wahaa :P

Edited by MalaYneuMaya

Share this post


Link to post
Share on other sites

BAHAGIAN 7: MEMASUKKAN ENEMIES

Sekarang kita akan masukkan musuh2 yang boleh dijadikan sasaran menembak dalam game ini. Sekiranya anda ingat game2 zaman dahulu, ada terdapat kapal angkasa musuh yang banyak dalam barisan dan bergerak perlahan2 turun ke bawah. Objektif utama anda ialah menghapuskan semua enemy yang ada sebelum mereka sampai ke bahagian bawah skrin. Jadi, kita akan buat beberapa aktor baru untuk enemy2 ini....

MEMBUAT PENANDA REGION

Penanda region ini digunakan sebagai asas untuk menggerakkan enemy secara berkumpulan secara serentak. Dengan adanya region ini, kita tidak perlu untuk membuat banyak event pada setiap enemy yang dihasilkan.

Seperti biasa, buat satu aktor baru dan namakannya sebagai base_enemy

gameeditor-04.jpg

Sebelum itu, klik pada butang sebelah Type: iaitu yang ada tulisan Normal dan senarai pilihan berikut dipaparkan.

gameeditor-30.jpg

Anda perlu ubah type tadi daripada Normal kepada Filled Region. Lepas klik butang Add, maka satu kotak segiempat bewarna biru dihasilkan. Inilah region yang akan digunakan untuk mengawal sejumlah aktor enemy nanti. Region ini boleh dibesar dan dikecilkan dengan mudah. Anda boleh cuba dengan tetikus anda.

MEMBUAT ENEMY PERTAMA

Sekarang kita buat dan masukkan satu aktor enemy dan namakannya sebagai enemy1.

gameeditor-04.jpg

Klik pada butang Add dan panel aktor enemy1 dipaparkan. Dan selepas itu, anda bolehlah letakkan animasi/sprite pada aktor berkenaan seperti mana proses memasukkan sprite pada panel aktor kapal angkasa anda sebelum ini. Dalam contoh ini, kita gunakan sprite kecik seperti ilustrasi di bawah dan namakannya e1. (Jika anda tak ingat, cuba rujuk balik awal tutorial ini, cuba lihat fungsi Add Animation).

gameeditor-31.jpg

Susun baik2 kedudukan region dan jugak enemy tadi dalam keadaan yang sesuai. Untuk pengetahuan anda, region berbentuk segiempat (warna biru) itu boleh dibesarkan dan dikecilkan saiznya dengan gunakan drag pakai tetikus anda. Cuba hasilkan kedudukan seperti ilustrasi dibawah ini. Latih diri anda dengan cuba besar dan kecilkan kotak region berkenaan dan sesuai kan seperti berikut.

gameeditor-32.jpg

...bersambung.

Edited by LanoG

Share this post


Link to post
Share on other sites

.... sambungan.

MEMBUAT KLON ENEMY

Sekarang anda dah ada satu aktor enemy (enemy1) yang diletakkan dalam sebuah region (base_enemy). Untuk membuat ia mengikat kedudukan mengikut kedudukan base_enemy, kita perlu setkan dahulu parent kepada enemy1 berkenaan.

Klik butang sebelah text parent: pada panel Actor Conrol untuk enemy1... dan jadikan base_enemy sebagai parent.

Kita akan gunakan satu lagi fungsi istimewa dalam GE ini iaitu klon. Ini bermakna kita boleh klonkan enemy yang ada dengan jumlah yang kita kehendaki.

Okey, cuba anda perhatikan dulu pada panel aktor untuk enemy1 ini.

gameeditor-32a.jpg

Cuba perhatikan pada butang Clone pada sebelah kanan (highlight warna kuning). Anda boleh klik pada butang Clone berkenaan dan pilihan berikutnya akan dipaparkan.

gameeditor-33.jpg

Anda boleh pilih Array. Jika anda pernah belajar pengaturcaraan sebelum ini, array biasa digunakan untuk menyimpan data2/variable yang banyak. Begitu juga halnya dengan konsep dalam GE ini. Jika kita nak klon sesebuah aktor kepada bilangan yang banyak, perlulah guna Array. Selepas anda pilih Array, panel berikut dipaparkan.

gameeditor-34.jpg

Pada panel clone array ini, anda boleh setkan berapa banyak enemy nak diklonkan. Sama ada secara mendatar atau menegak. Untuk tutorial ini, kita gunakan sebanyak 10 enemy yang disusun secara mendatar. Jangan lupa klik butang sebelah text "Distance between clones:" daripada Automatik kepada Manual.

Tetapkan jumlah berikut pada panel clone array:

Horizontal count : 10

Vertical count : 1

Dalam masa yang sama anda adjust, maka kedudukan enemy akan berubah serentak. Cuba hasilkan seperti ilustrasi berikut.

gameeditor-35.jpg

MENAMBAH ENEMY LAGI

Oleh kerana nak menembak hanya satu baris enemy tak seronok sangat, kita boleh tambah lagi enemy dengan aktor yang lain. Anda boleh ulangi proses yang sama untuk membuat enemy pertama tadi dan klonkan juga...

Okey! kita tambah satu lagi enemy dan gunakan sprite yang lain sikit misalnya untuk aktor enemy2, saya masukkan Add Animation dan gunakan sprite berikut.

gameeditor-36.jpg

Kita namakan animasi ini e2 dan gunakan sprite yang boleh bergerak (dalam gambar tu tak gerak sebab cuma screenshot jer.. hehehe). Perhatikan yang Horizontal frames ada 2 iaitu menggunakan 2 sprite untuk animasi berkenaan sahaja. Selain itu, anda boleh adjust kepantasan animasi dengan Frame rate.

... bersambung.

Edited by LanoG

Share this post


Link to post
Share on other sites

... sambungan.

Hasilnya mungkin kelihatan seperti ilustrasi berikut.

gameeditor-37.jpg

Anda boleh cuba klonkan seperti yang diajar dalam enemy1 tadi. Kali ini mungkin anda boleh tambah Vertical count untuk tambah 2 baris pada enemy2 tersebut pula.

Tetapkan jumlah berikut pada panel clone array:

Horizontal count : 10

Vertical count : 2

Adjust dan laraskan kedudukan enemy2 yang anda klonkan tadi dengan Horizontal distance dan Vertical distance dengan angka yang sesuai.... dan mungkin hasil akhir anda adalah seperti berikutnya.

gameeditor-38.jpg

Jadi sekarang kita telah memiliki sejumlah enemy yang agak banyak untuk dijadikan sasaran tembakan kapal angkasa kita nanti. Buat masa sekarang enemy yang ada ini tidak lagi berfungsi dan kita kenalah meletakkan event dan action yang sesuai pada aktor2 berkenaan nanti.

Tutorial berikutnya akan disambung pada masa yang lain, sekiranya ada masalah dalam memahami tutorial ini, silalah kemukakan soalan. Semoga berjumpa lagi.

... bersambung di lain masa.

Edited by LanoG

Share this post


Link to post
Share on other sites

Waa!! Kelas sudah bersambung.. Bagus2..

Ahaa.. dah start balik kelas GE kita nie. Sapa2 nak tambah info dipersilakan yek... :lol:

Share this post


Link to post
Share on other sites

BAHAGIAN 8: PERGERAKAN ENEMIES

Kali ini kita akan meneliti bagaimana untuk menggerakkan kesemua enemy yang kita telah hasilkan sebelum ini. Jika anda mengikuti tutorial ini dalam Bahagian 7, kesemua enemy yang jumlahnya kira-kira 30 (3 baris dengan 10 enemy setiap baris) adalah dipautkan (parent) pada region base_enemy. Sekarang kita akan cuba membuat enemy-enemy berkenaan bergerak secara serentak perlahan-lahan menghala ke bawah.

Untuk mencapai tujuan ini, kita bermula dengan membuat 2 lagi filled region sebagai sensor penjuru sebelah kiri dan kanan. Tujuan sensor ini adalah supaya kita dapat detect sebarang pergerakan yang telah sampai ke penjuru kiri dan kanan.

MEMBUAT SENSOR KANAN & KIRI

Seperti biasa, buat aktor dan namakannya sebagai sensor_right untuk menjadikannya sensor sebelah kanan.

gameeditor-04.jpg

Tukar Type kepada Filled Region.

gameeditor-30.jpg

Seterusnya dalam pilih balik region base_enemyy dan pada panel actor base_enemy tersebut anda klik pada butang Event: Add dan senarai berikut dipaparkan.

gameeditor-40.jpg

Pilih Collision dan panel Collision Event berikutnya dipaparkan.

gameeditor-41.jpg

Dalam panel tersebut, anda namakan Of actor: sensor_right dan seterusnya klik pada butang Edit Action, satu senarai pilihan dipaparkan. Anda boleh pilih Script Editor sebab kita akan menulis sedikit skrip untuk event yang berlaku.

gameeditor-42.jpg

Cuba anda taipkan code yang berikut:

xvelocity = -1;
y = y + 5;

Maksud kod pada baris pertama ialah pergerakan ke kiri base_enemy.

Maksud kod pada baris kedua ialah pergerakan ke bawah base_enemy.

Secara ringkasnya, apabila enemy_base bergerak dan berlanggar dengan sensor_right maka kod tersebut di aktifkan. Kod pada baris pertama akan menukar pergerakan ke kiri apabila tersentuh dengan sensor_right manakala kod baris kedua akan menurunkan enemy_base ke bawah dalam masa yang sama.

... bersambung.

Edited by LanoG

Share this post


Link to post
Share on other sites

... sambungan.

Dan seperti biasa, anda klik butang Ok pada panel berkenaan dan pilihlah Immediate action.

gameeditor-21.jpg

Untuk membuat region sensor_left pula, ulangi proses yang sama seperti tadi. Anda boleh adjust kedua-dua sensor_right dan sensor_left seperti mana dalam ilustrasi berikut.

gameeditor-39.jpg

Pada panel aktor base_enemy yang sama seperti tadi, jangan lupa untuk setkan pada panel Collision event sebelah kiri seperti berikut.

gameeditor-43.jpg

Dan juga kod untuk sebelah kiri pula adalah seperti berikutnya.

gameeditor-44.jpg

xvelocity = 1;
y = y + 5;

Jika anda meneliti kod berkenaan ianya adalah hampir2 sama seperti kod untuk collision pada sebelah kanan tadi.

... bersambung.

Edited by LanoG

Share this post


Link to post
Share on other sites

... sambungan.

MEWUJUDKAN KOD PERMULAAN ENEMY

Sebelum anda enemy-enemy ini boleh bergerak, kita perlu meletakkan satu lagi event dalam penanda region enemy_base. Oleh itu, cuba buka actor control enemy_base dan klik pada Event: Add, seterusnya pilih Create actor dalam senarai berkenaan.

gameeditor-24b.jpg

Seterusnya dalam panel Create Actor Event tersebut, klik butang Add Action dan pilih pula Script editor dan taipkan kod berikut untuk mewujudkan permulaan aktor.

xvelocity = 1;

gameeditor-21.jpg

Seperti biasa klik Ok dan pilih Immediate action.

MENGUJI PERGERAKAN ENEMY

Cuba anda uji dengan pergi ke Game Mode... kemungkinan enemy-enemy yang berkumpulan ini bergerak menghala ke kanan dahulu dan seterusnya menurun ke bawah dan bergerak ke kiri pula. Ianya akan berterusan bergerak sehingga ke bawah.

gameeditor-45.jpg

gameeditor-46.jpg

EDIT: Ada bahagian yang tertinggal sebelum ini telah diupdate.

Edited by LanoG

Share this post


Link to post
Share on other sites

assalamualaikum...

LanoG, nk tanya post #78 - penanda region tu berada atas lapisan actor enemy1 n enemy2 ker? susah ler nk adjust lepas dh parent kn..

oo.. jadi ini brmkna kotak biru tula yg berlanggar atr satu sama lain menghasilkn event collision?

Share this post


Link to post
Share on other sites

assalamualaikum...

LanoG, nk tanya post #78 - penanda region tu berada atas lapisan actor enemy1 n enemy2 ker? susah ler nk adjust lepas dh parent kn..

oo.. jadi ini brmkna kotak biru tula yg berlanggar atr satu sama lain menghasilkn event collision?

Walaikumsalam.

Apabila anda dah letak aktor pada penanda region tuh memang agak sukar nak adjust kedudukan aktor berkenaan. Oleh itu, dicadangkan supaya anda letak kat luar penanda region berkenaan (enemy_base) dahulu supaya senang nak adjust kat mana2. Kalo nak adjust kedudukan, jangan ler dulu 'parent'kan enemy1 dan enemy2 tuh.

Dalam post #78 tersebut sememangnya kita gunakan filled region (enemy_base) untuk menggerakkan aktor2 yang banyak secara serentak. Kira kita gunakan 2 filled region lagi untuk menghasilkan event collision iaitu halangan sebelah kanan (sensor_right) dan halangan sebelah kiri (sensor_left). Ianya seolah-olah pengesan yang mengesan sebarang perlanggaran di bahagian tepi penjuru kiri/kanan permainan.

Konsep filled region yang dipautkan ini macam anda letakkan kertas atas meja, lepas tu letakkan pula pensil atas kertas berkenaan. Jika anda gerakkan kertas tersebut, pensil pun turut ikut sama.

Ahahah, bagus2... memang cepat en. MalaYneuMaya memahami tutorial ini....!!

Edited by LanoG

Share this post


Link to post
Share on other sites

UJIAN PEMAHAMAN

Setakat ini, berapa banyak kah aktor yang telah dihasilkan? (sila rujuk screenshot dibawah)

Jawapan: ..................

gameeditor-39.jpg

Edited by LanoG

Share this post


Link to post
Share on other sites

assalamualaikum...

hmm... :) yg aku prasan:

enemy1 = dari 1 klonkan jadi suma = 10 (angah,acik,...haha tipu jer.. :P)

enemy2 = dari 1 klonkan jadi suma = 20 (10 X 2)

filled region = 3 (sensor_left,base_enemy,sensor_right)

kapal ijau = 1 (space_ship)

peluru = 1 (ship-shot)

SUMA SKALI = 35 actor

Share this post


Link to post
Share on other sites

MalaYneuMaya,

Cuba perhati betul2... maybe ada yang tertinggal tuh. :)

EDIT:

Baiklah, semua jawapan yang diberikan oleh MalaYneuMaya memang tepat.

Tetapi ada tertinggal satu saja yang mungkin tak perasan iaitu View Actor. Ianya adalah aktor istimewa iaitu kotak segiempat sama bewarna putih yang digunakan untuk view (pandangan) pada sesebuah game. Jika anda ingat balik, view aktor ini kita boleh setkan saiz sesebuah tingkap permainan dan juga kesesuaiannya dengan platform yang digunakan.

Oleh sebab itu ada sebanyak 36 aktor semuanya yang telah kita hasilkan.

Edited by LanoG

Share this post


Link to post
Share on other sites

assalamualaikum...

ooo...camtu ker? :o

xtau plak aku view actor tu pon kira actor gak..haha

puasla aku belek2 apa yg ttinggal...

Share this post


Link to post
Share on other sites

Nampaknya, mood aku nak buat tutorial minggu nie agak menurun sebab agak busy dengan keje dan masalah2 lain yang tak dapat dielakkan. Insya'allah aku akan sambung selepas mood aku dah pulih seperti biasa nanti... hehehe.

Pada tutorial berikutnya nanti kita akan explore pula beberapa fungsi yang lain dan lengkapkan lagi game nie.

1. keupayaan untuk menyebabkan enemy-enemy musnah apabila ditembak.

2. keupayaan enemy-enemy untuk menembak ke arah kapal angkasa kita.

3. kapal angkasa kita musnah jika terkena peluru enemy berkenaan.

Sementara itu, anda bolehlah terus menguji dan try sendiri keupayaan yang ada dalam GE ini. Sesiapa nak tambah pun amat dialu-alukan... :)

Share this post


Link to post
Share on other sites

assalamualaikum...

hmm...sepi tapi tak mati...hehe :)

Edited by MalaYneuMaya

Share this post


Link to post
Share on other sites

I am back! :lol:

Hehehe... ye lah memang ramai busy semenjak dua menjak kebelakangan nie. Tapi ini tidak bererti KBG tidak bergerak, cuma slow sikit ler sebab masing2 ada komitmen... betul tak!

Kita sambung tutorial nie pas nie....

BAHAGIAN 8: MEMUSNAHKAN ENEMY BILA KENA TEMBAKAN

Oleh kerana apabila kita tembak (tekan Control!) enemy-enemy berkenaan tidak musnah, kita akan setkan pula peluru yang kita gunakan supaya boleh memusnahkan enemy berkenaan apabila terkena. Langkah seterusnya adalah seperti berikut.

Klik pada aktor peluru anda iaitu ship_shot dan buka panel actor controlnya.

gameeditor-47.jpg

Klik pada butang Add dalam bahagian Event (cuba check butang yang highlighted dengan warna oren diatas) dan senarai berikut dipaparkan:

gameeditor-48.jpg

SETKAN PERLANGGARAN PELURU DENGAN ENEMY1

Pilih Collision daripada senarai berkenaan dan panel Collision Event berikut dipaparkan.

gameeditor-49.jpg

Panel ini sebenarnya akan membolehkan kita membuat setting untuk sebarang perlanggaran (collision) dengan lain2 actor dan kita boleh kawal bahagimana cara perlanggaran itu berlaku dan akibat daripadanya. Sekarang, cuba klik pada butang kosong sebelah Of actor: berkenaan dan senarai actor berikut dipaparkan.

gameeditor-50.jpg

Anda pilih dahulu +enemy1 sebab kita mahukan semua enemy1 termasuk klon-klon (10 klon enemy1)

Oleh itu kita sudah setkan apabila berlaku perlanggaran dengan sebarang klon enemy1, maka akan berlaku pula peristiwa yang bakal kita setkan kemudian nanti.

Baiklah pada panel Collision Event yang sama... kita pilih pula apa yang akan berlaku apabila perlanggaran terjadi. Jadi klik pada butang Add Action dan senarai berikut ditayangkan pula.

gameeditor-51.jpg

... bersambung.

Edited by LanoG

Share this post


Link to post
Share on other sites

... sambungan.

Apabila anda memilih Destroy Actor daripada senarai berkenaan, maka satu lagi panel dipaparkan iaitu panel Destroy Actor seperti berikut.

gameeditor-52.jpg

Untuk kali ini anda kekalkan Actor: Event Actor yang ada dalam panel berkenaan. Klik terus pada butang Add dan pilihlah Immdiate Action seperti biasa.

gameeditor-21.jpg

Baiklah, apabila anda kembali ke panel asal Collision Event.

gameeditor-49.jpg

Kita sekali lagi akan klik pada butang Add Action dan dalam senarai pilih sekali lagi Destroy Actor.

gameeditor-51.jpg

Seperti mana proses pertama, panel Dastroy Actor dipaparkan.

gameeditor-52.jpg

Kali ini kita akan ubah Actor: Event Actor kepada benda lain. Oleh itu, cuba anda klik pada butang Event Actor berkenaan dan senarai berikutnya dipaparkan.

... bersambung.

Edited by LanoG

Share this post


Link to post
Share on other sites

... sambungan.

gameeditor-53.jpg

Dalam senarai berkenaan pula kita pilih Collide Actor agar sebarang perlanggaran akan memusnahkan aktor.

gameeditor-54.jpg

Dan seperti biasa, klik pada butang Add dan pilihlah Immediate Action.

gameeditor-21.jpg

SETKAN PERLANGGARAN PELURU DENGAN ENEMY2

Ulangi proses yang sama seperti tadi... cuma anda ubah actor daripada enemy1 kepada enemy2 sahaja.

MENGUJI GAME

Sekarang anda boleh uji game anda dengan pergi ke Game Mode. Cuba gunkan kekunci Control, anakpanah kiri/kanan dan perhatikan bagaimana enemy-enemy termusnah apabila peluru anda (ship_shot) mengenai setiap enemy.

gameeditor-55.jpg

Edited by LanoG

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...