Window tutorial

Window

This tutorial will show you how to open a window, and use some functionality provided by the tml::Window class. If you want to start drawing graphics, you should see the Graphics segment of these tutorials.

Creating a window

To open a window we need to first include the Window.h header file.

#include <TML/Window.h>

All the windowing related functions are found in this file.

So, lets create our window.

#include <TML/Window.h>

int main()
{
    tml::Window window(800, 600, "Hello window");
    
    return 0;
}

Here we create a window with the width of 800, height of 600 and the title text of "Hello window".

Updating the window

To prevent the application from just closing after opening, we need to create an event loop. In the event loop we are going to poll the window for events.

#include <TML/Window.h>

int main()
{
    tml::Window window(800, 600, "Hello window");
    
    while(window.IsOpen())
    {
        tml::Event windowEvent{};
        
        while(window.PollEvents(windowEvent))
        {
            if(windowEvent.type == tml::Event::Closed)
                window.Close();
        }
    }
    return 0;
}

Here we are in a while loop as long as the window is open. And as long as the window is open, we are polling the window for events. If the windowEvent.type is tml::Event::Closed, we are going to close the window. The tml::Event::Closed is sent when the user clicks the close button of the window.

And now we should get a window that looks something like this.

The actual visual look of your window is going to differ based on your platform.

Window resizing

You have probably already noticed that the window we just created is not resizeable. This is because windows in TML are by default fixed size. To make the window resizeable, we need to provide the window with some settings.

tml::Window takes settings as an optional fourth argument. To make the window resizeable, we need to provide the window with the tml::Window::Resizeable setting.

So lets change the line where we are constructing our window to this.

tml::Window window(800, 600, "Hello window", tml::Window::Resizeable);

You should now be able to resize the window using your mouse cursor.

You can also resize the window programmatically, by using the windows SetSize() function. Like this.

window.SetSize(400, 400);

Fullscreen windows

You can also create fullscreen windows. This is also done by providing the window the appropriate setting. In this case the setting is tml::Window::Fullscreen.

So lets try that.

#include <TML/Window.h>

int main()
{
    tml::Window window(800, 600, "Hello window", tml::Window::Fullscreen); 
    
    while(window.IsOpen())
    {
        tml::Event windowEvent{};
        
        while(window.PollEvents(windowEvent))
        {
            if(windowEvent.type == tml::Event::Closed)
                window.Close();
            /// Checking if a key was pressed, and if the key was escape.
            else if(windowEvent.type == tml::Event::KeyPressed && windowEvent.key.value == tml::Keyboard::KEY_ESCAPE)
                window.Close();
        }
    }
    return 0;
}

Since a fullscreen window doesn't have a title bar, we need to have some other way of closing the window when we're done with it.

So we should add this code inside the event polling loop, under the first if-statement.

else if(windowEvent.type == tml::Event::KeyPressed && windowEvent.key.value == tml::Keyboard::KEY_ESCAPE)
    window.Close();

This is for checking if a key was pressed and if the key was escape. If the escape key was pressed, then close the window. Now we can exit the application.

Monitors

You can get also get a list of monitors in your system by using the tml::GetMonitors() function. You can then set the window fullscreen on any of those monitors.

Example:

tml::Window window(800, 600, "My fullscreen window");
std::vector<tml::Monitor> monitors = tml::GetMonitors();
window.SetFullscreen(true, monitors.at(0));

Here we open a window and set the window fullscreen on the primary monitor. The first element of the monitors vector is always the primary monitor.

Multiple window settings

To provide the window with multiple settings, we are going to have to use the binary or-operator.

For example, if we want to make our fullscreen window use the resolution of the monitor, instead of the resolution we provided, we would use the tml::Window::Fullscreen setting, as well as the tml::Window::UseMonitorResolution setting.

Like this.

tml::Window window(800, 600, "Hello window", tml::Window::Fullscreen | tml::Window::UseMonitorResolution); 

The window now uses the monitors' resolution as its size, and ignores the size we provided.