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

Buat Sungai Lava Mengalir, Melalui Kurungan Bézier dan Shaders

by
Difficulty:IntermediateLength:LongLanguages:

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

Kebanyakan masa, menggunakan teknik grafik konvensional adalah cara yang betul untuk pergi. Kadang-kadang, walaupun, eksperimen dan kreativiti pada tahap asas kesan boleh memberi manfaat kepada gaya permainan, menjadikannya lebih menonjol. Dalam tutorial ini, saya akan menunjukkan kepada anda cara membuat sungai lava animasi 2D menggunakan lengkung Bézier, geometri bertekstur tersuai dan shaders vertex.

Nota: Walaupun tutorial ini ditulis menggunakan AS3 dan Flash, anda harus menggunakan teknik dan konsep yang sama dalam hampir semua persekitaran pembangunan permainan.


Preview Keputusan Akhir

Klik tanda Plus untuk membuka lebih banyak pilihan: anda boleh menyesuaikan ketebalan dan kelajuan sungai, dan seret titik kawalan dan kedudukan kedudukan sekitar.

Tiada Flash? Lihat video YouTube sebaliknya:


Persediaan

Pelaksanaan demo di atas menggunakan AS3 dan Flash dengan Rangka Kerja Starling untuk mempercepat GPU dan perpustakaan Feathers untuk elemen UI. Dalam adegan awal kami, kami akan meletakkan imej tanah dan imej rock latar depan. Kemudian kita akan menambah sungai, memasukkannya di antara dua lapisan tersebut.


Geometri

Sungai terbentuk melalui proses interaksi semulajadi yang kompleks antara jisim bendalir dan tanah di bawahnya. Ia tidak praktikal untuk melakukan simulasi secara fizikal yang betul untuk permainan. Kami hanya mahu mendapatkan perwakilan visual yang betul, dan untuk berbuat demikian, kita akan menggunakan model sungai yang dipermudahkan.

Pemodelan sungai sebagai lengkung adalah salah satu daripada penyelesaian yang boleh kita gunakan, membolehkan kita mempunyai kawalan yang baik dan mencapai rupa yang meandering. Saya memilih untuk menggunakan lengkung Bézier kuadrat untuk memastikan perkara mudah.

Kurva Bézier adalah lengkung parametrik yang sering digunakan dalam grafik komputer; dalam lengkung Bézier kuadratik, lengkung melepasi dua titik tertentu, dan bentuknya ditentukan oleh titik ketiga, yang biasanya disebut titik kawalan.

Seperti yang ditunjukkan di atas, lengkung melepasi titik kedudukan sementara titik kawalan menguruskan kursus yang diperlukan. Sebagai contoh, meletakkan titik kawalan secara langsung di antara titik kedudukan menentukan garis lurus, manakala nilai lain untuk titik kawalan 'menarik' lengkung untuk mencapai titik itu.

Keluk jenis ini ditakrifkan menggunakan formula matematik berikut:

[latex]\Large B(t) = (1 - t)^2 P_0 + (2t - 2t^2) C + t^2 P_1[/latex]

Pada t = 0 kita berada pada permulaan lengkung kita; pada t = 1 kita berada di akhir.

Secara teknikal, kita akan menggunakan pelbagai lengkung Bézier di mana akhir satu adalah permulaan yang lain, membentuk rantai.

Sekarang kita perlu menyelesaikan masalah sebenarnya memaparkan sungai kita. Kurva tidak mempunyai ketebalan, jadi kita akan membina primitif geometrik di sekitarnya.

Mula-mula kita memerlukan satu cara untuk mengambil lengkung dan mengubahnya menjadi segmen garis. Untuk melakukan ini, kita mengambil mata kita dan memasangkannya dalam definisi matematik lengkung. Perkara yang kemas mengenai ini ialah kita dapat dengan mudah menambah parameter untuk mengawal kualiti operasi ini.

Berikut adalah kod untuk menghasilkan mata daripada takrif keluk:

Dan inilah cara untuk menukar kurva ke segmen garisan:

Kita kini boleh mengambil lengkung sewenang-wenangnya dan mengubahnya menjadi segmen baris tersuai - lebih banyak segmen, semakin tinggi kualiti:

Untuk mendapatkan geometri, kami akan menjana dua lengkung baru berdasarkan asal. Titik kedudukan dan kawalan mereka akan dipindahkan oleh nilai offset vektor biasa, yang boleh kita fikirkan sebagai ketebalan. Kurva pertama akan dipindahkan ke arah negatif, sementara kedua dipindahkan ke arah yang positif.

Sekarang kita akan menggunakan fungsi yang ditentukan sebelum ini untuk membuat segmen baris membentuk lengkung. Ini akan membentuk sempadan di sekitar keluk asal.

Bagaimanakah kita melakukan ini dalam kod? Kita perlu menghitung normals untuk titik kedudukan dan kawalan, membiaknya dengan mengimbangi dan menambahnya kepada nilai asal. Untuk poin kedudukan kita perlu saling menghalangi normalis yang dibentuk oleh garis ke titik kawalan bersebelahan.

Anda sudah dapat melihat bahawa kita boleh menggunakan mata tersebut untuk menentukan poligon empat sisi kecil - "quads". Pelaksanaan kami menggunakan Starling DisplayObject tersuai, yang memberikan data geometri kami secara langsung kepada GPU.

Satu masalah, bergantung kepada pelaksanaan, adalah bahawa kita tidak boleh menghantar quad secara langsung; Sebaliknya, kita perlu menghantar segitiga. Tetapi cukup mudah untuk memilih dua segitiga menggunakan empat mata:

Keputusan:


Texturing

Gaya geometri bersih menyeronokkan, dan ia mungkin menjadi gaya yang baik untuk beberapa permainan percubaan. Tetapi, untuk menjadikan sungai kita kelihatan hebat, kita boleh lakukan dengan beberapa butiran lanjut. Menggunakan tekstur yang adalah satu idea yang baik. Yang membawa kita kepada masalah memaparkannya pada geometri tersuai yang dicipta lebih awal.

Kita perlu menambah maklumat tambahan ke mercu kami; jawatan semata-mata tidak akan melakukan lagi. Ke puncak setiap boleh menyimpan parameter tambahan yang sesuai dengan keinginan kita, dan sokongan pemetaan tekstur yang kita perlu menentukan koordinat tekstur.

Koordinat tekstur dalam ruang tekstur, dan peta nilai piksel imej jawatan mercu dunia. Bagi setiap piksel yang muncul pada skrin, kami mengira koordinat interpolated tekstur dan menggunakannya untuk lookup piksel nilai untuk jawatan dalam tekstur. Sepadan dengan nilai-nilai 0 dan 1 dalam ruang tekstur tekstur tepi; Jika nilai-nilai yang meninggalkan kita ada beberapa pilihan:

  • Ulang - tanpa henti mengulangi teksturnya.
  • Clamp - memotong tekstur di luar batas selang [0, 1].

Mereka yang mengetahui sedikit tentang pemetaan tekstur pasti menyedari kemungkinan kerumitan teknik. Saya mempunyai berita baik untuk anda! Cara mewakili sungai mudah dipetakan ke tekstur.

Dari sisi tekstur ketinggian dipetakan secara keseluruhan, manakala panjang Sungai dibahagikan kepada ketulan yang lebih kecil daripada ruang tekstur, saiz sesuai untuk tekstur lebar.

Sekarang untuk melaksanakan dalam Kod:

Sekarang, ia kelihatan lebih banyak seperti Sungai:


Animasi

Sungai kami sekarang kelihatan lebih seperti yang sebenar, dengan satu pengecualian yang besar: ia masih berdiri!

Baiklah, jadi kita perlu menghidupkannya. Perkara pertama yang anda fikirkan adalah menggunakan animasi lembaran sprit. Dan itu mungkin berfungsi, tetapi untuk memastikan lebih banyak fleksibiliti dan menyimpan sedikit pada memori tekstur, kami akan melakukan sesuatu yang lebih menarik.

Dan bukannya mengubah tekstur, kita boleh mengubah cara tekstur memetakan kepada geometri. Kita melakukan ini dengan menukar tekstur koordinat bagi mercu kami. Ini hanya akan bekerja untuk tileable tekstur dengan pemetaan set untuk mengulangi.

Cara mudah untuk melaksanakan ini adalah untuk mengubah tekstur koordinat pada CPU dan hantar keputusan kepada GPU yang tiap-tiap frame. Biasanya, itu adalah cara yang baik untuk memulakan pelaksanaan satu jenis teknik, ini kerana penyahpepijatan adalah lebih mudah. Walau bagaimanapun, kita akan Menyelam terus ke cara yang terbaik kita boleh mencapai matlamat ini: animating koordinat tekstur yang menggunakan shaders ke puncak.

Dari pengalaman saya boleh memberitahu bahawa orang yang kadang-kadang menakut-nakutkan oleh shaders, mungkin kerana mereka sambungan kepada kesan grafik maju sukan blockbuster. Kebenaran diberitahu konsep di belakang mereka adalah sangat mudah, dan jika anda boleh menulis atur cara, anda boleh menulis satu shader - itu sahaja mereka berada, atur cara kecil yang berjalan pada GPU yang. Kami akan menggunakan shader vertex untuk menghidupkan sungai kami, terdapat beberapa jenis shaders lain, tetapi kami boleh lakukan tanpa mereka.

Seperti namanya, shaders ke puncak memproses mercu. Mereka berjalan ke puncak setiap, dan ambil sebagai satu atribut input ke puncak: kedudukan, koordinat tekstur dan warna.

Matlamat kami adalah untuk mengimbangi X nilai koordinat tekstur Sungai untuk mensimulasikan aliran. Kami memastikan kaunter aliran dan meningkatkannya setiap bingkai dengan masa delta. Kita boleh tentukan untuk parameter tambahan untuk kelajuan animasi. Mengimbangi nilai harus dihantar kepada shader tersebut sebagai nilai (malar) yang seragam, satu cara untuk menyediakan shader program dengan lebih banyak maklumat berbanding hanya mercu. Nilai ini adalah biasanya vektor empat-komponen; kita hanya akan menggunakan komponen X untuk menyimpan nilai, selain Y, Z dan W kepada 0.

Pelaksanaan ini menggunakan bahasa AGAL shader. Ia boleh menjadi agak sukar untuk memahami, kerana ia adalah satu perhimpunan seperti Bahasa. Anda boleh mengetahui lebih lanjut mengenainya di sini.

Shader Vertex:

Animasi dalam tindakan:


Mengapa Berhenti Di Sini?

Kita cukup banyak dilakukan, kecuali sungai kita masih kelihatan tidak wajar. Pemotongan biasa antara latar belakang dan sungai adalah pemandangan yang nyata. Untuk menyelesaikannya, anda boleh menggunakan lapisan tambahan sungai, sedikit tebal, dan tekstur khas, yang akan melapisi tebing sungai dan menutup peralihan hodoh.

Dan sejak demo mewakili sungai lava lebur, kita tidak boleh pergi tanpa cahaya sedikit! Buat satu lagi contoh geometri sungai, kini menggunakan tekstur cahaya dan tetapkan mod campurannya untuk "tambah". Untuk lebih menyeronokkan, tambah animasi lancar dari nilai alfa cahaya.

Demo akhir:

Sudah tentu, anda boleh melakukan lebih banyak daripada hanya sungai menggunakan kesan seperti ini. Saya telah melihat ia digunakan untuk kesan zarah hantu, air terjun atau bahkan untuk menghidupkan rantai. Terdapat banyak ruang untuk penambahbaikan selanjutnya, prestasi versi akhir bijak dari atas boleh dilakukan menggunakan satu panggilan menarik jika tekstur digabungkan ke atlas. Sungai-sungai panjang perlu dibahagikan kepada beberapa bahagian dan dimeteraikan. Pelanjutan utama adalah untuk melaksanakan penambakan nod kurva untuk membolehkan laluan sungai berganda dan seterusnya mensimulasikan bifurkasi.

Saya menggunakan teknik ini dalam permainan terbaru kami, dan saya sangat gembira dengan apa yang boleh kami lakukan dengannya. Kami menggunakannya untuk sungai dan jalan raya (tanpa animasi, jelas). Saya berfikir untuk menggunakan kesan yang sama untuk tasik.


Kesimpulan

Saya harap saya memberi anda beberapa idea tentang cara berfikir di luar teknik grafik biasa, seperti menggunakan kepingan lembaran atau set jubin untuk mencapai kesan seperti ini. Ia memerlukan kerja yang lebih sedikit, matematik kecil, dan beberapa pengetahuan pengaturcaraan GPU, tetapi sebagai balasannya, anda akan mendapat lebih banyak fleksibiliti.

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.