This page has been translated automatically.
Видеоуроки
Interface
Essentials
Advanced
Подсказки и советы
Программирование на C#
Рендеринг
Принципы работы
Свойства (properties)
Компонентная Система
Рендер
Физика
Редактор UnigineEditor
Обзор интерфейса
Работа с ассетами
Настройки и предпочтения
Работа с проектами
Настройка параметров узла
Setting Up Materials
Setting Up Properties
Освещение
Landscape Tool
Sandworm
Использование инструментов редактора для конкретных задач
Extending Editor Functionality
Встроенные объекты
Nodes
Objects
Effects
Decals
Light Sources
Geodetics
World Objects
Sound Objects
Pathfinding Objects
Players
Программирование
Основы
Настройка среды разработки
Примеры использования
UnigineScript
C++
C#
Унифицированный язык шейдеров UUSL
File Formats
Rebuilding the Engine Tools
GUI
Двойная точность координат
API
Containers
Common Functionality
Controls-Related Classes
Engine-Related Classes
Filesystem Functionality
GUI-Related Classes
Math Functionality
Node-Related Classes
Objects-Related Classes
Networking Functionality
Pathfinding-Related Classes
Physics-Related Classes
Plugins-Related Classes
IG Plugin
CIGIConnector Plugin
Rendering-Related Classes
Работа с контентом
Оптимизация контента
Материалы
Art Samples
Tutorials
Внимание! Эта версия документация УСТАРЕЛА, поскольку относится к более ранней версии SDK! Пожалуйста, переключитесь на самую актуальную документацию для последней версии SDK.
Внимание! Эта версия документации описывает устаревшую версию SDK, которая больше не поддерживается! Пожалуйста, обновитесь до последней версии SDK.

Usage Example

This article describes a simple example of how to create Unigine native GUI by using User interface (UI) files.

Create UI Files#

Use a plain text editor to create a *.ui file that describes the GUI of your project. Then describe all of the required containers, widgets and their layout:

Source code (XML)
<?xml version="1.0" encoding="utf-8"?>
<ui version="1.0">
	<window name="window" export="1" width="250" height="150" sizeable="1" enabled="1" space_y="10">
		<text align="left">Language</text>
		<align align="left">
			<label><text>Choose the language:</text></label>
			<checkbox name="radiobutton_0" export="1" checked="1">
				<text>English</text>
			</checkbox>
			<checkbox name="radiobutton_1" export="1">
				<attach>radiobutton_0</attach>
				<text>Chinese</text>
			</checkbox>
		</align>
		<button>
			<text>Apply</text>
			<callback type="clicked">translation</callback>
		</button>
	</window>
</ui>

To get access to the widgets from the script, you must specify the name parameter and set the export parameter to1 for each of them.

To set the callback for the widget, simply define callback as a child tag and set the required value for itstype parameter. Also the callback function must be defined in the script.

Create Dictionary#

To support several languages in your project, create a single dictionary in the project folder that contains all necessary translations. For example, you can create English-Chinese dictionary, which is required to switch from English to Chinese and vice versa:

Source code (XML)
<?xml version="1.0" encoding="utf-8"?>
<dictionary version="1.00">
	<msg>
		<src>Apply</src>
		<en>Apply</en>
		<ch>申请</ch>
	</msg>
	<msg>
		<src>Choose the language:</src>
		<en>Choose the language:</en>
		<ch>选择语言:</ch>
	</msg>
	<msg>
		<src>Chinese</src>
		<en>Chinese</en>
		<ch>汉语</ch>
	</msg>
	<msg>
		<src>English</src>
		<en>English</en>
		<ch>English</ch>
	</msg>
	<msg>
		<src>Language</src>
		<en>Language</en>
		<ch>语</ch>
	</msg>
</dictionary>
Notice
To be shown correctly, the Chinese font file (for example, font_ch.ttf) should be added to the project folder and loaded when it is necessary.

Add Script Logic#

When the *.ui file is created, the GUI is described, the dictionary is prepared and all the necessary fonts are added to the project, you need to add a script logic.

  1. Declare the root widget, its children (if necessary) and User interface as global variables in the script:
    Source code (UnigineScript)
    WidgetWindow window; // root widget
    WidgetCheckBox radiobutton_0; // the first radiobutton
    WidgetCheckBox radiobutton_1; // the second radiobutton
    UserInterface ui; // user interface
    Notice
    The name of each variable must match the name of the widget defined in the UI file.
  2. Load User interface by using the UserInterface() constructor:
    Source code (UnigineScript)
    int init(){
    
        ui = new UserInterface(engine.getGui(),"my_project/my_project.ui");
    	
    	return 1;
    }
  3. Create an object of the GUI class and add the root widget to be rendered in the GUI interface via Gui::addChild():
    Source code (UnigineScript)
    int init(){
    
        ui = new UserInterface(engine.getGui(),"my_project/my_project.ui");
    	
    	Gui gui = engine.getGui();
    	gui.addChild(window,GUI_ALIGN_CENTER);
    	
    	return 1;
    }
    To set the root widget alignment via scripting, define one of the GUI_ALIGN_* pre-defined variables as the second argument of the addChild() function.
  4. Define callback function that loads the chosen dictionary via engine.gui.addDictionary() (if necessary) and applies the language changes via updateWidgets():
    Source code (UnigineScript)
    void translation(){
    	if (radiobutton_0.isChecked()){
    		// load English-Chinese dictionary and specify <en> tag as the source of translation
    		engine.gui.addDictionary("my_project/locale/my_project.locale","en"); 
    		// set the default font
    		engine.gui.setFont("core/gui/font.ttf");
    	}
    	else {
    		// load English-Chinese dictionary and specify <ch> tag as the source of translation
    		engine.gui.addDictionary("my_project/locale/my_project.locale","ch");
    		// set the Chinese font for correct characters displaying
    		engine.gui.setFont("my_project/gui/font_ch.ttf"); 
    	}
    	ui.updateWidgets();
    }

The script logic described in the example enables switching between English and Chinese:

The first radiobutton was checked.
The second radiobutton was checked.
Last update: 09.04.2021
Build: ()