Oyun Tasarımı Destek Sitesi

GÜNCELLEME (29.10.2019): Dinamik fontların kullanımı açıklandı.

Merhabalar,

Bu Unity dersimizde, bir süre önce ücretsiz hale gelen TextMesh Pro plugin’ini yakından inceleyeceğiz. Unity’nin UI sistemindeki Text‘e alternatif olan bu plugin’i yakın zamanda Paint 360° uygulamamda kullanma şansım oldu ve ne yalan söyleyeyim, bundan böyle Text’e dönüş yapmayı planlamıyorum 😀 Kabaca TextMesh Pro’nun avantajlarını listeleyecek olursam:

• Kullandığı özel shader sayesinde yazıları blur’suz ve çok kaliteli bir şekilde ekrana çizdirmesi
• Daha kaliteli Outline ve Shadow kullanması
• Oldukça fazla rich text etiketi desteklemesi
• Yazı tek satıra sığmadığında yazıyı düzgün bir şekilde ikiye bölmesi; UI Text’in aksine kelimeleri gerekmedikçe ortadan ikiye ayırmaması
• Best Fit seçili bile olsa yazıyı daima tek satır olarak tutma seçeneği sunması

Hazırsanız dersimize başlayalım!

Kurulum

İlk iş TextMesh Pro’yu projenize import edin. Bunun tavsiye edilen yolu, Window-Package Manager‘ı açıp oradan TextMesh Pro paketini kurmak. Eğer sizin Unity sürümünüzde Package Manager yoksa, şuradaki linkler vasıtasıyla ilgili .unitypackage‘ı indirebilirsiniz: https://forum.unity.com/threads/useful-information-download-links.458634/

NOT: Eğer TextMesh Pro’yu Package Manager vasıtasıyla kurduysanız (veya sizin kurmanıza gerek kalmadan kendisi yüklü geldiyse), kullanıma başlamadan önce Window-TextMeshPro-Import TMP Essential Resources yolunu izleyin ve açılacak olan pencerede direkt Import deyin. Bu şekilde TextMesh Pro’nun çalışması için gerekli dosyalar projenize import edilecek. Dilerseniz, içerisinde örnek sahneleri barındıran Import TMP Examples and Extras‘ı da projenize import edebilirsiniz.

Eğer örnek sahneleri merak ediyorsanız TextMesh Pro/Examples & Extras/Scenes klasöründeki örnekleri inceleyebilir, sonra bakarım diyorsanız direkt yazımızı okumaya devam edebilirsiniz.

Kullanım

Sahnemizde bir TextMesh Pro objesi oluşturup onun üzerinden ilerleyelim. Bunun için GameObject-UI-TextMesh Pro – Text yolunu izleyin. Ardından yazının fontunu artırabildiğiniz kadar artırın. Yazı ne kadar büyürse büyüsün daima berrak bir şekilde ekrana çizildiğini göreceksiniz.

TextMesh Pro objemizin Inspector‘undaki değerleri inceleyecek olursak:

Text Mesh Pro UGUI Ayarları

Text Input Box: Tahmin edeceğiniz üzere, gözükmesini istediğimiz yazıyı buraya giriyoruz. Enable RTL Editor seçeneğinin Arapça gibi sağdan sola (right-to-left) dillerde bir yazı girmek için olduğunu okudum ama şahsen kullanmadım.

Font Asset: Yazının kullanacağı fontu seçmeye yarar. Göreceğiniz üzere, TextMesh Pro direkt projenizde yer alan font asset’lerini kullanmıyor ama kendisine has bir font asset türü kullanıyor. Bunun sebebi ise, TextMesh Pro’nun o fontu özel shader’ı ile berrak bir şekilde ekrana çizdirebilmek için ihtiyacı olan ekstra bilgiyi tutacak bir yere ihtiyaç duyması. Bu bilgi normal font asset’lerinde tutulmadığı için burada özel bir font asset’i kullanılıyor.

Material Preset: Yazının ekrana çizilmesi için kullanılan materyali belirler. Material Preset şu yüzden önemli: TextMesh Pro’da yazıya gölge veya outline eklemek işlemi materyal vasıtasıyla sağlanıyor. Bu yüzden bazı yazılarda gölge olsun ama bazılarında olmasın istiyorsanız, en azından iki Material Preset kullanmalısınız: birisi yazıyı gölgesiz çizdirmek, öbürü ise gölgeli çizdirmek için. Bir Material Preset’in değerleriyle oynadığınızda, o preset’i kullanan tüm yazılar bundan etkilenir; bu da aklınızda bulunsun.

Font Style: Buradaki butonlar sırayla yazının kalın, italik, altı çizili, üstü çizili, daima küçük harfli, daima büyük harfli ve büyük ama küçük harfli (anca deneyerek anlarsınız) olmasını sağlar. Yalnız daima küçük harfli, daima büyük harfli ve büyük ama küçük harfli modlarda Türkçe karakterler beklediğiniz gibi çevrilmeyebilir, bilginiz olsun.

Color (Vertex): Yazının rengini belirlemeye yarar.

Color Gradient: Yazının her bir köşesinin ayrı bir renkle renklendirilmesini sağlar. Soldan sağa ve yukarıdan aşağıya gittikçe bu renkler arasında yumuşak bir geçiş yapılır.

Override Tags: Eğer işaretlenirse, yazının rengini rich text ile değiştirmek mümkün olmayacaktır (rich text konusuna birazdan değineceğiz).

Font Size: Yazının font büyüklüğünü belirler.

Auto Fit: Unity’nin Best Fit‘i ile aynı işe yarar; yazının font büyüklüğünü, yazı RectTransform‘a sığacak şekilde otomatik olarak ayarlar. Min ve Max değerleri ile minimum ve maksimum font büyüklüğü sınırı konulabilir. WD%‘yi ne kadar artırırsanız, yazı daha büyük bir font ile çizilebilmek için kendini yatay eksende o kadar büzüştürebilir. Açıkçası bu şekilde büzüşen yazı çirkin gözüktüğü için ben 0’da bırakıyorum. Line değeri ise, birden çok satır olan yazıların satırlarının birbirleri içine geçmesi pahasına, daha büyük bir font ile yazının çizilebilmesini sağlar. Ben bunu da 0 olarak bırakıyorum.

Spacing Options: Yazıdaki karakterler (Char), kelimeler (Word), satırlar (Line) ve paragraflar (Par.) arasına daha fazla veya daha az boşluk koyabilmeye yarar.

Alignment: Yazının nasıl hizalanacağını belirler.

Wrapping & Overflow: Eğer wrapping Disabled olursa, RectTransform’un içine sığmayan satırlar ortadan ikiye ayrılmaz, tek satır olarak kalırlar. Overflow modu için ise bir takım seçenekler mevcut. Overflow seçili olursa, RectTransform’a sığmayan yazı aşağıya taşarken Ellipsis modunda yazının sığmayan kısmının yerine üç nokta “…” çizilir. Truncate modunda ise sığmayan yazı ekrana hiç çizilmez. Page modunda, sığmayan yazı parçalara (page) ayrılır ve page’in değerini değiştirerek bu parçalar arasında geçiş yapılabilir. Linked modu, sığmayan yazının belirlediğiniz başka bir TextMesh Pro objesinde çizilmesini sağlar. Masking seçeneğinin nasıl çalıştığını ise ben de bilmiyorum.

UV Mapping Options: Eğer Material Preset‘te, yazının üstüne texture çizilebilmesine olanak sağlayan bir shader kullanırsanız (mesela TextMeshPro/Distance Field), bu texture’un yazının üzerine nasıl giydirileceğini belirler. Ancak shader ne kadar karmaşık olursa, ekrana çizilmesi o kadar pahalı olacağı için, mobil cihazlarda olabildiğince basit shader’lar kullanmanızı öneririm (tercihen TextMeshPro/Mobile/Distance Field).

Enable Kerning: Kerning kavramı, fonttaki belli karakter çiftleri arasındaki boşluğun, normal boşluktan daha az veya daha fazla olmasını sağlayan bir şeydir. Bu bilgi font asset’inde tutulur. Bununla hiç işiniz olacağını düşünmüyorum, açık bırakın gitsin.

Extra Padding: Ben ne işe yaradığını hâlâ çözebilmiş değilim ama dokümantasyonda yazdığına göre, eğer yazı kesikli bir şekilde duruyorsa bunu açmayı deneyebilirsiniz.

Margins: Yazının kenarlarından bir miktar boşluk bırakmaya yarar.

Geometry Sorting: Örneğin Spacing Options‘da karakterler arasındaki boşluğu oldukça azaltır ve karakterlerin üst üste binmesini sağlarsanız, bu değer baştaki karakterin mi yoksa sondaki karakterin mi diğerinin üzerine çizileceğini belirler.

Enable Rich Text: Rich text’i açıp kapamaya yarar.

Raycast Target: Yazının raycast’leri tutup tutmayacağını belirler. Örneğin yazıya Button component’i vermeyi planlıyorsanız, bunun açık olduğundan emin olun.

Parse Escape Characters: Yazıda \n (yeni satır) veya \t (sekme) gibi özel karakterler varsa, bunların hesaba katılıp katılmayacağını belirler.

Use Visible Descender: Ne işe yaradığını görmek için Old Computer Terminal örnek sahnesini çalıştırıp bu seçeneğin değeriyle oynayın.

Sprite Asset: Yazının içinde sprite’lar gösterirken kullanılır (birazdan değineceğiz).

Materyal Ayarları

Materyalde yapacağınız bir değişiklik, o materyali (Material Preset) kullanan tüm yazılara uygulanacağı için, sadece bazı yazıların materyalinde değişiklik yapmak istiyorsanız, önce yeni bir Material Preset oluşturmanız uygun olur. Bunun için materyalin Shader yazısına sağ tıklayıp Create Material Preset seçeneğini seçin. Bu şekilde, otomatik olarak yeni bir materyal (preset) oluşacak ve bu materyal o yazıya atanacak.

Bazı materyal özelliklerini (mesela Underlay veya Outline) kullanabilmek için, önce o özelliğin sağında yer alan Enable kutucuğunu işaretlemeniz gerekir.

Face Color: Yazının Color (Vertex)‘i bu renk ile çarpılır.

Face Softness: Yazıyı daha blur’lu bir şekilde ekrana çizmeye yarar.

Face Dilate: Yazıyı kalınlaştırmaya veya inceltmeye yarar.

Outline Color: Yazının outline rengini belirler.

Outline Thickness: Outline kalınlığını belirler. Outline içeriye doğru olacağı için, bu değerle birlikte Face Dilate değerini de artırarak, yazının outline’a boğulmamasını sağlayabilirsiniz.

Underlay Type: Yazının gölgesinin nasıl çizileceğini belirler. Inner modda gölge, yazının içerisinde çizilir. Bu durumda gölgeyi görebilmek için materyalin Face Color‘ının alpha’sını düşürmeniz gerekir.

Underlay Color: Gölge rengini belirler.

Underlay Offset: Gölgenin yönünü belirler.

Underlay Dilate: Gölgenin kalınlığını belirler.

Underlay Softness: Gölgenin blur’lu bir şekilde ekrana çizilmesini sağlar.

Diğer TextMesh Pro shader’larının parametrelerini öğrenmek için, orijinal dokümantasyona bakabilirsiniz: http://digitalnativestudios.com/textmeshpro/docs/shaders/

Yazıyı Script’ten Değiştirmek

TextMesh Pro objelerine script’inizden erişebilmek için, script’in başına using TMPro; ibaresini eklemeniz yeterli. Artık Text Mesh Pro UGUI objelerinizi TextMeshProUGUI türündeki değişkenlerde tutup bu değişken vasıtasıyla yazının text, fontSize ve fontStyle gibi özelliklerini değiştirebilirsiniz. Örneğin:

using TMPro;
using UnityEngine;

public class TestScript : MonoBehaviour
{
	public TextMeshProUGUI yazi;

	private void Start()
	{
		yazi.text = "Merhaba Dünya!";
		yazi.fontSize = 36;
		yazi.fontStyle = FontStyles.Bold;
	}
}

Eğer yazıda bir int, float vb. değişkenin değerini gösterecekseniz, bunu belleği yormadan (allocation olmadan) nasıl yapabileceğinizi görmek için şu derse göz atabilirsiniz: https://yasirkula.com/2020/09/13/unity-cerez-ders-textmesh-pro-yazilarinda-sayi-gostermenin-efektif-yolu/

Yeni Font Asset Oluşturmak

TextMesh Pro’nun kullandığı font asset’leri statik texture’a sahiptirler, yani UI Text objesinin aksine, eğer yazılarınızda font asset’te var olmayan bir karakter kullanırsanız o karakter ekranda gözükmez. UI Text objelerinde ise font texture’ları dinamiktir ve texture’da olmayan bir karakter kullanılınca texture dinamik olarak yeniden oluşturulur. Bu işlem, tahmin edeceğiniz üzere, CPU harcar. TextMesh Pro fontlarının artısı, texture’u yeniden oluşturma gibi performans harcayıcı bir durumun söz konusu olmamasıdır; eksisi ise font texture’unda yer almayan bir karakteri yazılarınızda kullanamamanızdır. Bu yüzden öncelikle yazılarınızda hangi özel karakterleri kullanacağınızı çok iyi bilmeniz ve ona göre bir font asset oluşturmanız lazım.

NOT: TextMesh Pro’nun son sürümleriyle birlikte dinamik font desteği geldi. Bu özellik sayesinde, UI Text’te olduğu gibi, font asset’inde yer almayan karakterler font asset’ine dinamik olarak eklenebilmekte. Detayları yazının devamında göreceksiniz.

TextMesh Pro ile gelen font asset’leri, texture’larında Türkçe karakterleri barındırmamaktadırlar (son sürümle birlikte gelen LiberationSans font’u Türkçe karakterleri desteklemekte); bu yüzden büyük ihtimalle sizin de kendi font asset’lerinizi oluşturmanız gerekecektir. Örneğin internetten indirdiğimiz bir fontu kullanarak yeni bir font asset oluşturalım ve bu asset’in texture’unda Türkçe karakterlerin de olduğundan emin olalım. Ben şu adresten Ubuntu fontunu indirip içindeki Ubuntu-R.ttf dosyasını Unity’e attım: https://www.fontsquirrel.com/fonts/download/ubuntu

Şimdi Window-TextMeshPro-Font Asset Creator yolunu izleyin ve gelen pencereyi şu şekilde kurcalayın (ben sağdaki texture’un oluşması için Generate Font Atlas butonuna bastım):

Font Source: Hangi fontu kullanarak TextMesh Pro font asset’i oluşturacağımızı belirler.

Font Sizing: Değeri Auto Sizing olursa, texture’daki karakterlerin font büyüklüğü otomatik olarak belirlenir. Custom Size ile kendiniz de bir font büyüklüğü belirleyebilirsiniz ama bu durumda tüm karakterler texture’a sığmayabilir ve yazılarınızda o sığmayan karakterleri kullanamazsınız.

Font Padding: Karakterler arasındaki boşluğu belirler. Generate Font Atlas butonuna basıp texture oluşturduktan sonra, aşağıda Pt. Size kısmında fontun büyüklüğü yazar; TextMesh Pro’nun yapımcısı, padding değerinin font büyüklüğünün minimum yaklaşık %8-10’u kadar olmasını tavsiye ediyor. Ayrıca padding ne kadar çok olursa, yazılarınızın gölge ve outline’larını o kadar dışarıya taşırma imkanınız bulunuyor.

Packing Method: Texture oluştururken kullanılan algoritmanın kalitesini belirler. Fast algoritma daha hızlı çalışırken Optimum algoritma ise genelde karakterleri boş alana daha iyi yerleştirerek daha büyük bir font büyüklüğü sağlar. Font oluştururken deneme-yanılma aşamasında Fast ile çalışmanız, en sonunda ise Optimum ile texture’u oluşturmanız önerilir. Örneğin üstteki resimde Fast seçili ama biz fontu oluşturmadan önce onu Optimum’a çevireceğiz.

Atlas Resolution: Texture’un boyutunu belirler. Texture ne kadar büyük olursa o kadar çok karakteri bir araya sıkıştırabilir veya daha büyük font büyüklüğüne sahip texture’lar oluşturabilirsiniz. Burada çoğunlukla deneme-yanılma yapıp çeşitli parametrelerle oynayarak en uygun texture parametrelerini bulmanız gerekiyor. Daha az yer kaplaması açısından, texture boyutunu olabildiğince düşürmeye çalışın.

Character Set: Fontta hangi karakterlerin yer alacağını belirler. İşte fontun Türkçe karakterleri desteklemesini buradan sağlayacağız. ASCII, Extended ASCII, ASCII Lowercase (sadece küçük ASCII karakterleri), ASCII Uppercase (sadece büyük ASCII karakterleri) ve Numbers + Symbols (sadece rakamlar ve parantez, virgül gibi noktalama işaretleri) hazır karakter setleridir; bu seçenekleri seçerseniz, fontta kullanılacak karakterleri elle belirleyemezsiniz. Custom Range seçeneğinde, fontta olmasını istediğiniz karakterlerinin ondalık (decimal) değer aralıklarını girebilir, Unicode Range (Hex)‘te ise karakterlerin onaltılık (hexadecimal) değer aralıklarını girebilirsiniz. Bu seçeneklerden biri seçili iken Select Font Asset kısmına başka bir font asset’i değer olarak verirseniz, o asset’in karakter aralığı otomatik olarak kutucuğu doldurur. Siz de bu aralığın üzerine kolayca ekleme yapabilirsiniz. Custom Characters modunu seçerseniz de, direkt fontta olmasını istediğiniz karakterleri kutucuğa girebilirsiniz. Örneğin ben üstteki resimde bu modu seçtim ve TextMesh Pro ile gelen LiberationSans font asset’ini Select Font Asset’e atarak, Custom Character List kutucuğunu onun karakterleri ile doldurdum. Ardından bu kutucuktaki gereksiz bulduğum karakterleri silip en sona şu Türkçe karakterleri ekledim: şŞğĞüÜöÖçÇıİ. Son olarak, eğer Characters From File modunu seçerseniz, projenizde yer alan bir text asset’indeki karakterleri kullanarak font oluşturursunuz.

Render Mode: Font türünü belirler. SMOOTH_HINTED, SMOOTH, RASTER_HINTED ve RASTER seçenekleri bitmap font çeşitleri olurken, diğer seçenekler ise Distance Field font çeşitleridir. TextMesh Pro ile gelen LiberationSans font asset’i SDFAA_HINTED kullandığı için ben de onu kullanıyorum.

Get Kerning Pairs: Fonttan kerning bilgilerinin alınmasını sağlar. Bu sayede, Text mesh Pro UGUI component’indeki Enable Kerning seçeneği seçili ise, yazıya kerning uygulanır. Ben bunu olduğu gibi bıraktım.

Şimdi Generate Font Atlas diyerek font texture’unu oluşturabilirsiniz. İşlem bitince göreceğiniz üzere, fontumuzun büyüklüğü 68 punto. Font Padding‘imiz ise 5. Ben padding değerinin font büyüklüğünün %10’u olmasını istiyorum ve bu yüzden Padding’i 6 yapıp tekrar texture oluşturmayı deniyorum. Bu sefer font 64 punto oldu. Bence güzel. Son olarak Packing Method‘u Optimum yapıp tekrar texture oluşturuyorum ve bu sayede 2 punto daha kazanıyorum.

Artık texture’u font asset olarak kaydetmeye hazırız! Tek yapmamız gereken, Save butonuna tıklayıp asset’e bir isim vermek. Asset’i kaydettikten hemen sonra, Project panelinden asset’in yanındaki oka tıplayıp asset’in varsayılan materyalini seçmenizi ve Inspector‘dan materyalin shader’ını TextMeshPro/Mobile/Distance Field yapmanızı öneririm; çünkü varsayılan olarak seçili olan shader’ı çizmek, bu shader’a göre biraz daha pahalı.

Artık bunca uğraşın meyvesini almaya hazırız! Aşağıdaki resimde iki TextMesh Pro objesi bulunmakta: biri hazır bir font asset kullanırken öbürü yeni oluşturduğumuz font asset’i kullanmakta:

Dinamik Fontlar

TextMesh Pro’ya yeni gelen özelliklerden birisi dinamik fontlar. Bu fontların font atlas texture’u, yeni karakterler geldikçe otomatik olarak yeniden oluşturulmakta. Yani atlas’a dahil etmediğiniz bir harfi ekrana çizmek istediğinizde, font texture’u yeni harfi de kapsayacak şekilde dinamik olarak güncellendiği için, artık harf yerine beyaz bir kare görmüyorsunuz (yukarıdaki resimdeki gibi).

Burada önerilen yöntem; tek bir dinamik font oluşturmak yerine bir statik bir de dinamik font oluşturup dinamik font’u static font’a fallback olarak eklemek. Böylece ekrana çizdirmek istediğimiz harfler önce static font’ta aranacak, eğer orada bulunmazlarsa dinamik font’a eklenecekler. Karşılaşacağımız harflerin çoğu halihazırda static font’ta var olduğu için de dinamik fontu sürekli güncellemenin yaşatabileceği performans sıkıntılarıyla karşılaşmayacağız.

Bir önceki bölümde Ubuntu-R font’u ile static bir font asset’i oluşturmuştuk. Şimdi de bu font’un dinamik bir versiyonunu oluşturup onu asıl font asset’imize fallback olarak verelim:

• Unity’e en başta import ettiğiniz Ubuntu-R.ttf font’una sağ tıklayıp Create-TextMeshPro-Font Asset yolunu izleyin. Bu, otomatik olarak Ubuntu-R.ttf’den türeyen bir font asset oluşturacak
• Oluşturulan font asset’i seçin ve Inspector’dan Atlas Population Mode‘unun Dynamic olduğundan emin olun
• Eğer Source Font File‘ın değeri None ise, oraya Ubuntu-R.ttf‘yi sürükle-bırak yapın:

• Son olarak da, ana font asset’inizi seçip Inspector’daki Fallback Font Assets listesine, yeni oluşturduğunuz Dynamic font asset’i ekleyin:

• Bitti! Artık ana font asset’imizde bulunmayan bir karakteri ekrana çizmek istediğimizde, karakter Ubuntu-R.ttf’den çekilerek dinamik font asset’ine otomatik olarak eklenecek. Bunu gözlemlemek için statik font asset’ini bir TextMesh Pro UGUI objesine font olarak verip ardından Ω gibi bir karakteri ekranda çizdirmeyi deneyin. Bu karakter statik font’a dahil olmadığı halde ekranda çizdirilecek. Şimdi dinamik font asset’inin solundaki oka tıklayıp asset’in Atlas texture’unu seçer ve texture’un önizlemesine bakarsanız, ekrana çizdirdiğimiz Ω karakterinin o texture’a eklendiğini göreceksiniz

TextMesh Pro ile İkon Fontları Kullanmak

Belki duymuşsunuzdur, web aleminde Font Awesome veya Material Design Icons gibi ikon fontları oldukça popüler. Peki bu fontları TextMesh Pro ile de kullanabileceğinizi biliyor muydunuz?

Bu fontları kullanmanın avantajı, ikonları her çözünürlükte çok net bir şekilde ekrana çizdirebilmeniz. Bu şekilde hem ikonlarınız blur’lu olmuyor, hem de ikonlar için ekstra texture’lar kullanmak zorunda kalmıyorsunuz. Ben Paint 360° uygulamamda TextMesh Pro ile Material Design Icons kullandım ve sonuçtan oldukça memnun kaldım. Bu yüzden burada da basit bir örnekle bu konunun üzerinden geçeceğim.

Örneğin Material Design Icons fontunu TextMesh Pro ile kullanmak istiyorsunuz diyelim. Bunun için öncelikle bu fontun ttf dosyasını indirip Unity’e atın. Ardından fontun web sitesinden bir ikon beğenin. Örneğin ben pratik olması açısından baştaki 3d_rotation ve accessibility ikonlarını seçtim. Ardından bu ikonların onaltılık (hexadecimal) unicode kodlarını bulun. Listeye baktığımda, 3d_rotation’ın e84d ve accessibility’nin e84e koduna sahip olduğunu gördüm. Artık font asset’imizi oluşturabiliriz:

Gördüğünüz üzere, sadece iki karakter kullandığımız için Atlas Resolution‘ı oldukça düşürdüm ve Character Set olarak Unicode Range (Hex)‘i seçip kutucuğa ikonların kodlarını yazdım.

Artık bu font asset’i kullanan yazılarımızda, ikonları şu şekilde gösterebiliriz: \U0000e84d. Bu format, unicode bir karakteri göstermek için kullanılır. Önce \U, ardındansa ikonun kodunu yazıyoruz. Son olarak da, ikonun kodu 8 hane olacak şekilde, \U ile kod arasına 0’lar yerleştiriyoruz.

Eğer bu ikonları yazılarınızın ortasına yerleştirmek istiyor ve Text Mesh Pro UGUI component’inizin Font Asset‘ini MaterialIcons yapmak istemiyorsanız, şöyle bir alternatifiniz bulunuyor: TextMesh Pro/Resources/TMP Settings asset’ini seçin ve Inspector’dan Fallback Font Asset List‘e MaterialIcons font asset’ini ekleyin. Artık herhangi bir font kullanırken yazıya istediğiniz ikon(lar)ı serpiştirebilirsiniz:

NOT: Bahsetmezsem haksızlık olur; accessibility ikonunun yazıya düzgün oturması için, MaterialIcons font asset’inde ufak bir ayar yapmam gerekti: Glyph Table‘dan E84E ikonunu seçip OY‘sini 47.5 yaparak ikonu biraz aşağıya indirdim.

Rich Text

Rich text etiketleri, yazının belli bir bölümünün farklı bir şekilde çizilmesini sağlar. Bu etiketlerin çalışabilmesi için, Text Mesh Pro UGUI component’inin Enable Rich Text‘i seçili olmalıdır. Başlıca rich text etiketlerinden bahsedecek olursak:

<b></b>: (İçine girilen) yazıyı kalın yapar.

<i></i>: Yazıyı italik yapar.

<u></u>: Yazının altını çizer.

<s></s>: Yazının üstünü çizer.

<color=#FFFFFF></color>: Yazının rengini değiştirir. İstediğiniz bir rengin hex kodunu internetten bulabilirsiniz.

<alpha=#FF></alpha>: Yazının saydamlığını (alpha) değiştirir. Buraya onaltılık bir değer girmelisiniz (dilerseniz onluk sayıyı onaltılık sayıya çeviren online sitelerden faydalanabilirsiniz).

<align=”left|center|right”></align>: Yazıyı sola, ortaya veya sağa hizalar.

<size=75%></size>: Yazının font büyüklüğünü, normal font büyüklüğünün %75’i yapar.

<size=32></size>: Yazının font büyüklüğünü 32 punto yapar.

<size=-10></size>: Yazının font büyüklüğünü, normal font büyüklüğünün 10 punto eksiği yapar.

<font=”Anton SDF”></font>: Yazının bu kısmının Anton SDF fontunu kullanmasını sağlar. Buraya girilen fontlar Resources/Fonts & Materials klasörü içinde olmak zorundadır.

<indent=15%></indent>: Yazının soldan %15 içeri girintili olmasını sağlar.

<margin-left=15%></margin-left>: Yazının solunda %15 boşluk bırakır.

<margin-right=100></margin-right>: Yazının sağında 100 piksel boşluk bırakır.

<mark=#FFFF00AA></mark>: Yazıyı sarı renkle vurgular.

: Yazıyı üst olarak yazar (örneğin m²‘nin 2’sini yazmak için kullanılabilir).

: Yazıyı alt olarak yazar (örneğin H₂O’nun 2’sini yazmak için kullanılabilir).

<sprite=0>: Yazıya sprite eklemeye yarar (birazdan sprite’lara ayrıca değineceğiz). Bu etiketi kapatmanıza gerek yoktur.

Rich text etiketlerinin tam listesine şuradan erişebilirsiniz: http://digitalnativestudios.com/textmeshpro/docs/rich-text/

Yazıda Sprite Kullanmak

Rich Text bölümünde de kabaca gördüğünüz üzere, yazılarınızda <sprite> etiketi kullanarak yazıya sprite ekleyebilirsiniz. TextMesh Pro, sprite’ları tutmak için özel bir asset türü kullanır. Yazınızın hangi sprite asset’ini kullanacağını, Text Mesh Pro UGUI component’inin Sprite Asset değişkeni vasıtasıyla belirleyebilirsiniz. Eğer burayı boş bırakırsanız, TextMesh Pro/Resources/TMP Settings asset’indeki Default Sprite Asset kullanılır.

Sprite asset’teki bir sprite’ı yazınızda göstermek için, sprite’ın index’ini veya ismini kullanabilirsiniz:

<sprite=0>: 0. index’teki sprite’ı gösterir.

<sprite name=”1f60a”>: İsmi “1f60a” olan sprite’ı gösterir.

Sprite’lara renk vermek isterseniz:

<sprite=0 tint=1>: 0. index’teki sprite’ı, yazının Color (Vertex)‘i renginde gösterir.

<sprite=0 color=#00FF00>: 0. index’teki sprite’ı yeşil renkte gösterir.

Dilerseniz yazılarınızda başka bir sprite asset’indeki bir sprite’ı da gösterebilirsiniz:

<sprite=”DropCap Numbers” index=2>: DropCap Numbers sprite asset’inin 2. index’indeki sprite’ı gösterir.

<sprite=”DropCap Numbers” name=”03A5″>: DropCap Numbers sprite asset’indeki “03A5” isimli sprite’ı gösterir.

Yalnız bu şekilde kullanmak istediğiniz sprite asset’leri, projenizin Resources/Sprite Assets klasörü içerisinde olmak zorundadır.

Peki kendi sprite asset’lerinizi oluşturmak isterseniz ne yapacaksınız? Öncelikle tüm sprite’ları tek bir texture’da birleştirip o texture’un Import Settings’inden Texture Type‘ını Sprite (2D and UI) ve Sprite Mode‘unu Multiple yapmalısınız. Ardından Sprite Editor vasıtasıyla sprite’ları ayrıştırmalısınız. Artık bu texture asset’ine Project panelinden sağ tıklayıp Create-TextMeshPro-Sprite Asset yolunu izleyerek otomatik olarak bu texture’dan sprite asset oluşturabilirsiniz. Yalnız işlem bitti diye texture’u silmeye kalkmayın; sprite asset’i kullanacağınız müddetçe bu texture’a da ihtiyacınız olacak.

Ve böylece bu uzunca dersin sonuna geldik. Umarım faydalı olur. Sonraki derslerde görüşmek üzere, esen kalın!