Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Code
  2. Games
Code

Membangun Stage3D Shoot-'Em-Up: tes Sprite

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Shoot-'Em-Up.
Create a Simple Space Shooter Game in HTML5 With EaselJS
Build a Stage3D Shoot-'Em-Up: Interaction

Indonesian (Bahasa Indonesia) translation by Keti Pritania (you can also view the original English article)

Dalam seri ini tutorial (bagian gratis, Bagian premi) kami akan membuat kinerja tinggi 2D shoot-em-up menggunakan baru hardware-accelerated Stage3D mesin render. Kami akan mengambil keuntungan dari beberapa hardcore optimasi teknik untuk mencapai kinerja render besar 2D sprite. Dalam bagian ini, kita akan membangun demo kinerja tinggi yang menarik ratusan bergerak sprite layar sekaligus.


Hasil akhir Tinjauan

Mari kita lihat pada hasil akhir yang kita akan bekerja ke arah: demo kinerja tinggi 2D sprite yang menggunakan Stage3D dengan optimasi yang mencakup spritesheet dan objek penggabungan.


Pendahuluan: Flash 11 Stage3D

Jika Anda berharap untuk mengambil Flash permainan ke tingkat berikutnya dan mencari banyak mata-permen dan menakjubkan framerate, Stage3D akan menjadi teman terbaik Anda yang baru.

Kecepatan yang luar biasa baru Flash 11 hardware accelerated Stage3D API hanya memohon untuk digunakan untuk permainan 2D. Daripada menggunakan sprite Flash kuno pada DisplayList atau terakhir-gen blitting teknik seperti yang dipopulerkan oleh mesin pencari seperti FlashPunk dan Flixel, generasi baru permainan 2D menggunakan kekuatan kartu video Anda GPU untuk api melalui tugas-tugas render di hingga 1000 x kecepatan apapun Flash 10 bisa mengelola.

Meskipun memiliki 3D dalam namanya, API baru ini juga bagus untuk permainan 2D. Kita dapat membuat sederhana geometri dalam bentuk 2D kotak (disebut quads) dan menarik mereka di pesawat datar. Ini akan memungkinkan kita untuk membuat ton sprite pada layar halus-halus 60fps.

Kami akan membuat penembak gulir samping yang terinspirasi oleh judul arcade retro seperti R-Type atau Gradius di ActionScript menggunakan API Stage3D Flash 11. Ini tidak setengah sulit seperti yang dikatakan beberapa orang, dan Anda tidak perlu belajar opcode AGAL bahasa assembly.

Dalam seri tutorial 6-bagian ini, kita akan program shoot-'em-up 2D sederhana yang memberikan kinerja render bertiup. Kita akan membangun menggunakan AS3 murni, disusun dalam FlashDevelop (Baca lebih lanjut di sini). FlashDevelop besar karena itu adalah 100% freeware - tidak perlu membeli alat yang mahal untuk mendapatkan IDE AS3 terbaik sekitar.


Langkah 1: Buat proyek baru

Jika Anda belum memiliki itu, pastikan untuk men-download dan menginstal FlashDevelop. Setelah Anda sudah siap (dan Anda telah diperbolehkan untuk menginstal versi terbaru dari kompilator Flex secara otomatis), api itu dan mulai baru "proyek AS3."

Create an .AS3 project using FlashDevelop

FlashDevelop akan menciptakan sebuah proyek template kosong untuk Anda. Kita akan mengisi kekosongan, sepotong-demi-sepotong, sampai kami telah menciptakan permainan layak.


Langkah 2: Target Flash 11

Pergi ke menu proyek dan mengubah beberapa pilihan:

  1. Target Flash 11.1
  2. Mengubah ukuran untuk 600x400px
  3. Mengubah warna latar belakang hitam
  4. Perubahan FPD 60
  5. Mengubah nama file SWF untuk nama yang Anda pilih
Project properties

Langkah 3: impor

Sekarang bahwa proyek kami kosong diatur, mari kita menyelam dalam dan melakukan coding. Untuk mulai dengan, kita akan perlu mengimpor semua fungsi Stage3D diperlukan. Tambahkan baris berikut ke bagian paling atas dari Main.as file.


Langkah 4: Menginisialisasi Stage3D

Langkah berikutnya adalah untuk menunggu permainan kami muncul di panggung Flash. Melakukan hal-hal dengan cara ini memungkinkan untuk penggunaan masa depan preloader. Untuk kesederhanaan, kami akan melakukan sebagian besar permainan kami dalam satu kelas kecil yang mewarisi dari kelas Flash Sprite sebagai berikut.

Setelah mengatur beberapa properti tahap khusus, kami meminta konteks Stage3D. Ini dapat berlangsung lama (sepersekian detik) sebagai kartu video Anda dikonfigurasi untuk hardware render, jadi kita perlu menunggu acara onContext3DCreate.

Kami juga ingin untuk mendeteksi setiap kesalahan yang mungkin terjadi, terutama karena Stage3D konten tidak berjalan jika HTML menempelkan kode yang memuat SWF Anda tidak menyertakan parameter "wmode = langsung". Kesalahan ini bisa juga terjadi jika pengguna menjalankan versi lama flash atau jika mereka tidak memiliki kartu video mampu menangani pixel shader 2.0.


Langkah 5: Menangani peristiwa apapun

Tambahkan fungsi berikut yang mendeteksi setiap peristiwa yang mungkin memicu sebagaimana ditentukan di atas. Dalam kasus kesalahan karena berjalan lama Flash plugin, di masa depan versi dari permainan ini kita mungkin ingin untuk output pesan dan mengingatkan pengguna untuk meng-upgrade, tapi untuk saat kesalahan ini hanya diabaikan.

Untuk pengguna dengan kartu video lama (atau driver) yang tidak mendukung shader model 2.0, Kabar baiknya adalah bahwa Flash 11 cukup cerdas untuk menyediakan sebuah software renderer. Ini tidak berjalan sangat cepat tapi setidaknya setiap orang akan dapat bermain game. Mereka yang layak gaming rig akan mendapatkan framerate fantastis seperti youve pernah terlihat di Flash permainan sebelum.

Acara penanganan kode di atas mendeteksi ketika Stage3D siap untuk render hardware dan menetapkan variabel context3D untuk penggunaan masa depan. Kesalahan akan diabaikan untuk sekarang. Peristiwa yang mengubah ukuran hanya update ukuran panggung dan batch render sistem dimensi.


Langkah 6: Init mesin Sprite

Setelah context3D diterima, kami siap untuk memulai permainan. Melanjutkan dengan Main.as, tambahkan berikut ini.

Fungsi ini menciptakan mesin rendering sprite (untuk diimplementasikan di bawah) di panggung, siap untuk menggunakan ukuran penuh file flash Anda. Kami kemudian tambahkan manajer entitas dan batched geometri sistem (yang kita akan membahas di bawah). Kami sekarang dapat memberikan rujukan kepada manajer entitas kelas GUI Statistik kami sehingga ia bisa menampilkan beberapa angka pada layar mengenai berapa banyak sprite telah dibuat atau kembali. Terakhir, kita mulai mendengarkan acara ENTER_FRAME, yang akan mulai menembak dengan kecepatan hingga 60 kali per detik.


Langkah 7: Mulai Render Loop

Sekarang bahwa segala sesuatu telah diinisialisasi, kami siap untuk bermain! Fungsi berikut akan dijalankan setiap satu frame. Untuk keperluan demo teknologi yang pertama ini, kita akan menambahkan satu baru sprite di panggung setiap frame. Karena kami akan menerapkan kolam objek (yang Anda dapat membaca lebih lanjut tentang dalam tutorial ini) daripada inifinitely membuat objek baru sampai kita kehabisan RAM, kita akan mampu untuk menggunakan kembali lama entitas yang telah pindah dari layar.

Setelah hal ikan bertelur sprite lain, kita jelas daerah stage3D layar (pengaturan untuk hitam murni). Selanjutnya kami memperbarui semua entitas yang dikendalikan oleh Manajer badan kami. Ini akan memindahkan mereka sedikit lebih setiap frame. Setelah semua sprite telah diperbarui, kita mengatakan sistem batched geometri untuk mengumpulkan mereka semua ke dalam satu besar vertex buffer dan kulit kayu mereka di layar dalam satu menarik panggilan, untuk efisiensi. Akhirnya, kami memberitahukan context3D untuk memperbarui layar dengan render akhir kami.

That's it untuk kawasan! Sesederhana kedengarannya, kami telah sekarang menciptakan proyek template yang siap untuk ledakan keluar jumlah yang gila sprite. Kami tidak akan menggunakan seni vektor. Kami tidak akan menempatkan sprite Flash kuno di atas panggung selain dari jendela Stage3D dan beberapa overlay GUI. Semua pekerjaan render grafis dalam permainan kami akan ditangani oleh Stage3D, sehingga kita dapat menikmati peningkatan kinerja.


Pergi lebih dalam: Mengapa adalah Stage3D begitu cepat?

Dua alasan:

  1. Menggunakan akselerasi hardware, berarti bahwa semua perintah menggambar dikirim ke GPU 3D pada kartu video Anda dalam cara yang sama bahwa permainan XBOX360 dan PlayStation3 mendapatkan diterjemahkan.
  2. Perintah render ini diproses secara paralel ke seluruh kode ActionScript. Ini berarti bahwa setelah perintah dikirim ke kartu video Anda, semua terjemahan dilakukan pada waktu yang sama seperti kode lain dalam permainan Anda menjalankan - Flash tidak harus menunggu mereka untuk diselesaikan. Ketika piksel diledakkan ke layar Anda, Flash melakukan hal-hal lain seperti menangani input pemain, memutar suara, dan memperbarui posisi musuh.
  3. Yang mengatakan, banyak mesin Stage3D tampaknya macet oleh beberapa ratus sprite. Ini karena mereka telah diprogram tanpa memperhatikan overhead yang ditambahkan oleh setiap perintah draw. Ketika Stage3D pertama kali keluar, beberapa mesin 2D pertama akan menggambar masing-masing dan setiap sprite secara individu dalam satu lingkaran raksasa (lambat dan tidak efisien). Karena artikel ini adalah tentang optimasi ekstrim untuk game 2D generasi berikutnya dengan framerate yang luar biasa, kami akan menerapkan sistem rendering yang sangat efisien yang menyatukan semua geometri menjadi satu batch besar sehingga kami dapat menggambar semuanya hanya dalam satu atau dua perintah.


    Cara Menjadi Hardcore: Optimalkan!

    Gamedev hardcore menyukai optimasi. Untuk meledakkan sprite terbanyak di layar dengan perubahan status paling sedikit (seperti beralih tekstur, memilih buffer vertex baru, atau harus memperbarui transformasi sekali untuk setiap sprite di layar), kita akan mengambil keuntungan dari tiga optimasi kinerja berikut:

    1. objek penggabungan
    2. spritesheet (atlas tekstur)
    3. batched geometri

    Ini trik hardcore gamedev tiga adalah kunci untuk mendapatkan FPS yang mengagumkan dalam permainan Anda. Mari kita menerapkan mereka sekarang. Sebelum kita lakukan, kita perlu membuat beberapa kecil kelas yang teknik ini akan membuat menggunakan.


    Langkah 8: Tampilan statistik

    Jika kita akan melakukan banyak optimasi dan menggunakan Stage3D dalam upaya untuk mencapai kinerja rendering sangat cepat, kita perlu cara untuk melacak statistik. Beberapa benchmark kecil dapat pergi jauh untuk membuktikan bahwa apa yang kita lakukan adalah memiliki efek positif pada framerate. Sebelum kita melangkah lebih jauh, membuat sebuah class baru yang disebut GameGUI.as dan menerapkan FPS super sederhana dan statistik menampilkan sebagai berikut.


    Langkah 9: Kelas entitas

    Kami akan menerapkan kelas manajer entitas yang akan "objek renang" seperti dijelaskan di atas. Pertama-tama kita perlu membuat kelas sederhana untuk setiap entitas individu di game kita. Kelas ini akan digunakan untuk semua objek dalam game, mulai dari pesawat ruang angkasa hingga peluru.

    Buat sebuah file baru yang disebut Entity.as dan menambahkan beberapa Getter dan setter sekarang. Untuk tech demo ini pertama, kelas ini adalah semata-mata pengganti kosong tanpa banyak fungsionalitas, tetapi dalam kemudian tutorial ini adalah dimana kami akan mengimplementasikan jauh dari permainan.


    Langkah 10: Buat Spritesheet

    Teknik optimasi penting yang kita akan gunakan adalah penggunaan spritesheet - kadang-kadang disebut sebagai Atlas tekstur. Bukan upload puluhan atau ratusan gambar individu untuk RAM video untuk digunakan selama rendering, kita akan membuat sebuah file citra yang memegang semua sprite dalam permainan kami. Dengan cara ini, kita dapat menggunakan tekstur tunggal untuk menarik banyak musuh atau medan yang berbeda.

    Menggunakan spritesheet dianggap praktik terbaik oleh gamedev veteran yang perlu memastikan permainan mereka berjalan secepat mungkin. Alasannya mempercepat banyak hal adalah sama dengan alasan mengapa kita akan menggunakan geometri batching: daripada harus memberitahu kartu video berulang-ulang untuk menggunakan tekstur tertentu untuk menggambar sprite tertentu, kita dapat dengan mudah memberi tahu untuk selalu menggunakan tekstur yang sama untuk semua panggilan draw.

    Ini mengurangi 'perubahan negara' yang sangat mahal dalam hal waktu. Kita tidak perlu lagi mengatakan 'kartu video, mulai menggunakan tekstur 24 ... sekarang menggambar sprite 14' dan seterusnya. Kami hanya mengatakan "menggambar semuanya menggunakan tekstur ini satu" dalam satu berlalu. Ini dapat meningkatkan kinerja dengan urutan besarnya.

    Kami permainan contoh kami akan menggunakan koleksi hukum menggunakan freeware gambar oleh DanC berbakat, yang dapat Anda peroleh di sini. Ingat bahwa jika Anda menggunakan gambar-gambar ini Anda harus kredit mereka dalam permainan Anda sebagai berikut: seni "Seni koleksi judul" oleh Daniel Cook (Lostgarden.com).

    Menggunakan Photoshop (atau GIMP, atau apa pun editor gambar Anda suka), memotong dan menyisipkan sprite permainan Anda akan perlu ke dalam satu file PNG yang memiliki latar belakang transparan. Tempat setiap sprite pada grid jarak merata dengan beberapa piksel ruang kosong antara masing-masing. Buffer kecil ini diperlukan untuk menghindari 'pendarahan' piksel tepi dari sprite yang berdekatan yang dapat terjadi karena penyaringan tekstur bilinear yang terjadi pada GPU. Jika setiap sprite menyentuh yang berikutnya, sprite dalam gim Anda mungkin memiliki tepi yang tidak diinginkan di mana sprite tersebut benar-benar transparan.

    Untuk alasan optimasi, GPU bekerja dengan baik dengan gambar (disebut tekstur) persegi dan dimensi yang sama dengan kekuatan dua dan secara merata dibagi oleh delapan. Mengapa? Karena cara bahwa pixel data diakses, angka ajaib ini terjadi untuk menyelaraskan dengan VRAM dalam cara yang tepat untuk menjadi tercepat untuk akses, karena data sering dibaca dalam potongan.

    Oleh karena itu, pastikan bahwa Anda spritesheet adalah 64 x 64, 128 x 128, 256 x 256, 512 x 512 atau 1024 x 1024. Seperti yang Anda duga, semakin kecil semakin baik - bukan hanya dalam hal kinerja tetapi karena tekstur yang lebih kecil akan secara alami menyimpan permainan Anda akhir SWF lebih kecil.

    Ini adalah spritesheet yang akan kita gunakan sebagai contoh. Seni 'Tyrian' oleh Daniel Cook (Lostgarden.com).

    The spritesheet image
    Klik kanan untuk men-download

    Langkah 11: Manajer entitas

    Teknik optimasi pertama kita akan mengambil keuntungan dari untuk mencapai kinerja yang menyala adalah penggunaan "objek kolam-kolam". Daripada terus-menerus mengalokasikan lebih ram untuk benda-benda seperti peluru atau musuh, kita akan membuat kembali kolam yang tidak terpakai sprite mendaur ulang lagi dan lagi.

    Teknik ini menjamin bahwa penggunaan RAM tetap sangat rendah dan cegukan GC (pengumpulan sampah) jarang terjadi. Hasilnya adalah bahwa framerate akan lebih tinggi dan permainan Anda akan berjalan lancar tidak peduli berapa lama Anda bermain.

    Membuat sebuah class baru dalam proyek Anda disebut EntityManager.as dan mengimplementasikan mekanisme daur ulang-on-demand sederhana sebagai berikut.


    Langkah 12: Tetapkan Batas

    Manajer entitas kami akan mendaur ulang entitas ketika mereka bergerak ke tepi kiri layar. Fungsi di bawah ini disebut selama kawasan atau ketika mengubah ukuran acara ditembakkan. Kami menambahkan beberapa tambahan piksel tepi sehingga sprite tiba-tiba tidak pop dalam atau keluar dari keberadaan.


    Langkah 13: Mengatur sprite

    Manajer entitas menjalankan fungsi ini sekali saat startup. Ini menciptakan kumpulan geometri baru yang menggunakan spritesheet gambar yang telah tertanam dalam kode kita di atas. Ia akan mengirimkan bitmapData ke konstruktor kelas spritesheet, yang akan digunakan untuk menghasilkan tekstur yang memiliki semua gambar sprite tersedia di atasnya dalam grid. Kami memberitahu kami spritesheet bahwa kita akan menggunakan sprite berbeda 64 (8 oleh 8) pada satu tekstur. Spritesheet ini akan digunakan oleh batch geometri renderer.

    Jika kita ingin, kita bisa menggunakan lebih dari satu spritesheet, oleh inisialisasi tambahan gambar dan batch yang diperlukan. Di masa depan, ini mungkin mana Anda membuat batch kedua untuk semua ubin Medan yang pergi di bawah sprite pesawat ruang angkasa Anda. Anda bahkan dapat menerapkan batch ketiga yang berlapis di atas segalanya untuk efek partikel mewah dan permen mata. Untuk saat ini, demo teknologi sederhana ini hanya membutuhkan satu tekstur spritesheet dan kumpulan geometri.


    Langkah 14: Objek Kolam Renang

    Ini adalah dimana entitas manajer meningkatkan kinerja. Optimalisasi satu (objek reuse kolam) akan memungkinkan kita untuk hanya membuat entitas baru pada permintaan (ketika tidak ada apapun yang tidak aktif yang dapat digunakan kembali). Perhatikan bagaimana kami menggunakan kembali setiap sprite yang saat ini ditandai sebagai tidak aktif, kecuali mereka semua saat ini sedang digunakan, dalam hal mana kami bertelur yang baru. Dengan cara ini, objek kolam hanya memegang setiap sprite sebanyak seperti bahkan terlihat pada saat yang sama. Setelah beberapa detik pertama yang permainan kami telah berjalan, Kolam entitas akan tetap konstan - jarang akan sebuah entitas baru perlu dibuat setelah ada cukup untuk menangani apa yang terjadi pada layar.

    Lanjutkan menambahkan EntityManager.as sebagai berikut:

    Fungsi di atas dijalankan setiap kali sebuah sprite yang baru perlu ditambahkan pada layar. Manajer entitas scan kolam renang entitas untuk satu yang sedang tidak digunakan dan kembali ketika mungkin. Jika daftar penuh aktif entitas, yang baru perlu dibuat.


    Langkah 15: Simulasikan!

    Fungsi akhir yang merupakan tanggung jawab manajer entitas kami adalah salah satu yang akan dipanggil setiap bingkai. Hal ini digunakan untuk melakukan simulasi, AI, deteksi tabrakan, fisika atau animasi seperti yang diperlukan. Untuk demo sederhana teknologi saat ini, itu hanya loop melalui daftar aktif entitas di kolam dan update posisi mereka berdasarkan kecepatan. Setiap entitas akan dipindahkan sesuai dengan kecepatan mereka saat ini. Hanya untuk bersenang-senang, mereka diatur untuk berputar sedikit setiap frame juga.

    Entitas yang melewati sisi kiri layar adalah "membunuh" dan ditandai sebagai tidak aktif dan tidak terlihat, siap untuk digunakan kembali dalam fungsi di atas. Jika sebuah entitas menyentuh tepi layar tiga lainnya, kecepatan dibalik sehingga itu akan "terpental" bahwa tepi. Lanjutkan menambahkan EntityManager.as sebagai berikut:


    Langkah 16: Kelas Sprite

    Langkah terakhir untuk mendapatkan semuanya dan berjalan adalah untuk menerapkan empat kelas yang membuat sistem "mesin rendering" kami. Karena kata Sprite sudah digunakan dalam Flash, beberapa kelas berikutnya akan menggunakan istilah LiteSprite, yang tidak hanya nama yang mudah diingat tapi menyiratkan sifat ringan dan sederhana mesin ini.

    Untuk memulai, kita akan membuat kelas sprite 2D sederhana yang mengacu pada kelas entitas kita di atas. Akan ada banyak sprite dalam game kami, yang masing-masing dikumpulkan ke dalam sejumlah besar poligon dan diberikan dalam satu lintasan tunggal.

    Buat sebuah file baru dalam proyek Anda disebut LiteSprite.as dan menerapkan beberapa Getter dan setter sebagai berikut. Mungkin kita bisa lolos dengan hanya menggunakan variabel publik, tetapi di masa depan versi mengubah beberapa nilai-nilai ini akan memerlukan menjalankan beberapa kode pertama, sehingga teknik ini akan terbukti sangat berharga.

    Sprite masing-masing dapat sekarang melacak di mana itu ada di layar, serta bagaimana besar itu adalah, bagaimana transparan, dan sudut apa itu menghadapi. Properti spriteID adalah nomor yang digunakan selama rendering untuk mencari kebutuhan koordinat UV (tekstur) yang digunakan sebagai sumber persegi untuk pixel dari spritesheet gambar menggunakan.


    Langkah 17: Kelas Spritesheet

    Kita sekarang perlu untuk mengimplementasikan mekanisme untuk memproses gambar spritesheet yang kami tertanam di atas dan menggunakan bagian-bagian itu pada semua geometri diberikan kami. Buat sebuah file baru dalam proyek Anda disebut LiteSpriteSheet.as dan mulai dengan mengimpor fungsionalitas yang diperlukan, menentukan beberapa variabel kelas dan fungsi konstruktor.

    Konstruktor kelas di atas diberikan BitmapData untuk spritesheet kami serta jumlah sprite yang ada di dalamnya (dalam demo ini, 64).


    Langkah 18: Memotongnya

    Karena kita menggunakan tekstur yang satu untuk menyimpan semua gambar sprite, kita perlu membagi foto menjadi beberapa bagian (satu untuk masing-masing sprite di atasnya) ketika me-render. Kita melakukan ini dengan menetapkan koordinat yang berbeda untuk setiap vertex (sudut) mesh setiap quad digunakan untuk menggambar sebuah sprite.

    Koordinat ini disebut UVs, dan masing-masing pergi dari 0 ke 1 dan mewakili mana pada tekstur stage3D harus mulai sampling piksel ketika me-render. UV koordinat dan piksel persegi yang disimpan dalam array untuk kemudian menggunakan selama rendering sehingga kita tidak harus menghitung mereka setiap bingkai. Kami juga menyimpan ukuran dan bentuk masing-masing sprite (yang dalam demo ini semuanya identik) sehingga ketika kami memutar sprite kita tahu jari-jarinya (yang digunakan untuk menjaga pivot di tengah-tengah sprite).


    Langkah 19: Menghasilkan Mipmaps

    Sekarang kita perlu untuk memproses gambar ini selama init. Kami akan meng-upload untuk digunakan sebagai tekstur dengan GPU Anda. Ketika kita melakukannya, kita akan membuat salinan yang lebih kecil yang disebut "mipmaps". MIP-mapping digunakan oleh keras 3d untuk lebih mempercepat render dengan menggunakan versi yang lebih kecil tekstur sama setiap kali hal ini terlihat dari jauh (diperkecil) atau, dalam game 3D yang benar, ketika ia sedang dilihat pada sudut miring. Ini menghindari efek "moiree" (Ghost) daripada yang dapat terjadi jika mipmapping tidak digunakan. Mipmap masing-masing adalah setengah lebar dan tinggi seperti sebelumnya.

    Melanjutkan dengan LiteSpriteSheet.as, mari kita melaksanakan rutinitas kita perlu yang akan menghasilkan mipmaps dan meng-upload mereka semua untuk GPU pada kartu video Anda.


    Langkah 20: Geometri Batched

    Optimalisasi hardcore akhir yang akan kami terapkan adalah sistem rendering geometri batch. Teknik 'batched geometry' ini sering digunakan dalam sistem partikel. Kita akan menggunakannya untuk segalanya. Dengan cara ini, kita dapat memberitahu Anda GPU menggambar semuanya dalam satu pergi daripada naif mengirim ratusan menarik perintah (satu untuk masing-masing sprite pada layar).

    Untuk meminimalkan jumlah panggilan menarik dan rendering semuanya dalam satu pergi, kami akan menjadi batching sprite permainan semua ke dalam daftar panjang (x, y) koordinat. Pada dasarnya, kumpulan geometri diperlakukan oleh perangkat keras video sebagai mesh 3D tunggal. Kemudian, setelah setiap bingkai, kami akan meng-upload seluruh buffer untuk Stage3D dalam panggilan fungsi tunggal. Melakukan hal-hal dengan cara ini adalah jauh lebih cepat daripada meng-upload koordinat individu sprite masing-masing secara terpisah.

    Buat file baru di proyek Anda bernama LiteSpriteBatch.as dan mulailah dengan memasukkan semua impor untuk fungsionalitas yang diperlukan, variabel kelas yang akan digunakan, dan konstruktor sebagai berikut:


    Langkah 21: Batch orangtua dan anak-anak

    Lanjutkan dengan menerapkan Getter dan setter dan fungsi untuk menangani penambahan apapun sprite yang baru untuk batch. Orangtua mengacu pada objek tahap sprite digunakan oleh mesin permainan kami, sementara anak-anak semua sprite dalam batch render yang satu ini. Ketika kita menambahkan sebuah sprite anak, kami menambahkan lebih banyak data ke daftar verteces (yang memasok lokasi di layar sprite yang tertentu) serta UV Koordinat (lokasi di spritesheet tekstur yang sprite tertentu ini disimpan di). Ketika sebuah sprite anak ditambahkan atau dihapus dari batch, kami menetapkan variabel boolean untuk memberitahu kami sistem batch yang buffer perlu kembali upload sekarang bahwa mereka telah berubah.


    Langkah 22: Mengatur Shader

    Shader adalah seperangkat perintah yang di-upload langsung ke kartu video Anda untuk render yang sangat cepat. Di Flash 11 Stage3D, Anda menulis mereka dalam semacam bahasa assembly yang disebut AGAL. Shader ini membutuhkan hanya dibuat sekali, pada saat startup. Anda tidak perlu mengerti bahasa assembly opcodes untuk tutorial ini. Sebaliknya, hanya menerapkan penciptaan program vertex (yang menghitung lokasi Anda sprite pada layar) dan program fragmen (yang menghitung warna setiap piksel) sebagai berikut.


    Langkah 23: Pindahkan Sprite Sekitar

    Tepat sebelum diberikan, sprite setiap vertex koordinat di layar akan memiliki kemungkinan berubah seperti sprite bergerak di sekitar atau berputar. Fungsi berikut menghitung mana setiap node (sudut geometri) perlu. Karena setiap quad (Alun-alun yang membentuk satu sprite) memiliki empat simpul, dan vertex setiap kebutuhan x, y dan z koordinat, ada nilai-nilai dua belas untuk memperbarui. Sebagai sedikit optimasi, jika sprite tidak terlihat kita hanya menulis angka nol ke buffer vertex kami untuk menghindari melakukan perhitungan yang tidak perlu.


    Langkah 24: Gambarkan Geometri

    Akhirnya, terus menambahkan kelas LiteSpriteBatch.as dengan menerapkan fungsi gambar. Ini adalah dimana kami memberitahukan stage3D untuk membuat semua sprite dalam satu berlalu. Pertama, kita loop melalui semua dikenal anak (sprite individu) dan update posisi verterx berdasarkan mana mereka berada pada layar. Kami kemudian memberitahu stage3D tekstur dan shader yang menggunakan, serta menetapkan faktor campuran render.

    Apakah faktor campuran? Itu akan menentukan apakah atau tidak kita harus menggunakan transparansi, dan bagaimana untuk menangani transparan piksel pada tekstur kami. Anda bisa mengubah pilihan dalam panggilan setBlendFactors menggunakan aditif blanding, misalnya, yang tampak bagus untuk efek partikel seperti ledakan, karena piksel akan meningkatkan kecerahan di layar seperti mereka tumpang tindih. Dalam kasus sprite reguler, yang kami inginkan adalah menggambarnya dengan warna yang tepat seperti yang disimpan dalam tekstur spritesheet kami dan memungkinkan wilayah transparan.

    Langkah terakhir dalam fungsi menarik kami adalah untuk memperbarui UV dan indeks buffer jika batch telah mengubah ukuran, dan untuk selalu meng-upload vertex data karena sprite kami exected terus-menerus bergerak. Kita mengatakan stage3D yang buffer untuk menggunakan dan akhirnya membuat seluruh daftar raksasa geometri seolah-olah satu 3D mesh, sehingga ini akan ditarik menggunakan satu, cepat, drawTriangles panggilan.


    Langkah 25: Sprite tahap kelas

    Kelas akhir yang diperlukan oleh mesin rendering mewah (dan cepat) hardware-accelerated sprite kami adalah kelas tahap sprite. Tahap ini, seperti tahap Flash tradisional, memegang daftar semua kumpulan yang digunakan untuk permainan Anda. Dalam demo ini pertama, tahap kami akan hanya menggunakan satu batch sprite, yang sendiri hanya menggunakan spritesheet tunggal.

    Membuat satu file terakhir dalam proyek Anda disebut LiteSpriteStage.as dan mulai dengan menciptakan kelas sebagai berikut:


    Langkah 26: Matriks kamera

    Untuk mengetahui dengan tepat ke mana pada layar setiap sprite harus pergi, kami akan melacak lokasi dan ukuran jendela render. Selama inisialisasi game kami (atau jika itu berubah) kami membuat matriks tampilan model yang digunakan oleh Stage3D untuk mengubah koordinat 3D internal dari kumpulan geometri kami ke lokasi di layar yang tepat.


    Langkah 27: Tangani Batch

    Langkah terakhir dalam pembuatan demo game Stage3D kami adalah untuk menangani penambahan dan penghapusan batch geometri serta loop yang memanggil fungsi draw pada setiap batch. Dengan cara ini, ketika acara utama ENTER_FRAME permainan kami dipecat, itu akan memindahkan sprite di layar melalui manajer entitas dan kemudian memberitahu sistem tahap sprite untuk menggambar dirinya sendiri, yang pada gilirannya memberitahu semua batch yang dikenal untuk menggambar.

    Karena ini adalah demo berat dioptimalkan, hanya akan ada satu batch digunakan, tetapi ini akan berubah di masa depan tutorial seperti kita menambahkan lebih banyak mata permen.


    Langkah 28: Kompilasi dan jalankan!

    Kita hampir selesai! Mengkompilasi SWF Anda, memperbaiki kesalahan ketik, dan memeriksa kebaikan grafis. Anda harus memiliki demo yang terlihat seperti ini:

    Screenshot of our final .SWF in action. Sprite-o-licious!

    Jika Anda mengalami kesulitan kompilasi, dicatat bahwa proyek ini kelas yang dibuat oleh Adobe yang menangani kompilasi AGAL shaders, yang termasuk dalam download file .zip kode sumber.

    Hanya untuk referensi, dan untuk memastikan bahwa Anda telah menggunakan nama file benar dan lokasi untuk segala sesuatu, di sini adalah apa yang proyek FlashDevelop Anda akan terlihat seperti:

    The project window - what each file is named.

    Tutorial lengkap: Anda Are Awesome

    That's it untuk tutorial dalam seri ini! Menyetel minggu depan untuk menonton pertandingan perlahan-lahan berevolusi menjadi besar-Cari, halus mulus 60 FPS shoot-em-up. Dalam bagian selanjutnya, kami akan menerapkan kontrol pemain (menggunakan keyboard untuk bergerak di sekitar) dan menambahkan beberapa gerakan, suara dan musik untuk permainan.

    Saya akan senang mendengar dari Anda mengenai tutorial ini. Saya menyambut hangat semua pembaca untuk menghubungi saya melalui kericau: @mcfunkypants atau mcfunkypants.com blog saya atau di Google + setiap saat. Saya selalu mencari topik untuk menulis tutorial masa depan, sehingga merasa bebas untuk meminta satu. Akhirnya, saya akan senang melihat permainan Anda membuat menggunakan kode ini!

    Terima kasih untuk membaca. Melihat Anda minggu depan. Good luck dan HAVE FUN!

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.