Tutorials/Flash/BitmapBlit
From GameDevID
Bahasa: ActionScript3
Tingkat Kesulitan: Menengah - Atas
Contents |
Teknik render menggunakan Blit
Blit atau Bit Blit dikenal sebagai teknik yang menggambar di atas sebuah bitmap layer. Walaupun Flash dikenal sebagai authoring tool yang unik karena penggunaan vektor, namun justru kemudahan vektor berdampak pada performa. Sehingga solusi bagi game yang membutuhkan performa tinggi adalah dengan menggunakan bitmap. Ada beberapa artikel yang membuktikan bahwa blit lebih cepat daripada display list standar dari AS3, dan artikel ini akan mencoba memaparkan hasil percobaan antara menggunakan addChild (display list) vs. blitting.
Contoh gambar latar belakang sebelum ditumpuk sprites
Hasilnya
Alat-alat yang dibutuhkan
Kompiler AS3: FlashCS3 atau Flex3SDK
IDE atau text editor: FlashCS3, eclipse, FlashDevelop, notepad++, etc.
Aturan percobaan
- SWF yang dihasilkan akan membuat obyek gambar sebanyak 1000 buah dalam 5 tahap sehingga terdapat 5000 obyek gambar yang bergerak secara random dan dianimasikan frame-by-frame. Tahapan ini dipakai untuk melihat pas wave ke berapa mulai terlihat lag yang signifikan.
Obyek gambar hanya akan membutuhkan 1 gambar bitmap dari asset (tanpa duplikasi) berupa tileset yang nantinya dianimasikan frame-by-frame. Tanpa duplikasi ini maksudnya, obyek gambar akan menggunakan asset bitmap sebagai referensi tanpa menyimpan bitmapData baru di dalamnya. Untuk itu maka penggambarannya tentu pakai metode copyPixel pada versi addChild, namun bedanya dengan yang blit adalah bitmapData yang dikopi berada dalam bitmap di dalam display list pada obyek gambar yang dimaksud :).
Tileset yang dipakai untuk percobaan ini
Kode dasar
Kode dibagi dalam 3 bagian:
- Main class, kelas yang menjalankan inisiasi asset, spawning obyek gambar, dan loop.
- TestSprite class, kelas yang menggerakkan dan menganimasikan sprite. Untuk metode blit, kelas ini bertugas untuk menggambar ke bitmap utama.
- RectTiles class, kelas yang berisi array berupa data Rectangle dari tileset utama.
Kelas TestSprite
Untuk versi addChild, kelas ini memiliki container berupa Sprite dan menyimpan referensi sprite parent dari Main class. Pada tiap loop/update, kelas akan mengambil Rectangle di frame berikutnya, lalu melakukan copyPixel pada Bitmap di dalam container.
Sementara untuk versi blit, lebih sederhana karena dia hanya butuh mengambil frame berikutnya kemudian copyPixel pada referensi layer Bitmap dari Main.
Hasil
Berikut ini adalah rangkaian skrinsyut yang diambil dari awal hingga akhir.
addChild
FPS yang dipake 1000, waktu dijalankan pada FlashPlayer standalone berkurang dikit.
Proses per 1000 dari pertama hingga kelima. Pada akhirnya 5000 obyek menghasilkan FPS dibawah 10 pada sistem penulis. Perhatikan bahwa memori yang digunakan juga menanjak banyak.
Saat loop dihentikan, FPS masih nyangkut di 30an.
blitting
Proses per 1000 dari pertama hingga kelima. Pada akhirnya 5000 obyek menghasilkan FPS sedikit di atas 10 pada sistem penulis.
Saat loop dihentikan, FPS kembali normal.
Kesimpulan
Teknik blit jelas memiliki keunggulan dalam hal performa dibandingkan addChild, namun ada beberapa setback pada blit seperti tidak bisa rotasi (penulis sudah pernah mencoba menggunakan metode draw yang dilengkapi parameter transformasi dan rotasi matrix, tetapi hal itu malah mengurangi performa) dan harus diakali dengan membuat precached rotations.
Kelemahan lain tentunya adalah karena ini diluar standar yang diberikan Flash, sehingga pendekatan ke implementasi harus dirancang sedemikian rupa agar memudahkan developer.
Download File
Thanks
This article would not be written without the direct and indirect help of these great people:
