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

Bagaimana Menghasilkan Kesan Kilat 2D yang Cerah Baik dalam Perpaduan (C#)

by
Difficulty:IntermediateLength:LongLanguages:

Malay (Melayu) translation by Aisyah Arrafah (you can also view the original English article)

Terdapat banyak kegunaan untuk kesan kilat dalam permainan, dari suasana latar belakang semasa ribut kepada serangan kilat dahsyat seorang ahli sihir. Dalam tutorial ini, saya akan menerangkan bagaimana untuk memprogramkan secara progresif kesan kilat 2D yang menarik: baut, cawangan, dan juga teks.

Tutorial ini ditulis secara khusus untuk Perpaduan, dengan semua coretan kod dalam C#. Tutorial yang sama juga tersedia dengan kod JavaScript. Jika anda tidak menggunakan Perpaduan, lihat versi platform-agnostik ini tutorial yang sama; ia ditulis untuk XNA, tetapi anda harus dapat menggunakan teknik dan konsep yang sama dalam mana-mana enjin gamedev dan platform.

Demo

Lihat demo di bawah:

Klik objek Perpaduan, kemudian gunakan kekunci nombor untuk menukar antara demo. Sesetengah demo memerlukan anda mengklik dalam satu atau dua lokasi untuk mengaktifkannya.

Persediaan Asas

Untuk memulakan, anda perlu membuat projek 2D baru dalam Perpaduan. Nama itu apa sahaja yang anda suka. Dalam Perpaduan, buat empat folder: Materials, Prefab, Script, dan Sprite.

Seterusnya, klik Kamera Utama dan pastikan Unjurannya ditetapkan kepada Orthographic. Tetapkan Saiz kamera ke 10.

Klik kanan pada folder Bahan dan pilih Buat> Bahan. Namakan namanya kepada Additive. Pilih bahan ini dan ubah Shader ke Zarah> Aditif. Ini akan membantu kilat anda "pop" di kemudian hari.

Langkah 1: Lukiskan Garis Berseri

Blok asas bangunan yang kita perlukan untuk membuat kilat dari segmen garis. Mula dengan membuka perisian pengeditan imej kegemaran anda dan lukiskan garis lurus kilat dengan kesan cahaya. Inilah yang kelihatan seperti saya:

Kami ingin menarik garis panjang yang berlainan, jadi kami akan memotong segmen garisan ke dalam tiga keping seperti yang ditunjukkan di bawah (memotong imej anda seperti yang diperlukan). Ini akan membolehkan kita untuk meregangkan segmen pertengahan dengan panjang yang kita suka. Oleh kerana kita akan meregangkan segmen pertengahan, kita boleh menyimpannya sebagai hanya satu piksel tebal. Juga, sebagai bahagian kiri dan kanan adalah imej cermin antara satu sama lain, kita hanya perlu menyelamatkan salah seorang daripada mereka; kita dapat flipnya dalam kod.

Seret fail imej anda ke dalam folder Sprites dalam panel Projek. Ini akan mengimport fail imej ke dalam projek Perpaduan. Klik pada sprite untuk melihatnya di panel Inspektor. Pastikan Jenis Tekstur ditetapkan ke Sprite (2D\uGUI), dan tetapkan Tag Pembungkusan ke Baris.

Tag Pembungkus akan membantu Perpaduan menjimatkan panggilan menarik apabila menarik petir kami, jadi pastikan anda memberi kedua-dua sprite Tag Pembungkusan yang sama atau tidak, ia tidak akan meningkatkan prestasi.

Sekarang, mari kita mengisytiharkan kelas baru untuk mengendalikan segmen garisan garis:

A dan B adalah titik akhir garisan. Dengan mengukur dan memutarkan kepingan garisan, kita boleh melukis garis ketebalan, panjang, dan orientasi.

Tambah kaedah Draw() berikut ke bahagian bawah kelas Line:


Cara kami meletakkan segmen pertengahan dan penutup akan menjadikan mereka bergabung dengan lancar apabila kami menarik mereka. Cap permulaan diposisikan pada titik A, segmen pertengahan diluaskan ke lebar yang dikehendaki, dan cap akhir diputar 180° dan ditarik pada titik B.

Sekarang kita perlu membuat prefab untuk kelas Line kami untuk berfungsi. Dalam Perpaduan, dari menu, pilih GameObject> Create Empty. Objek akan muncul dalam panel Hierarki anda. Namakan namanya kepada Line dan seret skrip Line anda ke dalamnya. Ia sepatutnya kelihatan seperti imej di bawah.

Kami akan menggunakan objek ini sebagai satu bekas bagi segmen garisan kami.

Sekarang kita perlu membuat objek untuk bahagian segmen kami. Buat tiga Sprite dengan memilih GameObject> Create Other> Sprite dari menu. Namakan semula mereka kepada StartCap, MiddleSegment, dan EndCap. Seretnya ke objek Line kami supaya mereka menjadi anak-anaknya-ini sepatutnya kelihatan seperti imej di bawah.

Pergi ke setiap kanak-kanak dan tetapkan Bahannya di Sprite Renderer ke bahan Tambahan yang kami buat sebelum ini. Berikan setiap kanak-kanak sprit yang sesuai. (Dua topi harus mendapatkan sprite cap dan segmen pertengahan harus mendapatkan sprite garis.)

Klik pada objek Line supaya anda dapat melihat skrip di panel Inspektor. Berikan anak-anak ke slot yang sesuai dan kemudian seret objek Line ke folder Prefabs untuk membuat prefab untuknya. Anda kini boleh memadamkan objek Talian dari panel Hierarki.

Langkah 2: Buat Garis Jagger

Kilat cenderung membentuk garisan bergerigi, jadi kami memerlukan algoritma untuk menghasilkannya. Kami akan melakukan ini dengan memilih mata secara rawak di sepanjang garis, dan menyisihkan mereka jarak rawak dari garisan.

Dengan menggunakan anjakan secara rawak cenderung menjadikan garis itu terlalu bergerigi, jadi kami akan melancarkan hasilnya dengan mengehadkan seberapa jauh dari setiap mata jiran yang lain boleh dipindahkan - melihat perbezaan antara garisan kedua dan ketiga dalam gambar di bawah.

Kami melancarkan garisan dengan meletakkan mata pada keadaan yang sama diimbangi dengan titik sebelumnya; ini membolehkan garis secara keseluruhannya mengembara ke atas dan ke bawah, sambil menghalang mana-mana bahagiannya daripada terlalu bergerigi.

Mari kita buat kelas LightningBolt untuk mengendalikan mencipta garis bergerigi kami.

Kod ini mungkin agak menakutkan, tetapi ia tidak begitu buruk apabila anda memahami logiknya. Sebelum kita meneruskan, faham bahawa kita telah memilih untuk pool  segmen garisan kita di bolt (sejak sentiasa menstabilkan dan memusnahkan objek boleh menjadi mahal dalam Perpaduan).

  • Fungsi Inisialisasi() akan dipanggil sekali pada setiap bolt kilat dan akan menentukan berapa banyak segmen garisan setiap bolt dibenarkan untuk digunakan.
  • Fungsi ActivateLine() akan mengaktifkan segmen garisan menggunakan data kedudukan yang diberikan.
  • Fungsi DeactivateSegments() akan menyahaktifkan mana-mana segmen talian aktif dalam bolt kami.
  • Fungsi ActivateBolt() akan mengendalikan membuat garisan kami yang bergerigi dan akan memanggil fungsi aktivateLine() untuk mengaktifkan segmen garisan kami di kedudukan yang sesuai.

Untuk membuat garisan bergerigi kami, kami mula dengan mengira cerun di antara dua titik kami, serta vektor biasa ke cerun itu. Kami kemudian memilih beberapa kedudukan rawak sepanjang garis dan menyimpannya dalam senarai kedudukan kami. Kita skala kedudukan ini antara 0 dan 1, sehingga 0 mewakili permulaan garisan dan 1 mewakili titik akhir, dan kemudian menyusun kedudukan ini untuk membolehkan kita dengan mudah menambah segmen baris di antara mereka.

Gelung melewati titik yang dipilih secara rawak dan menggantikannya sepanjang normal dengan jumlah rawak. Faktor skala di sana untuk mengelakkan sudut terlalu tajam, dan sampul surat memastikan kilat sebenarnya pergi ke titik destinasi dengan mengehadkan anjakan apabila kita hampir hujung. Penyebaran ini adalah untuk membantu mengawal sejauh mana segmen menyimpang dari cerun garis kami; penyebaran 0 pada dasarnya akan memberi anda garis lurus.

Jadi, seperti yang kita lakukan dengan kelas Line kami, mari buatkan ini menjadi prefab. Dari menu, pilih GameObject> Create Empty. Objek akan muncul dalam panel Hierarki anda. Namakan namanya kepada Bolt, dan seret salinan skrip LightningBolt ke sana. Akhir sekali, klik pada objek Bolt dan berikan prefab Talian, dari folder Prefabs, ke slot yang sesuai dalam skrip LightningBolt. Sebaik sahaja anda selesai dengan itu, hanya seret objek Bolt ke folder Prefabs untuk membuat prefab.

Langkah 3: Tambah Animasi

Kilat hendaklah kilat terang dan kemudian memudar. Inilah yang kami buat Update() dan Draw() berfungsi di LightningBolt. Memanggil Kemas Kini() akan membuat bolt memudar. Lukisan() Memanggil akan mengemas kini warna bolt pada skrin. IsComplete akan memberitahu anda apabila bolt telah memudar sepenuhnya.

Langkah 4: Buat Bolt

Sekarang kita mempunyai kelas LightningBolt kami, mari kita gunakannya dengan baik dan buat adegan demo pantas.

Kami akan menggunakan kolam objek untuk demo ini, jadi kami ingin membuat objek kosong untuk memegang bolt aktif dan tidak aktif kami (semata-mata untuk tujuan organisasi). Dalam Perpaduan, dari menu, pilih GameObject> Create Empty. Objek akan muncul dalam panel Hierarki anda. Namakan semula kepada LightningPoolHolder.

Klik kanan pada folder Script dan pilih Buat> C# Script. Namakan skrip DemoScript anda dan bukanya. Berikut adalah beberapa kod cepat untuk memulakan anda:

Semua kod ini tidak memberi kita satu cara untuk membuat baut menggunakan objek penyatuan. Ada cara lain yang boleh anda tetapkan, tapi inilah yang akan kami jalankan! Setelah kami menetapkannya, semua yang anda perlu lakukan ialah klik dua kali untuk membuat baut pada skrin: sekali untuk kedudukan permulaan dan sekali untuk kedudukan akhir.

Kami memerlukan objek untuk meletakkan DemoScript kami. Dari menu, pilih GameObject> Create Empty. Objek akan muncul dalam panel Hierarki anda. Namakan semula kepada DemoScript dan seret skrip DemoScript anda ke dalamnya. Klik pada objek DemoScript supaya kita dapat melihatnya dalam panel Inspektor. Berikan prefab Bolt, dari folder Prefabs, ke slot yang sepadan dalam DemoScript.

Itu sepatutnya cukup untuk membuat anda pergi! Jalankan pemandangan di Unity dan cuba!

Langkah 5: Buat Kilat Cawangan

Anda boleh menggunakan kelas LightningBolt sebagai blok bangunan untuk mencipta kesan kilat yang lebih menarik. Sebagai contoh, anda boleh membuat cawangan bolt seperti ditunjukkan di bawah:

Untuk membuat cawangan kilat, kita memilih mata rawak sepanjang bolt kilat dan menambah baut baru yang keluar dari titik-titik ini. Dalam kod di bawah, kami membuat antara tiga dan enam cawangan yang berasingan dari bolt utama pada sudut 30°.

Kod ini berfungsi dengan sangat serupa dengan kelas LightningBolt kami dengan pengecualian bahawa ia tidak menggunakan penggabungan objek. Memanggil Inisialisasi() adalah semua yang perlu anda lakukan untuk membuat bilah cawangan; selepas itu, anda hanya perlu memanggil Update() dan Draw(). Saya akan menunjukkan kepada anda dengan tepat bagaimana untuk melakukan ini dalam DemoScript kami kemudian di dalam tutorial.

Anda mungkin perhatikan rujukan kepada fungsi GetPoint() dalam kelas LightningBolt. Kami tidak sebenarnya melaksanakan fungsi itu, jadi mari kita jaga sekarang.

Tambah fungsi berikut di bahagian bawah kelas LightningBolt:

Langkah 6: Membuat Teks Kilat

Berikut adalah video kesan lain yang boleh anda buat dari bolt kilat:

Kami perlu melakukan sedikit lagi persediaan untuk yang satu ini. Pertama, dari panel Projek, pilih Buat> RenderTexture. Namakan namanya kepada RenderText dan tetapkan Saiznya kepada 256x256px. (Tidak semestinya saiz yang tepat, tetapi lebih kecil, semakin cepat program akan berjalan.)

Dari menu, pilih Edit> Tetapan Projek> Tag dan Lapisan. Kemudian, dalam panel Inspektor, tambahkan Layers drop down dan tambahkan Teks ke Layer Pengguna 8.

Kami kemudiannya perlu membuat kamera kedua. Dari menu, pilih GameObject> Buat Lain> Kamera. Namakan namanya kepada TextCamera, dan tetapkan projek kepada Orthographic dan Bendera Clearnya kepada Warna Pepejal.  Tetapkan warna Latarnya kepada (R: 0, G: 0, B: 0, A: 0) dan tetapkan Masker Cullingnya hanya menjadi Teks (lapisan yang baru kita buat). Akhirnya, tetapkan Tekstur Sasarannya kepada RenderText (RenderTexture yang kami buat sebelumnya). Anda mungkin perlu bermain-main dengan Saiz kamera kemudian, untuk mendapatkan segala-galanya sesuai dengan skrin.

Sekarang kita perlu membuat teks sebenar yang akan kita lukis dengan kilat kita. Dari menu pilih GameObject> Buat Other> GUI Text. Pilih objek Teks GUI dari panel Hierarki dan tetapkan Teksnya ke LIGHTNING, Jangkarnya ke tengah tengah, dan Alignmentnya menjadi pusat.  Kemudian, tetapkan Layernya ke lapisan Teks yang kami buat tadi. Anda mungkin perlu bermain-main dengan Saiz Font agar sesuai dengan teks pada skrin.

Sekarang pilih Kamera Utama dan tetapkan Masker Cullingnya menjadi segalanya tetapi lapisan Teks kami. Ini akan menyebabkan teks GUI kami kelihatan hilang dari skrin, tetapi ia harus ditarik pada RenderTexture yang kami buat lebih awal: pilih RenderText dari panel Projek dan anda sepatutnya dapat melihat perkataan LIGHTNING pada pratonton di bahagian bawah panel .

Sekiranya anda tidak dapat melihat perkataan LIGHTNING, anda perlu bermain-main dengan saiz kamera, kedudukan fon, dan (teks) anda. Untuk membantu anda meletakkan teks anda, klik pada TextCamera dalam panel Hierarki, dan tetapkan Texture Sasarannya kepada Tiada. Anda kini dapat melihat Teks GUI anda jika anda memusatkannya pada TextCamera. Sebaik sahaja anda mempunyai kedudukan semuanya, tetapkan TextCamera Target Texture kembali ke RenderText.

Sekarang untuk kod! Kita perlu mendapatkan piksel dari teks yang kita lukis. Kita boleh melakukan ini dengan menarik teks kami ke RenderTarget dan membaca semula data piksel ke Texture2D dengan Texture2D.ReadPixels(). Kemudian, kita boleh menyimpan koordinat piksel dari teks sebagai Senarai<Vector2>.

Berikut adalah kod untuk melakukannya:

Nota: Kami akan menjalankan fungsi ini sebagai Coroutine pada permulaan program kami agar ia berjalan dengan betul.

Selepas itu, setiap bingkai, kita boleh memilih pasangan mata secara rawak dan mencipta bolt kilat di antara mereka. Kami mahu mereka bentuknya agar semakin hampir dua mata antara satu sama lain, semakin besar kesempatan kita membuat bolt di antara mereka.

Ada teknik mudah yang boleh kita gunakan untuk mencapai ini: kita akan memilih titik pertama secara rawak, dan kemudian kita akan memilih nombor tetap yang lain secara rawak dan memilih yang terdekat.

Berikut adalah kod untuk itu (kami akan menambahnya ke DemoScript kami kemudian):

Bilangan mata calon yang kami uji akan mempengaruhi paparan teks petir; memeriksa bilangan mata yang lebih besar akan membolehkan kita mencari mata yang sangat dekat untuk menarik bolt antara, yang akan membuat teks sangat kemas dan mudah dibaca, tetapi dengan bolt kilat yang lebih sedikit antara huruf. Nombor yang lebih kecil akan menjadikan teks kilat kelihatan lebih liar tetapi kurang dibaca.

Langkah 7: Cuba Variasi Lain

Kami telah membincangkan membuat kilat dan kilat kilat cawangan, tetapi mereka tentu bukan satu-satunya kesan yang boleh anda buat. Mari kita lihat beberapa variasi lain pada kilat yang mungkin anda mahu gunakan.

Bergerak Kilat

Anda mungkin sering membuat bolt kilat bergerak. Anda boleh melakukan ini dengan menambahkan bingkai pendek baru setiap bingkai pada titik akhir bingkai bingkai sebelumnya.

Ledakan Halilintar

Variasi ini menawarkan kesan dramatik yang menimbulkan kilat di bulatan dari titik pusat:

Langkah 8: Letakkan Semua Bersama dalam DemoScript

Anda akan dapat mencuba semua kesan mewah yang telah kami buat setakat ini, jadi mari letakkan semuanya dalam DemoScript yang kami buat sebelumnya. Anda akan dapat bertukar-tukar antara kesan dengan memukul kekunci nombor pada papan kekunci anda untuk memilih kesannya, dan kemudian mengklik dua kali seperti yang kami lakukan dengan bolt kami sebelum ini.

Inilah kod penuh:

Kesimpulan

Lightning adalah kesan khas yang hebat untuk mengekalkan permainan anda. Kesan yang dijelaskan dalam tutorial ini adalah titik permulaan yang baik, tetapi sudah tentu tidak semua yang anda boleh lakukan dengan kilat. Dengan sedikit imaginasi anda boleh membuat semua jenis kesan kilat yang mengagumkan! Muat turun kod sumber dan eksperimen dengan sendiri.

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.