Sprite bileşenleri

Sprite bileşeni (sprite component), ekranda gösterilen basit bir görüntü veya kare dizisi animasyonudur (flipbook animation).

Sprite bileşeni, grafikleri için bir atlas veya karo kaynağı (tile source) kullanabilir.

Sprite özellikleri

Id, Position ve Rotation özelliklerine ek olarak bileşene özgü şu özellikler bulunur:

Image

Gölgelendiricide (shader) tek bir örnekleyici (sampler) varsa bu alan Image olarak adlandırılır. Aksi halde her yuva, materyaldeki doku örnekleyicisinin adını alır. Her yuva, o doku örnekleyicisinde sprite bileşeni için kullanılacak atlas veya karo kaynağını belirtir.

Default Animation

Sprite bileşeninde kullanılacak animasyon. Animasyon bilgisi ilk atlastan veya karo kaynağından alınır.

Material

Sprite bileşenini işlemek (rendering) için kullanılacak materyal.

Blend Mode

Sprite bileşenini işlerken kullanılacak harmanlama modu (blend mode).

Size Mode

Automatic olarak ayarlanırsa düzenleyici sprite bileşeninin boyutunu ayarlar. Manual olarak ayarlanırsa boyutu kendiniz belirleyebilirsiniz.

Slice 9

Sprite bileşeni yeniden boyutlandırıldığında dokusunun kenarlarındaki piksel boyutunu korumak için ayarlayın.

Dokuz parçalı ölçekleme ile doku kaplama

GUI kutu düğümleri (box nodes) ve sprite bileşenleri (sprite components) bazen boyutları bağlama göre değişen öğeler içerir: içeriklerine uyacak şekilde yeniden boyutlandırılması gereken paneller ve iletişim kutuları ya da bir düşmanın kalan sağlığını gösterecek şekilde yeniden boyutlandırılması gereken bir sağlık çubuğu. Yeniden boyutlandırılan düğüme veya sprite bileşenine doku (texture) uyguladığınızda bu durum görsel sorunlara yol açabilir.

Motor normalde dokuyu dikdörtgen sınırlarına sığacak şekilde ölçekler, ancak dokuz parçalı ölçekleme (slice-9) için kenar alanları tanımlayarak dokunun hangi bölümlerinin ölçekleneceğini sınırlayabilirsiniz:

Slice9 kutu düğümü, normal biçimde ölçeklenmemesi gereken sol, üst, sağ ve alt kenar boşluklarının piksel sayısını belirten 4 sayıdan oluşur:

Kenar boşlukları, sol kenardan başlayarak saat yönünde ayarlanır:

• Köşe parçaları hiçbir zaman ölçeklenmez.
• Kenar parçaları tek bir eksen boyunca ölçeklenir. Sol ve sağ kenar parçaları dikey olarak ölçeklenir. Üst ve alt kenar parçaları yatay olarak ölçeklenir.
• Merkezdeki doku alanı gerektiği gibi yatay ve dikey olarak ölçeklenir.

Yukarıda açıklanan Slice9 doku ölçeklemesi yalnızca kutu düğümünün veya sprite bileşeninin boyutunu değiştirdiğinizde uygulanır:

Mipmapler ve dokuz parçalı ölçekleme

Grafik işleyicisinde (renderer) mipmap kullanımının çalışma biçimi nedeniyle, doku parçaları ölçeklenirken bazen görüntü kusurları oluşabilir. Bu durum, parçaları özgün doku boyutunun altına küçülttüğünüzde ortaya çıkar. İşleyici bu durumda parça için daha düşük çözünürlüklü bir mipmap seçer ve bu da görüntü kusurlarına neden olur.

Bu sorunu önlemek için dokunun ölçeklenecek parçalarının, hiçbir zaman küçültülmeyip yalnızca büyütülecek kadar küçük olduğundan emin olun.

Harmanlama modları

Blend Mode özelliği, bileşenin (component) grafiklerinin arkasındaki grafiklerle nasıl harmanlanacağını belirler. Kullanılabilir harmanlama modları (blend modes) ve hesaplanma biçimleri şunlardır:

Alpha

Normal harmanlama: src.a * src.rgb + (1 - src.a) * dst.rgb

Add

Bileşenin karşılık gelen piksellerinin renk değerleriyle arka planı aydınlatır: src.rgb + dst.rgb

Multiply

Bileşenin karşılık gelen piksellerinin değerleriyle arka planı koyulaştırır: src.rgb * dst.rgb

Screen

Multiply modunun tersidir. Arka planın ve bileşenin karşılık gelen piksellerinin parlaklığını artırır: src.rgb - dst.rgb * dst.rgb

Çalışma sırasında değiştirme

Sprite bileşenlerini çalışma sırasında çeşitli işlevler ve özellikler aracılığıyla değiştirebilirsiniz (kullanım için API belgelerine bakın). İşlevler:

• sprite.play_flipbook() - Sprite bileşeninde bir animasyon oynatır.
• sprite.set_hflip() ve sprite.set_vflip() - Sprite animasyonunun yatay ve dikey çevirme durumunu ayarlar.

Sprite bileşeninin ayrıca go.get() ve go.set() kullanılarak değiştirilebilen çeşitli özellikleri vardır:

cursor

Normalleştirilmiş animasyon imleci (number).

image

Sprite görüntüsü (hash). Bunu, bir atlas veya karo kaynağına başvuran kaynak özelliği ve go.set() kullanarak değiştirebilirsiniz. Bir örnek için API başvurusuna bakın.

material

Sprite materyali (hash). Bunu, bir materyal kaynak özelliği ve go.set() kullanarak değiştirebilirsiniz. Bir örnek için API başvurusuna bakın.

playback_rate

Animasyonun oynatma hızı (number).

scale

Sprite bileşeninin her eksende farklı olabilen ölçeği (vector3).

size

Sprite bileşeninin boyutu (vector3). Yalnızca sprite bileşeninin Size Mode özelliği Manual olarak ayarlanmışsa değiştirilebilir.

Materyal sabitleri

Varsayılan sprite materyalinde (material), go.set() veya go.animate() kullanarak değiştirebileceğiniz aşağıdaki sabitler bulunur (daha fazla ayrıntı için Materyal kılavuzuna bakın). Örnekler:

go.set("#sprite", "tint", vmath.vector4(1,0,0,1))
go.animate("#sprite", "tint", go.PLAYBACK_LOOP_PINGPONG, vmath.vector4(1,0,0,1), go.EASING_LINEAR, 2)

tint

Sprite bileşeninin renk çarpanı (tint) (vector4). vector4, renk çarpanını temsil etmek için kullanılır; x, y, z ve w sırasıyla kırmızı, yeşil, mavi ve alfa çarpanlarına karşılık gelir.

Materyal öznitelikleri

Sprite bileşeni, o anda atanmış materyalin köşe özniteliklerini (vertex attributes) geçersiz kılabilir; bu öznitelikler bileşenden köşe gölgelendiricisine iletilir (daha fazla bilgi için Materyal kılavuzuna bakın).

Materyalde belirtilen öznitelikler, özellik denetleyicisinde normal özellikler olarak görünür ve her sprite bileşeninde ayrı ayrı ayarlanabilir. Özniteliklerden herhangi biri geçersiz kılınırsa, geçersiz kılınmış bir özellik olarak görünür ve diskteki sprite dosyasında saklanır:

Proje yapılandırması

game.project dosyasında sprite bileşenleriyle ilgili birkaç proje ayarı bulunur.

Çok dokulu sprite bileşenleri

Bir sprite bileşeni birden fazla doku kullandığında dikkat edilmesi gereken bazı noktalar vardır.

Animasyonlar

Animasyon verileri (fps, kare adları) şu anda ilk dokudan alınır. Buna “belirleyici animasyon” (driving animation) diyeceğiz.

Belirleyici animasyonun görüntü tanımlayıcıları, başka bir dokudaki görüntüleri bulmak için kullanılır. Bu nedenle, kare tanımlayıcılarının dokular arasında eşleştiğinden emin olmak önemlidir.

Örneğin, diffuse.atlas dosyanızda şöyle bir run animasyonu varsa:

run:
    /main/images/hero_run_color_1.png
    /main/images/hero_run_color_2.png
    ...

Kare tanımlayıcıları run/hero_run_color_1 biçiminde olur; bu tanımlayıcının, örneğin şu normal.atlas dosyasında bulunması pek olası değildir:

run:
    /main/images/hero_run_normal_1.png
    /main/images/hero_run_normal_2.png
    ...

Bu nedenle, bunları yeniden adlandırmak için atlastaki Rename patterns alanını kullanırız. İlgili atlaslarda _color= ve _normal= değerlerini ayarladığınızda her iki atlasta da şu kare adlarını elde edersiniz:

run/hero_run_1
run/hero_run_2
...

UV koordinatları

UV koordinatları ilk dokudan alınır. Yalnızca bir köşe kümesi bulunduğundan, ikincil dokularda daha fazla UV koordinatı veya farklı bir şekil varsa zaten iyi bir eşleşme garanti edemeyiz.

Bu noktaya dikkat etmek önemlidir; görüntülerin yeterince benzer şekillere sahip olduğundan emin olun, aksi takdirde doku taşması (texture bleeding) yaşayabilirsiniz.

Her dokudaki görüntülerin boyutları farklı olabilir.