Difference between revisions of "W4 GUI Creation"

From Ciliz|W4
Line 39: Line 39:
 
W4_RUN(W4_GUI_Demo)
 
W4_RUN(W4_GUI_Demo)
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
Run the program. A spinning cube will appear, as in the figure below:
 +
 +
[[File:GUI 01.png|thumb|center]]
 +
 +
== Virtual screen creation ==
 +
Widgets are placed in two-dimensional [https://en.wikipedia.org/wiki/Cartesian_coordinate_system 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.

Revision as of 12:51, 30 June 2020

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:

GUI 01.png

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.