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

Fitur Kamera Baru di Phaser

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Zesar Matin Aryona (you can also view the original English article)

Phaser diperkenalkan diversi 2.4.7, fitur kamera baru terlihat benar-benar menarik dan itu layak untuk memeriksanya. Dalam tutorial ini Anda akan melihat betapa mudahnya untuk menerapkan efek kamera dalam game HTML5 Anda yang dibangun dengan Phaser.

Catatan: jika Anda memerlukan pengenalan kerangka Phaser, Anda dapat membaca Memulai dengan Phaser: Membangun "Monster Wants Candy", dimana aku memecah kode sumber dan menjelaskan secara terperinci.

Ada tiga fitur baru yang menarik, Anda dapat menggunakan: lampu kilat kamera (flash), memudar (fade), dan goyang (shake). Mereka melakukan persis apa yang Anda harapkan dari mereka. Mari kita lihat mengapa mereka sangat berguna dan harus dipertimbangkan dalam proyek pengembangan game berikutnya dengan Phaser.

Sampai sekarang saya menggunakan plugin Juicy untuk mencapai fungsi tersebut, tetapi kode sumber ditinggalkan sejak lama dan saya harus mengelola itu sendiri. Sekarang dengan fitur built-in dan bagian dari kode sumber Phaser saya tidak perlu khawatir tentang masalah kompatibilitas atau kerangka pembaruan. Mereka juga jauh lebih mudah untuk diterapkan.

Enclave Phaser Template

Saya akan menggunakan Enclave Phaser Template sebagai studi kasus, template ini adalah satu set fungsi dasar, dari kondisi melalui audio dan manajemen skor tertinggi untuk tweens dan animasi. Template ini open source (gratis) dan tersedia pada GitHub sebagai bagian dari inisiatif open.enclavegames.com, sehingga Anda dapat dengan mudah melihat bagaimana semua itu diimplementasikan, termasuk efek kamera baru.

Enclave Phaser Template

OK, mari kita beralih ke bagian penerapannya.

Kamera Flash

Flashing kamera dapat digunakan untuk efek memukul atau benturan — misalnya, ketika pemain terkena peluru musuh, layar dapat berubah menjadi merah untuk sesaat. Berikut penjelasan efek lampu kilat kamera dengan parameter:

Mengisi layar dengan warna solid dan memudar ke alpha 0 (transparan) pada durasi tertentu. Anda dapat menggunakan parameter paksaan untuk menimpakan efek flash lain dan hanya berjalan sekali pada momen yang bersamaan. Warna default adalah putih, dan lampu kilat berlangsung selama setengah detik (500 ms):

Flashing kamera dapat digunakan untuk berbagai efek. Pada Enclave Phaser Template, itu membuat efek transisi mulus ketika membawa pada tempat baru, untuk menampilkan menu utama setelah semua pemuatan sumber daya telah selesai. Daripada menampilkan semuanya langsung, kita dapat menggunakan lampu kilat dengan warna hitam sebagai dasar:

Dieksekusi pada akhir dari membuat fungsi dalam file MainMenu.js mewakili negara menu. Anda dapat melihat efek beraksi di gif:

Enclave Phaser Template - Flash

Seperti yang Anda lihat, ini terlihat bagus, muncul efek halus. Sekarang mari kita beralih ke kamera memudar (fade).

Kamera Memudar

Untuk membuat rasa pindah antara tempat yang lengkap, kita dapat menggunakan pudar untuk mencapai flash terbalik dan membuat suatu tempat memudar dengan lancar. Jika dilakukan dengan benar, ini dapat memudar-hilang, efek memudar-muncul, yang terlihat sangat bagus. Berikut teorinya:

Parameter yang persis sama seperti kamera flash, kecuali warna default bukan putih, tetapi hitam:

Mulai mengisi layar dari alpha 0 dengan warna tertentu dan berakhir dengan warna solid. Kode sumber aktual dari aksi clickStart pada tombol Mulai pada berkas MainMenu.js terlihat seperti ini:

Layar memudar selama 200 milidetik dan kemudian berpindah ke tempat baru setelah jumlah waktu yang sama untuk menyinkronkan kedua tindakan. Inilah yang terlihat saat beraksi:

Enclave Phaser Template - Fade

Menggabungkan flash dan memudar membuat transisi antar tempat yang bagus. Sekarang, mari kita beralih pada efek goyang.

Kamera Goyang

Metode Phaser lain yang berguna adalah kamera goyang — dapat digunakan untuk situasi dimana pemain terkena hambatan saat terbang melalui bidang asteroid, atau memanfaatkan sebuah bom yang kuat dari inventaris. Hal ini dapat dijalankan ketika bertabrakan dengan objek game yang mengambang di layar.

Parameter pertama, mengontrol berapa banyak kamera yang gemetar, dan yang kedua berapa lama guncangan akan terjadi. Yang ketiga adalah tentang mengganti guncangan yang sudah berjalan jika parameter ini diatur ke true. Keempat mengontrol goyang horizontal, vertikal atau keduanya, dan parameter terakhir memutuskan apakah kamera akan menggoncangkan di luar batas dunia menampilkan apapun yang ada. Berikut adalah contoh dengan nilai-nilai default:

Itu akan mengguncang kamera dengan intensitas 0.05, untuk setengah detik (500 milliseconds), parameter force diatur true, kamera akan menggoncangkan di kedua arah, dan juga di luar batas dunia. Jika Anda tidak butuh untuk menyesuaikan guncangan dan membiarkan parameter default, maka Anda dapat saja mengabaikan mereka dalam panggilan dan akan bekerja sama dengan di atas:

Dan ini adalah bagaimana guncangan terlihat dalam kode sumber Enclave Phaser Template ketika poin yang ditambahkan dalam Game.js file:

Tiga parameter terakhir yang sama persis dengan yang default, jadi bisa dihilangkan, tetapi yang tersisa untuk tujuan pendidikan. Lihat dalam aksi:

Enclave Phaser Template - Shake

Dalam kasus ini intensitas lebih rendah dari nilai default, dan durasi lebih pendek untuk membuatnya merasa sedikit lemah, sehingga ini tidak akan mengalihkan perhatian pemain terlalu banyak.

ResetFX

Ada juga sedikit metode yang berguna bersamaan dengan tiga yang dijelaskan di atas. Anda dapat menyetel efek aktif, dan dari sudut pandang pemrograman Anda bahkan tidak harus tahu jika ada yang berjalan pada waktu yang diberikan — ada metode khusus resetFX yang dapat Anda gunakan.

Ini segera membersihkan efek kamera berkelanjutan dan menghapusnya dari layar.

Events

Jika Anda ingin tahu apakah efek tertentu aktif atau sudah berakhir, Anda dapat menggunakan events yang disediakan oleh kerangka: onFlashComplete, onFadeComplete, dan onShakeComplete.

Ingat contoh memudar di tombol klik dalam menu utama? Ini dilakukan dengan menunggu jumlah waktu yang tetap, dan kemudian tempat beralih ke yang baru. Kita bisa melakukannya lebih baik menggunakan event onFadeComplete:

Cara ini diterapkan pada langkah berikutnya, dalam file Story.js ketika beralih dari tempat Story ke Game. Anda harus mengakui itu terlihat lebih baik, dan tempat dijalankan sama persis ketika efek selesai, tidak peduli berapa lama berlangsung.

Ringkasan

Seperti yang Anda lihat, itu adalah fitur yang cukup kuat ketika hadir untuk menambahkan ekstra "juice" atau mempoles game Anda. Pada saat yang sama, mereka juga sangat mudah digunakan - itu bagus untuk melihat mereka secara native diimplementasikan dalam Phaser.

Jangan ragu untuk mengambil sumber kode Phaser Enclave Template, terapkan efek dan bagikan link game ter-upgrade barumu bersama kami di komentar!

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.