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

Cara Menghasilkan Efek Petir  Mengejutkan 2D dengan Baik.

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Kaso Toluppa (you can also view the original English article)

Petir memiliki banyak kegunaan dalam permainan, mulai dari suasana latar belakang saat badai hingga serangan petir dahsyat dari seorang penyihir. Dalam tutorial ini, saya akan menjelaskan bagaimana memprogram untuk menghasilkan efek petir 2D yang mengagumkan: petir, cabang, dan bahkan teks.

catatan:   Meskipun tutorial ini ditulis menggunakan C # dan XNA, anda harus bisa menggunakan teknik dan konsep yang sama di hamper pada semua lingkungan pengembangan game.


Pratinjau Video Akhir


Langkah 1: Buat Garis Bersinar

Blok bangunan dasar yang kita butuhkan untuk membuat petir adalah segmen garis. Mulailah dengan membuka perangkat lunak editing gambar favorit anda dan gambar garis lurus petir. Milik saya terlihat seperti ini:

Line Segment

Kita ingin menggambar garis dengan panjang yang berbeda, jadi kita akan memotong garis segmen menjadi tiga bagian seperti gambar di bawah ini. Ini akan memungkinkan kita untuk meregangkan segmen tengah ke panjang yang kita sukai.  Karena kita akan meregangkan segmen tengah, kita bisa menyimpannya hanya dengan satu piksel tebal. Juga, karena potongan kiri dan kanan adalah bayangan cermin satu sama lain, kita hanya perlu menyimpan salah satunya. Kita bisa membalikkannya dengan kode.

Divided Line Segment

Sekarang, mari kita buat kelas baru untuk menangani segmen garis gambar:

A dan B adalah titik akhir garis. Dengan menskalakan dan memutar potongan-potongan garis, kita bisa menggambar garis dengan ketebalan, panjang, dan orientasi. Tambahkan metode berikut ini Draw() untuk kelas Line (garis):

Disini, Art.LightningSegment dan Art.HalfCircle merupakan variabel statis Texture2D yang memegang gambar dari potongan segmen garis. ImageThickness diatur ke ketebalan garis tanpa cahaya.  Dalam gambar saya, itu 8 piksel. Kita mengatur tutup asal ke sisi kanan, dan segmen tengah asal ke sisi kirinya.  Ini akan membuat keduanya tergabung dengan mulus saat kita menggambar keduanya pada titik A. Segmen tengah diregangkan ke lebar yang diinginkan, dan tutup lainnya ditarik pada titik B, diputar 180 °.

Kelas XNA SpriteBatch memungkinkan anda melewatinya , sebuah SpriteSortMode dalam konstruktornya,  yang menunjukkan urutan yang menggambarkan sprite. Saat anda menarik garis, pastikan untuk melewati SpriteBatch dengan SpriteSortMode yang diatur ke SpriteSortMode.Texture. Hal ini untuk meningkatkan performa.

Kartu grafis (Graphics cards) sangat bagus saat menggambar tekstur yang sama berkali-kali. Namun, setiap kali mereka mengganti tekstur, ada overhead. Jika kita menggambar banyak garis tanpa menyortir, kita akan menggambar tekstur kita sesuai urutan ini:

LightningSegment, HalfCircle, HalfCircle, LightningSegment, HalfCircle, HalfCircle, ...

Hal ini berarti kita akan mengganti tekstur dua kali untuk setiap baris yang kita gambar. SpriteSortMode.Texture mengatakan pada SpriteBatch untuk menyortir panggilan Draw() dengan tekstur sehingga semua LightningSegments akan ditarik bersama dan semua HalfCircles akan digambar bersama.  Selain itu, saat kita menggunakan garis ini untuk membuat petir kilat, kita akan menggunakan campuran aditif untuk membuat cahaya dari potongan tumbukan dari kilat yang saling tumpang tindih saling digabungkan.


Langkah 2: Garis Bergerigi (Jagged Lines)

Petir cenderung membentuk garis bergerigi, jadi kita memerlukan algoritma untuk menghasilkannya. Kita akan melakukan ini dengan memilih poin secara acak di sepanjang garis, dan menggeser mereka secara acak dari garis.  Menggunakan perpindahan acak sepenuhnya cenderung membuat garis terlalu bergerigi, jadi kita akan memperlancar hasil dengan membatasi seberapa jauh titik-titik satu sama lain terdekat bias ditarik.

Making Jagged Lines

Garis dilipat dengan menempatkan titik pada offset yang sama ke titik sebelumnya; Hal ini memungkinkan garis secara keseluruhan menyimpang naik turun, sekaligus mencegah bagian darinya terlalu bergerigi. Inilah kodenya:

Kode itu mungkin terlihat sedikit mengintimidasi, tapi tidak begitu buruk begitu anda mengerti logikanya. Kita mulai dengan menghitung vektor normal dan garis singgung dari garis, bersama dengan panjangnya.  Kemudian kita secara acak memilih sejumlah posisi di sepanjang garis dan menyimpannya dalam daftar posisi kita.  Posisi diskalakan di antara keduanya 0 dan 1 dimana 0 merupakan awal garis dan 1 mewakili titik akhir. Posisi ini kemudian diurutkan agar kita dapat dengan mudah menambahkan segmen garis di antaranya.

Lingkaran melewati titik-titik yang dipilih secara acak dan menggesernya sepanjang normal dengan jumlah acak. Faktor skala ada untuk menghindari sudut yang terlalu tajam, dan amplop (envelope) memastikan kilat benar-benar menuju titik tujuan dengan membatasi perpindahan saat kita mendekati titik akhir.

Lightning Bolt

Langkah 3: Animasi

Kilat harus berkedip terang dan kemudian memudar. Untuk mengatasinya, buatlah sebuah kelas LightningBolt.

Untuk menggunakan ini, cukup buat LightningBolt yang baru dan memanggil Update() serta Draw() setiap frame. Panggilan Update() membuatnya memudar. IsComplete akan memberitahu anda ketika petir telah sepenuhnya memudar keluar.

Anda sekarang dapat menarik petir anda dengan menggunakan kode berikut di kelas Game anda:


Langkah 4: Cabang Petir

Anda bisa menggunakan kelas LightningBolt sebagai blok bangunan untuk menciptakan efek petir yang lebih menarik. Misalnya, anda bisa membuat cabang petir seperti yang ditunjukkan di bawah ini:

Brand Lightning

Untuk membuat cabang petir, kita memilih titik acak di sepanjang petir dan menambahkan petir baru yang keluar dari titik-titik ini. Pada kode di bawah ini, kita membuat antara tiga dan enam cabang yang terpisah dari petir utama pada sudut 30°.


Langkah 5: Teks Petir

Berikut adalah video efek lain yang dapat anda temukan dari petir:

Pertama kita perlu mendapatkan piksel dalam teks yang ingin kita gambar. Kita melakukan ini dengan menarik teks ke sebuah RenderTarget2D dan membaca kembali data pixel dengan RenderTarget2D.GetData<T>().  Jika anda ingin membaca lebih lanjut tentang membuat efek partikel teks, saya memiliki  tutorial lebih rinci di sini.

Kita menyimpan koordinat piksel dalam teks sebagai  List <Vector2>. Kemudian, setiap frame, kita secara acak mengambil sepasang titik-titik ini dan membuat ledakan petir di antara keduanya.  Kita ingin merancangnya sehingga dua titik lebih dekat satu sama lain, semakin besar kesempatan kita membuat petir di antara keduanya.  Ada teknik sederhana yang bisa kita gunakan untuk mencapai hal ini: kita akan memilih poin pertama secara acak, dan kemudian kita akan memilih sejumlah titik lain secara acak dan memilih yang terdekat.

Jumlah poin kandidat yang kita uji akan mempengaruhi tampilan teks petir; memeriksa sejumlah besar titik akan memungkinkan kita menemukan titik-titik yang sangat dekat untuk menarik petir di antara keduanya, yang akan membuat teks itu sangat rapi dan terbaca, namun dengan sedikit petir yang panjang di antara huruf.  Angka yang lebih kecil akan membuat teks petir terlihat lebih menonjol tapi kurang terbaca.


Langkah 6: Optimalisasi

Teks petir, seperti yang ditunjukkan di atas, dapat berjalan dengan lancar jika anda memiliki komputer papan atas, tapi ini tentu sangat berat. Setiap petir berlangsung lebih dari 30 frame, dan kita membuat lusinan petir baru setiap frame.  Karena setiap petir mungkin memiliki beberapa segmen garis, dan setiap segmen garis memiliki tiga bagian, kita akhirnya menggambar banyak sprite.  Demo saya, misalnya, menarik lebih dari 25.000 gambar setiap frame dengan pengoptimalan dimatikan. Kita bisa membuat yang lebih baik.

Alih-alih menggambar setiap petir sampai habis, kita bisa menarik setiap petir baru ke target render dan memudarkan target render setiap frame.  Ini berarti, daripada harus menarik setiap petir untuk 30 frame atau lebih, kita hanya akan menggambar sekali. Ini juga berarti tidak ada kinerja tambahan untuk membuat petir kita memudar lebih lambat dan bertahan lebih lama.

Pertama, kita akan memodifikasi kelas LightningText hanya untuk menarik setiap petir untuk satu frame. Di kelas game anda, nyatakan dua variabel RenderTarget2D: currentFrame dan lastFrame pada LoadContent (), instal mereka seperti ini:

Perhatikan format permukaan yang disetel HdrBlendable. HDR merupakan singkatan dari High Dynamic Range, dan ini menunjukkan bahwa permukaan HDR kita dapat mewakili rentang warna yang lebih besar.  Hal ini diperlukan karena memungkinkan target render untuk memiliki warna yang lebih terang dari putih. Bila banyak petir tumpang tindih, kita memerlukan target render untuk menyimpan jumlah keselurhan dari warnanya,  yang mungkin bertambah melampaui kisaran warna standar. Sementara warna yang lebih terang dari putih ini tetap ditampilkan sebagai warna putih di layar, penting untuk menyimpan  kecerahan penuh darinya agar bisa membuatnya memudar dengan baik.

Tip XNA: Perhatikan juga bahwa agar pencampuran HDR bekerja, anda harus mengatur profil proyek XNA ke Hi-Def. Anda bisa melakukannya dengan mengklik kanan proyek di explorer solution, pilih properties, dan kemudian pilih profil hi-def di bawah tab XNA Game Studio.

Setiap frame, pertama kita menarik isi frame terakhir ke frame saat ini, namun sedikit gelap. Kita kemudian menambahkan petir yang baru dibuat ke frame saat ini.  Akhirnya, kita membuat frame kita saat ini ke layar, dan kemudian menukar dua target render sehingga untuk frame berikutnya, lastframe akan mengacu pada frame yang baru saja kita render.


Langkah 7: Variasi Lainnya

Kita telah membahas  bagaimana membuat cabang petir dan teks petir, tapi itu tentu bukan satu-satunya efek yang bisa anda buat. Mari kita lihat beberapa variasi lain pada petir yang mungkin bisa anda gunakan.

Petir yang Bergerak

Seringkali anda mungkin ingin membuat kilatan petir yang bergerak. Anda bisa melakukan ini dengan menambahkan petir pendek baru setiap frame pada titik akhir dari frame petir sebelumnya.

Petir yang Halus

Anda mungkin telah memperhatikan bahwa kilat menyala lebih terang pada persendian. Hal ini disebabkan pencampuran aditif. Anda mungkin ingin petir lebih halus, lebih banyak lagi petir yang rata.  Hal ini dapat dilakukan dengan mengubah fungsi wilayah campuran anda untuk memilih nilai maksimal dari warna sumber dan tujuan, seperti yang ditunjukkan di bawah ini.

Lalu, di fungsi Draw(), panggil SpriteBatch.Begin() dengan maxBlend sebagai BlendState daripada BlendState additive. Gambar di bawah menunjukkan perbedaan antara campuran aditif dan campuran maksimal pada petir.

Additive Blending
Max Blending

Tentu max blending tidak akan membiarkan cahaya dari beberapa petir atau dari background untuk ditambahkan dengan baik. Jika anda ingin petir itu sendiri terlihat mulus, tapi juga mencampur aditif dengan petir lainnya, anda bisa membuat petir pertama ke target render dengan menggunakan blending maksimal, lalu tarik target render ke layar menggunakan aditif.  Berhati-hatilah untuk tidak menggunakan terlalu banyak target render besar karena ini akan mengurangi kinerja.

Alternatif lain, yang akan bekerja lebih baik untuk sejumlah besar petir, adalah menghilangkan cahaya yang tertanam pada gambar segmen garis dan menambahkannya kembali dengan menggunakan efek cahaya pasca-pemrosesan.  Rincian penggunaan shader dan efek cahaya di luar cakupan tutorial ini, namun anda bisa menggunakan Sampel Bloom XNA untuk memulai. Teknik ini tidak akan memerlukan lebih banyak target render saat anda menambahkan lebih banyak petir.


Kesimpulan

Petir adalah efek khusus yang bagus untuk menyegarkan permainan anda. Efek yang dijelaskan dalam tutorial ini adalah titik awal yang bagus, tapi pastinya tidak semua hal bisa anda lakukan dengan petir.  Dengan sedikit imajinasi anda bisa membuat segala macam efek petir yang menakjubkan! Download kode sumbernya dan buatlah eksperimen anda sendiri.

Jika Anda menikmati artikel ini, lihatlah   tutorial tentang efek air 2D juga.

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.