Система Flash UI - История изменений

DCamer в 16:17, 9 марта 2012

2012-03-09T16:17:36Z

← Предыдущая		Версия 16:17, 9 марта 2012
Строка 3:		Строка 3:

	Для этого каждый Flash-ассет может быть определена в XML-файле со всеми событиями, функциями и переменными, которые должны быть доступны в потоковом графе.		Для этого каждый Flash-ассет может быть определена в XML-файле со всеми событиями, функциями и переменными, которые должны быть доступны в потоковом графе.
		+
		+	== Дочерние статьи ==
		+	* [[Система Flash UI/Функции\|Список функций LUA]]
		+	* [[Система Flash UI/Элементы UI как динамические текстуры\|Элементы UI как динамические текстуры]]
		+	* [[Система Flash UI/Локализация UI\|Локализация UI]]
		+	* [[Система Flash UI/Использование FlashUI из CPP\|Использование FlashUI из CPP]]

	== Настройка XML для Flash-ассета ==		== Настройка XML для Flash-ассета ==
Строка 176:		Строка 182:
	{{BTS\|console_cursor\|desc=0=отключено, 1=включено, если включено аппаратный курсор мыши также будет отображён на консоле. Только если включено '''cursor'''.}}		{{BTS\|console_cursor\|desc=0=отключено, 1=включено, если включено аппаратный курсор мыши также будет отображён на консоле. Только если включено '''cursor'''.}}

-	{{BTS\|layer\|desc=от 0 до ''n'', определяет, в каком порядке будут отображены элементы (~~if more than one flash element is visible~~).}}	+	{{BTS\|layer\|desc=от 0 до ''n'', определяет, в каком порядке будут отображены элементы (если отображен более чем один Flash-элемент).}}

	{{BTS\|alpha\|desc=от 0 до 1, альфа фона Flash-элемента.}}		{{BTS\|alpha\|desc=от 0 до 1, альфа фона Flash-элемента.}}

Alex626 в 12:31, 9 марта 2012

2012-03-09T12:31:19Z

← Предыдущая		Версия 12:31, 9 марта 2012
Строка 1:		Строка 1:
-	[[Категория:~~CryEngine 3 Free SDK~~:~~Игра~~]]	+	[[Категория:CryEngine_3_Free_SDK:Пользовательский_интерфейс]]
	Система '''UI Action''' позволяет настраивать и контролировать любые Flash-элементы UI в потоковом графе.		Система '''UI Action''' позволяет настраивать и контролировать любые Flash-элементы UI в потоковом графе.

Alex626 в 12:30, 9 марта 2012

2012-03-09T12:30:58Z

← Предыдущая		Версия 12:30, 9 марта 2012
Строка 1:		Строка 1:
		+	[[Категория:CryEngine 3 Free SDK:Игра]]
	Система '''UI Action''' позволяет настраивать и контролировать любые Flash-элементы UI в потоковом графе.		Система '''UI Action''' позволяет настраивать и контролировать любые Flash-элементы UI в потоковом графе.

DCamer в 17:02, 29 февраля 2012

2012-02-29T17:02:45Z

Внесённые изменения

DCamer в 14:55, 29 февраля 2012

2012-02-29T14:55:47Z

← Предыдущая		Версия 14:55, 29 февраля 2012
Строка 268:		Строка 268:
	[[Файл:fg_fadeElement.png]]		[[Файл:fg_fadeElement.png]]

-	== UI ~~Flowgraphs~~ ==	+	== Потоковые графы UI ==
		+	Чтобы создать новый потоковый граф для UI, просто откройте '''Flow Graph''' и выберите '''File->New UI Action…'''.

-	~~To create a new flowgraph for the~~ UI ~~just open the Flowgraph and choose “File~~-~~>New UI Action…”.~~	+	Все действия UI размещены в потоковых графах, а все XML-файлы должны быть сохранены в '''Game/Libs/UI/UIActions'''.
-		+
-	~~All UI Actions are located in the Flow Graphs list and the xml files needs to be saved in~~ '''Game/Libs/UI/UIActions'''.	+

	[[Файл:FG_workspace.png]]		[[Файл:FG_workspace.png]]

-	Note: All UI ~~actions are saved separate from the level~~. ~~They need to be saved via~~ File->Save ~~in the flowgraph menu~~. Make sure to save every time you did some changes\!	+	{{Примечания\|Все действия UI сохранены отдельно от уровня. Их нужно сохранять через '''File->Save''' в меню потокового графа. '''Убедитесь, что сохраняете каждый раз после изменений!'''}}

	You find all flownodes for the UI in the component list unter UI.		You find all flownodes for the UI in the component list unter UI.

DCamer в 19:53, 27 февраля 2012

2012-02-27T19:53:11Z

← Предыдущая		Версия 19:53, 27 февраля 2012
Строка 4:		Строка 4:

	== Настройка XML для Flash-ассета ==		== Настройка XML для Flash-ассета ==
-	Система '''Flash UI''' считывает все XML-файлы, которые находятся в'''Game/Libs/UI/UIElements''' и создаёт потоковые ноды для контролирования Flash-ассетов.	+	Система '''Flash UI''' считывает все XML-файлы, которые находятся в '''Game/Libs/UI/UIElements''' и создаёт потоковые ноды для контролирования Flash-ассетов.

	Откройте существующий XML-файл или создайте новый, чтобы определить новый '''UIElement'''.		Откройте существующий XML-файл или создайте новый, чтобы определить новый '''UIElement'''.

DCamer в 17:35, 27 февраля 2012

2012-02-27T17:35:44Z

Внесённые изменения

DCamer в 22:21, 26 февраля 2012

2012-02-26T22:21:27Z

Внесённые изменения

DCamer: Новая страница: «The UI Action system allows to setup and control any flash UI element in the flowgraph. For this purpose every flash asset can be defined in an xml file with all ev...»

2012-02-26T19:35:32Z

Новая страница: «The UI Action system allows to setup and control any flash UI element in the flowgraph. For this purpose every flash asset can be defined in an xml file with all ev...»

Новая страница

The UI Action system allows to setup and control any flash UI element in the flowgraph.

For this purpose every flash asset can be defined in an xml file with all events, functions and variables that need to be available in the flowgraph.

== Setup xml for a flash asset ==

The Flash UI system reads all xml files that are located in '''Game/Libs/UI/UIElements''' and creates flownodes to control the flash assets.

Open an existing xml file or create a new one to define a new UIElement.

Basic definition of a flash asset:

{{Код|заголовок=hud.xml|блок=<source lang="xml"><UIElements name="HudElements"> 


<UIElement name="HUD">


<GFx file="HUD.gfx" layer="1">

<Constraints>
<Align mode="dynamic" halign="center" valign="center" scale="1" max="1" />
</Constraints>
</GFx>


<functions>
</functions>


<events>
</events>


<variables>
</variables>


<arrays>
</arrays>


<movieclips>
</movieclips>

</UIElement>


<UIElement name="LoadingScreen">
...
</UIElement>

</UIElements>
</source>}}

=== Functions ===

Functions that should be callable from outside need to be defined in the *<functions>* list of the element.

e.g. an actionscript function to set a health bar:

{{Код|заголовок=ActionScript|блок=<source lang="actionscript">function setHealth(iHealth:Number):void
{
// set a health bar
}
</source>}}

can be defined in the xml as:

{{Код|заголовок=hud.xml|блок=<source lang="xml"><function name="SetHealth" funcname="setHealth">
<param name="Health" desc="Players current health"/>
</function>
</source>}}

where *name=”…”* is the name of the function that is visible in the flowgraph and *funcname=”…”* is the real name of the function in the actionscript.

The system will automatically create a node for the flowgraph to call this function.

[[Файл:Function_node.png]]

*Note:* It is also possible to define functions that are not in the rootspace of the flash file, e.g.

{{Код|заголовок=hud.xml|блок=<source lang="xml"><function name="SetHealth" funcname="myHealthMc.mysubmc.setHealth">
<param name="Health" desc="Players current health"/>
</function>
</source>}}

=== Events ===

To get notification about some user interaction, e.g. if a button was pressed, events can be defined in the *<events>* list. To trigger an event in your actionscript code you have to call _fscommand(“commandString”)_. These _fscommands_ are handled by the engine.

e.g. in the onPress function of a button you can call _fscommand_ with the string “onMyButtonPressed” and some arguments.

{{Код|заголовок=ActionScript|блок=<source lang="actionscript">myButton.onPress = function()
{
var args:Array = new Array();
args.push(argument1);
args.push(argument2);
fscommand(“onMyButtonPressed”, args);
}
</source>}}

To handle this event add a *<event>* tag into the <events> list
{{Код|заголовок=hud.xml|блок=<source lang="xml"><event name="OnButton1" fscommand="onMyButtonPressed">
<param name="Arg1" desc="Some argument"/>
<param name="Arg2" desc="Another argument"/>
</event>
</source>}}

The system creates a node to handle this event.

[[Файл:Event_node.png]]

=== Variables, Arrays and MovieClips ===

Access to an array or a variable can also be defined in the xml file.

Just add a *<variable>* tag into the *<variables>* list, an *<array>* tag to the *<arrays>* list or a *<movieclip>* tag into the *<movieclips>* list.

{{Код|заголовок=hud.xml|блок=<source lang="xml"><variables>
<variable name="SomeVariable" varname="someVariable"/>
<variable name="TextField" varname="_root.myTextfield.text"/>
</variables>

<arrays>
<array name="SomeArray" varname="_root.mc2.someArray"/>
</arrays>

<movieclips>
<movieclip name="MovieClip1" instancename="_root.Mc1"/>
<movieclip name="MovieClip2" instancename="_root.Mc1.subMc"/>
</movieclips>
</source>}}

To get or set a variable select the variable in the dropdown list of the *UI:Variable:Var* or *UI:Variable:Array* flownode.

[[Файл:Variable_nodes.png]]
*Note:* Arrays are comma separated strings.

You can also access your defined MovieClips via FlowNodes.

[[Файл:Mc_gotoandplay.png]]

== Display / hide and setup gfx files ==

To show or hide a flash asset use the *UI:Display:Display* node. You can select the element in the dropdown list.

To setup the behavior and the constraints use the *UI:Display:Constraints* and *UI:Display:Config* nodes.

[[Файл:Config_node.png]]
[[Файл:Constraints_node.png]]

It is also possible to initialize all of those settings in the xml file.

{{Код|заголовок=hud.xml|блок=<source lang="xml"><UIElement name="HUD" mouseevents="1" keyevents="1" cursor="1" console_mouse="1" console_cursor="1">
<GFx file="HUD.gfx" layer="1" alpha="0.5">

<Constraints>
<Align mode="fullscreen" />






</Constraints>
</GFx>
…
</UIElement>
</source>}}

=== Configuration ===

* *mouseevents*
0=disable, 1=enabled, if enabled mouse events are send to the flash file (mouse-clicks and movement)

* *cursor*
0=disabled, 1=enabled, if enabled a hardware mouse cursor is visible while the flash element is displayed.

* *keyevents*
0=disabled, 1=enabled, if enabled keyevents are send to the flash element.

* *console_mouse*
0=disabled, 1=enabled, if enabled the controller works as a mouse on console (thumb-stick). Only if *mouseevents* are enabled.

* *console_cursor*
0=diabled, 1=enabled, if enabled a hardware cursor is displayed on console as well. Only if *cursor* is enabled.

* *layer*
0 to n, defines in which order the elements are displayed (if more than one flash element is visible).

* *alpha*
0 to 1, the background alpha of the flash element.

=== Constraints ===

There are three modes to place the asset on the screen:

* *"fixed"*
in this mode the flash asset is displayed on a fixed position, defined by a top, left, width and height value.

* *"dynamic"*
this mode aligns the asset on anchors. For vertical alignment it is possible to align the flash element at the "top", "center" or "bottom", for horizontal alignment to the "left", "center" or "right" of the screen.

If *scale* is "1" it tries to scale the element to the maximum without deforming the aspect ratio. If *scale* is set to "0", it will not scale the flash asset.
If *max* is set to "1" it will maximize the element so that 100% of the screen is covered (this might cause that some parts of the element are cut-off) otherwise the asset will fit to the screen with maybe some uncovered space on the left/right or top/bottom side.

* *"fullscreen"*
In this mode the viewport of the asset is same as the render viewport. If *scale* is set to "1" the asset is stretched to fit the complete screen, otherwise not.

== Instantiation of Elements ==

Each node has the *"InstanceID"* port. With this instance ID you can have more than one instance of any flash asset. The *"InstanceID"* port of any UI node defines which instance should be affected by this node. If you use a node with a new instance ID it will automaticly create the new instance of this flash asset. If you use "-1" as the instance ID, the node will affect all instances of this flash element.

== Helpful functions ==

There are some special *actionscript* functions that are automatically called by the UI system.

These functions can be defined in the rootspace of your *actionscript* and don’t need to be defined in the xml file.

=== Функции ===
==== Actionscript functions ====

*cry_onSetup*
If this function exists, it is called once the gfx/swf file is loaded by the engine.
<source lang="actionscript">function cry_onSetup(_bIsConsole) // true if running on console, false for pc</source>

*cry_onShow*
If this function exists, it is called once the gfx/swf file is shown up.
<source lang="actionscript">function cry_onShow()</source>

*cry_onHide*
If this function exists, it is called once the gfx/swf file is hided.
<source lang="actionscript">function cry_onHide()</source>

*cry_onResize*
If this function exists, it is called once the resolution of the engine has changed.
<source lang="actionscript">function cry_onResize(_intWidth, _intHeight)</source>

*cry_onBack*
If this function exists, it is called once if the player pressed the back button on the controller.
<source lang="actionscript">function cry_onBack()</source>

*cry_requestHide*
This function is called if the "RequestHide" port was triggered on the UI:Display:Display Node (or via code / lua). Can be used to fade out elements.
<source lang="actionscript">function cry_requestHide()</source>

==== fscommands ====

There are some fscommand strings that can be called within your actionscript.

*cry_hideElement*
If a fscommand is executed with this string, it tells the UI System to hide the element.
<source lang="actionscript">fscommand("cry_hideElement");</source>

=== Example ===

Fade UI Element in / out.

<source lang="actionscript">// create onEnterFrame function to fade-in the root element (if UI Element is shown up)
function cry_onShow()
{
_root._alpha = 0;
onEnterFrame = function()
{
if (_root._alpha < 100)
{
_root._alpha++;
}
else
{
// clear onEnterFrame function
onEnterFrame = function() {};
}
}
}

// create onEnterFrame function to fade-out the root element (if requested by UI System)
function cry_requestHide()
{
onEnterFrame = function()
{
if (_root._alpha > 0)
{
_root._alpha--;
}
else
{
// clear onEnterFrame function and notify UI-System that this element does not need to be drawn anymore.
onEnterFrame = function() {};
fscommand("cry_hideElement");
}
}
}
</source>
You can now fade in/out the element by triggering the port show / requestHide if the UI:Display:Display Node.

[[Файл:fg_fadeElement.png]]

== UI Flowgraphs ==

To create a new flowgraph for the UI just open the *Flowgraph* and choose “File->New UI Action…”.

All UI Actions are located in the *Flow Graphs* list and the xml files needs to be saved in '''Game/Libs/UI/UIActions'''.

[[Файл:FG_workspace.png]]

*Note:* All UI actions are saved separate from the level. They need to be saved via File->Save in the flowgraph menu. *Make sure to save every time you did some changes\!*

You find all flownodes for the UI in the component list unter UI.

[[Файл:FGfg_components.png]]

=== Example ===

This example shows a simple flowgraph to show/hide a loading screen and setup the level name and a progress value.

[[Файл:example_fg.png]]

The associated element is defined in '''Game/Libs/UI/UIElements/Menus.xml''':

{{Код|заголовок=Menus.xml|блок=<source lang="xml"><UIElement name="LoadingScreen">

<GFx file="LoadingScreen.gfx" layer="2" alpha="1" >
<Constraints>
<Align mode="fullscreen" />
</Constraints>
</GFx>

<variables>
<variable name="Percent" varname="LoadingPanel.Percent.text"/>
<variable name="LevelName" varname="LoadingPanel.Level.text"/>
</variables>

</UIElement>
</source>}}

== UI Actions ==

Sometimes it is helpful to trigger a complex UI Action several times without rebuilding the whole graph every time.

For this purpose it is possible to create UI Actions with a *“UI:Action:Start”* and *“*{*}UI:Action:End{*}*”* node. You will find this nodes under UI:Action.

The Name of the Flowgraph defines the Name of the Action.

The *“*{*}UI:Action:Control{*}*”* node allows to start an UI Action and receive notifications if an action was started or stopped.

It is also possible to pass several arguments to an UIAction via the *“*{*}UI:Action:Control{*}*”* node.

As an example the UIAction to display a USM Video file:

[[Файл:ui_action.png]]

This action can be used e.g. to play a movie on enter a proximity trigger:

[[Файл:ui_action_2.png]]

*Note:* You can control any UI action from any flowgraph. If you disable an UI Action, the complete flowgraph will be disabled (not only the Nodes between the start and end node). It is also possible to use the *StartAction* and *EndAction* notes more than once per flowgraph. Every *StartAction* node will be triggered if the action is started and the first reached *EndAction* node will trigger the OnEnd port of any *UI:Action:Control* node which is listening to the flowgraph.

== LUA and Flash UI System ==

It is also possible to control the UI System via LUA.
[List of LUA functions|Flash UI LUA functions]

=== Example ===

<source lang="lua">// Display UI Element
UIAction.ShowElement("MyUIElement", 0);

// Call actionscript
UIAction.CallFunction("MyUIElement", 0, "Foo", "paramStr1", "paramStr2", 123, 12.3, false);

// set variable
UIAction.SetVariable("MyUIElement", 0, "MyVariable", 23);

// get variable
local var1 = UIAction.GetVariable("MyUIElement", 0, "MyVariable");
if (var1) then
Log("Var1: %d", var1);
end

// set array
local newValues = {
"val1",
"val2",
"val3",
};
UIAction.SetArray("MyUIElement", 0, "MyArray", newValues);

// get array
local values = UIAction.GetArray("MyUIElement", 0, "MyArray");
local value;
if (values) then
for i,value in ipairs(values) do
Log("Value: %s", value);
end
end
</source>

== Communication between C+\+ and UI flowgraph ==

You can just create your own custom flownodes and use them to trigger/receive UI functions/events. More information in the [Creating a New Flow Node] topic.

== UI Event System ==

The UI System comes with an event system which can also used to communicate between C+\+ and the UI flowgraph.

The event system provides an easy way to define function and event nodes and handle them in C++.

=== Function nodes ===

Function nodes are available to all flowgraphs and provide an easy way to call C+\+ code.

Create a new .h file and name it *UIFunctions.h*

{{Код|заголовок=UIFunctions.h|блок=<source lang="cpp">#ifndef __UIFunctions_H__
#define __UIFunctions_H__

#include <IFlashUI.h>

class CUIFunctions : public IUIEventListener
{
public:
CUIFunctions();
~CUIFunctions();

// IUIEventListener
virtual void OnEvent( const SUIEvent& event );
// ~IUIEventListener

private:
SUIEventHelper<CUIFunctions> m_Dispatcher;
IUIEventSystem* m_pGameEvents;

void OnFoo( const SUIEvent& event );
void OnBar( const SUIEvent& event );
};

#endif
</source>}}

Create a new .cpp file and name it *UIFunctions.cpp*

{{Код|заголовок=UIFunctions.cpp|блок=<source lang="cpp">#include "StdAfx.h"
#include "UIFunctions.h"

CUIFunctions::CUIFunctions()
: m_pGameEvents(NULL)
{
if (gEnv->pFlashUI)
{
// create a new event system called "Game"
// type is eEST_UI_TO_SYSTEM; nodes for this event system will be found unter UI:Functions
// register as event listener to the event system
m_pGameEvents = gEnv->pFlashUI->CreateEventSystem( "Game", IUIEventSystem::eEST_UI_TO_SYSTEM );
m_pGameEvents->RegisterListener( this );

// create a new function description for "Foo"
SUIEventDesc fooDesc( "Foo", "Foo", "Call a function named foo" );
// add a parameter description "Arg1" to the function description
fooDesc.Params.push_back( SUIParameterDesc( "Arg1", "Arg1", "First Arg" ) );
// register the function description to the dispatcher
m_Dispatcher.RegisterEvent( m_pGameEvents, fooDesc, &CUIFunctions::OnFoo );

// create another function description for "Bar"
SUIEventDesc barDesc( "Bar", "Bar", "Call a function named bar" );
barDesc.Params.push_back( SUIParameterDesc( "Arg1", "Arg1", "First Arg" ) );
barDesc.Params.push_back( SUIParameterDesc( "Arg2", "Arg2", "Second Arg" ) );
m_Dispatcher.RegisterEvent( m_pGameEvents, barDesc, &CUIFunctions::OnBar );
}
}

CUIFunctions::~CUIFunctions()
{
if ( m_pGameEvents )
m_pGameEvents->UnregisterListener( this );
}

void CUIFunctions::OnEvent( const SUIEvent& event )
{
// use the dispatcher to dipatch the event to the correct function
m_Dispatcher.Dispatch( this, event );
}

void CUIFunctions::OnFoo( const SUIEvent& event )
{
int arg1 = 0;

if ( !event.args.GetArg(0, arg1) )
{
CryLogAlways("Foo: argument 1 has wrong type (should be int)");
return;
}

// do something
}

void CUIFunctions::OnBar( const SUIEvent& event )
{
bool arg1 = false;
float arg2 = 0;

if ( !event.args.GetArg(0, arg1) )
{
CryLogAlways("Foo: argument 1 has wrong type (should be bool)");
return;
}

if ( !event.args.GetArg(1, arg2) )
{
CryLogAlways("Foo: argument 2 has wrong type (should be float)");
return;
}

// do something
}
</source>}}

Open *Game.h*, forward declare your class and add a private member to CGame:

{{Код|заголовок=Game.h|блок=<source lang="cpp">#ifndef __GAME_H__
#define __GAME_H__

...

class CUIFunctions;

...

class CGame :
public IGame, public IGameFrameworkListener, public ILevelSystemListener
{
...

private:
...

CUIFunctions * m_pUIFunctions;

...
}

...
</source>}}

Open *Game.cpp* init m_pUIFunctions with NULL in the construcor, delete m_pUIFunctions in the deconstructor and create the CUIFunction object at the end of the init function.

{{Код|заголовок=Game.cpp|блок=<source lang="cpp">#include "StdAfx.h"
#include "Game.h"

...
#include "UIFunctions.h"

CGame::CGame()
...
{
m_pUIFunctions = NULL;
}

CGame::~CGame()
{
...
SAFE_DELETE(m_pUIFunctions);
}

...

bool CGame::Init(IGameFramework *pFramework)
{
...
if (m_ pUIFunctions == NULL)
{
m_ pUIFunctions = new CUIFunctions();
}
}
...
</source>}}
{*}Note:* It is important to create all your classes that uses the UI event system before CompleteInit is called.

This code will result in two new nodes *UI:Functions:Game:Foo* and *UI:Functions:Game:Bar*.

[[Файл:evsys_fct_node.png]]

If the port “send” is triggered, it will call the C+\+ code in UIFunctions.cpp.

=== Event Nodes ===

Event nodes are very similar to Function nodes. They are used to send events from C+\+ to any UI flowgraph.
e.g. you can create a singleton class to call events from everywhere of your code.

Create a .h file UIGameEvents.h

{{Код|заголовок=UIGameEvents.h|блок=<source lang="cpp">#ifndef __UIGameEvents_H__
#define __UIGameEvents_H__

#include <IFlashUI.h>

class CUIGameEvents
{
public:
// access to instance
static CUIGameEvents* GetInstance()
{
static CUIGameEvents inst;
return &inst;
}

// init the game events
void Init();

// events
enum EUIGameEvents
{
eUIGE_FooEvent,
eUIGE_BarEvent,
};
void SendEvent( EUIGameEvents event, const SUIArguments& args );

private:
CUIGameEvents() : m_pGameEvents(NULL) {};
~CUIGameEvents() {};

IUIEventSystem* m_pGameEvents;
std::map<EUIGameEvents, uint> m_EventMap;
};

#endif
</source>}}

Create a .cpp file UIGameEvents.cpp

{{Код|заголовок=UIGameEvents.cpp|блок=<source lang="cpp">#include "StdAfx.h"
#include "UIGameEvents.h"

void CUIGameEvents::Init()
{
if (gEnv->pFlashUI)
{
// create a new event system called "Game"
// type is eEST_SYSTEM_TO_UI; nodes for this event system will be found unter UI:Events
m_pGameEvents = gEnv->pFlashUI->CreateEventSystem( "Game", IUIEventSystem::eEST_SYSTEM_TO_UI );

// create a new event description for "Foo"
SUIEventDesc fooDesc( "Foo", "Foo", "Event named foo" );
// add a parameter description "Arg1" to the event description
fooDesc.Params.push_back( SUIParameterDesc( "Arg1", "Arg1", "First Arg" ) );
// register the event to the event system and associate the id with the event enum
m_EventMap[ eUIGE_FooEvent ] = m_pGameEvents->RegisterEvent( fooDesc );

// create another event description for "Bar"
SUIEventDesc barDesc( "Bar", "Bar", "Event named bar" );
barDesc.Params.push_back( SUIParameterDesc( "Arg1", "Arg1", "First Arg" ) );
barDesc.Params.push_back( SUIParameterDesc( "Arg2", "Arg2", "Second Arg" ) );
m_EventMap[ eUIGE_BarEvent ] = m_pGameEvents->RegisterEvent( barDesc );
}
}

void CUIGameEvents::SendEvent( EUIGameEvents event, const SUIArguments& args )
{
// send the event
if (m_pGameEvents)
{
m_pGameEvents->SendEvent( SUIEvent(m_EventMap[event], args) );
}
}
</source>}}

Open Game.cpp, include «'''UIGameEvents.h'''» and add to the end of the Init function:

{{Код|заголовок=Game.cpp|блок=<source lang="cpp">bool CGame::Init(IGameFramework *pFramework)
{
...
CUIGameEvents::GetInstance()->Init();
}
...
</source>}}

The code will create two nodes for the flowgraph:

[[Файл:evsys_evt_node.png]]

Now you can call from everywhere in your code the SendEvent function to trigger e.g. the '''UI:Events:Game:Bar''' Node:

<source lang="cpp">int arg1 = 12;
float arg2 = 1.4f;

SUIArguments args;
args.AddArgument( arg1 );
args.AddArgument( arg2 );

CUIGameEvents::GetInstance()->SendEvent( CUIGameEvents::eUIGE_BarEvent, args );
</source>