Artis 3D teknis Banzai Games Roman Tersky berbicara tentang bagaimana bingkai digambar dan bahan-bahan untuk karakter-karakter tersebut diatur dalam game seluler Shadow Fight 3, dan juga mengungkapkan beberapa trik dalam mengatur lingkungan

Shadow Fight 3 adalah game pertarungan / RPG yang dikembangkan berdasarkan mesin Unity3d. Proyek ini dirilis di iOS / Android pada November 2017, dan sejak itu jumlah total pemasangan game telah melampaui 80 juta.Untuk menjangkau khalayak luas, tim pengembang telah melakukan optimalisasi permainan yang hebat, dan sebagai hasilnya, proyek ini bekerja pada 60 FPS pada banyak perangkat modern dengan kinerja rata-rata.

Kritik dan pemain sering mencatat komponen visual dari Shadow Fight 3. Dalam artikel ini, kami sarankan Anda melihat "di balik tudung" permainan dan mencari tahu bagaimana kami berhasil mencapai kualitas ini.

Bingkai membuat

Ada banyak faktor yang secara langsung mempengaruhi kinerja permainan dan jumlah frame yang dapat dimainkannya per detik. Salah satu indikator terpenting bagi kami adalah jumlah Panggilan Undian selama rendering satu bingkai seperti itu dalam permainan. Saya mengusulkan untuk mempertimbangkan konsep ini secara lebih rinci.

Saat merender bingkai game untuk setiap kelompok objek statis yang digabungkan oleh satu materi, Unity meluncurkan Draw Calls dan menimpanya. Setiap Panggilan Panggil membutuhkan sumber daya CPU, jadi langkah optimasi yang penting adalah mengurangi jumlah panggilan. Tujuan kami adalah untuk meminimalkan indikator ini hingga 100 panggilan per frame game rata-rata.


Proses render bingkai tunggal

Tahap pertama rendering dalam Shadow Fight 3 adalah menggambar bayangan karakter dinamis dan efek Cahaya untuk elemen bercahaya pada baju besi dan senjata pemain.



Kedua proses ini memiliki karakteristik mereka sendiri dan harus dipertimbangkan secara lebih rinci.

Bayangan

Selain kamera utama, di mana bingkai utama diberikan, kamera proyektor ortografis tambahan dipasang di atas panggung, yang dirancang untuk menggambar bayangan dari karakter pada permukaan terpisah yang disebut ShadowReciever. Kamera ini mengikuti titik tengah antara lawan dan setiap frame membuat proyeksi mereka ke pesawat tergantung pada posisi mereka saat ini. Hasilnya diberikan sebagai tekstur alfa, yang menggantikan tekstur dengan render bingkai sebelumnya dalam bahan dinamis objek ShadowReciever. Pendekatan ini menghindari kebutuhan untuk menghitung bayangan nyata dan menggambarnya di semua model lokasi, yang akan secara signifikan mempengaruhi kinerja keseluruhan.


Area ShadowReciever

Dalam bingkai ini, proses ini mengambil 20 panggilan draw.

Bersinar

Proses menciptakan efek cahaya pada baju besi dan senjata karakter mirip dengan proses menciptakan bayangan dinamis. Sebuah kubus BlurCube dibuat di sekitar model dengan elemen bercahaya. Efek cahaya diproyeksikan ke setiap frame berdasarkan informasi yang disimpan dalam saluran biru tekstur RGB dari bahan objek ini (yaitu, saluran biru bertindak sebagai "topeng" untuk proyeksi cahaya - lebih lanjut tentang ini di bawah, di bagian material). Kemudian, blur diterapkan dan informasi disimpan sebagai tekstur alfa, yang menggantikan tekstur dengan hasil rendering frame sebelumnya dalam bahan dinamis BlurCube.


Blurcube

Dalam bingkai kami, proses ini membutuhkan 15 panggilan draw + 2 lebih untuk mengaburkan efeknya.

Menggambar jerat

Pertama-tama, bagian baju besi, senjata karakter, lalu bagian lokasi rencana dekat, lalu yang jauh, dan juga latar belakang, yang merupakan pesawat dengan tekstur 1024x512, digambar secara terpisah. Berikut ini adalah sistem partikel yang ditarik, detail kecil dari rencana dekat dan jauh, dan akhirnya, model dengan animasi vertex (lebih lanjut tentang ini di bawah). Pada akhirnya, untuk 2 panggilan, bayangan dan efek cahaya yang dihitung dan ditarik sebelumnya (Cahaya) diterapkan.

UI

Selain kamera di atas, yang lain juga terlibat dalam rendering frame akhir, yang dirancang untuk menggambar antarmuka pengguna secara terpisah. Berbeda dengan proyektor kamera utama dan ortografis, ini tidak unik untuk setiap lokasi, tetapi ada sepanjang sesi permainan. Dengan demikian, setelah menampilkan adegan, karakter dan semua efek, UI diberikan dan ditempatkan di atas bingkai utama, dan dengan itu, efek sketsa yang lebih gelap ditumpangkan di tepi.


Hasil render kamera utama


Hasil render kamera UI


Hasil render bingkai akhir

Secara total, render frame terakhir dari game ini membutuhkan 92 panggilan draw.

Bagaimana bahan baju besi karakter

Untuk membuat bahan pelindung karakter, digunakan tekstur dengan resolusi 512x512: Diffuse (1) , masker RGB (2) , MatCap (3) , peta Diffuse tambahan untuk bentuk bayangan (4) , serta tekstur suara kecil MorphMask (5) digunakan untuk menciptakan efek transisi karakter menjadi bentuk bayangan.



Dan jika semuanya standar dengan kartu Diffuse (ini hanya tekstur dari armor itu sendiri), kita akan membahas sisanya secara lebih rinci:

Masker tekstur RGB

Karena tekstur RGB secara konvensional terdiri dari tiga saluran warna yang ditentukan oleh angka dari 0 hingga 1 untuk setiap piksel, akan lebih mudah untuk menggunakannya untuk menyimpan berbagai data tentang materi pada setiap titik spesifik pemindaian UV objek.

Dalam kasus kami, saluran tekstur RGB (mask) berisi informasi untuk proses berikut:

• Merah (saluran merah) menunjukkan elemen mana dari bahan yang akan berubah warna jika lawan dalam baju besi yang sama berpartisipasi dalam pertempuran (kami menggunakan sistem ini sehingga pemain tidak membingungkan karakternya dengan lawan; bagian baju besi tertentu yang ditentukan dalam saluran Merah) , dicat ulang untuk lawan dalam warna alternatif, yang ditetapkan oleh artis secara terpisah);
• Hijau (saluran hijau) dimaksudkan untuk menunjukkan elemen pelindung mana yang digunakan tekstur MatCap untuk memberikan efek permukaan logam, serta kekuatan efek efek ini (semakin ringan semakin kuat kilau logam);
• Biru (saluran biru) berisi informasi detail Glow yang akan diterapkan, menciptakan efek permukaan bercahaya.

Matcap

  Tekstur MatCap Saluran hijau Tekstur RGB 

Untuk membuat efek refleksi untuk elemen logam baju besi dan senjata karakter untuk setiap lokasi, tekstur MatCap unik dengan resolusi 512x512 dibuat, yang didasarkan pada tangkapan layar yang diproses dari lokasi dengan semua fitur struktur dan pencahayaannya.

Bergantung pada lokasi pertempuran, tekstur MatCap yang sesuai diterapkan pada bahan baju besi dan senjata para karakter. Efek dari permukaan logam diterapkan pada bagian tertentu dari bahan, berdasarkan informasi dalam saluran hijau tekstur RGB dari material. Pendekatan ini murah untuk diproses, tetapi ini menciptakan efek permukaan reflektif yang realistis dari elemen logam, dengan mempertimbangkan semua fitur arena saat ini.

  Sebelum menerapkan MatCap Setelah menerapkan MatCap 

Bentuk bayangan

Ketika karakter masuk ke bentuk bayangan difus, tekstur material diganti dengan yang tambahan yang dibuat khusus untuk bentuk bayangan.

Untuk transisi yang mulus dari satu tekstur ke tekstur lainnya, noise Morph mask digunakan, dengan mana efek substitusi bertahap dicapai:

Lokasi Pencahayaan

Semua pencahayaan dan bayangan di lokasi dipanggang dalam tekstur lightmap dengan resolusi 2048x2048, yang menghilangkan kebutuhan untuk menghitung pencahayaan secara real time dan secara signifikan meningkatkan produktivitas.



Satu-satunya sumber cahaya terarah dirancang untuk menerangi karakter sesuai dengan suasana umum arena di mana pertempuran terjadi. Namun, dengan pendekatan ini, pada titik mana pun di lokasi, pencahayaan karakter akan sama, terlepas dari apakah mereka berada di bawah mahkota pohon atau di bawah sinar matahari. Pertanyaan ini dapat diselesaikan dengan menghitung bayangan dinamis dari objek lingkungan dan menempatkannya pada model karakter, tetapi ini akan sangat mempengaruhi kinerja game.

Sebagai alternatif untuk setiap lokasi, kami menyimpan gradien peta bayangan yang terpisah dan unik: pada kenyataannya, ini adalah tekstur dengan resolusi 1024x1, yang merupakan gradien berdasarkan tangkapan layar lokasi dan menyampaikan tingkat bayangan di setiap bagiannya. Ketika seorang karakter bergerak di sekitar arena, warna baju besinya setelah menerapkan pencahayaan terarah dikalikan dengan warna gradien yang sesuai dengan posisinya saat ini di lokasi. Dengan demikian, di daerah teduh, pencahayaan yang diterapkan lebih lemah daripada di daerah terbuka.


Peta membayangi peta


Karakter pencahayaan di bagian teduh lokasi


Karakter pencahayaan di area terbuka

Sebagai sentuhan akhir, teknologi Rim Lighting digunakan untuk menyorot tepi model karakter, yang terlihat jelas, misalnya, di lokasi dengan desa yang terbakar. Teknologi ini memungkinkan Anda untuk menyoroti kontur karakter sehingga mereka dapat dibaca dengan baik di latar belakang arena.

Efek arena dinamis

Peran penting dalam "revitalisasi" lokasi Shadow Fight 3 dimainkan oleh efek FX dan objek dinamis, seperti bendera, memindahkan dedaunan di pohon, mengayunkan rumput, dll.

Fx

Sebagian besar efek FX (api, hujan, sinar matahari, dll.) Di SF3 dibuat sesuai dengan prinsip penerapan bahan animasi untuk model low-poly statis. Namun, ada efek yang dibangun pada sistem partikel.

Benda dinamis

Ada dua jenis objek dinamis di lokasi SF3: digerakkan secara fisik dengan simulasi jaringan dan menerapkan dorongan pada mereka untuk mensimulasikan hembusan angin, serta model 3d dengan animasi dhuwur. Untuk objek seperti itu, trek animasi loop dibuat yang mengatur simpul dari model 3d bergerak.

  Animasi dedaunan vertex, Simulasi kain pada bendera. 

Refleksi

Lokasi di SF3 dibangun berdasarkan prinsip panggung teater. Seperti penonton di teater, kamera dalam game diarahkan hanya dalam satu arah dan tidak pernah mengubahnya. Objek-objek lingkungan juga dieksekusi berdasarkan prinsip pemandangan teatrikal: mereka eksis sebanyak yang dapat dilihat oleh pemain. Tidak ada apa pun di sisi dan di belakang kamera, dan semua model hanya memiliki geometri di tempat-tempat yang dapat jatuh ke bidang pandang kamera.

Untuk mengatasi masalah refleksi dengan kinerja maksimum di arena di mana ada permukaan reflektif (lantai marmer, air, dll.), Elemen-elemen yang harus dipantulkan digandakan, dan ukurannya di sepanjang sumbu Z ditetapkan ke nilai negatif. Posisi duplikat diatur sehingga dari samping kedua objek terlihat seperti refleksi satu sama lain. Bahan permukaan reflektif memiliki tembus cahaya, kekuatannya tergantung pada sifat permukaan. Jika objek yang dipantulkan berada pada jarak yang cukup dan detail memudar ke latar belakang, alih-alih duplikat, Pesawat dipasang dengan tekstur berdasarkan tangkapan layar dari permukaan yang dipantulkan yang dicerminkan di sepanjang sumbu Z. Pendekatan ini tidak hanya meningkatkan kinerja permainan, tetapi juga memberikan hasil yang sangat realistis.

  Hasil akhir Tanpa jenis kelamin 

Kesimpulan

Masalah rendering optimasi untuk perangkat seluler sekarang lebih relevan dari sebelumnya. Apa yang Anda lihat dalam artikel ini adalah solusi yang kami kerjakan khusus untuk proyek Shadow Fight 3. Saat ini, Banzai Games telah mulai mengembangkan dua game baru di mana kami akan mencoba membuat grafik lebih baik, menerapkan perkembangan saat ini dan menambahkan sesuatu yang baru.

Tim Banzai Games membutuhkan Pengembang Grafik. Baca lebih lanjut tentang lowongan di sini .