Info yang Perlu Anda Tahu Tentang Unity Sprite

Sebagai developer game yang sering mengerjakan game 2D , berurusan dengan Sprite sudah menjadi makanan sehari — hari. Sprite adalah object 2D Unity yang menggunakan file — file asset gambar yang telah diimport terlebih dahulu ke dalam Unity. Unity mensupport berbagai tipe ekstensi file file gambar seperti PNG, BMP, JPG, PSD, TIFF, dan TGA.

Sepanjang perjalanan saya membuat game 2D , saya menemukan beberapa hal yang cukup penting untuk diperhatikan dalam bekerja menggunakan Sprite. Beberapa hal dapat mempengaruhi hasil build akhir game, dan yang lain dapat mempengaruhi performa dari game itu sendiri. Disini saya akan menjelaskan beberapa hal yang wajib diperhatikan mengenai Sprite asset.

note : di dalam artikel ini apabila saya menyebut file raw artinya adalah file asset gambar yang belum diimport ke dalam Unity


Info #1 : Ukuran asset di dalam Unity berbeda dengan ukuran file rawnya (png,jpg, dll)

Unity memiliki format image internal bernama Texture2D

Apabila anda memiliki sebuah file png berukuran 54 kb, ketika anda import ke dalam unity maka file tersebut akan berubah ukurannya di dalam Unity menjadi lebih besar. Hal ini disebabkan karena Unity memiliki format image internal sehingga segala asset image yang diimport ke dalam unity akan dikonversi menjadi dalam format internal tersebut. format internal Unity tersebut bernama Texture2D.

Untuk melihat ukuran Texture2D dari asset yg diimport anda dapat mengklik file asset tersebut di dalam Unitydan melihat preview yang berada di bawah inspector. Apabila tidak terlihat coba drag and drop bar berwarna hitam yang ada di bawah inspector.

preview sprite di inspector

Info #2 : Ukuran Texture2D HANYA dipengaruhi oleh ukuran resolusi file raw

Ini adalah pengalaman pribadi saya. Saya sempat kebingungan mengapa file raw png saya yang berukuran hanya sekitar 70kb ketika diimport ke dalam Unity tiba — tiba ukurannya menjadi lebih dari 1MB. seperti misalnya file run left 1.png di bawah ini, file raw berukuran 71 kb , file Texture2D nya berukuran 2.1 MB.

beda jauh gan! :shock:

Saya kira ada yang salah dengan file png nya. Saya coba minta artist untuk export ulang dari photoshop namun hasilnya tetap sama. Saya coba memakai aplikasi minifier seperti Image Alpha namun tetap tidak ada hasilnya. Usut punya usut ternyata yang menyebabkan ukuran Texture2D membengkak adalah resolusi file raw. Merujuk kembali ke Info #1 , Unity mekonversi file yang diimport ke dalam format internal yaitu Texture2D , dan ukuran Texture2D dipengaruhi oleh resolusi file raw yang diimport. Kemudian saya coba perkecil resolusi file raw menjadi setengahnya, dan menakjubkan! ukuran Texture2D berkurang 75%!

before and after

Jadi apabila anda mengimport file ke dalam unity , selalu dan selalu! perhatikan resolusi dari file tersebut karena HANYA resolusi saja yang mempengaruhi besar kecilnya ukuran Texture2D. Nah sebaiknya resolusi assetnya sebesar apa sih ? mari kita bahas di Info #3


Info #3 : The Power of Two rule for Texture asset

Hal ini sedikit teknis dan menyentuh cara GPU bekerja. GPU pada umumnya hanya dapat membaca file texture yang memiliki ukuran tinggi dan sebesar dua pangkat (256x256 , 512x512, 512x1024, dll) . Mengapa demikian? karena ukuran dua pangkat secara komputasi sesuai dengan cara kerja komputer yang menggunakan bilangan biner 0 dan 1.

Karena alasan tersebutlah Unity me-resize Texture2D yang tidak berukuran dua pangkat menjadi ukuran dua pangkat yang terdekat dengan tinggi dan lebar file tersebut (misal 100 -> 128, 200 -> 256, 300 -> 512). Unity me-resize ukuran dengan cara menambahkan empty space ke dalam Texture2D tanpa mengubah ukuran dan aspect ratio asal file tersebut. Hal ini mirip seperti saat kita menggunakan image editor dan me-resize ukuran canvas. Seperti misalnya file run left 1.png pada Info #2 yang berukuran 343x407 akan di-resize Unity menjadi 512x512 . berikut ilustrasinya

before and after

Hal inilah yang menyebabkan mengapa di Info #2 file yang berukuran 686x814 ketika diresize tinggi dan lebarnya menjadi separuhnya, ukurannya texturenya bisa menjadi 75% lebih kecil. Berikut penjelasan detilnya :

  • ukuran 682x814 akan diresize Unity menjadi 1024x1024
  • sedangkan 343 x 407 akan menjadi 512 x 512
  • Bila diukur sebagai luas bidang maka kita dapat mengetahui bahwa luas 512x512 adalah seperempat dari luas 1024x1024 .

Info ini penting tidak hanya bagi programmer namun juga bagi artist. Artist harus memastikan bahwa resolusi asset yang dibuat tidak terlalu besar sehingga membuat game menjadi bengkak. Berikut beberapa tips yang bisa diterapkan :

  • Berdiskusilah dengan programmer dan tetap satu resolusi yang akan digunakan di dalam game dan buat asset menggunakan referensi resolusi tersebut. misal untuk android saya sering menggunakan referensi 480x800 (portrait) atau 800x480 (landscape)
  • UI — UI rata2 ukurannya kecil, jadi usahakan kurang dari 256x256
  • Gameplay karakter juga kebanyakan relatif kecil, jadi bisa diusahakan di bawah 512x512.
  • Yang paling susah diperkecil adalah background. untuk Background biasanya saya minta artist untuk dipotong jadi beberapa file apabila tinggi atau lebarnya lebih dari 1024

Oh iya ada sedikit catatan juga : GPU juga memiliki limit ukuran texture jadi usahakan supaya asset yang anda buat tidak melebihi ukuran limit GPU tesebut. Kebanyakan CPU PC memiliki limitnya 4096x4096 , sedangkan GPU mobile (Android, iOS) rata — rata memiliki limit 2048x2048. Namun hati — hati karena ada beberapa low end device Android yang memiliki limit 1024x1024 karena GPU nya lebih tidak terlalu bagus. Bluestack juga sepertinya memiliki limit 1024x1024 karena game saya yg menggunakan Texture Atlas berukuran 2048x2048 gagal diload. Hal ini penting diperhatikan karena apabila file melebihi limit maka texture tidak bisa diload oleh GPU dan hasilnya adalah layar hitam.


Info #4 : Gunakan Texture Atlas

Merujuk pada Info #3 , asset — asset Texture2D yang tidak berukuran pangkat dua akan diresize tinggi dan lebarnya menjadi ukuran pangkat dua terdekat dengan menambahkan empty space. Apabila anda memilik banyak asset Texture2D dan masing — masing asset tidak berukuran pangkat dua maka tentu saja akan Unity akan menggenerate banyak empty space yang tersia — siakan, yang pada akhirnya akan mempengaruhi ukuran akhir game menjadi besar. Karena itulah game developer yang sudah berpengalaman akan menggunakan Texture Atlas.

Berdasar definisi wikipedia ,

Texture atlas (also called a tile map, tile engine, or sprite sheet) is a large image containing a collection, or “atlas”, of sub-images, each of which is a texture map for some part of a 2D or 3D model.

Jadi intinya texture atlas adalah file — file image yang digabungkan menjadi satu image berukuran pangkat dua yang kemudian diimport ke dalam game engine dan dimapping ulang posisinya supaya dapat digunakan di dalam game.

contoh texture atlas, Game : Minecraft

Biasanya texture atlas dibuat menggunakan tools — tools texture packer yang outputnya adalah file image texture atlas (png) dan file data mapping atlas. Namun untungnya kita tidak perlu repot — repot melakukan texture packing secara manual karena di dalam Unity sudah tersedia fitur texture packer internal bernama Sprite Packer yang sangat mudah untuk digunakan (dan bersyukurlah anda karena sekarang anda dapat menggunakan fitur ini secara gratis semenjak kemunculan Unity 5, Sprite Packer ini masih merupakan fitur Unity Pro di Unity 4).

Untuk melakukan texture packing menggunakan Sprite Packer Unity, yang harus anda lakukan adalah memilih texture — texture yang akan dijadikan satu ke dalam texture atlas dan kemudian di bagian inspector masukkan nama pack ke dalam field belabel “Packing Tag. Texture — texture yang memiliki Packing Tag yang sama akan dipacking oleh Unity ke dalam satu file texture atlas. Apabila anda ingin menghapus salah satu texture dari texture atlas cukup hapus saja Packing Tag nya. Mudah bukan?

Menyatukan texture — texture menjadi satu ke dalam texture atlas

Kemudian untuk melihat hasilnya anda dapat membuka windows Sprite Packer dengan mengklik pilihan menu di bagian atas Windows -> Sprite Packer. Tekan tombol “Pack” dan Unity akan melakukan proses packing. Hasilnya akan terlihat seperti gambar di bawah ini. Apabila anda ingin melihat list atlas yang telah anda buat cukup klik saja dropdown menu di samping text “View atlas”

Hasil Texture Atlas yang dibuat

Sedikit catatan bahwa texture — texture yang memiliki Packing Tag yang sama akan dipack ke dalam texture atlas yang berbeda apabila texture — texture tersebut memiliki setting yang berbeda. Setting yang mempengaruhi packing misalnya flag “Generate Mip Map”, format Texture (compressed atau true color), dan juga resolusi image (pangkat dua vs tidak pangkat dua).


#Info 5 : Performa game yang lebih baik dengan Texture Atlas

Apabila anda cukup familiar dengan unity tentu anda mengetahui tentang “Draw Call” . Draw call ini adalah ukuran banyaknya jumlah texture yang digambar di dalam scene dalam satu kali siklus render. Draw call merupakan proses yang cukup memakan waktu dan secara umum merupakan indikator performa sebuah game : semakin banyak banyak draw call semakin lama juga satu siklus render, dan hasilnya semakin rendah FPS game tersebut. Programmer yang baik akan selalu berusaha untuk meminimalisir jumlah draw call.

Nah , perlu diketahui bahwa satu texture akan menghasilkan satu draw call. Sehingga semakin banyak texture yang digunakan di dalam game maka semakin banyak juga draw call nya. Disinilah kelebihan dari texture atlas, karena hanya menggunakan satu texture saja maka draw call yang akan dihasilkan juga hanya satu draw call saja meskipun banyak sprite yang menggunakan texture atlas tersebut (dengan asumsi didalam satu scene semua sprite menggunakan satu texture atlas saja).

Mari saya contohkan, Di bawah ini saya memasukkan texture — texture yang belum di sprite packing ke dalam scene. Bila dijumlahkan terdapat 14 sprite yang masing — masing menggunakan satu texture.

Apabila scene saya coba play hasilnya dapat dilihat dari Stat bahwa draw call nya (Batches) menjadi sejumlah 14 draw call

draw call texture tanpa atlas

Namun ketika seluruh texture tersebut saya pack menjadi satu texture atlas seperti yang sudah saya tunjukkan sebelumnya, draw call nya menjadi hanya 1 saja. Sangat signifikan perbedaannya!

draw call texture yang sudah di pack atlas

Disinilah texture atlas menjadi sangat penting untuk meningkatkan performa game, karena dengan texture atlas anda dapat membuat game yang menampilkan banyak sprite di dalam satu scene tanpa membebani draw call.


Info #6 : Matikan flag Generate Mip Map untuk game 2D

Efek samping dari teknik mip map adalah ukuran texture yang menjadi lebih besar

Info terakhir ini cukup penting juga karena berpengaruh terhadap ukuran texture dan juga ketajaman sprite di layar. Jadi apabila anda mengamati inspector Texture 2D anda akan melihat check box yang berlabel “Generate Mip Map”. Sebaiknya anda matikan saja Generate Mip Map ini apabila anda membuat game 2D.

Mip Map ini adalah teknik 3D yang membuat sebuah texture menjadi berbagai macam resolusi dan pemilihan resolusi yang digunakan diukur berdasarkan jarak object dengan kamera. Teknik mip map ini berguna untuk game 3D yang menggunakan mode kamera perspective. teknik mipmap dilakukan dengan menambahkan texture baru dengan ukuran 1/4 lebih kecil dari texture aslinya dan dilakukan berulang — ulang sampai dihasilkan texture dengan resolusi yang sangat kecil. Hasilnya adalah satu texture atlas yang berisi gambar yang sama namun resolusinya lebih kecil. Efek samping dari teknik mip map ini adalah ukuran texture yang menjadi lebih besar karena ditambahkan dengan texture hasil mip mappingnya.

contoh mip map , source : wikipedia

Nah karena game 2D menggunakan kamera bertipe orthogonal (jauh dekat ukuran object tetap sama) maka mip map ini menjadi tidak berguna, hanya menambah ukuran texture saja dan justru membuat tampilan sprite menjadi jelek karena bisa turun resolusinya. Salah satu contoh yang dapat saya tunjukkan adalah apabila texture di mip map icon nya di project tab akan menjadi blur, sedangkan bila tidak di mip map icon nya akan tampak lebih tajam.

run left 1 mip map, run left 2 tidak mip map

Saya juga sebelum mengetahui tentang mip mapping ini membiarkan saja flag generate mip map itu menyala dan hasilnya ketika game dijalankan di device berukuran besar tampilan spritenya menjadi sangat kabur. Setelah saya coba matikan mip mapnya baru tampilannya menjadi lebih tajam. Jadi selalu ingat untuk mematikan mip map apabila anda membuat game 2D!


Oke, Itulah beberapa info mengenai Sprite Unity yang penting anda ketahui.

  1. Unity memiliki format image internal yang bernama Texture2D
  2. Ukuran Texture2D dipengaruhi oleh resolusi file raw asset
  3. Ingat the Power of Two rules
  4. Gunakan Texture Atlas untuk menghemat ukuran
  5. Gunakan Texture Atlas juga untuk membuat performa game lebih baik
  6. Matikan generate mip map flag untuk game 2D

Dengan mengetahui info — info di atas anda dapat membuat game — game yang jauh lebih optimized baik secara ukuran file maupun secara performa. Semoga info ini cukup berguna bagi anda semua dan jangan lupa like and share supaya lebih banyak yang tahu. Sampai jumpa lagi di artikel Beyond The Code selanjutnya! :)

-Beyond The Code-
Hal — hal teknis di luar coding yang wajib kamu tahu dalam game development