1. Getting Started

1.1. Create example.vala

Copy/paste this into a file called example.vala:

using Clutter;

void
main(string[] args)
{
    Clutter.init(ref args);
    
    var hello = new Text() {
        text = "Ohaider, world!",
        x = 50,
        y = 50 };
    
    var stage = new Stage() {
        width = 400,
        height = 150 };
    
    stage.add_child(hello);
    
    stage.show();
    stage.destroy.connect(Clutter.main_quit);
    Clutter.main();
}

1.2. Compile and run

Run this in a terminal:

valac --pkg clutter-1.0 example.vala
./example

1.3. Result

Voilà!

1.4. Discussion

We first called

Clutter.init(ref args);

You have to do this before running any Clutter code. Clutter.init() will also parse any Clutter-specific flags (e.g. --clutter-debug=all) that you pass to your program.

We then created a Clutter.Text and set its .text, .x, and .y properties:

var hello = new Text() {
    text = "Ohaider, world!",
    x = 50,
    y = 50 };

The x and y properties set the position of the Clutter.Text. In Clutter, the point (0, 0) is the top-left of the stage, not the bottom-left, because y-coordinates in Clutter are reversed relative to mathematics.

We then created a Clutter.Stage, and put the Clutter.Text inside it:

var stage = new Stage() {
    width = 400,
    height = 150 };

stage.add_child(hello);

A Clutter.Stage represents the main window of a Clutter program; any program you write will use one.

Finally, we showed the stage and ran Clutter.main():

stage.show();
stage.destroy.connect(Clutter.main_quit);
Clutter.main();

The second line is needed so that Clutter will quit when the window is closed. Clutter.main() basically runs a big loop which checks for events and updates the stage when things happen.

In summary, you'll always want these 4 lines in your Clutter program:

Clutter.init(ref args);
stage.show();
stage.destroy.connect(Clutter.main_quit);
Clutter.main();