Welcome to ariffantasi blog, enjoy reading.

[Tutorial] Adobe Flash CS3: Kawalan Dalam Permainan 2D (Bahagian 1) 1. Pengenalan

1. Pengenalan

Setiap permainan komputer perlukan pemain untuk mengawalnya. Kali ini mari kita kaji asas kawalan dalam persekitaran 2-dimensi dalam Flash. Tidak dapat dinafikan terdapat berbagai-bagai jenis permainan dengan pelbagai jenis kawalan sama ada menggunakan papan kekunci (keyboard) mahupun tetikus (mouse). Biasanya, pemain boleh mengawal sesuatu objek dalam permainan contohnya permainan tembak-menembak memerlukan seseorang mengawal kapal angkasa untuk mencapai sesuatu objektif atau misi. Dalam proses ini juga pemain akan dicabar banyak jenis musuh dan juga halangan-halangan lain.

Dalam persekitaran 2-dimensi, terdapat 360 arah (satu bulatan sama dengan 360 darjah) yang boleh diguna untuk mengarah sesuatu objek. Biasanya pemain boleh mengawal 4, 8 atau lebih arah misalnya kapal terbang yang dikawal dari perspektif atas boleh mengarah ke atas, bawah, kiri atau kanan.

2. Sistem Koordinat Cartesian

Saya percaya anda tentu pernah belajar sistem koordinat Cartesian dalam matapelajaran matematik semasa di zaman persekolahan. Sistem yang sama akan digunapakai pada sesebuah Stage dalam Flash itu sendiri. jika anda membuka aplikasi Adobe Flash dan menetapkan saiz sesebuah Stage, maka anda sebenarnya menetapkan paksi-x dan paksi-y dalam sistem koordinat berkenaan. Sebagai mengingatkan semula pelajaran matematik anda, paksi-x mewakili garisan melintang (horizontal), manakala paksi-y mewakili garisan menegak (vertical).
Dalam Flash, ada sedikit perbezaan. Sebagai contoh, katakan kita setkan saiz dokumen 300 pixel x 300 pixel, kedudukan koordinat penjuru setiap sisi adalah seperti dalam ilustrasi berikut.



Sekiranya objek anda berada pada kedudukan paksi-x=0 dan paksi-y=0, maka objek berkenaan akan berada pada kedudukan penjuru kiri atas Stage berkenaan. Oleh itu, dalam Flash atau secara spesifiknya AS3.0, anda boleh menggerakkan objek berkenaan:
  • ke kiri dengan menolak nilai pada paksi-x
  • ke kanan dengan menambah nilai pada paksi-x
  • ke atas dengan menolak nilai pada paksi-y
  • ke bawah dengan menambah nilai pada paksi-y



3.Membina Movie clip Objek

Sebagai menguji pergerakan asas dalam persekitaran 2D, sekarang kita akan cuba hasilkan satu program ringkas iaitu sebuah objek dan kita cuba gerakkan dengan kekunci anakpanah pada papan kekunci anda. Anda boleh gunakan apa sahaja objek ringkas, dalam kes ini saya akan gunakan imej kapal terbang biru yang bersaiz 50 pixel x 50 pixel seperti berikut.

Selanjutnya, kita perlu jadikan objek ini Movie clip terlebih dahulu dengan klik menu Modify, dan pilih Convert to Symbol…(F8). Namakan Movie clip ini jetHero dan klik butang OK. Jika dilihat pada Library akan wujud Movie clip baru bernama jetHero.

Pada Stage, pastikan dalam ruangan Properties anda namakan Instance Name sebagai jetHero juga seperti dalam ilustrasi berikutnya.

Berikutnya, tambah satu layer pada tetingkap Timeline dan namakan Skrip. Namakan juga layer pertama tadi dimana Movie clip kita berada sebagai Hero (atau mana-mana nama yang anda sukai).



4. Membina Enjin Kawalan Pergerakan 2D Dengan AS3.0

Seterusnya, kita akan memasukkan kod-kod ActionScript 3.0 ke dalam aplikasi ini yang seumpama enjin yang akan menggerakkan Movie clip jetHero berkenaan. Pada layer Skrip yang telah kita tambah tadi, pada frame pertama, klik kanan-mouse dan pilih Actions. Sebuah tetingkap Action-Frame akan dipaparkan, dan tulislah kod seperti berikut.


Dari baris kod 1 hingga 4, kita akan menetapkan pembolehubah (variable) jenis Boolean untuk pergerakan ke bawah, atas, kanan dan kiri. Pembolehubah Boolean hanya memiliki 2 keputusan iaitu true atau false sahaja.  Baris kod 5 pula, kita menetapkan pembolehubah lajuHero untuk mengawal kelajuan jetHero nanti. Kelajuan yang telah disetkan dalam kod ini ialah 5.


Baris kod 7 akan menjalankan fungsi (function) gerakHero apabila aplikasi memasuki frame. Baris kod 10 hingga 21 ialah ketetapan paksi-x dan paksi-y sama ada bertambah atau berkurang dengan menggunakan pembolehubah lajuHero apabila arah jetHero diubah.
Perhatikan juga dari baris kod 23 hingga 35 yang menghadkan kedudukan jetHero apabila  ia bergerak sampai ke penjuru paling atas, paling bawah, paling kiri dan paling kanan Stage.


Baris kod 37 mengarahkan listener supaya sebarang kejadian pemain menekan kekunci pada papan kekunci akan mengaktifkan fungsi tekanButang. Perhatikan dalam baris kod 40, kekunci anak panah ke bawah menggunakan keyCode 37. manakala kekunci huruf S menggunakan keyCode 65.
Ini bermakna sebarang perbuatan menekan kekunci anak panah bawah atau huruf S akan menyebabkan listener ini diaktifkan, seterusnya mengubah nilai Boolean pada pembolehubah arah_Bawah kepada true. Begitu juga halnya lain-lain kekunci yang telah disetkan. Secara umumnya keyCode yang kita gunakan:
  • keyCode 37 = kekunci anak panah bawah
  • keyCode 38 = kekunci anak panah atas
  • keyCode 39 = kekunci anak panah kanan
  • keyCode 40 = kekunci anak panah kiri
  • keyCode 65 = kekunci huruf S
  • keyCode 87 = kekunci huruf W
  • keyCode 68 = kekunci huruf D
  • keyCode 83 = kekunci huruf A
Ini bermakna pemain boleh menggunakan kekunci anak panah bawah, atas, kanan dan kiri untuk mengawal jetHero. Selain itu, pemain juga boleh menggunakan kekunci huruf S (ke bawah), huruf W (ke atas), huruf D (ke kanan) dan huruf A (ke kiri).


Baris kod 54 mengarahkan listener supaya sebarang kejadian pemain melepaskan kekunci pada papan kekunci akan mengaktifkan fungsi lepasButang. Sepertimana fungsi tekanButang, fungsi lepasButang ini akan mengaktifkan Booelan untuk setiap pembolehubah yang dikesan kepada false. Sebagai contoh, apabila pemain melepaskan kekunci anak panah bawah, maka fungsi ini teraktif dan menyebabkan pembolehubah dinyahaktifkan. Ini secara langsung akan menyebabkan pergerakan jetHero berhenti.


5. Menguji Movie

Setelah selesai memasukkan kod ActionScript 3.0, kita bolehlah menguji Movie dengan menekan kekunci Ctrl+Enter serentak atau pergi ke menu Control dan pilih Test Movie. Apabila movie dimainkan, mungkin hasilnya seperti berikut.

Gunakan kekunci yang telah kita setkan sebelum ini dan anda akhirnya boleh mengawal pergerakan jetHero berkenaan dengan mudahnya dalam persekitaran 2-dimensi. Jika anda membuat ujian lebih lanjut, jetHero boleh dikawal dalam 8 arah yang berasingan. Jadi, inilah antara konsep asas yang telah menjadi nadi untuk kebanyakan kawalan dalam permainan komputer.