{"id":3263,"date":"2026-09-21T19:11:50","date_gmt":"2026-09-21T19:11:50","guid":{"rendered":"https:\/\/yazilimperver.net\/?p=3263"},"modified":"2026-09-21T19:11:50","modified_gmt":"2026-09-21T19:11:50","slug":"sdl-painter-metin-cizimi-faz-4","status":"publish","type":"post","link":"https:\/\/yazilimperver.net\/index.php\/2026\/09\/21\/sdl-painter-metin-cizimi-faz-4\/","title":{"rendered":"sdl-painter \u2013 Metin \u00c7izimi (faz-4)"},"content":{"rendered":"

Sevgili yaz\u0131l\u0131mperver dostlar\u0131m, tekrar merhaba.<\/p>\n

\u00d6nceki yaz\u0131mda<\/a><\/strong><\/span>, resimleri dosyadan okuyup GPU’ya aktard\u0131k ve ekrana \u00e7izdik. Bu yaz\u0131da ise s\u0131ra metinlerde. Oyun ekran\u0131ndaki puan, bir d\u00fc\u011fmenin \u00fczerindeki yaz\u0131 ya da uygulaman\u0131n durum bilgisi derken, metin \u00e7izimi de k\u0131sa s\u00fcrede ihtiya\u00e7 duydu\u011fumuz, bununla birlikte OpenGL ile geli\u015ftirmesi nispeten me\u015fakkatli kabiliyetlerden birisi oluyor. uEngine4’te (https:\/\/github.com\/yazilimperver\/uEngine4\/blob\/main\/code\/gl\/gl_painter\/gl_font.cpp<\/a><\/strong>), freetype kullan\u0131yorduk.<\/p>\n

Asl\u0131nda resim \u00e7izimi i\u00e7in haz\u0131rlad\u0131\u011f\u0131m\u0131z altyap\u0131 burada da i\u015fimize yar\u0131yor olacak. Fonttan elde etti\u011fimiz karakter g\u00f6r\u00fcnt\u00fclerini bir dokuya yerle\u015ftirip ekrana \u00e7iziyoruz. \u0130\u015fin farkl\u0131 taraf\u0131, bu g\u00f6r\u00fcnt\u00fclerin yan yana nas\u0131l dizilece\u011fi ve sat\u0131rlar\u0131n nas\u0131l hizalanaca\u011f\u0131. Gelin \u00f6nce font y\u00fckleme taraf\u0131ndan ba\u015flayal\u0131m.<\/p>\n

SDL_ttf ve Font S\u0131n\u0131f\u0131<\/strong><\/span><\/h2>\n

Font dosyas\u0131n\u0131 okumak ve karakterleri piksel g\u00f6r\u00fcnt\u00fcs\u00fcne d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in SDL_ttf kullan\u0131yoruz. \u00c7izimi ise yine kendi\u00a0IRenderer<\/code>\u00a0altyap\u0131m\u0131z \u00fczerinden yap\u0131yoruz.<\/p>\n

K\u00fct\u00fcphanede bu i\u015fi\u00a0Font<\/code> s\u0131n\u0131f\u0131yla yap\u0131yor olaca\u011f\u0131z. Bir font y\u00fcklemek i\u00e7in dosya yolunu ve punto boyutunu vermeniz yeterli:<\/p>\n

using namespace sdl_painter;\r\n\r\nauto font = std::make_shared<Font>(\"assets\/DejaVuSans.ttf\", 24);\r\nif (!font->IsValid()) {\r\n  \/\/ Font y\u00fcklenemedi\r\n}\r\n<\/pre>\n
Buradaki dosya yolunu \u00f6rnek olarak ekledim; uygulamalar\u0131n\u0131zda, herhangi bir fontu kullanabilirsiniz. Farkl\u0131 punto boyutlar\u0131 i\u00e7in de ayr\u0131\u00a0Font<\/code>\u00a0nesneleri olu\u015fturuyoruz.<\/p>\n
\u0130\u00e7eride\u00a0TTF_OpenFont<\/code>\u00a0ile a\u00e7\u0131lan kaynak,\u00a0Font<\/code> yok edilirken kapat\u0131l\u0131yor. SDL_ttf’nin ba\u015flat\u0131lmas\u0131 ve kapat\u0131lmas\u0131 da referans sayac\u0131yla y\u00f6netiliyor. Dolay\u0131s\u0131yla birden fazla font kulland\u0131\u011f\u0131m\u0131zda her biri i\u00e7in ayr\u0131 bir ba\u015flatma i\u015flemi yapmam\u0131za gerek kalm\u0131yor.<\/p>\n
Font haz\u0131r oldu\u011funda\u00a0SetFont<\/code>\u00a0ile bunu se\u00e7meniz gerekiyor. Ge\u00e7erli bir\u00a0Painter<\/code>\u00a0ve ba\u015far\u0131yla y\u00fcklenmi\u015f bir font i\u00e7in ilk \u00e7izim \u00f6rne\u011fi:<\/p>\n
painter.SetFont(font);\r\npainter.Begin();\r\n  painter.SetPen(Pen(Color{240, 240, 240, 255}, 1.0F));\r\n  painter.DrawText(40.0F, 80.0F, \"Merhaba yaz\u0131l\u0131mperver!\");\r\npainter.End();\r\n<\/pre>\n
Metnin rengini\u00a0Pen<\/code>\u00a0belirliyor. \u015eekillerdeki dolgu rengi i\u00e7in kulland\u0131\u011f\u0131m\u0131z\u00a0Brush<\/code>‘\u0131 ise burada kullanm\u0131yoruz.<\/p>\n
Resimlerde oldu\u011fu gibi burada da kaynaklar\u0131n ya\u015fam s\u00fcresine dikkat etmemiz gerekiyor. Fontun olu\u015fturdu\u011fu GPU dokular\u0131, onlar\u0131 y\u00fckleyen\u00a0Painter<\/code>\u00a0kapanmadan b\u0131rak\u0131lmal\u0131. \u0130\u015fimiz tamamen bitti\u011finde, son\u00a0End()<\/code>\u00a0\u00e7a\u011fr\u0131s\u0131ndan sonra\u00a0painter.SetFont(nullptr)<\/code>\u00a0ve ard\u0131ndan\u00a0font.reset()<\/code>\u00a0ile iki referans\u0131 da b\u0131rakabiliriz; varsa di\u011fer font referanslar\u0131n\u0131 da ayn\u0131 s\u00fcre i\u00e7inde b\u0131rakmal\u0131y\u0131z. G\u00fcncel uygulamada bir\u00a0Font<\/code>\u00a0ilk kullan\u0131ld\u0131\u011f\u0131 renderer’a ba\u011fland\u0131\u011f\u0131 i\u00e7in, birden fazla\u00a0Painter<\/code>\u00a0kullan\u0131yorsan\u0131z her biri i\u00e7in ayr\u0131 font olu\u015fturman\u0131z gerekiyor.<\/p>\n
Karakter G\u00f6r\u00fcnt\u00fcleri ve Glyph Atlas\u0131<\/strong><\/span><\/h2>\n
Font i\u00e7indeki bir harfin veya sembol\u00fcn \u00e7izimde kullan\u0131lan bi\u00e7imine\u00a0glyph<\/em>\u00a0diyoruz (metin g\u00f6rselle\u015ftirmede glyp bilindik bir kavram detaylar i\u00e7in\u00a0https:\/\/en.wikipedia.org\/wiki\/Glyph<\/strong><\/a>).\u00a0Font::GetGlyph<\/code>, istenen karakter daha \u00f6nce haz\u0131rlanm\u0131\u015fsa onu \u00f6nbellekten d\u00f6n\u00fcyor, ilk kez \u00e7a\u011fr\u0131l\u0131yorsa SDL_ttf ile g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc olu\u015fturup atlasa ekliyor.<\/p>\n
Buradaki atlas, birden fazla karakter g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc ayn\u0131 doku \u00fczerinde toplad\u0131\u011f\u0131m\u0131z alan. \u00d6nceki yaz\u0131da bahsetti\u011fimiz, bir dokunun belirli b\u00f6lgesini UV koordinatlar\u0131yla \u00e7izme yakla\u015f\u0131m\u0131n\u0131n ayn\u0131s\u0131n\u0131 burada da uyguluyoruz.\u00a0Glyph<\/code>\u00a0yap\u0131s\u0131ndaki ilgili alanlar ise \u015f\u00f6yle:<\/p>\n
TextureHandle texture{kInvalidTexture};  \/\/ Atlas sayfas\u0131\r\nfloat u0{0.0F}, v0{0.0F}, u1{0.0F}, v1{0.0F};\r\nint32_t width{0}, height{0};\r\nint32_t advance{0};\r\nint32_t bearing_x{0}, bearing_y{0};<\/pre>\n
width<\/code>\u00a0ve\u00a0height<\/code>\u00a0karakterin boyutlar\u0131n\u0131, UV’ler ise atlas i\u00e7indeki yerini veriyor.\u00a0advance<\/code>, bu karakterden sonra yatayda ne kadar ilerleyece\u011fimizi belirtiyor. Bu de\u011fer g\u00f6r\u00fcnt\u00fc geni\u015fli\u011fiyle ayn\u0131 olmak zorunda de\u011fil; harfler aras\u0131ndaki yerle\u015fimde bu kullan\u0131l\u0131yor.\u00a0bearing_x<\/code>\u00a0ve\u00a0bearing_y<\/code>\u00a0de karakteri hedef \u00e7izim konumuna yerle\u015ftirirken kullan\u0131lan ofsetler.<\/p>\n
Peki neden her karakter i\u00e7in ayr\u0131 bir doku olu\u015fturmuyoruz? \u00c7\u00fcnk\u00fc her doku de\u011fi\u015fimi, \u00e7izimleri bir araya getiren\u00a0RenderBatcher<\/code>\u00a0i\u00e7in yeni bir \u00e7izim \u00e7a\u011fr\u0131s\u0131 anlam\u0131na gelebiliyor. Ortak atlas sayesinde ayn\u0131 sayfadaki karakterleri, \u00e7izim durumu ve batch kapasitesi elverdi\u011finde tek \u00e7a\u011fr\u0131da \u00e7izebiliyoruz.<\/p>\n
G\u00fcncel atlas, 512 \u00d7 512 piksellik RGBA sayfalardan olu\u015fuyor. Karakterler soldan sa\u011fa yerle\u015ftiriliyor; sat\u0131r dolunca bir alt sat\u0131ra, sayfa dolunca yeni sayfaya ge\u00e7iliyor. Filtreleme s\u0131ras\u0131nda kom\u015fu karakterlerin birbirine kar\u0131\u015fmamas\u0131 i\u00e7in aralar\u0131nda bir piksellik pay b\u0131rak\u0131yoruz. Yerle\u015ftirdi\u011fimiz karakterlerin konumunu sonradan de\u011fi\u015ftirmiyoruz; b\u00f6ylece \u00e7izim kuyru\u011fundaki UV koordinatlar\u0131 ge\u00e7erlili\u011fini koruyor.<\/p>\n
Karakter g\u00f6r\u00fcnt\u00fcs\u00fc beyaz haz\u0131rlan\u0131yor, as\u0131l renk \u00e7izim s\u0131ras\u0131nda\u00a0Pen<\/code> renginden geliyor. Bu sayede ayn\u0131 fontu farkl\u0131 renklerde kullanmak i\u00e7in g\u00f6r\u00fcnt\u00fcleri yeniden \u00fcretmiyoruz. Renk k\u00f6\u015fe verisinde ta\u015f\u0131nd\u0131\u011f\u0131 i\u00e7in, yaln\u0131zca metin renginin de\u011fi\u015fmesi de batch’i b\u00f6lm\u00fcyor. A\u015fa\u011f\u0131daki fig\u00fcrde bu hususa y\u00f6nelik anlatt\u0131klar\u0131m\u0131 bulabilirsiniz.<\/p>\n
\"\"<\/p>\n
Karakter g\u00f6r\u00fcnt\u00fcs\u00fc atlasta bir kez haz\u0131rlan\u0131r; ayn\u0131 UV b\u00f6lgesi farkl\u0131 kalem renkleriyle yeniden kullan\u0131l\u0131r.<\/em><\/p>\n
DrawText ve Taban \u00c7izgisi<\/strong><\/span><\/h2>\n
DrawText(x, y, text)<\/code> API’sinde dikkat etmeniz gereken bir ayr\u0131nt\u0131 var: y<\/code>, metnin \u00fcst kenar\u0131n\u0131 de\u011fil,\u00a0baseline<\/em>\u00a0dedi\u011fimiz taban \u00e7izgisini belirtiyor. Harflerin yerle\u015fimini bu \u00e7izgiye g\u00f6re yap\u0131yoruz; \u00f6rne\u011fin \u201cg\u201d ve \u201cp\u201d gibi harflerin bir b\u00f6l\u00fcm\u00fc \u00e7izginin alt\u0131na uzan\u0131yor.<\/p>\n
Metni \u00fcstten belirli bir konuma yerle\u015ftirmek istedi\u011fimizde fontun\u00a0Ascent()<\/code>\u00a0de\u011ferini ekleyebiliriz:<\/p>\n
const float top = 40.0F;\r\npainter.DrawText(20.0F, top + static_cast<float>(font->Ascent()),\r\n                 \"\u00dcstten hizalanan metin\");\r\n<\/pre>\n
\u0130\u00e7eride her karakter i\u00e7in atlas\u0131n ilgili b\u00f6lgesini ta\u015f\u0131yan iki \u00fc\u00e7gen \u00fcretiyoruz. Karakteri \u00e7izdikten sonra\u00a0advance<\/code>\u00a0kadar sa\u011fa ilerliyoruz. Sat\u0131r sonu (\\n<\/code>) varsa bir sonraki sat\u0131ra ge\u00e7iliyor; sat\u0131rlar aras\u0131ndaki mesafeyi de\u00a0Font::LineHeight()<\/code>\u00a0belirliyor. Punto boyutuyla sat\u0131r y\u00fcksekli\u011fi ayn\u0131 \u00f6l\u00e7\u00fc de\u011fil, bu nedenle sat\u0131r aral\u0131\u011f\u0131n\u0131 do\u011frudan\u00a0PointSize()<\/code>\u00a0\u00fczerinden hesaplam\u0131yoruz. A\u015fa\u011f\u0131daki resimde, ilgili karakterlerin \u00e7iziminde kulland\u0131\u011f\u0131m\u0131z de\u011fi\u015fken ve API’lerin kullan\u0131m\u0131n\u0131 g\u00f6rebilirsiniz.<\/p>\n
\"\"<\/p>\n
y taban \u00e7izgisini belirtir; \u00fcst kenardan yerle\u015ftirmek i\u00e7in Ascent() eklenir. advance ise sonraki karakterin ba\u015flang\u0131c\u0131na kadar olan yatay mesafedir.<\/em><\/p>\n
T\u00fcrk\u00e7e Karakterler ve UTF-8<\/strong><\/span><\/h3>\n
K\u00fct\u00fcphanenin bir di\u011fer \u00f6nemli \u00f6zelli\u011fi de UTF-8 deste\u011fi. Malum, e\u011fer T\u00fcrk\u00e7e karakterleri g\u00f6rselle\u015ftireceksek, metinlerin UTF-8 olarak gelebilir.\u00a0std::string<\/code>\u00a0bu anlamda bir kabiliyet i\u00e7ermiyor; yaln\u0131zca karakterleri tutuyor. T\u00fcrk\u00e7e karakterler birden fazla byte i\u00e7erebildi\u011fi i\u00e7in metni tek tek\u00a0char<\/code>\u00a0de\u011ferleri \u00fczerinden \u00e7izmemiz yeterli olmuyor.<\/p>\n
Bunun i\u00e7in,\u00a0src\/text_utf8.h<\/code>\u00a0i\u00e7indeki\u00a0DecodeUTF8<\/code>\u00a0API’sini kullan\u0131yoruz. Bu API, bytelar\u0131 unicode kod noktalar\u0131na \u00e7eviriyor. Ard\u0131ndan ilgili glyph’i fonttan \u00e7ekiyoruz. Burada, ge\u00e7ersiz bir diziyle kar\u015f\u0131la\u015f\u0131rsak,\u00a0U+FFFD<\/code>\u00a0yerine koyma karakterini d\u00f6nd\u00fcr\u00fcp bir byte ilerliyor. T\u00fcrk\u00e7e metnin do\u011fru g\u00f6r\u00fcnmesi i\u00e7in se\u00e7ti\u011fimiz fontun da ilgili karakterleri i\u00e7ermesi gerekiyor tabi.<\/p>\n
Dikd\u00f6rtgen \u0130\u00e7inde Hizalama ve Sat\u0131r Sarmalama<\/span><\/strong><\/h2>\n
Bir d\u00fc\u011fmenin veya bilgi kutusunun yaz\u0131s\u0131n\u0131 \u00e7izerken her seferinde konum hesaplamak istemeyiz \ud83d\ude42 Bunun i\u00e7in\u00a0DrawText<\/code>\u00a0\u00e7a\u011fr\u0131s\u0131n\u0131n dikd\u00f6rtgen alan API’si de var:<\/p>\n
painter.DrawText(Rect{40.0F, 120.0F, 300.0F, 60.0F},\r\n                 \"Oyuna ba\u015fla\", Alignment::kCenter);<\/pre>\n
Metinler her zaman dikey olarak ortalan\u0131yor. Yatayda ise\u00a0kLeft<\/code>,\u00a0kCenter<\/code>\u00a0veya\u00a0kRight<\/code>\u00a0se\u00e7ebiliyoruz. Buradaki dikd\u00f6rtgen, metni resimlerdeki gibi \u00f6l\u00e7eklemiyor; sadece yerle\u015fim i\u00e7in kullan\u0131l\u0131yor.<\/p>\n
Uzun bir metnin alt sat\u0131ra ge\u00e7mesini istiyorsalk\u00a0TextWrap::kWord<\/code>\u00a0vermeniz gerekiyor:<\/p>\n
painter.DrawText(Rect{40.0F, 200.0F, 300.0F, 120.0F},\r\n                 \"Uzun a\u00e7\u0131klamalar\u0131 kutunun geni\u015fli\u011fine g\u00f6re \"\r\n                 \"birden fazla sat\u0131ra yerle\u015ftirebiliriz.\",\r\n                 Alignment::kLeft, TextWrap::kWord);\r\n<\/pre>\n
Her bir sat\u0131r, kelime s\u0131n\u0131rlar\u0131ndan b\u00f6l\u00fcn\u00fcyor. Tek bir kelime alana s\u0131\u011fm\u0131yorsa UTF-8 karakter s\u0131n\u0131rlar\u0131ndan b\u00f6l\u00fcnerek devam ediliyor. Varsay\u0131lan\u00a0kNone<\/code>\u00a0se\u00e7ene\u011finde ise otomatik sarmalama yap\u0131lm\u0131yor, yani b\u00f6lme yok ve metin d\u0131\u015far\u0131 ta\u015fabilir.<\/p>\n
Kutunun y\u00fcksekli\u011fini metne g\u00f6re ayarlamak i\u00e7in\u00a0CountTextLines(text, width, TextWrap::kWord)<\/code>\u00a0ile sat\u0131r say\u0131s\u0131n\u0131 al\u0131p\u00a0font->LineHeight()<\/code>\u00a0ile \u00e7arpabiliriz. Bu hesaplamada da \u00f6nce kullan\u0131lacak fontu\u00a0SetFont<\/code>\u00a0ile se\u00e7memiz \u00f6nemli.<\/p>\n
MeasureText<\/code>\u00a0\u00f6l\u00e7\u00fcm s\u0131ras\u0131nda harf \u00e7iftleri aras\u0131ndaki aral\u0131k d\u00fczenlemesini (kerning<\/em>) hesaba kat\u0131yor, \u00e7izim ise glyph’lerin\u00a0advance<\/code>\u00a0de\u011ferlerini topluyor. Bu nedenle baz\u0131 metinlerde \u00f6l\u00e7\u00fclen geni\u015flik ile \u00e7izilen geni\u015flik, hizalama ve sarmalamada ufak farkl\u0131l\u0131klar olabilir, \u015fu an i\u00e7in a\u00e7\u0131k\u00e7as\u0131 \u00e7ok b\u00fcy\u00fck bir problem olmad\u0131\u011f\u0131n\u0131 d\u00fc\u015f\u00fcn\u00fcyorum. Bununla birlikte ileride buna da e\u011filebiliriz.<\/p>\n
\u015eimdiye kadar anlatt\u0131klar\u0131m\u0131 \u00f6zetleyen bir resme bakal\u0131m:<\/p>\n
\"\"<\/p>\n
Yatay hizalama ve sat\u0131r sarmalama ayr\u0131 se\u00e7imlerdir. kNone ile uzun metin ta\u015far; kWord ile kelimelerden b\u00f6l\u00fcn\u00fcr.<\/em><\/p>\n
D\u00f6n\u00fc\u015f\u00fcmler ve Opakl\u0131k<\/strong><\/span><\/h2>\n
\u00d6nceki yaz\u0131larda kulland\u0131\u011f\u0131m\u0131z\u00a0Translate<\/code>,\u00a0Rotate<\/code>\u00a0ve\u00a0Scale<\/code>, API’lerini metinler ile kullanabiliyoruz. \u00d6rne\u011fin bir etiketi belirli bir konuma ta\u015f\u0131y\u0131p d\u00f6nd\u00fcrmek i\u00e7in a\u015fa\u011f\u0131daki kodr par\u00e7as\u0131n\u0131 kullanabilirsiniz:<\/p>\n
painter.Save();\r\npainter.Translate(400.0F, 300.0F);\r\npainter.Rotate(15.0F);\r\npainter.SetOpacity(0.7F);\r\npainter.DrawText(0.0F, 0.0F, \"D\u00f6nen metin\");\r\npainter.Restore();<\/pre>\n
Bu \u00f6rnekte d\u00f6n\u00fc\u015f merkezi, metnin ba\u015flang\u0131c\u0131ndaki taban \u00e7izgisi noktas\u0131.\u00a0Save<\/code>\u00a0ve\u00a0Restore<\/code>\u00a0ile d\u00f6n\u00fc\u015f\u00fcm\u00fc ve opakl\u0131\u011f\u0131 geri alabiliyoruz. Font se\u00e7imi ise buna dahil de\u011fil; arada\u00a0SetFont<\/code>\u00a0ile fontu de\u011fi\u015ftirdiyseniz \u00f6nceki fontu ayr\u0131ca geri se\u00e7melisiniz.<\/p>\n
Demo<\/strong><\/span><\/h2>\n
Evet yine geldik en e\u011flenceli k\u0131sma \ud83d\ude42 Bu kabiliyetleri bir arada g\u00f6rmek i\u00e7in repodaki\u00a0examples\/graphics\/text.cpp<\/strong><\/span><\/code><\/a>\u00a0\u00f6rne\u011fine bakabilirsiniz. Demo; farkl\u0131 punto boyutlar\u0131n\u0131, \u00fc\u00e7 yatay hizalamay\u0131, renkli ve yar\u0131 saydam metinleri, ayr\u0131ca d\u00f6n\u00fc\u015f\u00fcm uygulanm\u0131\u015f bir yaz\u0131y\u0131 g\u00f6steriyor. Windows ve Linux’ta yayg\u0131n font yollar\u0131n\u0131 deneyerek kullanabilece\u011fi bir font ar\u0131yor.<\/p>\n
A\u015fa\u011f\u0131da demonun \u00e7izim kodunu g\u00fcncel k\u00fct\u00fcphaneyle \u00e7al\u0131\u015ft\u0131rarak ald\u0131\u011f\u0131m \u00e7\u0131kt\u0131y\u0131 g\u00f6rebilirsiniz.<\/p>\n
\"\"<\/p>\n
text.cpp demosunun \u00e7izim kodundan al\u0131nan ger\u00e7ek OpenGL \u00e7\u0131kt\u0131s\u0131. Arial fontu kullan\u0131ld\u0131.<\/em><\/p>\n
Sonu\u00e7<\/strong><\/span><\/h2>\n
Bu fazda, resim \u00e7izimi i\u00e7in haz\u0131rlad\u0131\u011f\u0131m\u0131z doku altyap\u0131s\u0131n\u0131n \u00fczerine font y\u00fcklemeyi ve metin yerle\u015fimini nas\u0131l yapabilece\u011fimizi g\u00f6rd\u00fck. \u00d6zellikle oyunlarda, \u00f6nemli bir konu olan ve OpenGL ile \u00e7al\u0131\u015fanlar\u0131, ilk etapta u\u011fra\u015ft\u0131ran bu kabilyeti de SDLPainter ile nas\u0131l halledebilece\u011finizi sizlere aktarmaya \u00e7al\u0131\u015ft\u0131m.<\/p>\n
Bu yaz\u0131mla, temel kabiliyetlerin bir\u00e7o\u011funa bakm\u0131\u015f olduk. Bir sonraki yaz\u0131mda ise Vulkan renderer’\u0131na bakaca\u011f\u0131z. Her zaman oldu\u011fu gibi, kaynak koda ve di\u011fer \u00f6rneklere\u00a0sdl-painter reposundan<\/a>\u00a0<\/strong>ula\u015fabilirsiniz.<\/p>\n
Bir sonraki yaz\u0131da g\u00f6r\u00fc\u015fmek \u00fczere, keyifli kodlamalar \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
Sevgili yaz\u0131l\u0131mperver dostlar\u0131m, tekrar merhaba. \u00d6nceki yaz\u0131mda, resimleri dosyadan okuyup GPU’ya aktard\u0131k ve ekrana \u00e7izdik. Bu yaz\u0131da ise s\u0131ra metinlerde. Oyun ekran\u0131ndaki puan, bir d\u00fc\u011fmenin \u00fczerindeki yaz\u0131 ya da uygulaman\u0131n durum bilgisi derken, metin \u00e7izimi de k\u0131sa s\u00fcrede ihtiya\u00e7 duydu\u011fumuz, bununla birlikte OpenGL ile geli\u015ftirmesi nispeten me\u015fakkatli kabiliyetlerden birisi oluyor. uEngine4’te (https:\/\/github.com\/yazilimperver\/uEngine4\/blob\/main\/code\/gl\/gl_painter\/gl_font.cpp), freetype kullan\u0131yorduk. Asl\u0131nda… Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"dsgo_overlay_header":false,"dsgo_overlay_header_text_color":"","dsgo_overlay_skip_top_bar":false,"_designsetgo_exclude_llms":false,"footnotes":""},"categories":[10,41,25,188],"tags":[1252,1251,1244,1246,1247,1249,1245,1250,1243,1214,1248],"class_list":["post-3263","post","type-post","status-publish","format-standard","hentry","category-c","category-modern-c","category-oyun-gelistirme","category-yazilim-muhendisligi","tag-2d-grafik-programlama","tag-baseline","tag-c-metin-cizimi","tag-font-yukleme","tag-glyph-atlasi","tag-metin-hizalama","tag-opengl-metin-cizimi","tag-satir-sarmalama","tag-sdl_ttf","tag-sdl-painter","tag-utf-8-turkce-karakter-destegi"],"yoast_head":"\nsdl-painter \u2013 Metin \u00c7izimi (faz-4) - Yaz\u0131l\u0131mperver'in D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/yazilimperver.net\/index.php\/2026\/09\/21\/sdl-painter-metin-cizimi-faz-4\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"sdl-painter \u2013 Metin \u00c7izimi (faz-4) - Yaz\u0131l\u0131mperver'in D\u00fcnyas\u0131\" \/>\n<meta property=\"og:description\" content=\"Sevgili yaz\u0131l\u0131mperver dostlar\u0131m, tekrar merhaba. \u00d6nceki yaz\u0131mda, resimleri dosyadan okuyup GPU’ya aktard\u0131k ve ekrana \u00e7izdik. Bu yaz\u0131da ise s\u0131ra metinlerde. Oyun ekran\u0131ndaki puan, bir d\u00fc\u011fmenin \u00fczerindeki yaz\u0131 ya da uygulaman\u0131n durum bilgisi derken, metin \u00e7izimi de k\u0131sa s\u00fcrede ihtiya\u00e7 duydu\u011fumuz, bununla birlikte OpenGL ile geli\u015ftirmesi nispeten me\u015fakkatli kabiliyetlerden birisi oluyor. uEngine4’te (https:\/\/github.com\/yazilimperver\/uEngine4\/blob\/main\/code\/gl\/gl_painter\/gl_font.cpp), freetype kullan\u0131yorduk. Asl\u0131nda... Continue reading →\" \/>\n<meta property=\"og:url\" content=\"https:\/\/yazilimperver.net\/index.php\/2026\/09\/21\/sdl-painter-metin-cizimi-faz-4\/\" \/>\n<meta property=\"og:site_name\" content=\"Yaz\u0131l\u0131mperver'in D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-21T19:11:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/yazilimperver.net\/wp-content\/uploads\/2026\/09\/img_6ab17d6d0d5b3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1514\" \/>\n\t<meta property=\"og:image:height\" content=\"746\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"yaz\u0131l\u0131mperver\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"yaz\u0131l\u0131mperver\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/yazilimperver.net\\\/index.php\\\/2026\\\/09\\\/21\\\/sdl-painter-metin-cizimi-faz-4\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/yazilimperver.net\\\/index.php\\\/2026\\\/09\\\/21\\\/sdl-painter-metin-cizimi-faz-4\\\/\"},\"author\":{\"name\":\"yaz\u0131l\u0131mperver\",\"@id\":\"https:\\\/\\\/yazilimperver.net\\\/#\\\/schema\\\/person\\\/534a27860d56170658018ac4c6f1af16\"},\"headline\":\"sdl-painter \u2013 Metin \u00c7izimi (faz-4)\",\"datePublished\":\"2026-09-21T19:11:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/yazilimperver.net\\\/index.php\\\/2026\\\/09\\\/21\\\/sdl-painter-metin-cizimi-faz-4\\\/\"},\"wordCount\":1648,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/yazilimperver.net\\\/#\\\/schema\\\/person\\\/534a27860d56170658018ac4c6f1af16\"},\"image\":{\"@id\":\"https:\\\/\\\/yazilimperver.net\\\/index.php\\\/2026\\\/09\\\/21\\\/sdl-painter-metin-cizimi-faz-4\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/yazilimperver.net\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/img_6ab17d6d0d5b3.png\",\"keywords\":[\"2D grafik programlama\",\"baseline\",\"C++ metin \u00e7izimi\",\"font y\u00fckleme\",\"glyph atlas\u0131\",\"metin hizalama\",\"OpenGL metin \u00e7izimi\",\"sat\u0131r sarmalama\",\"SDL_ttf\",\"sdl-painter\",\"UTF-8 T\u00fcrk\u00e7e karakter deste\u011fi\"],\"articleSection\":[\"C++\",\"Modern C++\",\"Oyun Geli\u015ftirme\",\"Yaz\u0131l\u0131m M\u00fchendisli\u011fi\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/yazilimperver.net\\\/index.php\\\/2026\\\/09\\\/21\\\/sdl-painter-metin-cizimi-faz-4\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/yazilimperver.net\\\/index.php\\\/2026\\\/09\\\/21\\\/sdl-painter-metin-cizimi-faz-4\\\/\",\"url\":\"https:\\\/\\\/yazilimperver.net\\\/index.php\\\/2026\\\/09\\\/21\\\/sdl-painter-metin-cizimi-faz-4\\\/\",\"name\":\"sdl-painter \u2013 Metin \u00c7izimi (faz-4) - Yaz\u0131l\u0131mperver'in D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/yazilimperver.net\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/yazilimperver.net\\\/index.php\\\/2026\\\/09\\\/21\\\/sdl-painter-metin-cizimi-faz-4\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/yazilimperver.net\\\/index.php\\\/2026\\\/09\\\/21\\\/sdl-painter-metin-cizimi-faz-4\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/yazilimperver.net\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/img_6ab17d6d0d5b3.png\",\"datePublished\":\"2026-09-21T19:11:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/yazilimperver.net\\\/index.php\\\/2026\\\/09\\\/21\\\/sdl-painter-metin-cizimi-faz-4\\\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/yazilimperver.net\\\/index.php\\\/2026\\\/09\\\/21\\\/sdl-painter-metin-cizimi-faz-4\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\\\/\\\/yazilimperver.net\\\/index.php\\\/2026\\\/09\\\/21\\\/sdl-painter-metin-cizimi-faz-4\\\/#primaryimage\",\"url\":\"https:\\\/\\\/yazilimperver.net\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/img_6ab17d6d0d5b3.png\",\"contentUrl\":\"https:\\\/\\\/yazilimperver.net\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/img_6ab17d6d0d5b3.png\",\"width\":1514,\"height\":746},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/yazilimperver.net\\\/index.php\\\/2026\\\/09\\\/21\\\/sdl-painter-metin-cizimi-faz-4\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\\\/\\\/yazilimperver.net\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"sdl-painter \u2013 Metin \u00c7izimi (faz-4)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/yazilimperver.net\\\/#website\",\"url\":\"https:\\\/\\\/yazilimperver.net\\\/\",\"name\":\"Yaz\u0131l\u0131mperver'in D\u00fcnyas\u0131\",\"description\":\"Payla\u015fmak g\u00fczeldir.\",\"publisher\":{\"@id\":\"https:\\\/\\\/yazilimperver.net\\\/#\\\/schema\\\/person\\\/534a27860d56170658018ac4c6f1af16\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/yazilimperver.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/yazilimperver.net\\\/#\\\/schema\\\/person\\\/534a27860d56170658018ac4c6f1af16\",\"name\":\"yaz\u0131l\u0131mperver\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\\\/\\\/yazilimperver.net\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/cropped-OnlyIcon-1.png\",\"url\":\"https:\\\/\\\/yazilimperver.net\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/cropped-OnlyIcon-1.png\",\"contentUrl\":\"https:\\\/\\\/yazilimperver.net\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/cropped-OnlyIcon-1.png\",\"width\":512,\"height\":512,\"caption\":\"yaz\u0131l\u0131mperver\"},\"logo\":{\"@id\":\"https:\\\/\\\/yazilimperver.net\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/cropped-OnlyIcon-1.png\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"sdl-painter \u2013 Metin \u00c7izimi (faz-4) - Yaz\u0131l\u0131mperver'in D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/yazilimperver.net\/index.php\/2026\/09\/21\/sdl-painter-metin-cizimi-faz-4\/","og_locale":"tr_TR","og_type":"article","og_title":"sdl-painter \u2013 Metin \u00c7izimi (faz-4) - Yaz\u0131l\u0131mperver'in D\u00fcnyas\u0131","og_description":"Sevgili yaz\u0131l\u0131mperver dostlar\u0131m, tekrar merhaba. \u00d6nceki yaz\u0131mda, resimleri dosyadan okuyup GPU’ya aktard\u0131k ve ekrana \u00e7izdik. Bu yaz\u0131da ise s\u0131ra metinlerde. Oyun ekran\u0131ndaki puan, bir d\u00fc\u011fmenin \u00fczerindeki yaz\u0131 ya da uygulaman\u0131n durum bilgisi derken, metin \u00e7izimi de k\u0131sa s\u00fcrede ihtiya\u00e7 duydu\u011fumuz, bununla birlikte OpenGL ile geli\u015ftirmesi nispeten me\u015fakkatli kabiliyetlerden birisi oluyor. uEngine4’te (https:\/\/github.com\/yazilimperver\/uEngine4\/blob\/main\/code\/gl\/gl_painter\/gl_font.cpp), freetype kullan\u0131yorduk. Asl\u0131nda... Continue reading →","og_url":"https:\/\/yazilimperver.net\/index.php\/2026\/09\/21\/sdl-painter-metin-cizimi-faz-4\/","og_site_name":"Yaz\u0131l\u0131mperver'in D\u00fcnyas\u0131","article_published_time":"2026-09-21T19:11:50+00:00","og_image":[{"width":1514,"height":746,"url":"https:\/\/yazilimperver.net\/wp-content\/uploads\/2026\/09\/img_6ab17d6d0d5b3.png","type":"image\/png"}],"author":"yaz\u0131l\u0131mperver","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"yaz\u0131l\u0131mperver","Tahmini okuma s\u00fcresi":"8 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/yazilimperver.net\/index.php\/2026\/09\/21\/sdl-painter-metin-cizimi-faz-4\/#article","isPartOf":{"@id":"https:\/\/yazilimperver.net\/index.php\/2026\/09\/21\/sdl-painter-metin-cizimi-faz-4\/"},"author":{"name":"yaz\u0131l\u0131mperver","@id":"https:\/\/yazilimperver.net\/#\/schema\/person\/534a27860d56170658018ac4c6f1af16"},"headline":"sdl-painter \u2013 Metin \u00c7izimi (faz-4)","datePublished":"2026-09-21T19:11:50+00:00","mainEntityOfPage":{"@id":"https:\/\/yazilimperver.net\/index.php\/2026\/09\/21\/sdl-painter-metin-cizimi-faz-4\/"},"wordCount":1648,"commentCount":0,"publisher":{"@id":"https:\/\/yazilimperver.net\/#\/schema\/person\/534a27860d56170658018ac4c6f1af16"},"image":{"@id":"https:\/\/yazilimperver.net\/index.php\/2026\/09\/21\/sdl-painter-metin-cizimi-faz-4\/#primaryimage"},"thumbnailUrl":"https:\/\/yazilimperver.net\/wp-content\/uploads\/2026\/09\/img_6ab17d6d0d5b3.png","keywords":["2D grafik programlama","baseline","C++ metin \u00e7izimi","font y\u00fckleme","glyph atlas\u0131","metin hizalama","OpenGL metin \u00e7izimi","sat\u0131r sarmalama","SDL_ttf","sdl-painter","UTF-8 T\u00fcrk\u00e7e karakter deste\u011fi"],"articleSection":["C++","Modern C++","Oyun Geli\u015ftirme","Yaz\u0131l\u0131m M\u00fchendisli\u011fi"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/yazilimperver.net\/index.php\/2026\/09\/21\/sdl-painter-metin-cizimi-faz-4\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/yazilimperver.net\/index.php\/2026\/09\/21\/sdl-painter-metin-cizimi-faz-4\/","url":"https:\/\/yazilimperver.net\/index.php\/2026\/09\/21\/sdl-painter-metin-cizimi-faz-4\/","name":"sdl-painter \u2013 Metin \u00c7izimi (faz-4) - Yaz\u0131l\u0131mperver'in D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/yazilimperver.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/yazilimperver.net\/index.php\/2026\/09\/21\/sdl-painter-metin-cizimi-faz-4\/#primaryimage"},"image":{"@id":"https:\/\/yazilimperver.net\/index.php\/2026\/09\/21\/sdl-painter-metin-cizimi-faz-4\/#primaryimage"},"thumbnailUrl":"https:\/\/yazilimperver.net\/wp-content\/uploads\/2026\/09\/img_6ab17d6d0d5b3.png","datePublished":"2026-09-21T19:11:50+00:00","breadcrumb":{"@id":"https:\/\/yazilimperver.net\/index.php\/2026\/09\/21\/sdl-painter-metin-cizimi-faz-4\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/yazilimperver.net\/index.php\/2026\/09\/21\/sdl-painter-metin-cizimi-faz-4\/"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/yazilimperver.net\/index.php\/2026\/09\/21\/sdl-painter-metin-cizimi-faz-4\/#primaryimage","url":"https:\/\/yazilimperver.net\/wp-content\/uploads\/2026\/09\/img_6ab17d6d0d5b3.png","contentUrl":"https:\/\/yazilimperver.net\/wp-content\/uploads\/2026\/09\/img_6ab17d6d0d5b3.png","width":1514,"height":746},{"@type":"BreadcrumbList","@id":"https:\/\/yazilimperver.net\/index.php\/2026\/09\/21\/sdl-painter-metin-cizimi-faz-4\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Ana sayfa","item":"https:\/\/yazilimperver.net\/"},{"@type":"ListItem","position":2,"name":"sdl-painter \u2013 Metin \u00c7izimi (faz-4)"}]},{"@type":"WebSite","@id":"https:\/\/yazilimperver.net\/#website","url":"https:\/\/yazilimperver.net\/","name":"Yaz\u0131l\u0131mperver'in D\u00fcnyas\u0131","description":"Payla\u015fmak g\u00fczeldir.","publisher":{"@id":"https:\/\/yazilimperver.net\/#\/schema\/person\/534a27860d56170658018ac4c6f1af16"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/yazilimperver.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/yazilimperver.net\/#\/schema\/person\/534a27860d56170658018ac4c6f1af16","name":"yaz\u0131l\u0131mperver","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/yazilimperver.net\/wp-content\/uploads\/2018\/04\/cropped-OnlyIcon-1.png","url":"https:\/\/yazilimperver.net\/wp-content\/uploads\/2018\/04\/cropped-OnlyIcon-1.png","contentUrl":"https:\/\/yazilimperver.net\/wp-content\/uploads\/2018\/04\/cropped-OnlyIcon-1.png","width":512,"height":512,"caption":"yaz\u0131l\u0131mperver"},"logo":{"@id":"https:\/\/yazilimperver.net\/wp-content\/uploads\/2018\/04\/cropped-OnlyIcon-1.png"}}]}},"_links":{"self":[{"href":"https:\/\/yazilimperver.net\/index.php\/wp-json\/wp\/v2\/posts\/3263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yazilimperver.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yazilimperver.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yazilimperver.net\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/yazilimperver.net\/index.php\/wp-json\/wp\/v2\/comments?post=3263"}],"version-history":[{"count":3,"href":"https:\/\/yazilimperver.net\/index.php\/wp-json\/wp\/v2\/posts\/3263\/revisions"}],"predecessor-version":[{"id":3271,"href":"https:\/\/yazilimperver.net\/index.php\/wp-json\/wp\/v2\/posts\/3263\/revisions\/3271"}],"wp:attachment":[{"href":"https:\/\/yazilimperver.net\/index.php\/wp-json\/wp\/v2\/media?parent=3263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yazilimperver.net\/index.php\/wp-json\/wp\/v2\/categories?post=3263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yazilimperver.net\/index.php\/wp-json\/wp\/v2\/tags?post=3263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}