Guide

Simple start with dxGui

Hello world

local HelloWorldConstruction = dxConstruction{ x = 0, y = dxConstruction.screen.h - 30, w = 100, h = 30;
	objects = {
		text = { type = 'text', x = 0, y = 0, w = 100, h = 30, text = 'Hello world', alignX = 'center', alignY = 'center' };
	};
    show = true;
}

This code shows "Hello world" in bottom left corner.

• dxConstruction creates new construction. New construction will be added into screen construction.
• Screen root construction is available in dxConstruction.screen and has width and heigh parameters. You can use it for calculations.

This code hides construction from screen

HelloWorldConstruction:setShow(false)

You can hide only one object in this construction

HelloWorldConstruction.objects.text:setShow(false)

Some parameters are optional here. By default every object will be fit into parent construction.

local HelloWorldConstruction = dxConstruction{ x = 0, y = 0, w = 100, h = 30;
	objects = {
		text = { type = 'text', x = 0, y = 0, text = 'Hello world', alignX = 'center', alignY = 'center' };
	};
}

HelloWorldConstruction:setShow(true)
HelloWorldConstruction:setAlign('left', 'bottom')

Styles

You can create your own gui classes in style table.

local myStyle = {
	text = {
		-- This replaces color and font for all texts 
		font = DxFont( 'fonts/GothaProReg.ttf', 6 );
		color = 0xFFFFFFFF;
	};
	textBigBold = {
		-- This creates new text class with another font
		-- Color will be inherited from parent class
		parent = 'text';
		font = DxFont( 'HUD/fonts/GothaProBol.ttf', 12 );
	};
}

local TestGui = dxConstruction{ x = 0, y = 0, w = 100, h = 60;
	objects = {
		-- white small text
		text = { type = 'text', x = 0, y = 0, h = 30, text = 'White small text', alignX = 'center', alignY = 'center' };
		text2 = { type = 'textBigBold', x = 0, y = 30, h = 30, text = 'White big text', alignX = 'center', alignY = 'center' };
	};

	style = myStyle;
}

Layers

You are able to select layer for your object via p param. Next example will draw black text on white background with red corner.

local ExampleLayers = dxConstruction{ x = 0, y = dxConstruction.screen.h - 30, w = 100, h = 30;
	objects = {
        background = { p = 1, type = 'rectangle', x = 0, y = 0, color = 0xFFFF0000 };
        background2 = { p = 2, type = 'rectangle', x = 2, y = 2, w = 96, h = 26, color = 0xFFFFFFFF };
		text = { type = 'text', x = 0, y = 0, w = 100, text = 'Hello world', alignX = 'center', alignY = 'center' };
	};
	show = true;
}

Animations

-- Create new animation
Anim{
	name = 'updateMoneyText';

	create = function( self, gui )
		return self
	end;

	-- DxGUI calls update function before draw
	update = function( self, gui )
		gui:setText( tostring( localPlayer:getMoney() ) .. '$' )
		return true
	end;
}

local PlayerHUD = dxConstruction{ x = 0, y = 0, w = 100, h = 30;
	objects = {
		moneyText = { type = 'text', x = 0, y = 0, alignX = 'center', alignY = 'center',
			anims = {
				{ 'updateMoneyText' };
			};
		};
	};
	-- You can attach animations for objects and construction
	-- This example uses animation from library
	anims = {
		{ 'softShow', 500 };
	};
	style = myStyle;
	show = false;
}

PlayerHUD:setShow(true)

Simple window

local windowExampleStyle = {
	button = {
		parent = 'button';
		w = 100;
		h = 30;
		objects = {
			background = { p = 1, type = 'rectangle', x = 0, y = 0 };
			text = { type = 'text', x = 0, y = 0, alignX = 'center', alignY = 'center' };
		};
		stats = {
			default = { background = { color = 0xFFFFFFFF } };
			oncursor = { background = { color = 0xFFAA0000 } };
			clicked = { background = { color = 0xFFFF0000 } };
		};
		statusSounds = {
			clicked = 'click.ogg';
		}
	}
}

local SmallWindow = dxConstruction{ x = 0, y = 0, w = 150, h = 70;
	objects = {
        background = { p = 1, type = 'rectangle', x = 0, y = 0, color = 0xAA000000 };
		text = { type = 'text', x = 0, y = 0, h = 30, text = 'Hello world', alignX = 'center', alignY = 'center', color = 0xFFFFFFFF };
		exitButton = { type = 'button', x = 25, y = 30, w = 100, h = 30, text = 'Close' };
	};

    style = windowExampleStyle;

	-- Construct window here
    create = function(self)
		if not dxConstruction.create( self, true ) then
			error('Can not create SmallWindow', 3)
		end

		self.objects.exitButton.onLeftMouseClick = function()
			self:close()
		end;

        return self
    end;

    open = function(self)
        self:setShow(true)
        self:showCursor(true)

        self:setAlign('center', 'center')
    end;

    close = function(self)
        self:setShow(false)
        self:showCursor(false)
    end
}

SmallWindow:open()