Resolution independent 2D graphics engine
01 Hello World
Picture of earth and moon application

The source code for these example programs can be downloaded form the downloads page.

This tutorial shows how the infamous 'hello world' program can be created using Quad-Ren. It demonstrates the usage of the qr::render, qr::scene_manager and qr::sprite objects.

First we need to include the Quad-Ren header file.

#include <quad-ren/quad-ren.h>

int main()

To display anything we first need to create an instance of qr::renderer. The constructor takes six arguments, these are:

  • View port aspect ratio

    The aspect ratio of the view port, it is automatically leterboxed to maintain the aspect ratio, regardless of the window size.

  • Projection width

    The width of the view port in relative co-ordinate space.

  • Full screen

    This parameter controls if the application will run full screen or windowed.

  • Window resolution

    The default size of the window in pixels, passing 0 creates a maximised window. This parameter is ignored if full screen is set to true, in which case Quad-Ren will render at the screens maximum resolution.

  • Vsync

    Enables vertical synchronisation to avoid image tearing, only effects full screen mode.

  • Anti-aliasing

    Sets the anti aliasing level, this is automatically reduced or disabled if the set level is not supported by the graphics hardware.

    qr::renderer *renderer_ob = new qr::renderer(qr::vector2d_i(16, 9),
        10.0 ,false, qr::vector2d_i(0, 0), false, 0);

Set the window title.

    renderer_ob -> set_window_title("Hello World! - Quad-Ren");

next we fetch a pointer to the scene manager from the renderer.

    qr::scene_manager *scene_man = renderer_ob ->

We are going to display an image containing the "hello world!" message. First we create a new sprite object for the image. The qr::sprite constructor takes two arguments, a pointer to the scene manager and the total number of frames which the sprite is going to store, in this case only one frame is needed.

    qr::sprite *message = new qr::sprite(scene_man, 1);

The image we want to display is stored in the "media" folder and is in the PNG format. PNG images are supported natively and can be loaded easily with a call to the load_png_frame method. All frames in an animation must be powers of 2, square and the same size.

    message -> load_png_frame(
        "../media/hello_world.png", 1);

Before a sprite can be used it must first be converted, this converts all of the image data into the correct format for the renderer. Be aware that once a sprite has bean converted, it is no longer editable.

    message -> convert_data();

The easiest way to display a sprite is to attach it to the background quad, which is always the same size as the view port, and moves to follow the camera. Lets attach the sprite containing the hello world image to the background quad.

    renderer_ob -> set_bg_sprite(message);

Thats it for set-up, to render the scene the main method of the renderer is called, which passes control to quad-ren's internal event loop. This returns when a qr::quit event is raised or the window is closed.

    renderer_ob -> main();

When the above method returns we need to free the renderer, sprites and any other allocated resources. This can be achieved by calling drop on the renderer, which then instructs the scene manager to delete all registered resources.

    renderer_ob -> drop();