Metlivi Blog

Açık Dünya ve Savaş Sprite'larının Tutarlı Bir Ölçekte Tutulması

Bir karakterin hem açık dünya hem de savaş sahnelerinde aynı boyutta hissettirmesini sağlamak için yalnızca kaynak görsel boyutlarını değil, çizimin ekranda oluşturulduğu (render edildiği) yüksekliğini karşılaştırın. Karakter için ortak bir piksel yüksekliği hedefi belirleyin, tutarlı bir dünya ölçeği ile piksel yoğunluğu ayarlayın ve ardından her iki sahneyi de aynı kamera ölçeğinde karşılaştırın. Karakterin ayaklarını ortak bir taban çizgisine hizalayın ve sonucu oyunun hedeflenen ekran boyutlarında kontrol edin. Sahnelerden biri kasıtlı olarak farklı bir kamera veya kompozisyon kullanıyorsa, sprite ölçeğini sessizce değiştirmek yerine bu istisnayı belgeleyin.

15 Ekim 20268 dk okumaYazan: Metlivi Editorial Team
Bölüm 1

Oyununuz için "aynı ölçeğin" ne anlama geldiğine karar verin

Ölçülebilir bir hedef tanımlayarak başlayın. Örneğin, karakterin referans kamera görünümünde her iki sahnede de ayak tabanından başın tepesine kadar 32 ekran pikseli kaplaması gerektiğine karar verebilirsiniz. Bu örnek teşkil eden bir hedeftir, evrensel olarak önerilen bir boyut değildir: Oyununuzun çözünürlüğüne ve çizimlerindeki ayrıntı düzeyine uygun bir hedef seçin.

Görselin şeffaf dikdörtgen alanını değil, görünür durumdaki karakteri ölçün. Açık dünya sprite'ı gölge, silah, anten veya boş dolgu alanı (padding) içerebilir; savaş sprite'ı ise farklı bir poza sahip olabilir. Hedefinizin baştan ayağa vücut siluetini mi yoksa görünür çizimin tamamını mı ölçeceğine karar verin ve her ikisi için de aynı kuralı uygulayın. Hedef yüksekliği, referans çözünürlüğü, hedeflenen zemin çizgisini ve sahneye özel kasıtlı farklılıkları içeren küçük bir referans sayfası tutun.

Bu tanım önemlidir çünkü kaynak tuvalin daha büyük olması ekranda otomatik olarak daha büyük bir karakter anlamına gelmez. Tuval boyutları görsel alanını tanımlar; motorun içe aktarma ayarları, nesne ölçeği ve kamera ise bu alanın kaç ekran pikseli kaplayacağını belirler. Aseprite, tuvali değiştirmek ile sprite içeriğini yeniden boyutlandırmayı birbirinden ayırır; bu nedenle çizimi değiştirmeden önce hangi işleme ihtiyacınız olduğunu kontrol edin.Aseprite: Sprite Size

Bölüm 2

Her tuvalin içindeki asıl çizimi karşılaştırın

Açık dünya ve savaş görsellerini kendi doğal piksel ölçeklerinde açın ve seçilen ölçümdeki pikselleri sayın. Karakterin görünür yüksekliğini ve ayakları ile tuval kenarı arasındaki mesafeyi kaydedin. Savaş karakteri 48 görünür piksel boyunda, açık dünya karakteri ise 32 piksel boyundaysa, motor herhangi bir sahne ölçeklendirmesi uygulamadan önce çizim oranları 1,5:1 oranında farklılık gösterir.

Oranlar diğer açılardan aynı olduğunda, basit bir başlangıç hesabı şöyledir: istenen render yüksekliği ÷ mevcut render yüksekliği = ayarlama katsayısı. Bir sprite şu anda 24 piksel boyunda render ediliyorsa ve 32 piksel olması gerekiyorsa, katsayı 32 ÷ 24 = 1,33 olur. Bunu tanısal bir tahmin olarak kullanın, ardından çizimi ve sahne kurulumunu inceleyin. Bu örnek amaçlı bir hesaplamadır; kamera, kırpma veya transform farkı olmadığını varsayar.

Görsel dosyalarının genişlik ve yüksekliklerini birbirine uydurmak adına yeniden boyutlandırma yapmayın. Bir poz daha geniş olabilir veya bir savaş animasyonu havaya kalkmış bir kol içerebilir. İstenen şekli koruyun ve aynı anatomik referans noktalarını karşılaştırın. Sprite'lar gözle görülür şekilde farklı anatomiye veya perspektife sahipse, piksel yüksekliğini eşitlemek bile aynı hissettirmelerini sağlamayabilir; tasarımı ayarlayın veya sahneye özel bir istisna üzerinde anlaşın.

Bölüm 3

Ortak piksel yoğunluğu ve dünya ölçeği belirleyin

Unity'de açık dünya ve savaş sprite'larını aynı Pixels Per Unit (PPU) değerine ayarlayın ve Pixel Perfect Camera'nın Asset Pixels Per Unit ayarını da bu değerle eşleştirin. Unity, PPU'yu bir sahne birimini oluşturan piksel sayısı olarak tanımlar ve Pixel Perfect Camera kılavuzu sahne sprite'ları genelinde ortak bir değer kullanılmasını önerir.Unity: 2D Pixel Perfect Örneğin, proje birim başına 16 piksel kullanıyorsa, 32 piksel yüksekliğindeki bir sprite nesne ölçeklendirmesinden önce 2 dünya birimi kaplar.

Her karakter nesnesinin transform ölçeğini de kontrol edin. PPU değerlerini eşleştirmek, bir sahne nesnesinin 0,8 diğerinin ise 1,0 olarak ölçeklendirilmesini telafi etmez. Tutarlı içe aktarma ve transform ayarlarını tercih edin; çizimi veya net bir şekilde kaydedilmiş sahneye özel bir ölçeği yalnızca kompozisyon gerektirdiğinde ayarlayın.

Başka bir motorda eşdeğer kontrolleri bulun: Kaç kaynak pikselin bir dünya birimine karşılık geldiği, düğüm (node) veya nesne ölçeği ve kameranın viewport'u veya yakınlaştırması (zoom). Godot'nun 2D render akışı, ekranı yeniden boyutlandırırken kullanılan esnetme (stretch) dönüşümü de dahil olmak üzere tuval ve viewport dönüşümlerini içerir; bu nedenle bir kaynak görselin boyutları tek başına nihai ekran boyutunu belirleyemez.Godot: Viewport and canvas transforms

Bölüm 4

Ayakları bilinçli bir pivot ile hizalayın

Bir karakter doğru yükseklikte olsa bile sahneler arasında havada duruyor, zemine batıyor veya konumu kayıyorsa yine de tutarsız ölçeklendirilmiş gibi görünebilir. Pivot noktasını anlamlı bir sabitleme noktasına, genellikle ayaklar arasındaki zemin temas noktasına ayarlayın; ardından bu sabitleme noktasını her iki sahnede de aynı zemin taban çizgisine hizalayın. Bir animasyon sırasında ayakları hareket eden sprite'lar için kök (root) veya pivot noktasını tutarlı bir şekilde sabitleyin ve temas karelerini kontrol edin.

Her görselin merkezinin iyi bir sabitleme noktası olduğunu varsaymaktan kaçının. Tuvaller farklı miktarlarda şeffaf dolguya sahip olabilir ve ortalanmış bir pivot, çizimin farklı bir dikey konuma yerleşmesine neden olabilir. Unity'nin pixel-perfect iş akışı, piksel cinsinden ölçülen özel pivotları destekler ve birden çok sprite içeren bir dokudaki her bir sprite için pivot belirlenmesini önerir.Unity: 2D Pixel Perfect Godot'da Sprite2D varsayılan olarak ortalanır; dokümantasyonu, pikseller arasına yerleştirildiğinde ortalanmış piksel sanatının bozuk görünebileceğini belirtir ve seçenek olarak ortalamayı devre dışı bırakmayı veya piksel hizalamayı (pixel snapping) etkinleştirmeyi önerir.Godot: Sprite2D

Bölüm 5

Filtrelemeyi, hizalamayı ve kamera ölçeğini kontrol edin

Net piksel sanatı için nearest (en yakın) veya point filtreleme kullanın ve doku sıkıştırmasının görünümü değiştirmediğinden emin olun. Unity'nin yönergeleri, Pixel Perfect Camera ile kullanılan sprite'lar için özellikle Point filtrelemeyi ve sıkıştırma kullanılmamasını önerir.Unity: 2D Pixel Perfect Bu ayarlar kenar netliğini korur; farklı ölçeklendirilmiş iki sprite'ı aynı boyuta getirmez.

Ardından sahneleri, kameraları aynı referans görünümüne ayarlanmış olarak veya geçici bir ortak test kamerasıyla karşılaştırın. Bir savaş sahnesi genellikle vurgu amacıyla yakınlaşır (zoom yapar). Kamera yakınlaştırması iki katına çıkarsa, sprite'ın dünya ölçeği değişmese bile karakter ekranda iki kat daha fazla piksel kaplayabilir. Gereksinimin eşit dünya boyutu mu yoksa ekranda eşit belirginlik mi olduğuna karar verin: bunlar farklı hedeflerdir. Savaş kadrajı karakteri kasıtlı olarak büyütüyorsa, yakınlaştırmayı bir sunum tercihi olarak kaydedin ve bu görünümü temel sprite ölçeğini değerlendirmek için kullanmayın.

Piksel sanatı için hareketi de sabit bir kare kadar dikkatle inceleyin. Piksel altı (subpixel) konumlar veya tutarsız hizalama, karakter hareket ettikçe kenarların titremesine veya düzensiz görünmesine neden olabilir. Unity'nin Pixel Perfect Camera'sı, asset PPU'suna bağlı ızgara hizalaması (grid snapping) sunar; Godot, 2D tepe noktaları (vertices) ve dönüşümler için piksel hizalama ayarları sağlar.Unity: 2D Pixel Perfect Godot: Sprite2D Hizalama ve ölçeklendirme davranışı render kurulumuna bağlı olduğundan, projenin gerçek kamera ayarlarıyla test edin.

Bölüm 6

Varlıkları değiştirmeden önce kısa bir karşılaştırma kontrolü yapın

Mümkünse aynı karakter pozuyla yan yana bir karşılaştırma oluşturun. Sırasıyla şu kontrolleri uygulayın:

  1. Aynı referans noktalarını ve piksel sayma kuralını kullanarak görünür vücut yüksekliğini karşılaştırın.
  2. Ayakların taban çizgisini ve sprite'ın pivot veya kök konumunu karşılaştırın.
  3. PPU veya eşdeğer içe aktarma yoğunluğunu, nesne ölçeğini ve ebeveyn (parent) ölçeklerini doğrulayın.
  4. Kamera yakınlaştırmasını, referans çözünürlüğü, viewport ölçeklendirmesini ve ekran boyutunu eşleştirin.
  5. Bulanıklığı, düzensiz piksel yerleşimini veya kırpılmaları yakalamak için doğal boyutta ve hareket halindeyken inceleyin.
  6. Birkaç animasyon karesini, özellikle en kısa ve en uzun pozları tekrar kontrol edin.

Çizim ölçümleri eşleşiyor ancak karakter savaşta yine de daha büyük görünüyorsa, sprite'ı düzenlemeden önce kamera kadrajını ve çevreleyen nesneleri inceleyin. Kamera ve dönüşümler eşleşiyor ancak siluet yüksekliği farklıysa, çizimi veya kontrollü, sahneye özel bir ölçeği ayarlayın. Yükseklik eşleşirken ayaklar kayıyorsa pivotu, dolguyu veya sabitleme noktasını düzeltin. Bu sıra, bir hatayı diğeriyle telafi etmek yerine asıl nedeni belirlemeye yardımcı olur.

Bölüm 7

Gelecekteki sprite'lar için küçük bir ölçek referansı tutun

Ortak hedef yüksekliği, PPU veya eşdeğerini, referans çözünürlüğü, pivot kuralını ve hedeflenen kamera ayarlarını sprite varlıklarının yanında kaydedin. Aseprite'ın tuval araçları şeffaf kenarlıkları kırpabilir, ancak kırpma tuval sınırlarını değiştirir; bu nedenle pivotların, dilimlerin (slices) veya motor tarafındaki sabitleme noktalarının daha sonra da hizalı kaldığını kontrol edin.Aseprite: Canvas Size Kırpmayı, hızlı bir sahne kontrolü gerektiren bir varlık değişikliği olarak ele alın.

Güvenilir standart; kararlaştırılan görünür yükseklik hedefiyle eşleşen, ortak bir zemin sabitleyicisine sahip olan ve hedeflenen kamera ile filtreleme ayarları altında tutarlı şekilde render edilen bir karakterdir. Kamera vurgusundaki kasıtlı farklılıkları açık sunum tercihleri olarak koruyun. Bu kontroller kaydedildiğinde, daha sonraki açık dünya pozları ve savaş animasyonları aynı pratik referansla karşılaştırılabilir.

Bölüm 8

Kaynaklar

İlgili okumalar

Bu konuyu keşfetmeye devam et