7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Games

Kustomisasi Karakter Tingkat Lanjut untuk Permainan Flash

Read Time: 22 mins

Indonesian (Bahasa Indonesia) translation by Dika Budiaji (you can also view the original English article)

Dalam tutorial ini, kita akan mempelajari kustomisasi karakter permainan Flash. Hasilnya dapat digunakan untuk memberikan pemain dengan kemampuan untuk membuat karakter yang unik, di luar pilihan dasar berpakaian sebagian besar game.

Kami menemukan penulis yang luar biasa ini berkat FlashGameLicense.com, tempat untuk membeli dan menjual permainan Flash!

Kami akan belajar cara membiarkan pengguna menambahkan warna khusus ke berbagai bagian karakter kami, cara menambahkan desain yang digambar tangan ke pakaian karakter, dan cara memodifikasi animasi berjalan dasar yang menggunakan perubahan pemain.


Pratinjau Hasil Akhir

Inilah yang akan Anda buat pada akhir tutorial:

Isi bidang pakaian karakter dengan warna solid, tambahkan detail dengan pensil, lalu tekan "play" dan tekan kiri dan kanan untuk melihatnya berjalan!


Langkah 1: Mengatur Flash Movie Kami

Buat Dokumen Flash AS3 baru. Buka panel properti dan pastikan semua pengaturan sama dengan gambar di bawah ini:


Langkah 2: Mengatur Kelas Utama Kami

Selanjutnya buat file .as baru bernama CustomCharacter.as di dalam direktori proyek kami. Ini akan menjadi kelas utama kami. Masukkan CustomCharacter ke dalam Publish Settings sebagai "Main Class".
Pastikan kelas CustomCharacter Anda seperti di bawah ini.

(Lihat pengantar singkat ini ke kelas dokumen jika Anda tidak yakin apa yang kami lakukan di langkah ini.)


Langkah 3: Menciptakan Karakter Utama Kami

Sekarang kita akan mulai dengan menggambar karakter utama kita. Dalam tutorial ini, penting bahwa kami memastikan kami memiliki setiap bagian tubuh dalam MovieClip yang terpisah. Dengan melakukan ini, kita dapat mendasarkan animasi berjalan kita pada Tweens yang akan mempercepat proses animasi. Karakter kita akan terdiri dari objek-objek berikut: kepala, rambut, kemeja, dua kaki, dan dua lengan. Anda dapat menemukan karakter utama yang digunakan dalam tutorial ini di sumber FLA (tautan unduhan ada di bagian atas tutorial).

Untuk saat ini, untuk mendorong pemain menyesuaikan karakter, kami akan membatasi warna bagian tubuh karakter menjadi abu-abu dengan garis hitam. Pilih seluruh badan, tekan F8 untuk mengubahnya menjadi MovieClip tunggal dan namai Player. Pastikan Anda mengatur titik registrasi setiap bagian tubuh ke sudut kiri atas. Sekarang klik pada Player movieclip baru di atas panggung dan atur name instance ke player.

Di sana Anda memilikinya, kami baru saja membuat karakter Player kami!


Langkah 4: Membuat ColorPicker

Untuk memulai, kita perlu menambahkan komponen ColorPicker ke perpustakaan kita. Pergilah ke panel komponen dengan pergi ke Window> Components. Temukan kelas ColorPicker dan seret ke panel perpustakaan.

Selanjutnya kita perlu melakukan semua pekerjaan ActionScript. Inilah yang akan terlihat seperti kelas CustomCharacter kami setelah perubahan baru kami.

Mari kita lalui langkah demi langkah ini, dimulai dengan fungsi konstruktor. Pertama, kami membuat var baru bernama myColorPicker. Kami kemudian mengatakan bahwa ini adalah instance dari kelas ColorPicker dengan memanggil = new ColorPicker(). Selanjutnya kita memberi tahu ColorPicker kita untuk dapat berubah dan tidak terlihat, sehingga kita dapat membuatnya muncul ketika kita mengklik player. Kemudian, kami menambahkan kelas ColorPicker ke atas panggung, meskipun tidak terlihat.

Kami juga menambahkan dua event listener. Satu untuk ketika Anda mengklik pada player, yang mengubah visibilitas ColorPicker dan memindahkannya ke lokasi mouse saat klik, dan yang kedua untuk memeriksa untuk melihat kapan pengguna telah memilih warna baru, sehingga kita dapat membuat ColorPicker tidak terlihat lagi!


Langkah 5: Membedakan Bagian Tubuh

Sayangnya, kita tidak bisa hanya menggunakan ColorPicker dan membuatnya mengubah warna objek. Pertama, kita perlu ColorPicker untuk membedakan objek mana yang Anda klik, sehingga dapat menentukan objek mana yang akan diubah. Ini membutuhkan penggunaan salah satu fitur MouseEvent AS3 yang powerful.

Di dalam fungsi showPicker, kita bisa menggunakan e.target untuk menargetkan MovieClip yang benar-benar diklik. Kita dapat menurunkan alpha dari objek yang diklik untuk mengkonfirmasi objek yang sedang kita hadapi. Tambahkan saja kode di bawah ini ke fungsi showPicker().


Langkah 6: Mempersiapkan untuk warna!

Kami hampir siap untuk mewarnai objek kami. Sebelum kita mulai, kita perlu memastikan bahwa kita dapat menjaga garis-garis pada bagian tubuh kita. Untuk melakukan ini, kita perlu mengidentifikasi area yang membutuhkan perubahan warna. Kita harus masuk ke dalam MovieClip untuk setiap bagian tubuh, dan pilih area isian abu-abu di dalam garis besar.

Selanjutnya, tekan F8 untuk membuat MovieClip baru dari isi abu-abu ini dan panggil ini "_____Color" (jadi untuk arm movieclip kita akan menyebutnya ArmColor). Terakhir, atur nama instance dari masing-masing objek ____Color ini menjadi color. Sekarang setiap bagian tubuh harus memiliki MovieClip color di dalamnya.


Langkah 7: Los Colores (warna)

Kami akhirnya menambahkan pewarnaan ke aplikasi kami. Seperti apa proyek Anda pada akhir langkah ini:

Tangkapan Layar Aplikasi

Baik! Mari kita lalui langkah demi langkah ini. Untuk memulainya, kami membuat variabel MovieClip baru, myChangedObject, untuk diakses oleh program kami. Ini agar fungsi showPicker() kami dapat mengetahui fungsi colorChanged() kami yang terakhir diklik MovieClip.

Melihat hal itu tidak mungkin, mari kita lihat fungsi showPicker() kami. Seperti yang Anda lihat, kami menambahkan checker kecil untuk melihat apakah objek yang diklik adalah "color". Ini hanya pemeriksaan untuk melihat apakah pengguna benar-benar mengklik outline player, sepatu, atau apa pun yang tidak dimaksudkan untuk diubah.

Selanjutnya kita mengubah variabel myChangedObject baru kita menjadi sama dengan objek yang diklik, e.target, sehingga fungsi colorChanged() kita dapat membuat perubahan akhir. Akhirnya, kami memberi tahu ColorPicker (myColorPicker)
untuk memilih warna yang dipilih sebelumnya. Jika tidak ada, maka defaultnya adalah hitam.

Mari kita menganalisis sedikit kode ini. Pertama-tama, penting untuk mengetahui bahwa untuk memiliki warna yang dipilih sebelumnya, kelas ColorPicker memiliki variabel .selectedColor. Ini adalah angka yang dapat menerima int 6 digit (0xRRGGBB). Pada bagian kedua, kami mengonversi data di dalam tanda kurung menjadi uint untuk diteruskan ke ColorPicker.

Inilah kuncinya, kita pada dasarnya akan masuk ke dalam MovieClip myChangedObject yang pilihan kita, pergi ke bagian transformasinya (tempat data kita disimpan), masuk ke colorTransform data dari data transform, dan menarik keluar variabel color yang menyimpan kode RGB kita (yang kami kemudian dimasukan sebagai warna yang dipilih dari color picker). Pikirkan itu seperti direktori:

myChangedObject/Transform Data /Color Transform Data/ Color Data (RGB)

Kami masih belum selesai! Selanjutnya mari kita lihat fungsi colorChanged() kami. Di sini, kami membuat instance baru dari kelas ColorTransform. Kami kemudian mengatur variabel color di dalam kelas ColorTransform ke warna yang telah dipilih pengguna dengan pemilih warna.

Namun, kita perlu menambahkan "0x" ke warna yang dipilih ColorPicker (e.target.hexValue) untuk membentuk variabel lengkap yang bisa kita masukan ke ColorTransform kita. Itu karena hexValue memberi warna dalam format string "RRGGBB", dan kami membutuhkannya dalam format integer 0xRRGGBB. Seperti sebelumnya, kami mengonversi semua data yang ditambahkan ke uint() baru yang dapat dikenali oleh ColorTransform.

AKHIRNYA, kita akan kembali ke: myChangedObject.transform.colorTransform kecuali kali ini, kita SEBENARNYA mengubah variabel colorTransform ke variabel ColorTransform baru yang baru saja kita buat.

Wah, itu membingungkan tapi sekarang setelah bagian itu selesai, kita bisa mulai menambahkan fitur baru ke program kita.


Langkah 8: Beralih Di Antara Pensil dan Ember cat

Sekarang kita memiliki aplikasi pewarnaan fungsional, mari kita lanjutkan untuk menambahkan beberapa fungsionalitas lagi.

Selanjutnya, kita akan mencoba membuat program menggambar langsung ke bagian tubuh player, sehingga pengguna dapat menggambar beberapa desain keren untuk karakternya. Seperti yang Anda lihat di atas, saya telah mengumpulkan panel dengan dua alat. Pertama, kami memiliki pensil gambar dan selanjutnya kami alat ember cat. Tujuan tutorial ini bukan untuk menyatukan UI, tetapi saya telah memasukkannya ke dalam sumber. Anda dapat membedah gambar jika Anda ingin mempelajari cara pembuatannya.

Juga, ini adalah semacam perpanjangan dari tutorial ini oleh Carlos Yanez, yang sangat membantu menjelaskan cara membuat aplikasi menggambar.

Sama seperti dalam tutorial itu, saya memiliki antarmuka yang terdiri dari dua ember cat dan dua gambar pensil. Satu berwarna abu-abu dan yang lain berwarna. Yang abu-abu akan membuat gambar berwarna terlihat untuk menunjukkan bahwa alat telah diaktifkan.

Setelah satu alat diaktifkan, yang lain akan dinonaktifkan. Pada langkah ini, kami hanya bekerja untuk beralih antar alat. Selama langkah-langkah berikut, kita akan membahas cara membuat alat pensil berfungsi. Berikut ini kode kami:

Pertama, Anda dapat melihat bahwa kami telah mengeluarkan event listener showPicker dan colorChanged, dan mereka sekarang menjadi
ditambahkan ketika kami memilih opsi bucket cat. Sebagai gantinya, kami telah menambahkan dua event listener untuk setiap tombol, yang menautkan ke dua fungsi yang mengaktifkan alat yang telah kami klik. Fungsi menambahkan event listener mereka sendiri dan menghapus event listener dari alat lain. Mereka juga membuat item antarmuka yang tepat terlihat dan tidak terlihat.

Aplikasi baru kami


Langkah 9: Menggunakan Color Picker Untuk Pensil

Kami telah menyiapkan antarmuka, tetapi masih ada pertanyaan. Bagaimana kita bisa memilih warna apa yang akan digambar untuk alat pensil? Jawabannya sederhana. Kami hanya dapat memposisikan pemilih warna kami di sebelah alat pensil. Cukup sederhana juga. Tambahkan saja ini di akhir fungsi enablePencil():

Hanya untuk memastikan bahwa player tidak menggunakan ColorPicker saat memilih alat ember, kita bisa menambahkan ini ke fungsi enableBucket():


Langkah 10: Array Bagian Tubuh

Kami semakin dekat untuk dapat memanfaatkan karakter kami, tetapi kami masih memiliki beberapa pekerjaan yang harus dilakukan. Segera, kita akan mulai menutupi gambar kita dengan klip video di dalam karakter, sehingga mereka tetap berada dalam garis besar karakter. Untuk melakukan ini, pertama kita perlu membuat daftar objek yang perlu di-mask. Kita bisa melakukan ini dalam bentuk array.

Tidak seperti sebelumnya, kita harus memberikan masing-masing bagian tubuh nama instance, jadi kembali ke klip video player, dan pilih masing-masing objek satu per satu. Beri nama masing-masing objek ("arm1", "leg2", "hair", dll.). Setelah selesai, buat array di konstruktor CustomCharacter(), seperti:

Sayangnya, itu tidak bekerja seperti yang direncanakan.

Ini karena kami mencoba untuk mereferensikan klip video player sebelum dibuat. Untuk mengatasi ini, kita juga perlu merujuknya di konstruktor.

Pada dasarnya, kita membagi variabel menjadi dua bagian. Bagian pertama adalah sebelum konstruktor ketika kita membuat array, sehingga akan dapat diakses di seluruh kelas. Yang kedua adalah DALAM konstruktor ketika kita dapat memberikan nilai.

Berikut cuplikan kelas kami:


Langkah 11: Membuat Kanvas untuk Menggambar

Untuk dapat menggambar objek, kita perlu menggunakan kelas Shape. Pertama, tambahkan pernyataan import ke yang lain
di awal kelas Main kami.

Ini yang perlu Anda tambahkan ke bagian bawah fungsi konstruktor CustomCharacter() Anda:

Berikut ini penjelasan singkat tentang apa yang kami lakukan. Kami pada dasarnya membuat for loop yang memicu sekali untuk setiap item dalam array kami. Dalam loop, kita membuat instance baru dari kelas Shape.

Empat baris berikutnya hanya untuk pengujian debug, semacam undian debug Box2D. Pada dasarnya itu menampilkan kotak-kotak ungu di sekitar bagian tubuh karakter. Satu-satunya hal yang perlu diingat adalah bahwa kita mengalikan lebar dan tinggi masing-masing bagian tubuh dengan 3 untuk mendapatkan lebar dan tinggi kotak pengujian ungu kita, sehingga kita tahu masing-masing "kanvas" ini akan cukup besar untuk digambar. Selanjutnya kita menetapkan nama "shapes" untuk setiap bentuk yang dibuat, dan menambahkannya ke item saat ini dari array drawableParts.


Langkah 11: Menyamarkan Bentuk Kita

Untuk memulai, kita perlu memberi bentuk pada permukaan kita juga untuk disembunyikan. Kita tidak bisa hanya menautkannya ke MovieClip bagian tubuh kita, karena dengan begitu mereka akan menjadi tidak terlihat. Ini yang bisa kita lakukan sebagai gantinya.

Pergilah ke MovieClip hiair. Klik kanan pada MovieClip warna kami dan klik "Copy". Selanjutnya, klik kanan pada beberapa ruang kosong di dalam MovieClip hair kita dan klik "Paste in Place". Sekarang masuk ke properti MovieClip yang baru kami dan atur nama instance ke maskclip. Sekarang kembali ke MovieClip player kami dan ulangi ini untuk setiap objek.

Selanjutnya kita bisa menambahkan kode ini ke akhir for loop kita:

Uji film lagi dan seperti sulap, player kami berubah menjadi ungu, karena hanya area player yang dinaungi yang memperlihatkan kotak debug kami. Ini berarti bahwa gambar kita akan tetap pada permukaan yang kita gambar.


Langkah 12: Mengakses Kanvas Kami

Sekarang muncul pertanyaan: "Bagaimana cara mengakses kanvas myShape dari setiap bagian tubuh?" Sayangnya, jawabannya tidak begitu sederhana. Namun, saya bisa memandu Anda melalui langkah demi langkah. Snipper ini akan menghubungkan kita langsung kembali ke myShape kita jika kita memasukkannya ke dalam MouseEvent. Mengapa? Yah terus membaca ..

Mari kita lalui langkah demi langkah ini. Proses ini seperti tikus (ya yang asli) berusaha menemukan keju (kanvas kita) karena
kita harus melalui banyak belokan untuk menemukan apa yang kita cari.

  • Pertama, kita akan menargetkan MouseEvent. Ini bisa menjadi objek yang diklik, dilepaskan, dipindahkan, dll.
  • Selanjutnya kita akan pergi ke induk dari objek itu. Ini pasti akan menjadi bagian tubuh MovieClip (seperti lengan) karena satu-satunya objek yang dapat diklik adalah garis besar atau isian Player (kami akan memastikan itu adalah isian nanti).
  • Sekarang kita berada di bagian tubuh MovieClip, kita dapat menggunakan getChildByName("Nama Objek Di Sini") untuk mengakses objek dengan nama yang diberikan.

Karena sebelumnya kita menamai semua objek Shape sebagai shapes, memanggil getChildByName ("shapes") akan memberi kita akses ke sana.


Langkah 13: Mewarnai Hitam dan Putih

Sekarang kita dapat mulai menggambar player dengan warna hitam dan putih.

Inilah tampilan kelas Main kami di akhir tutorial. Saya telah menambahkan komentar ke semua perubahan yang saya buat

Tujuan dari tutorial ini bukan untuk menutupi menggambar pada objek Shape. Itu sepenuhnya dibahas oleh tutorial Carlos. Saat ini, kami hanya mempelajari teknik menggambar ke objek yang benar. Jika Anda bingung tentang cara mengakses objek shape yang tepat, baca kembali Langkah 12 untuk penjelasan yang lengkap.


Langkah 14: Menggambar Dengan Warna

Sekarang kita bisa beralih ke menggambar dengan warna yang dipilih dari ColorPicker. Ini sangat mirip dengan proses yang kami gunakan pada alat ember.

Mari kita mulai dengan menambahkan variabel baru di luar semua fungsi, tetapi di dalam kelas. Inilah yang akan digunakan oleh program kami untuk menyimpan warna pensil saat ini.

Sekarang, mari kita beralih ke fungsi drawOnPlayer() kami. Fokuskan perhatian Anda pada garis yang mengatur lineStyle() dari bentuk yang sedang kami gambar. Parameter kedua dalam fungsi harus "0x000000". Ubah HANYA parameter itu menjadi:

Ini pada dasarnya mengatakan untuk menggambar menggunakan kode RBG dari ColorPicker kami sambil menambahkan "0x" yang diperlukan untuk melengkapi warna.

Berikut ini tampilan baris kode sekarang harusnya seperti apa:

Akhirnya, kita harus menyelesaikan fungsi colorChangedPencil(), yang dipanggil ketika warna pensil baru dipilih. Pergi ke sana dan tambahkan baris kode ini:

Ini hanya menetapkan kode hexValue atau RBG dari ColorPicker kami ke variabel pencilColor kami.


Langkah 15: Memperluas Panel Tombol

Pada langkah berikutnya, kami akan bekerja untuk menambahkan fitur baru ke game kami. Sayangnya, kami tidak bisa meninggalkan begitu banyak ruang placeholder di dalam panel kalau kami mungkin menambahkan fitur lain. Anda dapat menggunakan ini sebagai cara cepat dan kotor untuk memperluas panel untuk membuat lebih banyak ruang untuk tombol lainnya dan alat-alat untuk aplikasi kita.

Langkah 1: Pilih

Pilih semua objek di dalam Options MovieClip kami.

Langkah 2: Pergeseran

Tahan tombol Shift dan tekan tombol Left untuk menggeser MovieClip ke kiri.

Langkah 3: Peregangan

Gunakan alat mouse dan rentangkan sudut-sudut pengisian panel kami (warna abu-abu) serta garis besar kami di layar.

Langkah 4: Atur Kembali

Pastikan untuk memodifikasi objek berbasis koordinat apa pun. Sebagai contoh, kita sekarang perlu mengubah lokasi ColorPicker pensil karena tombol Alat Pensil kami bergerak.


Langkah 16: Mereset Data kami

Seperti program menggambar yang bagus, kita perlu memberi player cara untuk memulai kembali proyeknya. Apa yang lebih baik dari tombol restart untuk pengguna yang tidak bisa membuat keputusan menggambar yang sempurna? Mari kita mulai dengan membuat Tombol baru yang disebut Restart dan menambahkannya ke panel alat kami.

Saya akan menggunakan tombol ini (Ada di FLA):

Tempatkan satu di klip video tools dan berikan nama instance "reset". Selanjutnya tambahkan event listener berikut ke fungsi konstruktor kami:

Sekarang tambahkan fungsi event handler ini ke kelas kami:

Baca komentar dalam fungsi untuk penjelasan langkah demi langkah tentang apa yang kami lakukan


Langkah 17: Mengintegrasikan Animasi

Jika Anda ingat dari awal tutorial, tujuan dari tutorial ini bukan untuk membuat permainan dandanan, tetapi untuk membuat komponen dandanan canggih untuk digunakan dalam permainan. Sejauh ini kami telah menambahkan komponen dandanan dinamis ke karakter yang statis. Selanjutnya, tujuan kami adalah untuk mengintegrasikan animasi berjalan sederhana dengan kustomisasi player kami.

Ini hanya demo untuk menunjukkan betapa mudahnya Anda dapat menggunakan kustomisasi ini dalam permainan yang nyata.

Untuk memulai, saya telah membuat animasi sederhana dengan tweens. Saya pada dasarnya telah di tween bagian tubuh MovieClips untuk membuat player tampak seperti sedang berjalan. Anda dapat melihat animasi di bawah ini. Ingatlah bahwa tujuan tutorial ini bukan untuk merancang animasi yang sebenarnya, tetapi untuk mempelajari cara mengintegrasikannya dengan aplikasi yang telah kami buat. Namun, sama seperti elemen-elemen lain dari aplikasi, animasinya sudah termasuk dalam kode sumber.

Di sini Anda dapat melihat timeline dari player MovieClip.

Sekarang coba filmnya! Player harus dianimasikan. Anda dapat mencoba menggambar di kaki player, dan jika Anda telah mengikuti instruksi dengan benar, maka ketika Anda menggambar, gambar tersebut harus menempel pada kaki pemain dan menganimasikannya. Saya akan menjelaskan mengapa secara detail sedikit nanti.


Langkah 18: Gambar > Alur Kerja Animasi

Jika Anda mencoba menggambar player sebelumnya, Anda mungkin mengalami kesulitan menggambar di bagian yang bergerak (DUH!). Ini karena kami belum mengimplementasikan alur kerja atau antarmuka nyata apa pun. Pada langkah ini kita akan melakukan semua itu untuk membuat aplikasi kita sepenuhnya dapat digunakan.

Untuk memulai, mari tambahkan satu baris kode ke konstruktor kami untuk menghentikan animasi player:

Selanjutnya kita perlu memperpanjang panel kita lagi. Ikuti saja Langkah 15 dan buat panelnya sedikit lebih panjang

Sekarang kita perlu menambahkan tombol "play animation". Sama seperti elemen UI lainnya, tombol saya seperti saklar. Saat Anda mengekliknya, ini akan mengubah visibilitas MovieClip lain untuk memberikan tampilan pada tombol yang menyala. Nama instance tombol adalah playgame sementara nama instance MovieClip yang menyala sedang diputar. Lihatlah FLA atau SWF pratinjau untuk melihat bagaimana kesesuaiannya.

Berikut adalah kode yang perlu kita tambahkan untuk membuat ini berfungsi ... Pertama tambahkan ini ke konstruktor kami untuk menonaktifkan efek yang menyala:

Selanjutnya tambahkan EventListener ini ke konstruktor kami:

Akhirnya, mari kita buat fungsi ini di kelas kita. Saat ini, ini hanya melakukan dua hal. Pertama, ini mengubah visibilitas MovieClip kami yang sedang diputar. Kemudian, ia memeriksa untuk melihat apakah MovieClip terlihat. Jika demikian, itu mulai animasi player kami. Jika tidak, ini akan menghentikan animasi di frame pertama.

Selamat, Anda sekarang telah menerapkan engine animasi dasar ke dalam program penyesuaian kami.


Langkah 19: Beberapa Logika Permainan Sederhana

Semuanya terlihat bagus, tetapi apa yang menyenangkan adalah permainan tanpa interaktivitas pengguna? Pada langkah ini kita akan menambahkan beberapa interaktivitas sederhana ke permainan kita. Untuk memulai, unduh kelas KeyObject Senocular di sini. Ini akan membuat logika kita lebih mudah untuk ditulis.

Kita harus membuat perubahan cepat ke kelas. Buka itu. Di baris pertama ganti:

dengan:

Sekarang kita bisa mulai dengan mengimpor kelas. Ingatlah untuk meletakkannya di direktori kelas Main kami. Tambahkan pernyataan import ini di sebelah yang lain:

Untuk mengatur kelas KeyObject. Cukup buat key variabel baru seperti ini:

Dan tetapkan ke instance baru dari kelas KeyObject sambil menambahkan di properti Stage, seperti:

Letakkan baris kode itu di konstruktor, atau, jika tidak berhasil, tambahkan baris ini ke konstruktor:

... lalu tambahkan fungsi baru untuk menangani event itu:

Jika Anda tidak melakukan ini, ada kemungkinan bahwa stage tidak akan merujuk ke apa pun pada titik ketika Anda perlu menggunakannya.

Selanjutnya kita perlu membuat event listener ENTER_FRAME. Namun, kita harus menghapusnya setelah selesai. Tambahkan kode ini ke fungsi enableGame() Anda:

Arti kode ini harus cukup jelas bagi Anda, jadi tidak perlu dijelaskan.

Sekarang inilah fungsi enterFrame() kami:

Uji SWF Anda, dengan menekan tombol panah kiri dan kanan.


Langkah 20: Memperbaiki Popup ColorPicker!

Seperti yang mungkin telah Anda perhatikan, jika kita memiliki alat pensil aktif dan kami membuat player bergerak, ColorPicker kami terus terbuka. Ini adalah perbaikan cepat dan kotor untuk itu! Cukup buat perubahan yang dikomentari ke fungsi enableGame() Anda:

Kami tidak perlu melakukan apa pun dengan alat bucket karena sudah memindahkan ColorPicker ke lokasi Mouse.


Kesimpulan

Seperti yang Anda lihat, membuat pengalaman penyesuaian yang unik tidaklah sulit. Sebenarnya, ini adalah cara yang sangat baik untuk membiarkan player membuat avatar atau karakternya "miliknya". Sungguh, kami baru saja menelusuri permukaan opsi untuk penyesuaian yang tersedia di Flash. Lihat apa lagi yang bisa Anda pikirkan!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.