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()