Screen-Shot-2015-10-22-at-22.05.44

Unity3D İçin Sprite Sheet (Texture Atlas) Oluşturma ve Performans(Draw Call) İyileştirme

Performans her zaman oyun geliştiricilerin en önemli işlerinden birisi olmuştur. En basit oyunu üretirken bile özellikle bir gözünüzün sürekli draw call üzerinde olması gerekir. Elbette draw call tek başına bir performans kriteri değildir ama çok önemlidir. Yükseldikçe, bardağı taşıran su misali frame rate’iniz düşecektir. Bu yazının yeni başlayanlara yönelik olduğunu belirtmek isterim. Ayrıca sadece 2D oyun yapanlar değil, 3D oyun yapanlarda faydalanabilir.

Draw Call Adedini Nasıl Göreceksiniz?

Unity3D’ye yeni başalayanlar oyunlarının ne kadar draw call yarattığını nasıl göreceklerini bilmiyor olabilir. Bunun için “Game” ekranının üstünde bulunan Stats penceresini açmanız yeterli olacaktır.

unity_rendering_statistics_window

Açacağınız bu istatistik penceresinde, oyununuzun performansı ile ilgili pek çok detayı görebileceğiniz gibi “SetPass calls” ile gösterilen değer draw call sayısını gösterir. Bu rakamı düşük tutmak CPU/GPU performansınızı etkileyecektir.

unity_draw_calls

 

Draw Call’u Nasıl Düşürebilirsiniz?

Yapılacak en iyi şey Sprite Sheet kullanmaktır. 2D oyun geliştirmeye Unity ile yeni başladıysanız yapacağınız hatalardan birisi kullanacağınız görseli tek tek eklemek olacaktır. Oysa kullandığınız her görsel hafızada ayrı ve belirli bir yer tutar ve ekrana çizilmesi için daha fazla performans gerektirir. Yani görsellerinizi ayrı ayrı eklemek ciddi bir hatadır. En önemlisi ise draw call sayısının artması ve cpu/gpu’nuzun inleyerek oyununuzun performansına yetişememesine neden olmasıdır.

Bundan kurtulmanın yolu ise tüm görsellerinizi tek-büyük bir görsel dosyası içersine yerleştirmektir. Hazırlayacağınız bu yeni görsel dosyasına Sprite Sheets ya da Texture Atlas denir. Amacı ne olursa olsun her iki isim de aynı amaçla kullanılan görselleri ifade eder. Oyunda kullanacağınız tüm görselleri, sprite animasyonlarınızı olabildiğince -az- sprite sheet’te toplamak önemlidir.

BoysMix
Örnek Sprite Sheet

Elbette Photoshop gibi bir araçla, büyük boş bir görsel açıp diğer görsellerinizi bunun içersine yerleştirebilirsiniz. Ancak bu iş düşündüğünüz kadar kolay olmayacaktır. Özellikle fazla sayıda animasyonunuz ve sprite’ınız var ise ve bunları zamanla güncellemeniz/değiştirmeniz/optimize etmeniz gerekecek ise -ki gerekmeli- işin içinden çıkılmaz bir hal alacaktır. Ayrıca bu büyük gerseldeki alanı asla yeterince optimize kullanamayacağınız için gereksiz yer kaybına neden olacaksınız. Yinede bilgi için belirtmek istiyorum; özellikle mobil için geliştirme yaparken, kullanacağınız bu büyük -taşıyıcı- görselin POT 2 (32, 64… 512, 1024, 2048, 4096) olması gerekir. Bu nedenle her boşluğu değerlendirmek çok önemlidir.

Görseli hazırlasanız bile işiniz henüz bitmedi. Oyun motorlarının, bu büyük sprite sheet içersindeki parçaları ayrıştırabilmesi için görsellerin koordinatlarının belirli olması gerekir. Kimi oyun motorları bunu oluşturduğunuz sprite sheet’den harici olarak bir xml, json ya da salt metin dosyasında tutar ya da okur. Unity kendi içersinde, bu işi yapan bir editör sunmaktadır. Ancak bu editör gerçekten çok yetersiz ve çok zaman kaybettirmektedir. Onlarca farklı ebatta sprite’ınızın olduğunu düşünürseniz Unity’nin editöründe hepsini kesip biçmek ve belki de isimlendirmek işkenceye dönüşecektir. Emin olun fazla sayıda görsel ile uğraşıyorsanız, görselleri sık sık değiştirmeniz gerekiyor ise bu iyi bir çözümler değildir. Saçınızı yoldurabilir.

unity-editor1
Unity, Sprite Sheet Editör

Zamandan kazanmak ve işinizi doğru yapmak için mutlaka 3. parti bir araca ihtiyaç duyulur. Piyasada bulacağınız en iyi araçlardan birisi TexturePacker‘dır. İster amatör olun ister profesyönel TexturePacker kesinlikle hayatınızı kolaylaştıracak ve kurtaracaktır.

Unity Projenizi Hazırlayın

Unity içersinde TexturePacker’ı kullanabilmek için ücretsiz eklentisini yüklemeniz yeterli olacak. Bunun için Unity Asset Store‘dan TexturePacker’ı indirebilirsiniz: www.assetstore.unity3d.com/#/content/16641

screenshot-unity-1

 

Eklenti içersinde önemli olan “TexturePackerImporter.cs” dosyasını almanızdır. Bu dosya mutlaka Editor klasörü içersinde yer almalıdır. TexturePacker’ın örneklerini kurcalamak isterseniz Example klasörünü projenize dahil edebilirsiniz. Hepsi bu kadar, artık Unity projeniz Sprite Sheet’iniz için hazır!

screenshot-unity-2

Sprite Sheet Hazırlamak

Öncelikle TexturePacker‘ı indirip bilgisayarınıza yüklemeniz gerekiyor. TexturePacker’ı Code&Web’in web sitesinden indirebilirsiniz: www.codeandweb.com/texturepacker/download.  TexturePacker’ı bilgisayarınıza yükledikten sonra kullanmaya başlayabilirsiniz.

Karşınıza gelen New Project (Yeni Proje) seçim ekranında Unity – Texture2D Sprite Sheet‘i seçmeniz yeterli olacak. Aynı işlemi TexturePacker penceresinin sağ tarafından bulunan Settings bölümünde Data penceresinden de yapmanızda mümkün.

tp-1

 

Bundan sonra yapmanız gereken şey,  hazırladığınız görsellerinizi tek tek ya da görsellerinizin bulunduğu klasörünüzü TexturePacker’a sürükleyip bırakmak.

tp-3

 

Bu noktada Texturepacker’ın birden fazla özelliği ortaya çıkmaktadır:

  • Görsel dosyalarınızın formatının ne olduğu önemli değildir. Psd, png, tga, jpg, tiff, bmp formatında olabilir.  Hatta TexturePacker, Flash ile hazırladığınız animasyonlarınızı aktarmak için ideal bir çözüm sunar. Flash ile hazırladığınız frame animasyonlarınızı SWF olarak ürettikten sonra TexturePacker’a sürükleyerek aktarabilirsiniz.
  • TexturePacker klasör yapınızı bozmaz. Herşey mevcut dosyalama yönteminize göre organize olmuş bir şekilde TexturePacker’da yer alır.
  • TexturePacker dosya isimlerini değiştirmez. Bu sayede Unity içersinde yeniden isimlendirmeniz gerekmez ve aradığınız sprite’ı kolayca bulabilirsiniz.

Artık tek yapmanız gereken sprite sheet’inizi “Publish” etmek. Publish etmeden önce “Data” penceresinde “Data file” kısmına dosya yolunu ve ismini belirtmiş olmanız gerekiyor. Bu yolun Unity oyun projeniz içersinde olması işinize kolaylaştıracaktır (ör: OyunAdı/Assets/SpriteSheets/spritesheet-adı). Ekranın üst menüsünde göreceğiniz Publish butonu ile spritesheet’inizi oluşturabilirsiniz.

texturepacker-unity-2

 

Unity’ye döndüğünüzde yüklemiş olduğumuz TextrurePacker eklentisi hiçbir şey yapmanıza gerek olmadan spritelarınızı hazır halde getirecektir. Bundan sonra TexturePacker eklentisi, sprite sheet’inizde yapacağınız her değişikliği otomatik olarak algılayacaktır. Yani değişiklik yapsanız bile hiçbir işlem yapmanız gerekmeyecektir.

screenshot-unity-3

Uyarı:  TexturePacker’a ekleyeceğiniz sprite isimlerinde (‘, !, &, %, “) gibi özel karakterler kullanmamalısınız. Bu karakterleri kullanırsanız, 3.9.x sürümü TexturePacker parser’ı sorun çıkartacak ve Unity’de hata mesajı ile karşılaşacaksınız. Henüz yayınlanmamış olan 4.x sürümünde bu sorun çözülmüş. Ancak dikkatli olmakta fayda var. Ayrıca hangi developer dosya isimlerinde böyle tuhaf karakterler kullanır ki!

TexturePacker bize ne sağladı?

TexturePacker’da hiçbir özel ayar yapmadan, default ayarlarında bile aslında pek çok şey kazandınız.

  • Sprite’larınızın isimleri değişmedi. Özellikle kapsamlı bir projede emin olun bu çok önemli.
  • Unity’nin kendi sprite editöründe açıp tek tek kesmeniz hatta isimlendirmiz gerekmedi.
  • Peki dosyalarda değişiklik yaparsanız, spritelarınızın ebadı değişir ya da silerseniz! Unity’nin sprite editörünü kullanmıyorsanız yanmıştınız. Neredeyse tüm spriteları yeniden kesmeniz, yeniden isimlendirmeniz gerekirdi. En kötü olanı ise oyunda kullandığınız tüm spriteları yeniden belirlemek zorunda kalacak olmanızdı. TexturePacker kullandığınız sürece bunlardan etkilenmeyeceksiniz. Sprite sheet’de yapacağınız değişiklikler(silme, ekleme, değiştirme) Unity’ye neredeyse kusursuz yansıyor.
  • TexturePacker sizin için görsellerdeki gereksiz boşlukları temizledi(trim/crop), uğraşmanız gerekmedi
  • Sprite sheet’i olabilecek en iyi şekilde doldurdu. Hatta bazı spritelarınızı rotate ederek alanı en iyi şekilde kullandı.
  • Birbirinin tamamen aynı olan sprite’larınızı tespit edip, tek birisini ekledi. Bu, özellikle sprite animasyonlarda çok önemli bir özelliktir. Tekrar eden karelerden kurtulmuş olursunuz.
  • En önemlisi tüm sprite’larınız artık tek bir görsel içersinden geldiği için draw call sayınız ciddi oranda düştü.
  • Zaman, zaman, zaman…

Tam olarak optimize bir sprite sheet elde ettiniz. Sanmayın ki aynısını kendinizi uğraşarak saatler harcamadan yapabilirdiniz. Denemenizi bile tavsiye etmem 🙂

TexturePacker ile yapabilecekleriniz bunlarla sınırlı değil.

– Farklı ekran çözünürlükleri için Scale mode’u değiştirerek tek seferde sprite sheetler hazırlayabilirsiniz.

tp-4

– TexturePacker penceresinin sağ alt köşesinde hazırladığınız sprite sheet’in yaklaşık olarak ne kadar ram gerektireceğini takip edebilirsiniz.

tp-5

– Sprite sheet’inizde yer alan spritelarınız tek sheet’e sığmıyor ise otomatik olarak birden fazla sheet üretebilirsiniz. Bunun için Data File kısmında dosya ismine {n} eklemeli ve Layout kısmında Multipack‘i seçmiş olmanız yeterli.

tp-6

– Unity’de kullanmak üzere pivot point’lerinizi belirleyebilirsiniz. Ancak Texturepacker’ın bu konuda kısıtlaması var. Sadece belirli yerlere pivot point ekleyebilirsiniz. İstediğiniz noktayı henüz belirleyemiyorsunuz. İleriki sürümlerde özel pivot point’ler oluşturma imkanınızda olacak.

tp-7

 

Önemli: Pivot Pointlerinizi Unity’de belirleyebilirsiniz. Ancak TexturePacker eklentisi, sprite sheet’iniz her güncellendiğinde default olarak pivot point’lerinizi silecek ve kendisininkini atayacaktır. Bunun için Unity’de Preferences penceresinde TexturePacker ayarlarında, Always import pivot points‘i  kapatmayı etmeyi unutmayın. Bu sayede Unity’de eklediğiniz pivot pointler korunacaktır.

tp-8

 

 

Siteden indireceğiniz TexturePacker sürüm’ü 7 günlük deneme için. 7 gün boyunca tüm özelliklerinden faydalanabilirsiniz. Tam sürümün fiyatı ise 40 Euro, yaklaşık 130 TL. Buradan satın alabilirsiniz. Gerçekten oyun geliştirmeyi düşünüyorsanız sahip olmanız gereken bu araç için kesinlikle yüksek bir rakam değil. TexturePacker her oyun geliştiricinin mutlaka sahip olması gereken bir araç. Emin olun zamanınız çok daha değerli.

Selim Anaç

Selim Anaç

More than 20 years of working experience at digital products as games/advergames, mobile & desktop apps and online software production. Multi-discipline software developer, team leader. A video game addict.