Jump to content
LanoV

Kelab Bina Game: Tutorial Buat Game 2d

Recommended Posts

assalamualaikum...

hmmm. :) aku dh tgk2 sample dia.... aku rasa mmg sng nk wat game pkai prog nih

dan ianya sesuai tuk beginner nk wat game... sbab coding dia dh digantikan dgn u-friendly interface .

smntara menunggu tutorial, aku belek2 lar duluh prog tuh... :D

Share this post


Link to post
Share on other sites

BAHAGIAN 2: BINA ACTOR

Dalam bahagian ini sebenarnya kita dah bermula untuk menghasilkan game secara langkah demi langkah dengan ilustrasi demi menyenangkan untuk kita faham bersama-sama. Baiklah, game 2D yang akan kita bina ini adalah SPACE INVADER iaitu game tembak2 mini zaman MSDOS dulu. Sebenarnya, terdapat internal tutorial yang mengajar kita buat game nie secara step by step dalam Game Editor. Disini, kita akan lebih 'deliberate' akan setiap langkah yang dibuat.

Pada MENU Game Editor anda iaitu:

gameeditor-a3.jpg

Cuba klik pada butang ADD ACTOR dan panel berikut pula akan dipaparkan.

gameeditor-04.jpg

Berikan nama dengan menaip dalam tajuk Name tu. Letak le.... nama apa2 misalnya space_ship. Selepas itu, satu gambar macam pac-man macam kat bawah nie, akan muncul. Ahhhaa.. anda dah berjaya membuat sebuah Actor...

gameeditor-05.jpg

Aktor inilah yang menjadi tulang belakang game yang dihasilkan dalam Game Editor. Cuba anda klik-kanan tetikus pada actor berkenaan. Muncul pula tingkap berikut.

gameeditor-06.jpg

Cuba pilih ACTOR CONTROL... dan satu panel Actor Control akan dipaparkan seperti berikut.

gameeditor-a7.jpg

Cuba pahami dan biasakan diri dulu panel menu Actor Control ini, sebab disinilah kita akan membuat kawalan ke atas Actor kita nanti. Ianya seumpama pusat kawalan yang mengawal segala maklumat dan aliran sesebuah aktor.

Edited by LanoG

Share this post


Link to post
Share on other sites

Zsuperxtreme,

Aku baru je nak start nie... hehehe. So, nak link dia ialah http://game-editor.com/

Cuba install DEMO VERSION. Dengan version nie kita boleh buat game 2D nanti.

MalayNeuMaya,

Walaikumsalam. Memang betul cakap ko tu. Sebab dia punya interface memang mudah nak paham. Untuk pengetahuan korang, Game-editor dibina dengan bahasa C. Oleh itu, sapa2 yang ada basic bahasa C, lagi senang nak paham sedikit Scripting yang boleh juga digunakan dalam Game-editor nie nanti.

Share this post


Link to post
Share on other sites

BAHAGIAN 3: SETKAN RESOLUTION

Lanjutan daripada bahagian 2 tadi, kita mungkin hendak membina game dalam saiz2 yang tertentu. Oleh kerana game yang bakal dihasilkan adalah bersaiz mini, mungkin kita boleh setkan dulu resolution yang bakal digunakan. Baiklah, seterusnya, pada MENU Game Editor ini,

gameeditor-a3.jpg

Pilih CONFIG dan senarai berikut dipaparkan untuk anda pilih configurasi game berkenaan.

gameeditor-08.jpg

Pilih GAME PROPERTIES, dan seterusnya panel kawalan Game Properties berikut akan ditunjukkan.

gameeditor-09.jpg

Cuba perhatikan betul2 didalam panel kawalan Game Properties berkenaan, terdapat bermacam2 perkara kita boleh setkan bagaimana rupebentuk game yang kita hasilkan nanti. Buat masa sekarang, cuba tumpukan dahulu pada GAME RESOLUTION dengan klik pada butang disebelahnya. Setelah anda klik, senarai resolusi skrin yang berikut akan dipaparkan.

gameeditor-10.jpg

Terdapat banyak senarai resolusi yang boleh anda pilih. Buat masa sekarang, untuk game kita ini, cuba pilih saiz 240 x 320 iaitu saiz Smartphone.... (mana tahu lepas nie boleh transfer ke Smartphone pulak, kan... hehehe). Jika anda pilih saiz tersebut bermakna, 240 adalah lebar dan 320 adalah panjang skrin yang akan digunakan.

Berikutnya, saiz segiempat bewarna putih kat tengah2 tu akan mengecil dan anda boleh gerakkan ia disekitar skrin suntingan Game editor berkenaan. Cuba anda gerakkan kotak segiempat berkenaan dan letakkan bersama Actor yang dah kita buat tadi seperti berikut.

gameeditor-11.jpg

Edited by LanoG

Share this post


Link to post
Share on other sites

... sambungan.

MENGUJI RESOLUTION

Untuk menguji resolusi yang kita dah setkan tadi, cuba anda tengok pada Menu Game Editor.

gameeditor-a3.jpg

Cuba klik pada GAME MODE. Ini akan membuatkan game tersebut dijalankan (walaupun belum siap...) untuk tujuan ujian. Paparan berikut akan dihasilkan dengan sebuah tetingkap saiz yang kita dah setkan awal tadi.

gameeditor-12.jpg

Kelihatan bagaimana gambar pac-man (iaitu Actor) yang kita dah buat awal2 tadi. Cuba perhatikan saiz tetingkap berkenaan sememang kecik (...dan sesuai untuk Smartphone) untuk game mini yang bakal kita buat nanti.

Untuk keluar daripada Game Mode, anda boleh tekan kekunci ESC kat keyboard atau boleh klik tanda X kat penjuru atas kanan tetingkap berkenaan (macam biasa ler.. takyah nak ajar dah benda nie.. hehehe).

So far macam mana kawan2 semua, kalo tak jelas dan tak paham bagitau arrr...

Edited by LanoG

Share this post


Link to post
Share on other sites

BAHAGIAN 4: MEMASUKKAN IMEJ

Sekarang kita gantikan pulak imej pac-man tu kepada satu imej yang akan digunakan dalam game kita ini. Oleh kerana di dalam folder Game Editor sendiri terdapat fail2 yang sesuai untuk dijadikan karektor dalam game, maka kita boleh gunakannya dalam tutorial ini.

Klik-kanan tetikus dan pilih ACTOR CONTROL untuk paparkan panel actor control seperti berikut.

gameeditor-a7.jpg

Di dalam panel ini, terdapat ruangan ANIMATION. Di dalam kategori ini, cuba klik pada butang ADD ANIMATION. Panel berikutnya akan dipaparkan.

gameeditor-13.jpg

Pada panel ini pula, cuba anda klik pada butang-kanan sebelah nama FILE untuk mencari fail grafik yang akan digunakan sebagai imej aktor berkenaan. Setelah anda klik, maka tetingkap membuka file berikut akan dipaparkan untuk anda memilih fail yang bersesuaian.

gameeditor-14.jpg

Untuk tutorial ini, kita akan pilih fail bitmap spaceShip.bmp dan bolehlah anda klik butang open. Selanjutnya, kembali kepada panel Add Animation dan imej kapal angkasa ringkas ditayangkan pada kotak segiempat sebelah kanan sekali seperti berikut.

gameeditor-15.jpg

Klik butang OK dan sekarang kita telah pun mempunyai imej untuk Actor kita.

gameeditor-16.jpg

Diharap langkah2 mudah ini (siap dengan ilustrasi sekali) dapat menerangkan konsep asas dalam Game Editor. Oleh kerana sekarang (waktu aku tulis tutorial nie...) sudah pukul 3 pagi, maka kita berhenti setakat ini dulu. Nanti kita sambung dilain masa.... :wacko:

Edited by LanoG

Share this post


Link to post
Share on other sites

assalamualaikum...

tambah sket... :P

actor yg kita tau adlh 'pelakon'. so dlm game editor nih segala imej 2d adlh pelakon/actor xkirala bukit, kapal,tanah,bom,peluru...apa saja.

add actor - cara ini tuk 'memasukkn segala imej (2d) kedlm game' tuh...samada anim atau tidak..

musti ramai tertanya2 "kenapa gambo PACMAN? aku nk masukkn imej kapal aku..."

okelah , PACMAN tu cuma MEWAKILI actor - bukan bermakna kita tepaksa guna imej PACMAN tuh tuk game kita... :)

so bila kita tgk gambo PACMAN tu kita taula yg itu adalah 'actor yg masih kosong/default' so korang gantikan gambo PACMAN ngan imej korang guna cara LanoG...

*LanoG - pi basuh muka.. haha :D

Share this post


Link to post
Share on other sites

Yup... memang tepat sekali kata2 MalayNeuMaya. Sama-samalah kita belajar tool ini untuk buat game. Banyak function lain kita bleh gunakan.., anda tak akan sangka banyak company2 pembuat game menggunakan tool yang sama. Walaupun kaedah pembinaan game dalam Game Editor seolah-olah ianya adalah berasaskan objek, namun sebenarnya ia adalah berstruktur.

ps./ pening sikit arini, tido lewat. MalayNeu.... kalo ko nak sambung ke, tambahkan ke info dalam nie... dialu-alukan..ehhehehe :)

Share this post


Link to post
Share on other sites

Dalam game maker nie ada programming tak?

Jawapan: Ada.

Scripting dalam Game-editor adalah dalam language C. So, sapa2 yang dah mahir dalam language C, ada kelebihan.... Bagi pengguna advance, scripting amat penting untuk memberikan lebih kebebasan dalam mengawal "actor" dan "event" yang kita gunakan. Dalam tool ini ada terdapat Script Editor... nanti kita akan mengulas lebih lanjut berkenaan bagaimana nak buat scripting yang simple..

Edited by LanoG

Share this post


Link to post
Share on other sites

Actually boleh bagi sample mcm mana nak combine C Script dengan entity?

Jawapan: BOLEH.

Dalam sambungan tutorial berikutnya ini, akan diterangkan berkenaan penggunaan script bagi membentuk "Event-driven" yang nak kita berikan kepada sesebuah entiti. Tunggu...... (aku nak prepare dulu screenshot2..... hehehehe, diharap bersabar!). :lol:

Share this post


Link to post
Share on other sites

Hehe.. pendek je jawapan ko kan.. kekeke

soalan lagi...

Bolehkah kita buat online-game (MO) menggunakan game editor? Kalau boleh adakah encik lanog akan tolong ajarkan.. hehe

EDIT: Silap produk la....

Edited by zsuperxtreme

Share this post


Link to post
Share on other sites

Hehe.. pendek je jawapan ko kan.. kekeke

soalan lagi...

Bolehkah kita buat online-game (MO) menggunakan game editor? Kalau boleh adakah encik lanog akan tolong ajarkan.. hehe

EDIT: Silap produk la....

Jawapan: TIDAK BOLEH.

Game-editor versi sedia ada tidak mempunyai function untuk membuat game secara online dan juga tidak memiliki keupayaan untuk membuat game secara multi-player. Namun begitu, pada version berikutnya, pereka Game-editor berjanji untuk menambahkan feature multi-player ini.

Share this post


Link to post
Share on other sites

BAHAGIAN 5: SETKAN KAWALAN

Dalam bahagian ini, kita akan cuba memberikan kawalan ke atas kapal angkasa (space_ship) kita tadi supaya boleh bergerak ke kiri dan ke kanan. Biasanya kita akan gunakan kekunci anak panah (arrow) pada keyboard untuk mengawal pergerakan karektor utama. Baiklah, sekarang kita sambung tutorial ini.

Seperti biasa, klik-kanan mouse pada imej kapal angkasa berkenaan dan pilih panel ACTOR CONTROL.

gameeditor-a7.jpg

Dalam panel di atas, kita akan perhatikan satu lagi fungsi iaitu EVENT. Ianya adalah untuk mensetkan peristiwa yang berlaku dan apakah tindakan susulan yang ingin kita hasilkan akibat peristiwa berkenaan. Cuba anda klik pada butang ADD dalam kategori Event. Senarai berikut akan dipaparkan...

gameeditor-17.jpg

Perhatikan terdapat berbagai-bagai event (peristiwa) yang kita boleh masukkan. Oleh kerana peristiwa yang ingin kita setkan ialah apabila menekan butang anakpanah Kanan (right-arrow key) dan Kiri (left-arrow key), maka kita pilih KEY DOWN. Klik pada Key Down dalam senarai tersebut.

Selanjutnya panel Key Down Event akan dipaparkan seperti berikut...

gameeditor-18.jpg

Perhatikan ruangan kosong sebelah Keys: tersebut. Cuba anda tekan kekunci anak-panah ke kanan. Hasilnya, perkataan 'right' akan ditayangkan. Ini adalah tempat dimana kita setkan arahan apabila kekunci ditekan. Untuk kali ini, kita setkan kekunci anakpanah ke kanan dahulu.

Selanjutnya, pada panel yang sama... cuba anda klik pada butang Add Action. Ini bertujuan untuk mengarahkan tindakan susulan apabila kita menekan kekunci anak panah kanan pada keyboard tadi. Senarai berikut akan dipaparkan...

gameeditor-19.jpg

Ini merupakan senarai Action iaitu tindakbalas apabila sesuatu Event diaktifkan. Dalam kes ini, kita mahukan kapal angkasa tersebut bergerak ke kanan apabila kita menekan kekunci anakpanah kanan. Oleh itu, kita perlu menggunakan Script Editor untuk berbuat demikian. Pada senarai, pilih Script Editor....

gameeditor-20.jpg

Disinilah kita akan menulis sedikit script C... jangan risau kepada yang tidak memahami bahasa pengaturcaraan. Ianya sangat mudah untuk dilaksanakan.

Edited by LanoG

Share this post


Link to post
Share on other sites

.... sambungan.

Di dalam Script Editor berkenaan, kita akan menulis sedikit code. Oleh kerana Action yang hendak kita buat ialah menggerakkan kapal angkasa ke kanan.. akibat menekan kekunci anakpanah kanan, maka code yang boleh menggerakkan Actor berkenaan ke kanan adalah seperti berikut:

x = x + 4;
Perhatikan code di atas. Makna X ialah kedudukan asal melintang (x-axis) dan X + 4 bermakna setiap kali kita menekan kekunci anakpanah kanan, maka Actor akan bergerak sebanyak 4 pixel ke kanan. Anda boleh ubahsuai berapa banyak piksel yang hendak digerakkan setiap kali menekan kekunci anakpanah kanan. Setelah anda menaip code ringkas ini, pada Script Editor berkenaan... cuba klik pada butang Add di bahagian bawah sekali. Selanjutnya pilihan berikut dipaparkan... gameeditor-21.jpg Pilih Immediate Action sebab kita mahukan tindakan ini segera dilaksanakan tanpa berlengah. Sekarang kita akan hasilkan pula pergerakan ke kiri apabila kita menekan kekunci anakpanah ke kiri. Ulangi langkah yang sama seperti tadi... bermula dengan panel Actor Control: Klik pada Events: Add --> pilih Key Down --> Tekan kekunci anakpanah Kiri --> klik Add Action --> pilih Script Editor Selanjutnya tulis code pergerakan melintang (x-axis) ke kiri iaitu:
x = x - 4;

Selepas itu jangan lupa untuk klik Add pada panel Script Editor dan pilih Immediate Action seperti tadi.

gameeditor-21.jpg

Jika ke kanan kita menambah tanda '+'... maka kalau bergerak ke kiri adalah sebaliknya, minus iaitu tanda '-'

Selanjutnya... mungkin kita ingin menguji kawalan yang dah disetkan tadi. Anda boleh klik butang Game Mode pada menu utama Game-editor.

gameeditor-22.jpg

Cuba gerakkan kapal angkasa anda ini ke kiri dan kanan menggunakan kekunci anakpanah kiri dan kanan pada keyboard anda. Sudah pasti ianya boleh digerakkan dengan mudah.....

So far bagaimana kawan2 semua, kalau ada kemuskilan bolehlah bertanya atau pun mungkin ada nak tambah info ke.. memang banyak lagi kita perlu explore tool nie. Oleh kerana orang rumah aku asyik jeling2 jer aku layan komputer nie, ada baiknya aku berhenti setakat ini dulu sebelum apa2 yang tidak diingini berlaku pada aku... hehehehe. Kita akan sambung lagi lain kali... :lol:

Edited by LanoG

Share this post


Link to post
Share on other sites

Aku baru download dan test buat tutorial yang LanoG ajar.. Best gak Game Editor nie..

Aku tambah sikit tutorial edit script untuk movement space ship tu eh LanoG..

Kalo ikut tutorial LanoG skrin game adalah 240 x 320 dan paksi (0,0) terletak kat tengah2 skrin game..

Jadi ini bermakna x = 0 adalah ditengah2 skrin.. Jarak dari tengah ke sisi kiri dan kanan skrin = 120.. (240 bahagi 2)..

Dan katalah saiz actor = 20 x 20 (dalam game editor yang aku download takde fail spaceship tue..)

Kedudukan paksi-x 0 untuk actor adalah ditengah2 actor.. Jadi jarak paksi-x 0 ke sisi paling tepi aktor = 10..

Untuk elakkan spaceship tu keluar dari skrin boleh buat kat script event untuk actor tue macam nie:

//untuk gerakan ke kanan:
if (x < 110) //120-10
{
  x = x + 4;
}
else
{
  x = x;
}

//untuk gerakan ke kiri:
if (x > -110)
{
  x = x - 4;
}
else
{
  x = x;
}

Hehe tu salah satu cara.. Mungkin ada cara lain yang bakal di ajar LanoG..

Soalan:

Macamana nak set posisi awal actor?

Share this post


Link to post
Share on other sites

Soalan

1. Kalau takde template multiplayer dalam game editor, boleh ke kita buat api *.DLL (C++), utk diimport ke dalam C Script?

2. Bolehkah kita buat game hanya menggunakan programmng C Script kat game editor, tanpa menggunakan interface?

Share this post


Link to post
Share on other sites

B1naryc0de,

Hahahah... bagus2, memang amat berguna info tambahan nie. Inilah kelebihan apabila dah tahu bahasa C, kan. Sebenarnya ada lagi teknik lain untuk mensetkan tindakan sama seperti dalam code yang ditulis beliau. Nanti akan diterangkan jugak step-by-step...

Soalan:

Macamana nak set posisi awal actor?

Jawapan: MUDAH SAJA.

Nak setkan posisi awal sesebuah actor bergantung kepada bagaimana kita mahu actor disetkan. Misalnya kita cuma pakai drag & drop je untuk setkan kedudukan awal kapal angkasa dalam tutorial nie. Kita juga boleh setkan posisi awal sesebuah actor sama ada ia berpaut pada parent actor atau sebaliknya, sama ada visible atau sebalik dan sebagainya. Dalam tutorial ini nanti, kita akan melihat bagaimana setkan posisi awal actor yang berbeza-beza mengikut keadaan.

Soalan

1. Kalau takde template multiplayer dalam game editor, boleh ke kita buat api *.DLL (C++), utk diimport ke dalam C Script?

2. Bolehkah kita buat game hanya menggunakan programmng C Script kat game editor, tanpa menggunakan interface?

Jawapan 1: TIDAK BOLEH

Game-editor tidak mempunyai feature untuk menggunakan Dynamic Link Library (DLL). Oleh itu, kita tidak dapat menggunakannya buat masa sekarang. Pada masa hadapan, fungsi ini mungkin akan ditambah.

Jawapan 2: TIDAK BOLEH

Sebenarnya kod dalam "script editor" adalah salah satu daripada Action yang diaktifkan apabila berlaku Event. Lagipun, ianya tidak menyokong semua syntak dalam C kerana ada syntax C-script yang tidak wujud dalam Script Editor. Ianya lebih kepada fungsi sokongan supaya kita boleh pelbagaikan Action dengan scripting. Oleh itu, kita tidak boleh menggunakan seluruh keyword script C kerana ada hadnya.... :)

Edited by LanoG

Share this post


Link to post
Share on other sites

Oh byk gak kelemahan game editor nie ye....

Soalan

1. Kalau kita guna core programming mcm VB & C++, kita still boleh buat game mcm dlm game editor, malah lebih baik dari itu, mcm kita boleh buat multiplayer, kita boleh buat mcm2 jenis script. Tapi kenapa tuan LanoG (hehe) pilih utk guna game editor yg byk kelemahan?

Share this post


Link to post
Share on other sites

Soalan

1. Kalau kita guna core programming mcm VB & C++, kita still boleh buat game mcm dlm game editor, malah lebih baik dari itu, mcm kita boleh buat multiplayer, kita boleh buat mcm2 jenis script. Tapi kenapa tuan LanoG (hehe) pilih utk guna game editor yg byk kelemahan?

Jawapan: Sila Rujuk Post #10

:) Pemilihan Game Editor untuk tutorial ini bukan kerana kelemahannya, tetapi lebih kepada kelebihannya. Disini kita tidak bercadang untuk mendedahkan asas scripting yang sangat complex (tidak sesuai untuk beginner...). Bagi mereka yang sudah mahir dalam core programming, digalakkan boleh beralih terus untuk mendalami core programming berkenaan. Tujuan utama tutorial ini ialah mendedahkan konsep asas untuk menarik minat sesiapa sahaja yang ingin membina game ringkas mereka dengan seronok.

Kita perlu paham bahawa tidak semua orang adalah hard-core programmer... sedikit sebanyak, dengan adanya tool ini dapat memudahkan mereka membuat game ringkas yang pertama. Malahan bagi sesiapa yang belum pernah buat game, akhirnya akan mampu membina game yang lengkap akhirnya. Inilah objektif utama tutorial ini......

Edited by LanoG

Share this post


Link to post
Share on other sites

assalamualaikum...

hmm.. :) teringat lak aku game DemonStar...

suka tul aku main game tuh...

err...C ngan C++ xjauh beza kan?

Edited by MalaYneuMaya

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...