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 Menyedihkan dan Menyenangkan dalam Perpaduan (JavaScript)

by
Difficulty:IntermediateLength:LongLanguages:

Malay (Melayu) translation by Ahmad Hafiz (you can also view the original English article)

Terdapat banyak kegunaan untuk kesan kilat dalam permainan, dari latar belakang atmosfera semasa badai menyerang kilat ahli silap mata yang kuat.Dalam tutorial ini, saya akan menerangkan bagaimana untuk menghasilkan kesan kilat 2D menakjubkan: kilat, cawangan, dan juga teks. 

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

Demo

Lihat demo di bawah:

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

Tetapan Asas

Untuk bermula, anda mesti membuat projek 2D baru di Perpaduan. Beri apa sahaja nama yang anda suka. Dalam Perpaduan, buat empat folder: Materials Prefabs Scripts , dan Sprites .

Seterusnya, klik Main Kamera dan pastikan Unjuran ditetapkan kepada Orthographic . Tetapkan saiz kamera ke 10 .

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

Langkah 1: Lukiskan Talian Bersinar

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

Kami ingin menggambar garis panjang yang berbeza, jadi kami akan memotong segmen garisan ke dalam tiga bahagian seperti yang ditunjukkan di bawah (memotong gambar anda seperti yang diperlukan). Ini akan membolehkan kita untuk meregangkan segmen pertengahan dengan setiap panjang yang kita suka.  Kerana kita akan meregangkan segmen pertengahan, kita boleh menyimpannya hanya dengan ketebalan satu piksel. Juga, kerana kepingan kiri dan kanan adalah imej cermin antara satu sama lain, kita hanya perlu menyelamatkan salah seorang daripada mereka; kita boleh mengubahnya dalam kod.

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

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

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

A dan B adalah titik akhir garisan. Dengan skala dan berputar jalur, kita boleh melukis sebarang ketebalan, panjang dan orientasi garis.

Tambah kaedah Draw() ke bahagian bawah kelas LineJS :


Cara kami meletakkan segmen pertengahan dan penutup akan membuat mereka bergabung dengan lancar apabila kami melukisnya. Permulaan penutup diposisikan pada titik A, segmen pertengahan diluaskan ke lebar yang dikehendaki, dan penutup penutupnya diputar 180 ° dan ditarik pada titik B.

Sekarang kita perlu membuat prefab supaya kelas LineJS kita berfungsi. Pada Perpaduan, dari menu, pilih GameObject> Create Empty .  Objek akan muncul dalam panel Hierarki anda. Namakan LineJS kepada LineJS dan seret skrip LineJS anda kepadanya. Ia sepatutnya kelihatan seperti gambar di bawah.

Kami akan menggunakan objek ini sebagai bekas untuk kepingan segmen garisan kami. 

Kini kita perlu membuat objek untuk kepingan segmen garisan kami. Buat tiga Sprite dengan memilih GameObject> Create Other> Sprite dari menu.  Tukar nama mereka kepada StartCap MiddleSegment , dan EndCap . Seret ke objek LineJS kami supaya mereka menjadi anak mereka - ini akan kelihatan seperti gambar di bawah.

Pergi ke setiap kanak-kanak dan tetapkan Bahan di Sprite Renderer ke bahan tambahan yang kami buat sebelumnya. Tetapkan setiap anak dengan sprite yang sesuai. (Dua tudung mesti mendapat satu sprite perlindungan dan segmen pertengahan mesti mendapat garis sprit.)

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

Langkah 2: Buat Barisan Serrated

Kilat cenderung membentuk garisan bergerigi, jadi kita memerlukan algoritma untuk menghasilkannya. Kami akan melakukan ini dengan mengambil mata secara rawak di sepanjang garis, dan memindahkannya secara jarak rawak dari garisan.

Dengan menggunakan pemindahan sepenuhnya secara rawak cenderung menjadikan garis-garis terlalu bergerigi, jadi kami akan melancarkan hasilnya dengan mengehadkan seberapa jauh dari setiap titik jiran yang lain dapat dipindahkan - melihat perbezaan antara baris kedua dan ketiga dalam imej di bawah.

Kami melancarkan garis dengan meletakkan titik pada offset sama dengan titik sebelumnya; ini membolehkan garis keseluruhan bergerak ke atas dan ke bawah, sambil menghalang mana-mana bahagian dari menjadi terlalu bergerigi.

Mari buat kelas LightningBoltJS untuk mengendalikan penciptaan garisan bergerigi.

Kod ini mungkin sedikit menakutkan, tetapi ia tidak terlalu buruk selepas anda memahami logiknya. Sebelum kita meneruskan, faham bahawa kita telah memilih untuk menyatukan segmen garisan kita dalam kilat (kerana sentiasa menstabilkan dan memusnahkan objek boleh menjadi mahal dalam Perpaduan).

  • Fungsi Initialize() akan dipanggil sekali pada setiap kilat dan akan menentukan berapa banyak segmen baris setiap kilat dibenarkan untuk digunakan.
  • Fungsi activateLine() akan mengaktifkan segmen garisan menggunakan data kedudukan yang diberikan.
  • Fungsi DeactivateSegments() akan menyahaktifkan semua segmen talian aktif dalam petir kami.
  • Fungsi ActivateBolt() akan mengendalikan garisan bergerigi dan akan memanggil fungsi activateLine() untuk mengaktifkan segmen garisan kami dalam kedudukan yang sesuai.

Untuk membuat garisan bergerigi, kita mulakan dengan mengira cerun di antara dua mata kita, dan vektor biasa ke cerun. Kami kemudian memilih beberapa kedudukan rawak di sepanjang baris dan menyimpannya dalam senarai kedudukan kami.  Kita skala kedudukan ini antara dan , jadi mewakili permulaan garisan dan mewakili titik akhir, dan kemudian kedudukan ini supaya kita dapat dengan mudah menambah segmen garisan di antara mereka.

Ulangi melalui titik yang dipilih secara rawak dan gerakkannya selagi normal dengan nombor rawak. Faktor scale wujud untuk mengelakkan sudut yang terlalu tajam, dan envelope memastikan petir sebenarnya pergi ke titik destinasi dengan mengehadkan anjakan ketika kita hampir berakhir.  Spread membantu untuk mengawal sejauh mana segmen itu menyimpang dari cerun garis kami; spread pada dasarnya memberikan anda garis lurus.

Jadi, seperti yang kita lakukan dengan kelas LineJS kami, mari buatkan ini sebagai prefab. Dari menu, pilih GameObject> Create Empty . Objek akan muncul dalam panel Hierarki anda. Tukar nama itu ke BoltJS , dan seret salinan skrip LightningBoltJS ke sana.  Akhir sekali, klik pada objek BoltJS dan tetapkan prefab LineJS , dari folder Prefabs , ke slot yang sesuai dalam skrip LightningBoltJS . Setelah selesai dengan itu, seret objek BoltJS ke folder Prefabs untuk membuat prefab .

Langkah 3: Tambah Animasi

Kilat mesti berkelip cerah dan kemudian pudar. Ini adalah bagaimana Update() dan Draw() kami digunakan dalam LightningBoltJS .  Memanggil Update() akan membuat pewarna kilat. Memanggil Draw() akan mengemas kini warna kilat pada skrin. IsComplete() akan memberitahu anda apabila kilat telah pudar sepenuhnya.

Langkah 4: Buat Kilat

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

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

Klik kanan pada folder Skrip dan pilih Buat> Javascript . Namakan skrip DemoScriptJS dan membukanya. Berikut adalah beberapa kod cepat untuk bermula:

Semua kod ini memberikan kita cara untuk membuat kilat menggunakan penggabungan objek. Terdapat beberapa cara lain yang boleh anda lakukan, tetapi inilah yang akan kami lakukan! Selepas kami menetapkannya, yang perlu anda lakukan ialah klik dua kali untuk membuat kilat pada skrin: satu kali untuk kedudukan permulaan dan satu kali untuk kedudukan akhir.

Kami memerlukan objek untuk menghidupkan DemoScriptJS kami. Dari menu, pilih GameObject> Create Empty . Objek akan muncul dalam panel Hierarki anda. Namakan DemoScript kepada DemoScript dan seret skrip DemoScriptJS anda kepadanya.  Klik pada objek DemoScript supaya kita dapat melihatnya di panel Inspektor . Tetapkan prefab BoltJS , dari folder Prefabs , ke slot yang sesuai di DemoScriptJS .

Itu sepatutnya cukup untuk membuat anda siap! Jalankan tempat kejadian dalam Perpaduan dan cuba!

Langkah 5: Buat Cawangan Kilat

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

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

Kod ini berfungsi sangat mirip dengan kelas LightningBoltJS kami dengan pengecualian bahawa ia tidak menggunakan penggabungan objek.  Memanggil Initialize() adalah semua yang anda perlu lakukan untuk membuat cawangan kilat; selepas itu, anda hanya perlu memanggil Update() dan Draw() . Saya akan menunjukkan kepada anda bagaimana untuk melakukan ini pada DemoScriptJS kami kemudian dalam tutorial ini.

Anda mungkin telah melihat rujukan kepada fungsi GetPoint() dalam kelas LightningBoltJS . Kami belum lagi melaksanakan fungsi ini, jadi mari jaga sekarang.

Tambah fungsi berikut di bahagian bawah kelas LightningBoltJS :

Langkah 6: Buat Teks Lightning

Berikut adalah video kesan lain yang boleh anda buat daripada kilat:

Kita perlu melakukan seting kecil untuk yang ini. Pertama, dari panel Projek , pilih Buat> RenderTexture .  Tukar nama itu ke RenderText dan tetapkan Saiz menjadi 256x256px . (Ini tidak perlu saiz yang betul, tetapi lebih kecil, lebih cepat program akan berjalan.)

Dari menu, pilih Edit> Tetapan Projek> Tag dan Lapisan . Kemudian, dalam panel Inspektor , luaskan Lapisan lungsur dan tambahkan Text ke Layer Pengguna 8 .

Seterusnya kita perlu membuat kamera kedua. Dari menu, pilih GameObject> Buat Lain> Kamera . Namakan TextCamera  , dan tetapkan Unjuran ke Orthographic and Clear Flags ke Solid Color .  Tetapkan warna Latar Belakang kepada (R: 0, G: 0, B: 0, A: 0) dan tetapkan Mask Culling hanya menjadi Text (lapisan yang baru kita buat).  Akhir sekali, tetapkan Tekstur Sasaran ke RenderText (RenderTexture yang kami buat sebelumnya). Anda mungkin perlu bermain dengan Saiz Kamera kemudian, supaya semuanya sesuai dengan skrin.

Sekarang kita perlu membuat teks sebenar yang akan kita ambil dengan kilat kita. Dari menu, pilih GameObject> Buat Lain> Teks GUI .  Pilih objek Teks GUI dari panel Hierarki dan tetapkan Teks ke LIGHTNING Jangkar ke middle center , dan Alignment ke center .  Kemudian, tetapkan Layer ke lapisan Text yang kami buat tadi. Anda mungkin perlu bermain dengan Saiz Fon agar sesuai dengan teks pada skrin.

Sekarang pilih Main Camera dan tetapkan Masker Culling menjadi segala-galanya kecuali lapisan Teks kami. Ini akan menyebabkan GUI Teks kami kelihatan hilang dari skrin, tetapi ia harus ditarik pada RenderTexture yang kami buat sebelumnya: pilih RenderText dari panel Projek dan anda sepatutnya dapat melihat perkataan LIGHTNING dalam pratonton di bahagian bawah panel.

Jika anda tidak dapat melihat perkataan LIGHTNING , anda perlu bermain dengan peletakan, saiz fon dan saiz kamera (teks). Untuk membantu anda meletakkan teks anda, klik TextCamera dalam panel Hierarki , dan tetapkan Tekstur Sasaran kepada None .  Sekarang anda akan dapat melihat GUI Teks jika anda memusatkannya pada TextCamera. Setelah anda meletakkan kedudukan semuanya, tetapkan TextCamera Tekan Sasaran 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 teks sebagai List. .list.<Vector2> .

Berikut adalah kod untuk melakukannya:

Nota: Kita mesti melaksanakan fungsi ini sebagai Coroutine pada permulaan program kami untuk berjalan dengan betul.

Selepas itu, setiap bingkai, kita secara rawak boleh memilih pasangan dari titik-titik ini dan membuat kilat di antara mereka. Kami mahu mereka bentuknya supaya kedua-dua mata lebih dekat antara satu sama lain, semakin besar kemungkinan kita membuat kilat di antara mereka.

Terdapat teknik mudah yang boleh kita gunakan untuk mencapai ini: kita akan memilih titik pertama secara rawak, dan kemudian kita akan memilih beberapa mata lain secara rawak dan memilih yang paling dekat.

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

Bilangan mata calon yang kami uji akan menjejaskan penampilan teks petir; memeriksa bilangan mata yang lebih banyak akan membolehkan kita mencari mata yang sangat dekat untuk menarik kilat di kalangan mereka, yang akan menjadikan teks itu sangat kemas dan boleh dibaca, tetapi dengan jarak kilat kurang antara huruf.  Nombor yang lebih kecil akan menjadikan teks kilat kelihatan lebih muda tetapi kurang dibaca.

Langkah 7: Cuba Variasi Lain

Kami telah membincangkan membuat cawangan kilat dan teks kilat, tetapi itu bukan satu-satunya kesan yang boleh anda buat. Mari lihat beberapa variasi lain pada kilat yang mungkin anda ingin gunakan.

Bergerak Kilat

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

Lightning Burst

Variasi ini menawarkan kesan dramatik yang membakar petir dalam bulatan dari pusat:

Langkah 8: Letakkan Semua Ini Bersama di DemoScriptJS

Anda akan dapat mencuba semua kesan mewah yang telah kami buat setakat ini, jadi mari letakkan segala-galanya dalam DemoScriptJS apa yang kami buat sebelum ini. Anda akan dapat menukar antara kesan dengan menekan kekunci nombor pada papan kekunci anda untuk memilih kesan, dan kemudian klik dua kali seperti yang kita lakukan dengan kilat sebelumnya.

Inilah kod lengkap:

Kesimpulannya

Lightning adalah kesan khas yang hebat untuk berdandan 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 menakjubkan! Muat turun kod sumber dan eksperimen diri anda.

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.