Documentation/Programming Tutorials/Creation of a custom GUI class

Language:

English • Русский

Status:

Approved

Go to higher level

Introduction

Here we will be creating a new gui class. We will create a new class that will draw something in it and then place it in main game menu.

Creating a class

To begin we need to create a new class. Create a new class based on EControl class from UISystem.dll assembly. EControl - it is a base class for all gui classes in the engine.

You can create a class based on any other gui clas, for example EButton. Here you can find description for all basic gui classes.

We recommend to use GameCommon.dll assembly for new gui classes. This assembly is designed for various low-level classes. If you want to use another assembly, you will need to register it in the \Data\Definitions\UISystem.config.

So, let's begin.

Make the new file EMyCustomControl.cs at GameCommon.dll assembly with the next code and compile the project.

using System;
using Engine.MathEx;
using Engine.Renderer;
using Engine.UISystem;
 
public class EMyCustomControl : EControl
{
	protected override void OnRenderUI( GuiRenderer renderer )
	{
		base.OnRenderUI( renderer );
 
		Rect screenRectangle = GetScreenRectangle();
 
		//draw debug background
		renderer.AddQuad( screenRectangle, new ColorValue( 0, .5f, 0 ) );
	}
}

Placing controls in one of the game windows

Now let's add our new control in the game main menu.

Open the Resource Editor, find \Data\Gui\MainMenuWindow.gui and go to editing mode.

Window is selected by clicking on the window frame or by selecting it in the Control Hierarchy.

Then using the right mouse button open the context menu and select Create New Control.

Добавление контрола.

In the dialog choose MyCustomControl and click OK.

Adding controls.

You will see a green rectangle. This is our control. We will make control more beautiful by moving it and changing its size.

Adding controls.

Drawing in class

Next code will draw two lines and text in the middle of control.

It is drawn by means of GuiRenderer class. Here you can find its full overview.

using System;
using Engine.MathEx;
using Engine.Renderer;
using Engine.UISystem;
 
public class EMyCustomControl : EControl
{
	protected override void OnRenderUI( GuiRenderer renderer )
	{
		base.OnRenderUI( renderer );
 
		Rect screenRectangle = GetScreenRectangle();
 
		//draw debug background
		renderer.AddQuad( screenRectangle, new ColorValue( 0, .5f, 0 ) );
 
		//draw lines
		renderer.AddLine( screenRectangle.LeftTop, screenRectangle.RightBottom, new ColorValue( 1, 0, 0 ) );
		renderer.AddLine( screenRectangle.RightTop, screenRectangle.LeftBottom, new ColorValue( 1, 0, 0 ) );
 
		//draw text with default font
		Vec2 center = ( screenRectangle.Maximum + screenRectangle.Minimum ) / 2;
		renderer.AddText( "Galaxy is in danger", center, HorizontalAlign.Center, 
			VerticalAlign.Center, new ColorValue( 1, 1, 0 ) );
	}
}

Lines and text.

Adding properties to gui editor

Now we will add a new property in the resource editor. This property will set the text color.

[Serialize] property supports the serialization of following types:

• Simple types: bool, sbyte, byte, short, ushort, char, int, uint, long, ulong, float, double.
• Structures: Vec2, Vec3, Vec4, Bounds, Range, ColorValue, SphereDir, Rect, Vec2i, Vec3i, Recti, Degree, Radian.
• Strings.
• Enumerations.
• Texture type.
• Font type.
• EControl.ScaleValue.

using System;
using Engine.MathEx;
using Engine.Renderer;
using Engine.UISystem;
 
public class EMyCustomControl : EControl
{
	ColorValue textColor = new ColorValue( 1, 1, 0 );
 
	[Serialize]
	public ColorValue TextColor
	{
		get { return textColor; }
		set { textColor = value; }
	}
 
	protected override void OnRenderUI( GuiRenderer renderer )
	{
		base.OnRenderUI( renderer );
 
		Rect screenRectangle = GetScreenRectangle();
 
		//draw debug background
		renderer.AddQuad( screenRectangle, new ColorValue( 0, .5f, 0 ) );
 
		//draw lines
		renderer.AddLine( screenRectangle.LeftTop, screenRectangle.RightBottom, new ColorValue( 1, 0, 0 ) );
		renderer.AddLine( screenRectangle.RightTop, screenRectangle.LeftBottom, new ColorValue( 1, 0, 0 ) );
 
		//draw text with default font
		Vec2 center = ( screenRectangle.Maximum + screenRectangle.Minimum ) / 2;
		renderer.AddText( "Galaxy is in danger", center, HorizontalAlign.Center,
			VerticalAlign.Center, textColor );
	}
}

Select text color.

Support property Control.ColorMultiplier

	protected override void OnRenderUI( GuiRenderer renderer )
	{
		base.OnRenderUI( renderer );
 
		ColorValue color = textColor * GetTotalColorMultiplier();
 
		...
	}