|
[Grafika]
[WebTip]
[Fotografování]
[Galerie]
[MujMac]
[Printing]
|
|||||||||
|
|
||||||||||
|
|
|||||||||
|
Grafika Tím nejdůležitějším prvkem je obrázek s textem. Autor českého článku použil obrázek dodávaný ke komponentě, my si jej však nakreslíme. Budeme potřebovat Malování a nejspíš Photoshop nebo jiný trochu vyspělejší grafický program. Nejprve si řekneme, že jednotlivé znaky budou veliké 30x30 pixelů a budou po sobě následovat takto:
Vytvoříme si tedy například v malování grid, který bude 26 políček široký a 4 vysoký. Celková velikost bude tedy 780*120 pixelů. Pro lepší orientaci si ještě políčka nějak označíme, například obdélníkem (na barvách nezáleží, výsledek vidět stejně nebude). Jelikož jsem omezen šířkou článku, zde je částečný náhled na mřížku (celý obrázek je v archívu s projektem):
Tento obrázek můžete uložit a přistoupit k tvorbě fontu. Nejprve jsem pro test zvolil font Courier New, jelikož má všechny znaky stejně velké, a práve s ním je jednodušší. Použil jsem velikost 11, tučné, výška řádku 17 a proklad znaků 945. Se vším samozřejmě musíte tak trochu experimentovat. Zde je náhled jak jsem rozložil znaky:
A zde náhled na všechny vlastnosti textu:
Aby text nevypadal tak "suše", přidáme ještě pár efektů vrstvy. Zaprvé vržený stín - drop shadow, poté černý obtah - Stroke (nebo můžete použít Outer Glow) a ještě třeba vzorek - Pattern Overlay. Výsledek může vypadat nějak takto:
Zřejmě nebudeme kreslit na zelené pozadí, proto vrstvu s mřížkou zneviditelníme, a výsledek uložíme. Zde je opět částečný náhled, celý obrázek je v archivu s projektem.
Tím máme zpoloviny vyřešen problém obrázku. Druhá polovina je zkusit udělat něco podobného i například z písmem Tahoma či Arial, kde je každý znak jinak široký. Je to piplavá práce spočívající v nastavení různé mezery u každého znaku, který není přesně uprostřed. Nastavení se provádí zde změnou Metrics na záporné či kladné číslo:
Pro ty, kterým se toto nechce dělat mám dobrou zprávu - soubor photoshopu je ke stažení dole v downloadu :) Zpět ale k obrázku, zde je k náhledu část s písmem Trebuchet MS:
Obrázky již máme, pustíme se tedy do programování... Programování Celý princip projektu spočívá v tom, že kreslíme pouze část obrázku, doporučuji si tedy přečíst článek Zobrazení části obrázku v DelphiX který najdete zde. Začneme tím, že si vytvoříme nový projekt, na formulář dáme komponenty DXDraw, DXImageList a DXTimer. Interval u DXTimeru nastavíme na 20. Dále si definujeme konstantu FindString, ve které budou uloženy znaky jak jsou po sobě:
Na řadě je proměnná DrawString, ve které bude ulož text, který budeme kreslit, dále FontName, kde bude uložen název písma v ImageListu a XPos, určující pozici prvního písmene. Do DXImageListu si tedy vložíme naše dva obrázky, pojmenujeme je font1 a font2. Hlavně nesmíme zapomenout u nich nastavit PatternWidth a PatternHeight na 30, jelikož nechceme kreslit celý obrázek ale pouze část (viz článek Kreslení části obrázku v DelphiX). Dále si vytvoříme proceduru Form1.OnCreate, ve které si naše tři proměnné nastavíme:
Dále si ještě vytvoříme proceduru DXDraw1.OnClick, při které změníme kreslený font:
A teď nejdůležitější věc - všechno si hezky nakreslíme. Vytvoříme si tedy proceduru DXTimer1.OnTimer a zkopírujeme do ní následující kód:
Jelikož jsem udělal znaky moc malé, a při kreslení s mezerou 30 pixelů by byly moc daleko od sebe, kreslím znaky pouze s mezerou 20 pixelů. Pokud se některé znaky překrývají, zapomněli jste nastavit průhlednost. A to je celé ! Jak jednoduché. Takže vytvořit si ve hře credits už určitě nebude žádný problém... Zde je ještě pár náhledů na projekt:
A to je pro dnešek vše. Pokud se Vám povede nakreslit nějaký zajímavý font, určitě mě ho pošlete :) Jenom na ukázku, zde máte grid jiných rozměrů a za ním ještě trochu jiné písmo...
A úplně nakonec ještě jedno písmo bez vyhlazení (antialiasingu), použitelné na jakékoliv pozadí:
Download Zde si můžete stáhnout dnes vytvořený příklad, zdrojáky a garfiku včetně photoshop souboru (559 kB). Relevantní články Seriál - Tvorba her v DelphiX Seriál - Tvorba hry Had v DelphiX Zobrazení části obrázku v DelphiX Komponenta DXImageList Simulace sněžení v DelphiX Zobrazení kurzoru v DelphiX Posuvný text v DelphiX Isometrický engine v DelphiX Sprity v DelphiX (C++ Builder) |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||