Hlavní navigace

Knihovna ClanLib (18)

Petr Kavánek

V dalším dílu tohoto seriálu se podíváme na to, jak se v ClanLibu pracuje s fonty. Půjde o úvod do této problematiky - povíme si, jak vytvořit obrázek obsahující jednotlivé znaky tak, aby je ClanLib dokázal odlišit jeden od druhého, jak zapsat základní nastavení do RDF a jak vypsat konkrétní nápis v programu.

Úvod do fontů

ClanLib poskytuje programátorům poměrně značné množství nástrojů pro práci s fonty, ať už se jedná o systémové TTF fonty (klasické fonty, které známe z textových editorů), nebo naše vlastní bitmapové fonty.

Naše povídání o fontech jsem se rozhodl začít bitmapovými fonty, jelikož mám pocit, že se s nimi dá vystačit o něco lépe než s těmi systémovými. Důvod je zejména ten, že systémové fonty jsou, jak už i jejich název napovídá, závislé na systému. Pokud takový font chceme použít v našem programu, potřebujeme zaručit, aby byl součástí všech systémů, na nichž má náš program běžet. Přiznám se, že osobně jsem se do takovéhoto dobrodružství nikdy nepustil, protože myšlenka, že bych měl zajistit například stejný times font na všech počítačích, kde poběží můj program, mi přišla jako bláznovství, ale je možné, že se mýlím a že se něco takového zvládnout dá. Například pokud píšete program pro vaše dva windowsovké počítače, tak si dost možná třeba se zmíněným timesem lehce vystačíte.

Bitmapový font je reprezentovaný bitmapou, tj. rastrovým obrázkem. Takový obrázek prostě a jednoduše obsahuje jednotlivé znaky oddělené například průhledností, jak je tomu například zde:

Tvorba bitmapových fontů

Takový obrázek můžete vytvořit poměrně lehce ve vašem oblíbeném grafickém editoru prostě tak, že potřebné znaky napíšete a oddělíte je dostatečným počtem mezer tak, aby mezi nimi bylo možné udělat svislou čáru neprotínající žádný z nich. Nyní již stačí takový obrázek uložit do některého z podporovaných formátů (např. png). Pokud to váš grafický editor dokáže, můžete rovnou vytvořit průhledné pozadí. Například v Gimpu to jde velice snadno tak, že při vytváření nového obrázku vyberete průhledný typ vyplňování:

Můžete také uložit obrázek bez průhlednosti a použít postupu s Image Magickem, který byl podrobně popsán v jednom z minulých dílů.

Není snad třeba dodávat, že takto si můžete jednotlivé znaky nakreslit úplně sami. Máte-li skener, můžete kreslit i na papír. Prostě si můžete pro váš program (zejména pro hry se to vyplatí) vytvořit font, který dosud nikdo nikdy neviděl, a nemusí to ani zabrat příliš mnoho času.

Základní nastavení v RDF

Asi není překvapením, že i pro fonty je možno zapsat většinu volitelných nastavení do RDF. Font je v ClanLibu reprezentován třídou CL_Font, která umožňuje provádět potřebné operace, jako je třeba vypsání textu na obrazovku. K práci s obrázkem obsahujícím vlastní znaky však třída CL_Font využívá nám již poměrně dobře známou třídu CL_Sprite. Není se čemu divit, jelikož tato třída je pro tento účel jako stvořená. Jak jsme se již při jejím popisu zmínili, dokáže vytvořit sprite z jednoho obrázku tak, že si ho rozřeže na snímky oddělené průhledností.

V našem případě tedy nejprve v RDF popíšeme sprite, který bude obsahovat snímky odpovídající jednotlivým znakům:

<sprite name="font_cislice">
  <image file="obrazky/font_cislice.png">

    <alpha/>
  </image>
</sprite>

Možná vás nyní napadne, zda je nutné vytvářet sprite pro font právě tímto speciálním způsobem. Nebylo by možné ho vytvořit i jinak? Co třeba uložit si každé písmenko zvlášť do jiného souboru, nebo použít rozřezání podle mřížky (také popsané v díle věnujícím se třídě CL_Sprite)? Odpověď zní ano. Třída CL_Font opravdu potřebuje dostat pouze CL_Sprite a je jí úplně jedno, jak vznikl. Nicméně postup s jedním obrázkem a průhledností mně osobně přijde velice pěkný, proto jsem se o něm zmínil trochu podrobněji.

Nyní již stačí popsat pouze font samotný:

<font name="font2">
  <bitmap glyphs="font_cislice" letters="0123456789" />
</font>

Zde jsou důležité atributy glyphs a letters. První z nich je jméno spritu obsahujícího jednotlivé znaky, druhý obsahuje řetězec odpovídající těmto znakům. V tomto řetězci samozřejmě záleží na pořadí. Pro znak " musíme použít z pochopitelných důvodů escape sekvenci. Tato escape sekvence má tvar &quot;. Z jejího tvaru je vidět, že budeme další espape sekvenci potřebovat také pro znak &. Tato má tvar &amp;.

Co se týče znaku pro mezeru, tak ten samozřejmě nekreslíme. Šířka mezery se počítá automaticky jako průměrná šířka všech znaků. Podobně je tomu i u výšky řádky potřebné, pokud se snažíme vypsat text na několik řádek. Zde se samozřejmě nepočítá průměr, ale hledá se nejvyšší znak. Pokud s těmito automatickými hodnotami nejsme spokojeni, můžeme je upravit. V RDF k tomu můžeme použít atributy width_offset a height_offset, jejichž hodnoty říkají, o kolik pixelů se má mezera zvětšit oproti automaticky spočtené hodnotě. Záporná hodnota u width_offset tedy znamená přiblížení jednotlivých znaků k sobě. K nastavení délky samotného znaku mezera slouží v RDF atribut spacelen. Použití těchto atributů v RDF může vypadat takto:

<font name="font3" width_offset="5" height_offset="-3">
  <bitmap glyphs="font_cislice" letters="0123456789" spacelen="30" />
</font> 

Důvod, proč je atribut spacelen jinde než zbylé dva atributy, je ten, že pouze u bitmapových fontů můžeme nastavovat velikost znaku mezera (u systémových nikoliv). Na druhou stranu width_offset a height_offset mají smysl vždy.

Pro názornější představu se můžete podívat na obrázek výpisu stejného řetězce dvěma fonty lišícími se pouze v posledních třech zmiňovaných atributech. Jedná se o dva výše uvedené fonty (font2 a font3), sprite je stejný pro oba, vypisovaný řetězec je „2115 111\n00­25 35“.

Vykreslení fontu

Zbývá již pouze popsat konstrukci objektu třídy CL_Font využívající RDF:

CL_Font Font2("font2", SpravceZdroju);

Syntaxe je obvyklá. Konstruktoru předáme název fontu a ukazatel na příslušný CL_ResourceManager. K vykreslení pak použijeme metodu draw(). Jejími prvními dvěma atributy jsou souřadnice, kam se má vykreslování provést, tj. souřadnice levého horního rohu pomyslného obdélníku opsaného nápisu. Třetím atributem je vlastní text nápisu, jak můžete vidět na následující ukázce:

Font2.draw(50, 60, "2115 111\n0025 35");

Závěr

Zkuste si sami napsat program, který bude mít podobný výsledek jako ten na výše uvedeném obrázku. Vše potřebné již znáte. Pokud budete mít problém tento program sami napsat, ozvěte se a já ho přidám k některému z příštích dílů.

V RDF je možné nastavit ještě několik dalších věcí a třída CL_Font toho také umí mnohem víc než jen zmíněnou metodu draw(). Nemusíte se však bát – tímto tématem se budeme ještě zabývat.

Našli jste v článku chybu?
Podnikatel.cz: K EET. Štamgast už peníze na stole nenechá

K EET. Štamgast už peníze na stole nenechá

Podnikatel.cz: Změny v cestovních náhradách 2017

Změny v cestovních náhradách 2017

DigiZone.cz: TV Philips a Android verze 6.0

TV Philips a Android verze 6.0

120na80.cz: 5 nejčastějších mýtů o kondomech

5 nejčastějších mýtů o kondomech

Lupa.cz: Kdo pochopí vtip, může jít do ČT vyvíjet weby

Kdo pochopí vtip, může jít do ČT vyvíjet weby

Vitalia.cz: Pamlsková vyhláška bude platit jen na základkách

Pamlsková vyhláška bude platit jen na základkách

Měšec.cz: Jak levně odeslat balík přímo z domu?

Jak levně odeslat balík přímo z domu?

Vitalia.cz: Mondelez stahuje rizikovou čokoládu Milka

Mondelez stahuje rizikovou čokoládu Milka

Vitalia.cz: Spor o mortadelu: podle Lidlu falšovaná nebyla

Spor o mortadelu: podle Lidlu falšovaná nebyla

Vitalia.cz: Proč vás každý zubař posílá na dentální hygienu

Proč vás každý zubař posílá na dentální hygienu

Podnikatel.cz: Udávání kvůli EET začalo

Udávání kvůli EET začalo

Podnikatel.cz: Podnikatelům dorazí varování od BSA

Podnikatelům dorazí varování od BSA

120na80.cz: Pánové, pečujte o svoje přirození a prostatu

Pánové, pečujte o svoje přirození a prostatu

120na80.cz: Horní cesty dýchací. Zkuste fytofarmaka

Horní cesty dýchací. Zkuste fytofarmaka

Podnikatel.cz: Snížení DPH na 15 % se netýká všech

Snížení DPH na 15 % se netýká všech

DigiZone.cz: Recenze Westworld: zavraždit a...

Recenze Westworld: zavraždit a...

Měšec.cz: Jak vymáhat výživné zadarmo?

Jak vymáhat výživné zadarmo?

120na80.cz: Na ucho teplý, nebo studený obklad?

Na ucho teplý, nebo studený obklad?

Vitalia.cz: Paštiky plné masa ho zatím neuživí

Paštiky plné masa ho zatím neuživí

Lupa.cz: Proč firmy málo chrání data? Chovají se logicky

Proč firmy málo chrání data? Chovají se logicky