W4 GUI Creation

Scope

Assuming that you have read the article W4 Physics for Dummies.

This page describes how to add [GUI] to the project.

W4 GUI subsystem is based on widgets. A widget is a user interface element that you can specify the appearance and user input processing. For example, "w4 :: gui :: Label" allows you to show some text, and with "w4 :: gui :: Image" you can show a picture from a file. You also can assign a click handler.

Basic Information

Take the following code as the basis:

#include "W4Framework.h"

W4_USE_UNSTRICT_INTERFACE

struct W4_GUI_Demo : public IGame
{
public:
    void onStart() override
    {
        auto cam = Render::getScreenCamera();
        cam->setWorldTranslation({0.f, 0, -25.f});
        cam->setFov(45.f);

        m_shape = Mesh::create::cube({5,5,5});
        m_shape->setMaterialInst(Material::getDefault()->createInstance());

        Render::getRoot()->addChild(m_shape);
    }

    void onUpdate(float dt) override
    {
        m_shape->rotateLocal({dt,dt,dt});
    }

private:
    sptr<Mesh> m_shape;
};

W4_RUN(W4_GUI_Demo)

Run the program. A spinning cube will appear, as in the figure below:

Virtual screen creation

Widgets are placed in two-dimensional Cartesian coordinates on the virtual screen with the origin of coordinates in the upper left corner. With a virtual screen, you do not need to worry about the actual size of the browser window. In the case of changing the nominal size of the viewport (i.e. the browser window), the proportions of the positions and sizes of the widgets remain consistent with the coordinate system of the virtual screen.

To set the resolution of the virtual screen, use the following function:

void w4::gui::setVirtualResolution(const w4::math::size& sz)

For our example, let's set the virtual Full HD resolution in the portrait view by adding the following line to the end of the void onStart () method:

 w4::gui::setVirtualResolution({1080, 1920});

After the virtual screen is set, you can place widgets.

Adding label

Class creation

Create a new class w4::gui::Label. This is a text field that will be used to display the value of Euler angles (which determine the rotation of the cube).

Add declarations:

private:
    sptr<Mesh>           m_shape;
    sptr<gui::Label>     m_eulerLabel;
};

To create a class, use the variadic template function w4::gui::createWidget, adding it to the void onStart () method:

m_eulerLabel = w4::gui::createWidget<Label>(nullptr,        // parent 
                                            "EulerLabel",   // name
                                            ivec2(30, 30)); // position