Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Game Design
Gamedevelopment

Memanfaatkan kekuatan palet pemetaan untuk menyesuaikan karakter permainan

by
Difficulty:AdvancedLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Muhamad Zulfiqor (you can also view the original English article)

Dalam tutorial ini saya akan menunjukkan kepada Anda bagaimana menggunakan AS3's PaletteMap fitur untuk membuat antarmuka kustomisasi karakter untuk permainan berikutnya.


Mengapa pemetaan palet?

Dahulu, setiap kali saya ingin mencoba aset dinamis mewarnai Google pencarian pasti membawa saya ke kelas ColorTransform. ColorTransform bekerja dengan baik untuk memodifikasi warna solid, tetapi jika Anda mencoba untuk warna sepotong kompleks seni hasilnya adalah biasanya tidak apa yang Anda inginkan.


Dengan palet pemetaan kami dapat menganalisis setiap pixel dari aset dan mengubah warna tepat untuk mempertahankan highlight dan shading dari gambar asli. Hal ini tidak segera jelas dari dokumentasi untuk paletteMap bagaimana membuat penggunaan itu, sehingga adalah apa yang saya akan menutupi di sini.

Mari kita mulai.


Langkah 1: Buat gambar karakter

Langkah pertama adalah untuk membuat karakter permainan Anda jika Anda belum memiliki salah satu yang Anda ingin gunakan. Aku akan menggunakan gambar bitmap untuk saya, tapi saya akan menunjukkan Anda bagaimana Anda dapat menggunakan gambar vektor Flash yang kemudian dalam tutorial.

Karakter saya adalah bahagia cupcake berjalan:



Langkah 2: Layout frame-frame animasi (opsional)

Anda dapat melewatkan langkah ini jika Anda hanya ingin bekerja dengan gambar masih.

Karakter saya memiliki empat bingkai kaki siklus animasi. Untuk membuatnya lebih mudah untuk bekerja dengan, aku akan meletakkan semua empat frame animasi ke satu gambar. Sangat penting bahwa semua frame animasi selaras vertikal dan spasi merata horizontal.


Pantau dimensi piksel dari bingkai animasi tunggal, Anda akan membutuhkannya nanti. Frame saya masing-masing 76 x 82 piksel.


Langkah 3: Memisahkan karakter dalam lapisan Colorable

Photoshop (atau editor gambar lainnya) memisahkan bagian-bagian dari karakter Anda yang Anda ingin mengetik dari sisa karakter. Dalam tutorial ini saya akan mewarnai karakter tubuh dan rambut, tetapi Anda dapat memisahkan berbagai elemen yang Anda inginkan.

Saya telah memutuskan untuk mewarnai kaki karakter saya dengan warna yang sama seperti rambutnya, jadi saya bisa meletakkan kaki dan rambut bersama-sama pada lapisan yang sama.



Langkah 4: Mengkonversi lapisan Grayscale dan Simpan

Mengkonversi lapisan rambut dan tubuh menjadi grayscale. Di Photoshop Anda dapat melakukan ini dengan cepat dengan memilih lapisan dan memukul perintah-Shift-U (shortcut untuk gambar > penyesuaian > Desaturate).


Simpan setiap elemen sebagai PNG terpisah dengan transparansi 24 bit.



Langkah 5: Mengatur dokumen Anda Flash

Sekarang bahwa karakter Anda siap saatnya untuk pindah ke Flash.

Buat dokumen baru Flash 600 x 400 di 30fps.


Set dokumen kelas 'Utama'.



Langkah 6: Mengimpor gambar karakter ke Flash

Impor rambut dan tubuh gambar ke perpustakaan. Mengatur gambar rambut untuk ekspor sebagai 'HairBMD', dan citra tubuh untuk ekspor sebagai 'BodyBMD'. Ini adalah nama kelas yang akan kita gunakan untuk referensi gambar dalam kode kita.



Step 7: Membuat kelas dokumen utama

Buat sebuah file baru ActionScript yang bernama 'Main.as' dan menyimpannya dalam folder yang sama sebagai file Flash Anda. Ini akan menjadi kelas dokumen kami.

Paste kode ini untuk membuat shell kosong kelas:


Langkah 8: Menambahkan variabel kelas dokumen utama

Tambah Deklarasi variabel ini ke puncak kelas baru Anda:

Di sini kami menambahkan dua konstanta, rambut dan tubuh terus indeks untuk memetakan rambut kita dan tubuh gambar. Hal ini mudah untuk menambahkan unsur lain colorable kemudian (kemeja, topi, dll). Untuk sekarang kita akan hanya dengan tongkat kedua.

 Selanjutnya kita membuat sebuah array bernama _originalImages dan mengisinya dengan bitmap untuk citra rambut dan citra tubuh kita. Perhatikan bahwa ketika Anda instantiate gambar Anda dari perpustakaan itu adalah objek BitmapData, jadi kami harus mengirimkannya sebagai argumen ke objek Bitmap baru untuk membuat bitmap.

Kami juga membuat sebuah array kedua yang disebut _coloredImages. Ini akan terus bitmap yang kita mengetik.

(Saya menggunakan garis bawah di nama-nama variabel saya untuk menunjukkan mereka adalah variabel dilindungi-tidak umum.)

Blok berikutnya kami membuat tiga variabel yang terkait. _compositeSprite akan menjadi sebuah wadah yang mana kita lapisan semua gambar kami colorable untuk membuat gambar komposit. _compositeBMD adalah sebuah objek BitmapData ke mana kita akan menarik data dari Sprite. Akhirnya, kita akan menggunakan _compositeBitmap untuk menampilkan gambar komposit di layar.


Langkah 9: Komposit gambar karakter pada layar

Mari kita bangun karakter di layar.

Tambahkan fungsi ini untuk kelas utama:

Di sini kita instantiate _compositeSprite dan benda-benda _compositeBMD. Kami menggunakan lebar dan tinggi dari citra tubuh kita untuk BitmapData objek. Kami juga instantiate transparansi bendera set ke true.

Selanjutnya, kami instantiate gambar Bitmap dengan _compositeBMD BitmapData, dan kemudian menambahkannya ke panggung. Perhatikan bahwa kita dapat membuat Bitmap dan menambahkannya ke panggung sebelum menambahkan data ke BitmapData. Seperti kita mengedit BitmapData, Bitmap akan secara otomatis memperbarui. Keren, kan?

Untuk sekarang kita akan menambahkan rambut dan tubuh gambar dari _originalImages array ke _compositeSprite

Kemudian semua yang tersisa adalah untuk menarik _compositeSprite ke _compositeBMD. Ini akan memperbarui _compositeBitmap yang sudah di atas panggung.


Langkah 10: tes

Menambahkan panggilan untuk setUp fungsi konstruktor kelas utama:

Uji film Anda dan Anda akan melihat gambar composited karakter Anda muncul di layar. Jika tidak, Anda harus berhenti di sini dan mencari tahu apa yang Anda melewatkan sebelum melangkah lebih jauh. Hal-hal yang akan mendapatkan sedikit gila...



Langkah 11: Menciptakan kelas Colorizer

Buat sebuah file ActionScript baru yang disebut 'Colorizer.as'. Paste kode di dalamnya untuk menciptakan basis kelas Colorizer kami:

Kelas ini akan berisi kode yang melakukan semua palet pemetaan untuk mewarnai gambar kami. Kami menempatkan itu di file terpisah sehingga akan sangat mudah untuk menggunakan kembali pada proyek lain. Simpan file dalam folder yang sama sebagai file Flash Anda.


Langkah 12: Tambahkan getColoredBitmap() fungsi

Tambahkan fungsi besar ini untuk kelas Colorizer Anda:

Ini akan menjadi fungsi pekerja keras kita. Kita akan pergi melalui setiap bagian dalam beberapa langkah.


Langkah 13: getColoredBitmap() yang menjelaskan fungsi

Mari kita mulai dengan yang pertama beberapa baris fungsi:

Jalur 11: Kami menyatakan fungsi ini sebagai umum statis. Umum memungkinkan kelas-kelas lain untuk mengakses fungsi ini, dan statis berarti bahwa kita dapat menggunakan fungsi ini tanpa harus instantiate kelas pertama. Jadi kita dapat memanggil fungsi ini secara langsung dengan menggunakan Colorizer.getColoredBitmap() daripada harus membuat sebuah instance baru dari Colorizer dan memanggil fungsi pada contoh.

Juga pada jalur 11: fungsi kita menerima dua parameter. Yang pertama, bmp, akan menjadi gambar Bitmap yang fungsi akan mengetik. Yang kedua, warna akan menjadi nilai warna yang digunakan untuk mewarnai bitmap.

Jalur 13 – 15: kita perlu 3 array untuk menggunakan paletteMap-satu untuk masing-masing saluran warna. Di sini kami akan hanya menyatakan dan instantiating masing-masing.

Pada bagian berikutnya:

Ini adalah tempat hal-hal mulai mendapatkan sedikit rumit. Kita perlu untuk memisahkan nilai warna (satu berlalu dalam sebagai parameter warna) dalam nilai-nilai untuk setiap saluran warna yang membuat warna. Kami melakukannya dengan menggunakan bit pergeseran dan bit masking untuk mengekstrak nilai setiap saluran dari nilai warna.

Setiap variabel akan mengadakan sebuah nomor dari 0-255 untuk mewakili nilai untuk warna tertentu yang saluran dalam warna kami (misalnya: 50 merah, 200 hijau, biru 255 akan warna biru muda).

Aku akan mencoba untuk menjelaskan bagaimana sedikit pergeseran bekerja pada langkah berikutnya. Jika Anda sudah mengerti hal ini (atau tidak peduli), Anda dapat melompat ke langkah 15 terus berjalan melalui fungsi getColoredBitmap().


Langkah 14: Memahami sedikit pergeseran dan menutupi ekstrak warna saluran

Nilai warna disimpan sebagai unsigned integer.

Biasanya kita menetapkan warna dalam hex:

RR GG BB

Dimana setiap kumpulan dua digit mewakili nilai warna untuk saluran individu 00 (0) untuk FF (255).

Tetapi untuk penjelasan ini membantu berpikir warna sebagai representasi biner mereka, seperti ini:

RRRRRRRR GGGGGGGG BBBBBBBB

Dalam biner, masing-masing saluran warna diwakili oleh serangkaian 8 bit (0 atau 1).

Untuk mengakses satu kanal dari string ini panjang bit kita perlu MENGGESER mereka ke kanan dan/atau masker keluar potongan yang tidak diinginkan. Kita melakukan ini dengan menggunakan operator kanan shift (>) dan operator AND bitwise (&).

Mendapatkan saluran merah mudah. Kami hanya pergeseran seluruh urutan ke kanan oleh 16 bit (>> 16). Kami sedang pergi dengan 8 bit merah sebagai 16 biru dan hijau bit mendapatkan bergeser ke tidak pernah pernah tanah.

Untuk mendapatkan hijau kami shift dengan 8 bit (>> 8) untuk menyingkirkan biru, tapi kemudian kami meninggalkan dengan RRRRRRRR GGGGGGGG. Bagaimana Apakah kita bisa sembuh bit orang merah?

Bitwise AND operator digunakan untuk menggabungkan dua Bilangan Biner. Setiap bit dari kedua angka dibandingkan. Jika kedua bit 1, maka sedikit sesuai hasil akan 1. Jika bit kedua adalah 0, maka sedikit hasil akan 0.

warna: 11101110 11101110

masker: 00000000 11111111 (0xFF dalam hex)

hasil &: 00000000 11011101

Jadi dengan menggunakan dan dengan topeng 0xFF, kita dapat nol bit-bit dari saluran merah dan kami hanya kau pergi dengan saluran hijau.

Untuk mendapatkan saluran biru, kita tidak perlu melakukan apapun pergeseran, kita hanya perlu keluar bit merah dan hijau yang menggunakan topeng dan lagi (& 0xFF).

Itulah gambaran yang sangat cepat tentang topik yang kompleks. Jika Anda ingin penjelasan lebih lengkap memeriksa Halaman ini oleh Wojciech Sierakowski.


Langkah 15: kembali ke getColoredBitmap() fungsi

Sekarang kita akan mulai mengisi kami tiga warna saluran array ([redArr], [greenArr] dan blueArr[]) dengan nilai-nilai.

PaletteMap bekerja dengan menganalisis warna setiap piksel dalam sebuah objek BitmapData. Rusak nilai warna ke warna terpisah saluran (seperti yang kami lakukan di langkah sebelumnya). Kemudian menggunakan setiap saluran nilai sebagai indeks untuk mencari nilai baru dalam array sesuai yang kami sediakan.

Jadi jika nilai merah dari sebuah pixel adalah 50, paletteMap akan melihat nilai kami menempatkan redArr [50] dan menetapkan bahwa saluran merah warna baru untuk pixel. Kemudian akan melakukan sama untuk jalur hijau dan biru.

Untuk membuat penggunaan ini untuk colorizing kita perlu peta nilai-nilai yang kita dimasukkan ke dalam array warna saluran ke nilai kecerahan gambar grayscale kami. Ini berarti kita akan mulai dengan 0 di semua saluran (hitam). Di indeks 128 (setengah jalan ke 256), kami ingin setiap saluran untuk memetakan persis ke warna kita. Dan di indeks 255 kami ingin semua nilai-nilai harus 255 (putih). Kami ingin kelancaran transisi antara tiga untuk semua nilai-nilai di antara. Dengan cara ini ketika paletteMap terlihat nilai untuk netral abu-abu (128 R, 128 G, 128 B) itu akan menemukan nilai-nilai untuk warna kita. Jika tampak nilai untuk abu-abu gelap (50 R, 50 G, 50 B) itu akan menemukan nilai-nilai untuk versi yang lebih gelap dari warna kita. Dan jika itu tampak nilai untuk ringan abu-abu (200 R, 200 G, 200 B) itu akan menemukan nilai-nilai untuk versi yang lebih ringan dari warna kita. Dengan cara ini kita akan tetap mempertahankan semua highlight dan shading dari gambar asli.


Untuk mencapai ini, kita akan mengisi kami array channel warna dalam dua tiket terpisah. Pertama berlalu akan menghitung nilai dari hitam (0) akan warna target kami. Lulus kedua akan menghitung nilai-nilai dari warna target kami putih (255).

Berikut adalah kode untuk pertama berlalu (masih dalam fungsi getColoredBitmap):

Line 26: Kami mulai loop untuk variabel saya dari 0 sampai 128. Dalam setiap iterasi loop kita akan menambahkan satu nilai untuk masing-masing dari kami array saluran tiga warna.

Line 30: Untuk menghitung nilai untuk didorong ke dalam array red chanel kami kita mengambil nilai redVal yang kami dihitung di atas dan membaginya dengan 128 dan kemudian kalikan dengan saya. Ketika kami pergi melalui lingkaran kami ini akan memberikan kita nilai-nilai dari 0 ke redVal. Untuk menempatkan nilai ini ke dalam saluran merah, kita harus sedikit pergeseran kembali ke kiri 16 bit (<< 16). Ingat kita bergeser ke kanan oleh 16 untuk mengekstrak nilai merah di atas, jadi kita hanya melakukan sebaliknya di sini.

Garis 31 & 32: Kami melakukan hal yang sama untuk greenVal dan blueVal. Kita hanya perlu pergeseran nilai hijau pemberitahuan kembali 8 bit, dan kita tidak perlu menggeser nilai biru sama sekali.

Sekarang untuk pass kedua:

Bagian ini adalah melakukan cukup banyak hal yang sama sebagai bagian sebelumnya, tapi sekarang kami menambahkan nilai mulai dari warna target kami putih (255).

Garis 42: untuk redVal kita menemukan perbedaan antara 255 (nilai maksimum) dan redVal. Kemudian kita membagi dengan 128 dan kalikan oleh j seperti yang kita lakukan di atas.  Sekarang kita menambahkan hasilnya ke redVal karena kita bergerak dari nilai itu menjadi putih di bagian ini. Terakhir kita menggesernya kembali ke saluran merah (<< 16).

Baris 43 & 44: kita melakukan hal yang sama untuk greenVal dan blueVal.

Hanya sedikit lebih untuk pergi:

Garis 47 & 48: Ini menciptakan Bitmap baru yang disebut coloredBMP dan menetapkan Bitmap yang mendapat berlalu dalam fungsi untuk itu. Hal ini tampaknya tidak perlu pada titik ini, tetapi kami akan menambahkan beberapa fungsi nanti yang akan membuat ini masuk akal.

Jalur 50: Membuat variabel terus objek BitmapData coloredBMP.

Baris 54: Di sini kita akhirnya menerapkan paletteMap. Karena kita menyebut paletteMap pada bmd, ini adalah contoh BitmapData yang akan menerima data dari paletteMap. Kami juga menggunakan ini sebagai argumen pertama, yang mana paletteMap akan mendapatkan sumber data dari. Argumen kedua adalah persegi panjang yang menentukan berapa banyak dari kita ingin menggunakan gambar sumber. Kami ingin seluruh hal, jadi kami membuat persegi panjang lebar sama dan tinggi sebagai kami bitmap, bmp. Parameter ketiga adalah objek titik yang menentukan sebuah offset untuk tujuan data. Kita menginginkan kita untuk menyesuaikan tepat untuk gambar sumber, maka kita lulus dalam sebuah titik yang baru pada 0, 0. Akhirnya, untuk terakhir tiga argumen kita lulus dalam tiga warna saluran array, [redArr], [greenArr] dan [blueArr].

Line 56: Terakhir, kita kembali Bitmap baru berwarna dari fungsi.


Langkah 16: Tambahkan colorImage() fungsi

OK, sekarang kita perlu untuk benar-benar menggunakan Colorizer kelas. Kembali ke kelas utama dan tambahkan fungsi ini:

Fungsi ini menerima integer sebagai ID untuk menentukan yang gambar warna. Ini akan kami tubuh atau rambut ID. Parameter kedua adalah nilai warna kita ingin warna gambar kami.

Baris pertama panggilan fungsi getColoredBitmap() baru kami mewah di kelas Colorizer. Ingat fungsi ini mengembalikan bitmap berwarna, jadi kita menyimpan yang dalam array _coloredImages di indeks ditentukan oleh imageId.

Selanjutnya kita tambahkan bitmap berwarna ke daftar tampilan _compositeSprite.

Akhirnya, kita menarik seluruh isi dari _compositeSprite untuk _compositeBMD. Ingat, Bitmap yang terkait dengan _compositeBMD akan secara otomatis memperbarui ketika kita menggambar gambar baru untuk BitmapData.


Langkah 17: Call colorImage() fungsi

Kembali dan lihatlah fungsi setUp() (di kelas utama):

Perhatikan bahwa dalam setUp() kita menambahkan gambar ke _compositeSprite dan menarik mereka ke BitmapData komposit. Kita tidak perlu melakukan hal ini lagi karena kita melakukan hal yang sama dalam fungsi colorImage.

Ganti baris tiga orang dengan dua panggilan untuk colorImage():

Ini dua panggilan akan mengatur warna default untuk karakter kita. Anda dapat mengubah nilai warna untuk apapun yang Anda inginkan warna default untuk karakter Anda untuk menjadi.


Langkah 18: Uji Colorizer

Uji film Anda sekarang dan Anda akan melihat versi berwarna karakter Anda pada layar.



Langkah 19: Membuat User Interface untuk kustomisasi karakter

Sekarang desain antarmuka pengguna untuk customizer karakter Anda dalam Flash file.

Saya akan sangat sederhana. Ini memiliki area untuk pilihan warna tubuh, area untuk pilihan warna rambut, area untuk menampilkan gambar komposit karakter, dan area untuk menampilkan karakter animasi.


Dalam Flash file semua bidang akan kosong, tapi Anda harus membuat catatan dari posisi pixel yang mana Anda ingin elemen yang muncul sehingga kami dapat menambahkannya ke layar di posisi tepat.


Langkah 20: Tambahkan lokasi elemen antarmuka

Tambahkan konstanta ini ke kelas utama untuk menentukan lokasi dari elemen antarmuka pengguna kami akan menambahkan ke layar secara programatik:

Di sini kita hanya menyimpan lokasi X dan Y (sebagai objek titik) untuk menentukan sudut kiri atas dari elemen antarmuka kami. Kami juga membuat integer konstan untuk menyimpan jumlah ruang antara masing-masing dari warna tombol.

Kami menempatkan ini dalam konstanta untuk dua alasan. Pertama, itu membuat lebih mudah untuk membaca kode yang menggunakan angka-angka ini. Jika kita hanya meletakkan x = 30 di suatu tempat sangat mudah lupa mana angka itu datang dari dan apa itu singkatan. x = BODY_BUTTONS_LOC.x jauh lebih ambigu. Juga, karena mereka semua di satu tempat seperti ini yang membuat mereka lebih mudah untuk mengedit, daripada harus mencari di sekitar untuk menemukan nomor individu tersebar di seluruh kode kita.


Langkah 21: Posisi Bitmap komposit

Sekarang bahwa kita memiliki posisi untuk semua unsur-unsur kami coba kembali dan menggunakannya untuk posisi bitmap komposit.

Tambahkan dua baris untuk setUp fungsi:


Langkah 22: Desain movieklip ColorButton

Sekarang kita akan membangun elemen-elemen tombol untuk antarmuka pengguna kami.

Membuat simbol movieklip baru yang bernama ColorButton. Dalam properti simbol set kelas untuk 'ColorButton'.


Menggambar persegi panjang bulat untuk latar belakang tombol. Saya membuat saya 160 x 25, dengan abu-abu mengisi gradien.

Menciptakan sebuah lapangan teks dinamis yang disebut 't_label' untuk menampilkan nama warna. Meninggalkan sedikit ruang di sisi kiri tombol untuk warna swatch. Dan jangan lupa untuk menanamkan font.



Langkah 23: Menciptakan kelas ColorButton

Sekarang kami akan membuat file kelas untuk tombol baru kami.

Buat sebuah file baru ActionScript yang bernama 'ColorButton.as' dan menyimpannya dalam folder yang sama sebagai file Flash Anda.

Tambahkan kode untuk membuat shell kosong untuk kelas:

Kelas ini memiliki dua variabel umum. Seseorang memegang nilai warna yang terkait dengan tombol, dan satu memegang ID dari gambar itu akan warna (rambut, atau tubuh bulat ID).

mouseChildren = false memastikan bahwa mouse peristiwa akan dikirim dari tombol dan bukan anak-anak (seperti label teks atau petak warna). buttonMode = benar membuat layar Flash kursor tangan ketika mousing melewati tombol.

Kami menggunakan sebuah movieklip bukan simbol tombol sehingga kita dapat menanamkan sebuah field teks dinamis.


Langkah 24: Tambahkan setColor() fungsi

Tambahkan fungsi ini untuk kelas ColorButton:

Fungsi ini menerima nilai warna, nama warna (untuk label) dan foto ID. Ini menyimpan Warna dan gambar ID di variabel umum untuk nilai-nilai.

Berikutnya, menetapkan label teks nama warna. Saya ingin saya label harus huruf besar semua, jadi saya menggunakan fungsi toUpperCase() untuk mengkonversikannya ke atas kasus.

Akhirnya, itu panggilan fungsi yang disebut createColorSwatch() dengan nilai warna. Fungsi ini akan menarik carikan sedikit warna pada tombol. Kami akan membuat fungsi berikutnya.


Langkah 25: Tambahkan createColorSwatch() fungsi

Tambahkan fungsi ini untuk kelas ColorButton:

Fungsi ini menciptakan sebuah Sprite, disebut swatch, menarik persegi panjang kecil di atasnya dalam warna kita ditentukan, dan menambah Sprite tombol tampilan daftar. Anda bisa mendapatkan pengujian dengan fungsi ini jika Anda ingin menampilkan swatch warna Anda berbeda. Aku akan terus tambang sederhana.


Langkah 26: Tambahkan daftar warna

Kembali di kelas utama, tambahkan empat array untuk memegang nilai-nilai warna dan nama-nama warna untuk warna rambut dan tubuh:

_BodyColors [] dan _hairColors [] array adalah daftar nilai warna kita akan menggunakan pewarna. _BodyColorLabels [] dan _hairColorLabels [] array adalah nama untuk warna. Ini adalah label yang akan muncul pada tombol warna.

Pastikan untuk menjaga mereka dalam urutan, sehingga Anda mendapatkan nama yang tepat cocok untuk masing-masing warna.


Step 27: Membuat daftar tombol

Tambahkan loop ini sampai akhir setUp fungsi di kelas utama:

Di sini kita loop melalui warna dalam _bodyColors [] array.

Untuk setiap nilai warna kami menciptakan ColorButton baru dan mengirimkannya nilai warna, warna nama dan ID gambar menggunakan fungsi setColor().

Kami menetapkan posisi tombol menggunakan konstanta posisi kami mendirikan sebelumnya, dan menambahkan pendengar acara mouse untuk mendengarkan klik untuk tombol.

 Terakhir kita tambahkan tombol baru ke daftar tampilan.

Sekarang tambahkan loop kedua untuk warna rambut:

 Lingkaran ini hampir persis sama, tetapi kali ini kami membuat tombol untuk warna rambut.


Langkah 28: Tambahkan Handler Event tombol

Pada langkah terakhir kami menambahkan pendengar acara mouse tombol masing-masing. Sekarang kita perlu menambahkan fungsi yang akan menangani peristiwa-peristiwa. Tambahkan fungsi ini untuk kelas utama:

Fungsi pengendali event ini hanya memiliki dua baris. Pertama kita hanya mendapatkan referensi ke tombol yang diklik menggunakan properti target acara mouse. Kemudian kita memanggil fungsi colorImage() menggunakan tombol-tombol umum properti untuk imageId dan warna.

Sekarang setiap kali sebuah warna tombol diklik, gambar yang sesuai akan diwarnai dengan warna yang dipilih.


Langkah 29: tes

Uji itu keluar dan melihat cara kerjanya.


Melihat sesuatu yang lucu? Warna bekerja baik pertama waktu, tapi setelah itu gambar tampaknya tidak mengetik dengan benar. Lihatlah kelas Colorizer kami dan Lihat jika Anda dapat mengetahui apa salah.

Saat ini, fungsi getColoredBitmap() warna gambar kami menyediakan dan kemudian kembali yang diwarnai gambar. Ini bekerja baik-baik saja sampai kita ingin warna gambar lagi. Sejak yang asli, gambar grayscale adalah berwarna, ketika kita mencoba untuk menggunakan fungsi paletteMap() di atasnya lagi, warna tidak dipetakan dengan baik dan kita berakhir dengan hasil yang tak terduga.

Untuk memecahkan masalah ini, kita memerlukan metode untuk mengetik salinan gambar dan menyimpan asli tak tersentuh.

Kami akan membuat sebuah fungsi yang tidak hanya itu di langkah berikutnya.


Langkah 30: Tambahkan getBitmapCopy fungsi

Tambahkan fungsi ini untuk kelas Colorizer:

Fungsi ini mengambil DisplayObject apapun, menyalinnya dan mengembalikan salinan Bitmap.

Jika DisplayObject disediakan Bitmap, maka kita hanya menggunakan clone() metode untuk membuat salinan dari BitmapData.

Jika jenis lain DisplayObject, kemudian kita membuat objek BitmapData baru dan menggunakan metode menarik untuk membuat salinan Bitmap DisplayObject.

Terakhir, kita kembali Bitmap baru.

Fungsi ini sedikit lebih rumit daripada perlu. Kita bisa memotong semua barang yang DisplayObject dan hanya memilikinya yang menerima Bitmap dan kembali salinan kloning. Tapi ingat pada awal ketika saya mengatakan Anda akan dapat menggunakan Colorizer ini pada aset vektor dari Flash serta bitmap? Well, ini adalah bagaimana Anda akan melakukannya. Anda dapat menggunakan fungsi getBitmapCopy() ini untuk membuat salinan Bitmap aset Anda Flash dan kemudian menggunakan yang Bitmap di we'v cara yang sama telah menggunakan kami menciptakan Photoshop bitmap.


Langkah 31: Menerapkan getBitmapCopy() fungsi

Menambahkan parameter baru untuk getColoredBitmap() fungsi yang disebut copyBMP:

Ini adalah parameter boolean yang bisa kita gunakan untuk menentukan jika kita ingin membuat salinan dari bitmap atau warna gambar asli.

Lebih jauh ke dalam fungsi getColoredBitmap() mengubah baris ini:

Ini:

Sekarang, jika bendera copyBMP diatur ke benar, kita akan menggunakan getBitmapCopy() untuk membuat salinan bitmap warna. Jika tidak, kami hanya warna asli seperti yang kami lakukan sebelum. Ini membuat hal-hal yang fleksibel dalam hal kita ingin mewarnai gambar asli untuk alasan apa pun.

Hal terakhir yang perlu kita lakukan untuk menerapkan ini adalah mengubah panggilan kami untuk getColoredBitmap() menggunakan bendera. Kami membuat panggilan dalam fungsi colorImage() di kelas utama. Tambahkan bendera benar, seperti ini:


Langkah 32: Uji lagi

Jadi sekarang bahwa masalah adalah tetap dan gambar harus mengetik dengan benar. Tapi ada masalah lain...


Anda mungkin menyadari bahwa setelah Anda mengubah warna beberapa kali, tepi karakter awal untuk mendapatkan chunky dan pixelated. Hal ini karena bukan menggantikan gambar berwarna setiap kali, kita sebenarnya hanya sedang plopping yang baru di atas segalanya. Kita harus melakukan dua hal untuk memperbaiki masalah ini.


Langkah 33: Update colorImage fungsi

Tambahkan baris ini awal fungsi colorImage di kelas utama:

Yang akan memeriksa untuk melihat apakah kita sedang mewarnai gambar sudah menjadi bagian dari _compositeSprite. Jika demikian, kami akan menghapusnya sebelum menambahkan yang baru.

Yang mengurus bagian dari masalah, tetapi kita juga perlu untuk memastikan bahwa kita sedang membersihkan komposit BitmapData sebelum kita menarik komposit Sprite ke dalamnya lagi. Tambahkan baris ini benar sebelum draw() panggilan pada akhir fungsi:

Ini hanya mengisi BitmapData komposit dengan pixel transparan — menghapusnya sebelum kita menarik ke dalamnya lagi.

Fungsi colorImage Anda sekarang harus terlihat seperti ini:


Langkah 34: Uji lagi

Semuanya akhirnya harus bekerja sekarang. Jika tidak, Anda dapat memberikan diri Anda tepukan di punggung. Jika tidak, Anda punya sedikit debugging untuk melakukan.

Jika Anda hanya tertarik mewarnai gambar statis maka Anda dapat berhenti di sini. Setelah proses kustomisasi karakter selesai, Anda dapat menggunakan _compositeBitmap yang diciptakan sebagai grafis karakter dalam permainan Anda. Hal ini bagus karena Anda memiliki karakter kustom yang disimpan dalam satu bitmap. Anda tidak perlu menjalankan kode mewarnai untuk menciptakan karakter setiap kali Anda ingin menampilkannya pada layar.

Dalam sisa tutorial aku akan menunjukkan kepada Anda cara menghidupkan frame karakter. Jika yang menarik minat Anda maka silakan baca terus...


Langkah 35: Mengatur variabel untuk animasi

Kita perlu menambahkan beberapa variabel kelas utama sehingga kita dapat menghidupkan karakter kita. Tambahkan konstanta ini:

Anda akan perlu untuk mengedit konstanta sesuai dengan ukuran karakter Anda. Ingat ukuran bingkai didasarkan pada ukuran salah satu frame pada lembar karakter Anda, tidak ukuran seluruh gambar.

Sekarang menambahkan variabel ini:

_AnimatedBitmap adalah gambar yang kita akan gunakan untuk menampilkan karakter animasi. Kita akan menggunakan _animationTimer untuk secara berkala swap data bitmap _animatedBMD dengan piksel untuk frame baru animasi. Kita akan membahas ini di langkah berikutnya.


 Langkah 36: Tambahkan fungsi updateAnimation ()

Tambahkan fungsi ini untuk kelas utama:

Fungsi ini akan dipanggil dari _animationTimer kami, sehingga perlu menerima acara timer.

Dalam baris pertama kita mendefinisikan persegi panjang baru objek. Persegi ini menentukan daerah piksel yang kita inginkan untuk menyalin dari bitmap komposit. Kami ingin menyalin gambar untuk satu frame, jadi kami menggunakan konstanta FRAME_W dan FRAME_H untuk menentukan lebar dan tinggi persegi panjang. Mengalikan lebar bingkai dengan variabel _currentFrame memberikan posisi X persegi panjang. Posisi Y selalu 0, karena semua frame kami dalam satu baris.

Di baris berikutnya kami menyalin pixel dari _compositeBitmap BitmapData ke _animatedBMD BitmapData. Kami menggunakan clipRect untuk menentukan daerah untuk menyalin, dan objek Point untuk menentukan lokasi di _animatedBMD di mana kita ingin sisipkan mereka. Dalam kasus ini, kita selalu ingin sisipkan mereka di 0,0.

Terakhir, kita kenaikan _currentFrame counter, dan kemudian mod dengan jumlah frame animasi kami. Dengan cara ini nomor bingkai akan loop kembali ke 0 setelah mencapai frame terakhir.

Berikut adalah bagaimana ini akan bekerja: setiap kali Timer kebakaran akan menyalin satu frame senilai piksel dari _compositeBitmap dan tempel URL tersebut ke _animatedBMD. Yang update gambar karakter dan menciptakan animasi.



Langkah 37: Tambahkan setUpAnimation() fungsi

Tambahkan fungsi ini untuk kelas utama:

Fungsi ini mempersiapkan segala sesuatu untuk animasi. Pertama kami membuat BitmapData untuk animasi (menggunakan ukuran frame) dan menggunakannya untuk membuat Bitmap baru. Kami posisi Bitmap menggunakan kami ANIMATED_BMP_LOC konstan dan menambahkannya ke daftar tampilan.

Akhirnya kami menciptakan sebuah Timer baru untuk melakukan animasi. Anda dapat menyesuaikan kecepatan di mana Timer berjalan. Untuk saya animasi, 150 milidetik terasa benar.


Langkah 38: Tambahkan startAnimation() fungsi

Tambahkan fungsi ini untuk kelas utama:

Hanya dua baris di sini. Pertama menambahkan pendengar acara ke timer animasi. Setiap kali timer kutu ini akan memanggil fungsi _updateAnimation kami. Kemudian kami hanya memberitahu timer untuk memulai.


Langkah 39: Rock and Roll!

Sekarang sistem animasi kami siap untuk pergi. Semua yang tersisa adalah untuk menambahkan setup dan mulai panggilan untuk fungsi animasi. Menambahkannya ke konstruktor kelas utama:

Anda harus siap untuk rock sekarang. Memberikan tes dan melihat apakah ia bekerja.


Langkah 40: Mengambil lebih lanjut

Sekarang bahwa Anda memiliki sistem kustomisasi karakter Anda bekerja, perubahan apa Anda harus membuat untuk mendapatkan ke permainan Anda sendiri?

Hal yang paling jelas saya pikir Anda mungkin ingin lakukan adalah menambahkan bagian colorable yang lebih. Karakter saya sangat sederhana, tetapi Anda dapat membuat karakter manusia dan membiarkan pengguna memilih warna untuk kulit, mata, rambut, kemeja, Celana, rambut wajah, dll. Anda dapat membuat sebuah permainan balap yang mana Anda dapat memilih warna mobil Anda, garis-garis balap, roda, dan lubang kru.

Biasanya Anda akan memiliki customizer karakter pada awal permainan. Anda kemudian dapat menyimpan gambar Bitmap berwarna dan menggunakannya sebagai karakter permainan. Jika Anda memiliki karakter animasi maka Anda akan perlu untuk memisahkan kode animasi dari bagian kustomisasi karakter permainan Anda (sehingga Anda dapat menghidupkan karakter selama permainan juga).

Juga, saya menyimpan salinan kelas Colorizer dalam folder bersama kelas (tidak terkait dengan setiap proyek tertentu). Hal ini sangat berguna untuk menggunakan dalam setiap proyek. Aku hanya mengimpor kelas dan memanggil fungsi getColoredBitmap() statis.


Kesimpulan

Jadi di sana Anda memilikinya. Anda sekarang memiliki sebuah sistem yang lengkap untuk menyesuaikan dan menghidupkan karakter permainan Anda menggunakan hanya satu set gambar. Jika Anda dapat menggunakan ini dengan baik dalam permainan Anda dapat menghemat waktu satu ton dengan tidak harus membuat sekelompok seni aset dalam berbagai warna.

Saya harap Anda menikmati tutorial dan saya harap Anda menemukan berguna.

Seperti biasa silakan tinggalkan komentar dan biarkan aku tahu apa yang Anda pikirkan.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.