Úvod FAQ Popis dialogového okna Ukázka definice Značky Popis definice Závěr

TUTORIÁL O PRÁCI S DIALOGY V OFP

Dialogy jsou VELICE užitečným nástrojem v editaci misí a jejich pochopení vám rozšíří možnosti ve tvorbě misí stejně (ne-li víc) jako další nové příkazy od verze 1.75. To mě motivovalo k tomu, abych napsal tento tutoriál. Je to vlastně doplněná forma ruprtova tutoriálu, který můžete najít v jeho OFP EditorHelpu.
Tato stránka je udělaná pro rozlišení 1024*768, takže vám doporučuji na toto rozlišení přepnout (jde to v pohodě i na 15" monioru.)
Nenavštívené odkazy jsou psány modře, tučně, a podtrženě, právě navštívené červeně a tučně a již navštívené bíle, tučně, a podtrženě. Zdrojový kód bude psán tmavomodře neproporcionálním fontem Courier. Názvy souborů nebo jiné důležité věci budou podtrženy, popřípadě zvýrazněny.
Nebudu se tady sáhodlouze rozepisovat o nějakých autorských právech - klidně si cokoli jakkoli změňte, když vám to pomůže. Jenom by mě docela nakrklo, kdyby někdo nahradil moje jméno svým a tohle prodával. Ale to se doufám stejně nestane (koneckonců, kdo by si to koupil, že :).)
Ať už mi budete chtít sdělit cokoliv, pište mi na mail jezuro@post.cz.
Tak se pohodlně usaďte, lekce začíná...

FAQ (Frequently Asked Questions) - Často kladené otázky

Co je to sakra ten dialog?
1) Rozhovor dvou osob
2) Typ rozhraní v programech
-hádejte, o které možnosti se budeme bavit...
Možná vás to překvapí, ale CELÝ interface (tedy uživatelské rozhraní) Operace Flashpoint jsou dialogy. Dialogem může být takřka cokoliv - od nenápadnou černou čárku po tabulku pro vkládání jednotek v editoru. Ano, celý editor misí je také "jenom" soustava různých dialogových oken!

Nějaký okna - na co mi to bude?
Tuhle otázku jsem sám sobě taky položil. A sám si taky dal odpověď - bohužel tu klasickou (na ho*no, abych byl slušný). To mě na nějakou dobu od této tématiky odradilo, ale když se mi dostal do rukou OFP EdiorHelp a ukázková mise k tématu dialogů, uvědomil jsem si, že tohle nemůžu jen tak přejít.
Pomocí dialogů můžete v OFP udělat v podstatě jakékoli okno, od černého čtverečku v pravém dolním rohu monitoru po velící panel koordinovaného útoku několika skupin spojený s rozkazy jednotlivým vojákům. Možností je nepřeberné množství a já vám v tomto tutoriálu ukážu základy, na nichž můžete vybudovat sebesložitější dialog.

Tak jo - co k tomu budu potřebovat?
Pro základní dialogy stačí jenom klasický soubor Description.ext. Dále můžete přidat obrázky a samozřejmě skritpy, soubory Stringtable.csv nebo ty s příponou .sqf. Soubor Description.ext může být umístěn buď ve složce s misí (tam ho program hledá nejdřív) nebo v hlavní složce kampaně (když ho v misi nenajde, hledá tam.) A když není ani tady, podívá se do souboru Resource.bin ve složce OFP\Res\Bin, popřípadě OFP\BIN.

Je těžký se to naučit?
Nic není těžké, jenom zdlouhavé. A pokud pochopíte základy, nebude to ani zdlouhavé ;)

Popis dialogového okna

Než se pustíme do samotného kódu a definic, musíte vědět, jak se různým částem dialogu říká. Tady je jedno dialogové okno, na kterém si jednotlivé části ukážeme:



1 - Rámeček : "Oblemování" dialogového okna.
2 - Pozadí okna : Textura vypňující prostor okna.
3 - Titulek okna : Tabulka pro nadpis okna.
4 - Docela obyčejný text : Prostě text...
5 - Tlačítko : Co k tomu říct?
6 - EditBox : Kolonka, kam může uživatel vpisovat údaje.
7 - Slider (vertikální) : Posuvník neboli jezdec, tento svislý.
8 - Slider (horizontální) : Posuvník neboli jezdec, vodorovný.
9 - ComboBox : Rolovací nabídka pro výběr údajů.
10 - Docela nepovedený obrázek :) : Opravdu nepovedený...

Ukázka definice

Aby jsme to měli pěkně pohromadě, napišu sem hned zdrojový kód k dialogu na obrázku. Hned potom si ho podrobně projdeme.
Tento text je zapsán v souboru Description.ext:

// FONTY

#define FontS		"tahomaB24"
#define FontM 		"tahomaB36"
#define FontHTML 		"courierNewB64"
#define FontHTMLBold 	"courierNewB64"
#define FontMAP 		"courierNewB64"
#define FontMAIN 		"SteelfishB64"
#define FontMAINCZ 		"SteelfishB64CE"
#define FontTITLE 		"SteelfishB128"
#define FontTITLEHalf 	"SteelfishB64"
#define FontBOOK 		"garamond64"
#define FontNOTES 		"AudreysHandI48"

// TYPY OBJEKTŮ

#define CT_STATIC 		0
#define CT_BUTTON		1
#define CT_EDIT		2
#define CT_SLIDER		3
#define CT_COMBO		4

// STYLY OBJEKTŮ - ZAROVNÁNÍ

#define ST_LEFT		0
#define ST_RIGHT		1
#define ST_CENTER		2
#define ST_UP		3
#define ST_DOWN 		4
#define ST_VCENTER 		5

// STYLY OBJEKTŮ - VZHLED

#define ST_SINGLE		0
#define ST_MULTI		16
#define ST_TITLE		32
#define ST_PICTURE		48
#define ST_3D_BORDER	80
#define ST_NO_BORDER	96
#define ST_HUD_BACKGROUND	128
#define ST_WITH_RECT	160
#define ST_SHADOW		256
#define ST_NO_RECT		512


// PŘEDDEFINOVANÉ ČÁSTI DIALOGŮ

// OTEXTUROVANÉ POZADÍ S MALÝM RÁMEČKEM

class RscBackground
{
	type = CT_STATIC
	IDC = -1
	style = ST_3D_BORDER
	x=0.150000;
	y=0.150000;
	w=0.700000;
	h=0.700000;
	text="";
	ColorBackground[]={1,1,1,1};
	ColorText[]={0,0,0,0};
	font="tahomaB24";
	SizeEx = 0
};

// NADPIS OKNA DIALOGU

class RscTitle
{
	type = CT_STATIC
	IDC = -1
	style = ST_TITLE + ST_CENTER;
	x = 0.150000;
	y = 0.164000;
	w = 0.700000;
	h = 0.060000;
	text = "";
	ColorBackground[] = {1,1,0,1};
	ColorText[] = {1,1,1,1};
	font = "tahomaB36";
	SizeEx = "1.0714 * 0.03";
};

// MÍSTO PRO TEXT

class RscGroupBox
{
	type = CT_STATIC
	IDC = -1
	style = ST_NO_BORDER
	text = "";
	ColorBackground[] = {0,0,0,0};
	ColorText[] = {0,0,0,0};
	font = "tahomaB24";
	SizeEx = 0.020000;
};

// HORIZONTÁLNÍ JEZDEC

class RscSliderH
{
	type = CT_SLIDER
	style = ST_RIGHT
	h = 0.028000;
	color[] = {0.080000,0.080000,0.120000,0.750000};
};

// VERTIKÁLNÍ JEZDEC

class RscSliderV
{
	type = CT_SLIDER
	style = ST_LEFT
	w = 0.021000;
	color[] = {0.080000,0.080000,0.120000,0.750000};
};

// TEXT ;)

class RscText
{
	type = CT_STATIC
	IDC = -1
	style = ST_LEFT + ST_MULTI + ST_NO_RECT;
	LineSpacing = 1.000000;
	h = 0.040000;
	ColorBackground[] = {0,0,0,0};
	ColorText[] = {0.080000,0.080000,0.120000,0.750000};
	font = "tahomaB24";
	SizeEx = 0.020000;
};

// OBRÁZEK

class RscPicture
{
	type = CT_STATIC
	IDC = -1
	style = ST_PICTURE
	ColorBackground[] = {0,0,0,0};
	ColorText[] = {1,1,1,1};
	font = "tahomaB24";
	SizeEx = 0
};

// TLAČÍTKO

class RscButton
{
	type = CT_BUTTON
	style = ST_CENTER
	w = 0.110000;
	h = 0.050000;
	ColorText[] = {0.080000,0.080000,0.120000,1};
	font = "tahomaB24";
	SizeEx = 0.020000;
	default = 0
	SoundPush[] = {"ui\ui_ok",0.200000,1};
	SoundClick[] = {"",0.200000,1};
	SoundEscape[] = {"ui\ui_cc",0.200000,1};
};

// COMBOBOX - ROLOVACÍ NABÍDKA

class RscCombo
{
	type = CT_COMBO
	style = ST_LEFT
	h = 0.040000;
	WholeHeight = 0.250000;
	colorSelect[] = {0.350000,0.380000,0.360000,1};
	ColorText[] = {0.080000,0.080000,0.120000,0.750000};
	ColorBackground[] = {0.350000,0.380000,0.360000,0.750000};
	font = "tahomaB24";
	SizeEx = 0.020000;
};

// PROSTOR, DO KTERÉHO MŮŽE UŽIVATEL PSÁT

class RscEdit
{
	type = CT_EDIT
	style = ST_LEFT
	h = 0.032000;
	ColorBackground[] = {0,0,0,0};
	ColorText[] = {0.080000,0.080000,0.120000,0.750000};
	ColorSelection[] = {1,1,1,0.250000};
	font = "tahomaB24";
	SizeEx = 0.020000;
	AutoComplete = "";
};


// TADY ZAČÍNÁ DEFINICE SAMOTNÉHO DIALOGOVÉHO OKNA

class RscTest
{
	IDD = 1000;
	MovingEnable = 1;

	class Controls
	{
		class Background : RscBackground
		{
			x = 0.250000;
			y = 0.250000;
			w = 0.500000;
			h = 0.500000;
		};
		
		class SubBackground : RscGroupBox
		{
			x = 0.270000;
			y = 0.270000;
			w = 0.460000;
			h = 0.460000;
		};

		class Title : RscTitle
		{
			IDC = 1001
			x = 0.350000;
			y = 0.270000;
			w = 0.300000;
			h = 0.060000;
			text = "Nadpis";
		};

		class Kolonka : RscEdit
		{
			IDC = 1002
			x = 0.430000;
			y = 0.400000;
			w = 0.250000;
			text = "";
		};


		class Cudlik : RscButton
		{
			IDC = 1003
			x = 0.300000;
			y = 0.400000;
			w = 0.10000;
			h = 0.035000;
			text = "Tlačítko";
			default = 1;
			action = "CloseDialog 1000";
		};

		class TextTabulka: RscGroupBox
		{
			x = 0.320000;
			y = 0.450000;
			w = 0.360000;
			h = 0.055000;
		};

		class Napis: RscText
		{
			IDC = 1004
			x = 0.320000;
			y = 0.450000;
			w = 0.360000;
			h = 0.100000;
			text = "Toto je ukázkové dialogové okno.";
			sizeEx = "0.022";
		};
		
		class JezdecH : RscSliderH
		{
			IDC = 1005
			x = 0.32;
			y = 0.55;
			w = 0.36;
			h = 0.03;
		};

		class JezdecV : RscSliderV
		{
			IDC = 1006
			x = 0.695;
			y = 0.35;
			w = 0.02;
			h = 0.36;
		};


		class Kombo : RscCombo
		{
			IDC = 1007
			style = ST_TITLE + ST_CENTER;
			x = 0.320000;
			y = 0.620000;
			w = 0.250000;
			h = 0.025000;
			colorSelect[] = {1,1,1,1};
			colorText[] = {0,0,0,0.750000};
			rowHeight = 0.025000;
		};

		class Obrazek : RscPicture
		{
			IDC = 1008
			text = "Obrazek.jpg";
			x = 0.580000;
			y = 0.610000;
			w = 0.107500;
			h = 0.115000;
			colorText[] = {1,1,1,1};
		};
	};
};
Tady si můžete stáhnout ukázkouvou misi - je v ní nadefinován dialog z obrázku výše. Misi zkopírujte do složky Flashpoint\Users\Jméno\missions.

Značky

Určitě nebude od věci si vysvětlit, co jednotlivé "značky" v definici dialogu znamenají ;)

Typy objektů - určuje, jak se bude objekt chovat.
CT_STATIC : Do této kategorie patří objekty, se kterými uživatel nemuže nic dělat - prostě tam jen jsou. Spadají sem například obrázky, titulní rámečky, pozadí okna, texty a další neinteraktivní objekty. CT_BUTTON : Tlačítka. Když je zmáčknete, ozve se ťuknutí a provede nějaká akce. O tom později.
CT_EDIT : Kolonka na text, do které může uživatel sám něco vepsat a potom to třeba zkopírovat. Tohoto typu je třeba v editoru misí kolonka "Při aktivaci" ve spínačích.
CT_SLIDER : Jezdec. Když uživatel ťukne na šipku a drží ji, může s ní jezdit po stupnici. Jezec je třeba "Pravděpodobnost výskytu" při vkládání jednotek v editoru.
CT_COMBO : Vysunovací nabídka, "roletka". Při kliknutí na rámeček se nabídka rozbalí a vy si můžete vybrat z různých položek v ní. Při dalším kliknutí se nabídka zavře a v rámečku zůstane vámi vybraná položka. Použito třeba při výběru hudby ve spínačích.

Styly objektů - zarovnání - určuje, jak bude objekt zarovnán.
ST_LEFT : Běžné zarovnání - vlevo.
ST_RIGHT : Zarovnání vpravo.
ST_CENTER : Zarovnání doprostřed.
ST_UP : Text začíná na horní straně vyhrazeného prostoru.
ST_DOWN : Text začíná na dolní straně vyznačeného prostoru.
ST_VCENTER : Otočí text o 90° - bude psán ve sloupečku od shora dolů.

Styly objektů - vzhled - určuje, jak bude objekt vypadat.
ST_SINGLE : Text, který je takto vypsán, může být napsán jen na jeden řádek.
ST_MULTI : Text, který je takto vypsán, může být napsán na více řádků.
ST_TITLE : Rámeček pro nadpis dialogového okna.
ST_PICTURE : Obrázek.
ST_3D_BORDER : "Oblemování" - 3D okraj dialogového okna.
ST_NO_BORDER : Bez texturové výplně.
ST_HUD_BACKGROUND : Poloprůhledné pozadí.
ST_WITH_RECT : Okolo objektu (např. textu) bude vykreslen rámeček.
ST_SHADOW : Objekt má stín.
ST_NO_RECT : Objekt (např. text) není ohraničen rámečkem.

Parametry - upřesňují podrobné vlastnosti dialogů.
IDD : Identifikační číslo dialogu. Každý dialog musí mít svoje vlastní IDD - na toto číslo se odkazují různé příkazy. Za IDD si můžete dát libovolné číslo, doporučuji ale začít zažitou tisícovkou.
MovingEnable : Nevím, co to dělá - při změně čísla nezaznamenáte změnu. Tak tam nechte tu jedničku...
IDC : V podstatě to samé jako IDD, jen je to identifikátor jednotlivých objektů.
type : Viz Typy objektů.
style : Viz Styly objektů - zarovnání a vzhled.
x : Vzdálenost levého horního rohu objektu od levé strany monitoru.
y : Vzdálenost horní strany objektu od horní strany monitoru.
w :  ířka objektu.
h : Výška objektu.
Pro tyto parametry (x, y, w, h) platí relativní velikost/vzdálenost vůči monitoru. Když tedy chcete, aby byl objekt široký přes půlku monitoru, nastavíte w = 0.5;. Když chcete, aby objekt začínal ve čtvrtině obrazovky shora, nastavíte y = 0.25;.
Pro lepší pochopení přidám vysvětlující obrázek:


Myslím, že v tomhle už máte jasno. Tak jdeme dál...

text : Text, který bude vepsán v objektu (u RscText to bude samozřejmě ten text :)), např. popis tlačítka. U RscPicture je to název obrázku.
font : Font písma použitý pro text. Zde je přehled těchto fontů:


SizeEx : Relativní velikost písma vůči monitoru - například pro písmo o výšce dvacetiny obrazovky bude SizeEx = 0.05;.
size : Absolutní velikost písma - "size = 1;" znamená defaultní (základní) velikost fontu, "size = 1.5;" je o 50% větší než základní atd.
ColorBackground[] : Barva pozadí ve formátu RGB + I (Red, Green, Blue, Intensity) - červená, zelená, modrá, intenzita. Když chcete udělat poloprůhledné pozadí, zadáte za intenzitu 0.5. Defaultní intenzita je 1 - neprůhledná.
ColorText[] : To samé, jako ColorBackground[], ale vztahuje se na barvu písma.
color[] : Prostě barva objektu, formát stejný jako u předchozích dvou.
LineSpacing : Řádkování. "LineSpacing = 1;" je standardní řádkování, "LineSpacing = 1.5;" udělá mezeru mezi řádky o 50% vyšší atd.
default : Používá se u tlačítek. Když je hodnota zadána na 1, je tlačítko označeno už při spuštění dialogu a po stisku klávesy Enter se sepne. Pří hodnotě 0 musíte na tlačítko ťuknout myší.
SoundPush[] : Zvuk, který tlačítko vydá, když na něj ťuknete. První parametr je název zvuku a cesta k němu, druhý je hlasitost (1.0 znamená běžnou hlasitost, ale používá se 0.2) a třetí udává rychlost, jakou je zvuk přehráván (standartně 1.0).
SoundClick[] : U tohoto si nejsem úplně jist. Jak můžete vidět v příkladu, při této události se žádný zvuk nepřehraje.
SoundEscape[] : Tak tady si taky nejsem jist :(. Ten zvuk se občas přehraje - můžete ho slyšet, ale nevím přesně kdy.
WholeHeight : Maximální výška rozbaleného ComboBoxu. Pokud se do této výšky všechny položky nevejdou, bude na pravé straně jezdec, kterým můžete výběr posouvat.
ColorSelect[] : Barva písma vybrané položky ComboBoxu.
AutoComplete : Sem můžete dosadit "Scripting" - Potom se bude nad vepisovaným textem objevovat nabídka editačních příkazů. Jinak můžete nechat prázdné.
action : Příkaz, který se vykoná po stisknutí tlačítka.
RowHeight : Při měnění hodnot jsem nezaznamenal změnu. Tak to nechte, jak to je... :).

Popis definice

Jak vidíte, definice dialogu je v podstatě úplně něco jiného, než s čím jsme se mohli doposud setkat. Některé obecné zásady jsou ale stejné. Tak si je tady uvedeme nejdřív.

Psaní :
U kódů v Operaci Flashpoint je úplně jedno, jestli budete psát všechna písmena malá, VELKÁ, nebo třeba rOzHáZeNá. Jak ale vidíte, ne všechny styly psaní jsou přehledné. Těm, co mají nějaké zkušenosti s programovacími jazyky (obzvláště C nebo C++), bude asi nejvíc vyhovovat psaní příkazů stylem "první písmeno prvního slova malé, první písmena ostatních slov velká (např. colorBackground[]). Většina (nebo alespoň mnoho) příkazů v OFP je totiž tvořeno složením více slov. Já píšu stylem "první písmena všech slov velká, pokud je příkaz pouze jednoslovný, na začátku malé (aby se mi to nepletlo s názvy proměnných nebo objektů, např. ColorBackground[])". Jak jsem ale řekl, je to jenom na vás...
Asi jste si všimli i toho, že se jinak píšou i poznámky. V souboru Description.ext se k tomuto účelu používají dvě lomítka ("//"). Poznámku můžete vložit i za konec kódu v řádku.
Jako vždy, i zde platí, že název třídy nebo jakékoli jiné uživatelem pojmenované části dialogu nesmí obsahovat mezery ani diakritiku.

Formátování textu :
Stejně jako u velikosti písmen, i u formátování textu je vše jenom na vás. Mezi jednotlivými příkazy si můžete vložit kolik mezer chcete. Co ale určitě doporučuji, je používat tabulátor k rozdělení vnořených tříd. Když se vám třeba stane, že někde zapomenete ukončovací středník, bude pro vás daleko jednodušší najít kde. Doporučuji použít další tabuláto vždy, když otevřete nějakou další třídu levou složenou závorkou ("{"). Tady se můžete podívat na rozdíl mezi formátovaným a neformátovaným kódem:
// FORMÁTOVANÝ TEXT

class RscTest
{
	IDD = 1000;
	MovingEnable = 1;

	class Controls
	{
		class Background : RscBackground
		{
			x = 0.250000;
			y = 0.250000;
			w = 0.500000;
			h = 0.500000;
		};
		
		class SubBackground : RscGroupBox
		{
			x = 0.270000;
			y = 0.270000;
			w = 0.460000;
			h = 0.460000;
		};
	};
};

// NEFORMÁTOVANÝ TEXT

class RscTest
{
IDD=1000;
MovingEnable=1;
class Controls
{
class Background:RscBackground
{
x=0.250000;
y=0.250000;
w=0.500000;
h=0.500000;
};
class SubBackground : RscGroupBox
{
x=0.270000;
y=0.270000;
w=0.460000;
h=0.460000;
};
};
};
Tohle byl jenom krátky vyňatek, běžný kód bývá asi 20x delší :)

Konečně samotný zdroj :
Na začátku zdrojového kódu je definice jednotlivých typů písma. Tato definice je v tom případě úplně zbytečná - jak jste si všimli, používám přesný název fontů. Dále jsou definovány typy a styly objektů - tady už vlastní pojmenování smysl rozhodně má, protože se třeba ST_PICTURE asi pamatuje lépe než číslo 48. Nejsou zde uvedeny všechny, ale jen ty, které se běžně používají.
Co to vlastně definice je? V tomto případě je to přiřazení vlastního názvu předem jinak definovaného typu nebo stylu. Vlastně takové "přejmenování".

Potom následuje předdefinování, "nachystání" jednotlivých tříd. Každý objekt v dialogu musí mít definované všechny svoje atributy neboli vlastnosti. Toto předdefinování vás ušetří toho, abyste museli při každém začlenění nějakého objektu do dialogu vždycky definovat všechny jeho vlastnosti. Takhle si můžete předem připravit ty hodnoty, které budete měnit jen velmi zřídka nebo vůbec.

A konečně posední část přípravy dialogu - samotné umísťování objektů. Není k tomu zrovna moc co říct, prostě si představíte, jak velké by mělo okno nebo nějaký objekt být, podle toho ho umístíte na obrazovku a přidáváte další objekty. Nejlepší bude, když si pořádně přečtete vzorový kód výše.

Závěr

Tak a je tu konec. Doufám, že vám tenhle tutoriál aspoň trochu pomohl a vaše hranice v editaci misí se zase posunuly o kus dál. Ještě jsem chtěl přidat výčet a popis skriptiovacích příkazů týkajících se dialogů, ale ty má Ruprt všechny dobře vysvětlené v jeho OFPEditorHelpu, který stejně všichni máme. Jestli něčemu nerozumíte, neváhejte a mailujte jako o život.

Ježuro

Stáhnout tento tutoriál: DOWNLOAD