Hra Had v DelphiX I. - Builder.cz - Informacni server o programovani

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

31. ledna 2001, 00.00 | Nový seriál o tvorbě hry pod DelphiX inspirované známou hrou z mobilních telefonů. V prvním díle si připravíme grafiku a základ aplikace. Hru sice společně dokončíme v příštích dílech, ale již nyní si ji můžete stáhnout!

V dnešním a v příštích pokračováních tohoto článku se podíváme na trochu složitější věc v DelphiX, a to rovnou tvorbu hry. Bude se ovšem jednat o velice jednoduchou hru, kterou jistě každý zná z mobilních telefonů nokia a která nese jméno had. Je např. na telefonech nokia 5110, 3210 atd... Tato hra má i své pokračování - hru Snake II kterou nalezneme např. na telefonu 3310, ale tou se teď zabývat nebudeme, a zůstaneme u varianty jednodušší.
Než se dáme do samotného programování, je dobré si vysvětlit pár pojmů, tedy hlavně jak hra funguje. Pokud jste ji doopravdy nikdy neviděli, doporučuji si ji někde na chvíli zapůjčit a zahrát, abyste pochopili princip. Ten je vcelku jednoduchý - pomocí čtyř tlačítek ovládáte hada, se kterým musíte jíst potravu. Pokud ji sníte, zvětšíte se o jeden článek a přibude Vám skóre. To je závislé na tom, jakou máte nastavenou obtížnost. Platí čím větší obtížnost, tím více bodů ale tím také větší rychlost. No, a pokud narazíte do sebe, či do stěny, hra končí. To je celá podstata hry. Tak se do toho dáme.

Zobrazení pozadí a hada

V této první kapitole se podíváme na to, jak zobrazit samotného hada na pozadí. Není to až tak složité, jak by se na první pohled mohlo zdát, pouze musíme zvolit ten správný způsob. Začneme tím, že si určíme velikost displeje. Přepočítáním jsem zjistil, že je široký 19, a vysoký 11 článků. Jeden článek hada je veliký 3x3 body, plus na každé straně jeden bod místo = 4x4 a jelikož by to bylo moc malé, zobrazíme ho ještě dvojitě. Výsledná velikost článku hada je tedy 8x8 pixelů. Vynásobíme tedy 8*19 (šířka) a přidáme okraj 2 pixely, získáme číslo 154 pixelů což je výsledná šířka displeje. To stejné uděláme s výškou, která nám vyjde 90 pixelů. Proto můžeme klidně zmenšit velikost komponenty DXDraw na 154x90 pixelů. Více snad pochopíte z obrázku:

Složitější grafiku k této hře jsem tvořil v Adobe Photoshopu a jednodušší, tedy většinu obrázků v Malování. Nyní se tedy vrhneme na tvorbu pozadí. Ve photoshopu jsem si tedy vytvořil nový obrázek velikosti 154x90 pixelů a vyplnil jej tmavě zelenou barvou (pokud se Vám líbí víc modré, či oranžové displeje, můžete obrázek samozřejmě vyplnit jinou barvou). Aby pozadí ještě více připomínalo displej telefonu, aplikoval jsem efekt Šum / Přidat šum a výsledek jsem uložil. Pozadí tedy máme hotové a můžeme postoupit dále. Vytvoříme si obrázek článku hada. Takto jednoduchý obrázek zvládneme i v malování. Vytvoříme obrázek velikosti 8x8 pixelů, z čehož 6x6 pixelů vyplníme černou barvou a zbytek jakoukoliv jinou, jelikož zde bude obrázek průhledný. Rovněž uložíme a přesuneme se zpátky k Delphi. Zde vytvoříme nový projekt (pokud ho již nemáme vytvořený) a na formulář přetáhneme komponenty DXDraw, DXTimer a DXImageList. Dále přidáme námi 2 vytvořené obrázky do položek DXImageList1.Items. Na pořadí nezáleží, pouze musíme nastavit vlastnost name na "pozadi" a "plne", jelikož při vykreslování nebudeme k položkám přistupovat podle pořadových čísel, ale podle jmen. U pozadí nastavíme průhlednost na false a u článku hada na barvu vpravo dole. Nyní si již konečně definujeme hada, a to jako pole bodů. Abychom věděli, jak je had dlouhý, definujeme si ještě proměnou DelkaHadu typu integer. Výsledek bude vypadat nějak takto:

public Had:array [0..1000] of TPOint; DelkaHadu:integer;

Pole Had raději definujeme až do 1000, i když reálná maximální hodnota je 19*11=209. Nyní si ještě vytvoříme proceduru KresliHada, která se postará o to, aby se had nakreslil a bude vypadat nějak takto:

Procedure TForm1.KresliHada; var i:integer; begin for i:=DelkaHadu downto 0 do begin DXImageList1.Items.Find('plne').Draw (DXDraw1.surface,(Had[i].x*8)+2,(Had[i].y*8)+2,0); end; end;

V procedurách jsem si zvykl používat pro for proměnou i, a proto uvidíte-li v kódu právě tuto proměnou, slouží pouze pro toto. Nyní ještě musíme vytvořit proceduru DXTimer1.OnTimer, abychom výsledek také mohli vidět. Jen podotknu, že první nakreslíme pozadí, poté procedurou KresliHada nakreslíme hada a nakonec zavoléme proc. flip. Zde je již kód:

procedure TForm1.DXTimer1Timer(Sender: TObject; LagCount: Integer); begin if not DXDraw1.candraw then exit; // nakreslíme pozadí DXImageList1.Items.Find('pozadi').Draw(DXDraw1.surface,0,0,0); // nakreslíme hada KresliHada; // a nakonec flip.... DXDraw1.Flip; end;

Projekt můžeme uložit a spustit. Nelekněte se, že vidíte pouze pozadí. Je to tím, že nemáme nastaveny žádné body hada, a vlastnost DelkaHadu je v podstatě nula. Pokud však nevidíte ani pozadí, zkuste si kód ještě jednou projít a podívejte se, zda neobsahuje žádnou z těchto chyb:

• používáte v DXImageListu jiné soubory, než bmp
• u DXImageListu nemáte nastavenou vlastnost DXDraw na DXDraw1
• v proceduře DXTimer.OnTimer nemáte DXDraw1.flip
• při tvorbě procedury DXDraw1.OnTimer jste poklepali na komponentu, a tak jste omylem vytvořili proceduru DXTimer1.OnActivate
• máte vlastnost DXTimer1.Enabled nastavenou na false
• špatně jste pojmenovali položky DXImageListu

Pokud žádnou z těchto chyb nemáte a program vám funguje, tedy vidíte obrázek pozadí, můžeme přikročit k dalšímu kroku. Tím bude nastavení pár bodů hada a proměnné DelkaHadu, abychom také viděli něco jiného než jen pozadí. Body nastavíme hned v proceduře Form1.OnCreate, kterou vytvoříme nejjednodušší cestou tak, že poklikáme na formulář. Do procedury přidáme kód, kterým nastavíme pět bodů hada, a proměnou DelkaHadu překvapivě na 5. Procedura bude vypadat nějak takto:

procedure TForm1.FormCreate(Sender: TObject); begin Had[5]:=point(1,5); Had[4]:=point(2,5); Had[3]:=point(3,5); Had[2]:=point(4,5); Had[1]:=point(5,5); Had[0]:=point(6,5); DelkaHadu:=5; end;

Program můžeme uložit a spustit. Pokud bude vypadat nějak takto, je vše v pořádku:

A u tohoto také dneska skončíme. V příštím díle si ukážeme, jak na vyhlazení hada, aby se neskládal z kostiček.

Download
ZDE si můžete stáhnout dnes vytvořený program a jeho zdrojáky (209 kB)

Odkazy
ZDE můžete navštívit stránku hry Had, a stáhnout si aktuální verzi i se všemi vylepšeními