Posuvný text v DelphiX bez komponenty - Builder.cz - Informacni server o programovani

Navigace:  » Úvodní stránka  » Rubriky  » Delphi  

10. září 2001, 00.00 | Potřebujete vytvořit ve hře titulky nebo credits a zároveň použít české a speciální znaky ? Přečtěte si tento článek, kde se mimo jiné dozvíte i jak takové písmo nakreslit. Pokud se vám nic kreslit nechce, můžete si obrázek hned stáhnout !

Před nedávnem se na builderu objevil článek o tvorbě posuvného textu v DelphiX. Jednalo se o komponentu, článek na builderu je zde, originální anglický článek z http://turbo.gamedev.net/ je zde (v anglickém článku je i popis, jak komponentu vytvořit, změnit v paletě ikonku a nakonec nainstalovat...). Tato komponenta má však jeden velký nedostatek, a to že nemůžete použít české znaky, háčky a čárky. Samozřejmě můžete komponentu upravit, ale my si dnes ukážeme, jak takový posuvný text udělat bez komponenty. Tak se do toho dáme...

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:

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ěščřžýáíéúů$_() .:,=+-*/\@?![]&%"

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ě:

const FindString : string = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 ěščřžýáíéúů$_().:,=+-*/\@?![]&%"';

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:

procedure TForm1.FormCreate(Sender: TObject); begin DrawString:='Test Speciálního Fontu - Háčky čárky ?! - speciální znaky - _().:,=+-*/\@?![]&%"'; XPos:=DXDraw1.SurfaceWidth; FontName:='font1'; end;

Dále si ještě vytvoříme proceduru DXDraw1.OnClick, při které změníme kreslený font:

procedure TForm1.DXDraw1Click(Sender: TObject); begin if FontName = 'font1' then FontName:= 'font2' else FontName:='font1'; end;

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:

procedure TForm1.DXTimer1Timer(Sender: TObject; LagCount: Integer); var i:integer; begin if not DXDraw1.CanDraw then Exit; DXDraw1.Surface.Fill(clWhite); // celé kreslení... for i:= 1 to Length(DrawString) do begin // kreslit pouze pokud je písmeno viditelné... if ((i*20)+Xpos) < DXDraw1.SurfaceWidth then DXImageList1.Items.Find(FontName).Draw(DXDraw1.Surface, (i*20)+XPos,20,Pos(DrawString[i],FindString)-1); end; // posunout doleva... Dec(XPos,2); // když je zobrazen celý DrawString tak odznovu... if Abs(XPos) > Length(DrawString)*20 then XPos:=DXDraw1.SurfaceWidth; // a flip... DXDraw1.FLip; end;

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)