Gjs + Clutter Samples | Create some simple Actors

I have spend endless hours playing Nibbles (Gnome Snake Game) in the past, but this game now feels old. So I decided to write my own Snake Game for Gnome. I will use Clutter and JavaScript which is quite powerful combination, and I though to make some samples here, to enable people to write their own Gnome Apps.

I’ll make some tutorials, in image/text processing, event driven programming, effects / animations / timelines, drawing with Cairo and Cogl and finally a simple Graph Scene.

I am not comfortable with Gjs and GObject Introspection (just started today), but would be trivial to learn. Anyway I will start with the basics, create a Stage, add some Clutter Actors on it and do some Events handling. I won’t use any GTK as I don’t like it or need it, but you can easily use it after you learn how Gjs works.

Create a Stage

First of all we need to create a stage.

#!/usr/bin/gjs

//Import Clutter
const Clutter = imports.gi.Clutter;

//Initialize Clutter
Clutter.init (null, 0);

//Create some colors from Clutter Color pattern
let stage_bg_color = Clutter.Color.get_static(Clutter.StaticColor.CHOCOLATE_DARK);
//OR Create a custom color
//let black = new Clutter.Color( {red:0, blue:0, green:0, alpha:255} );

//Some constants for sizes
const Size_Large = 500;

//Create Stage
let stage = Clutter.Stage.get_default();

//Some Stage Options
stage.set_size(Size_Large, Size_Large);
stage.title = "Stage Example";
stage.set_background_color(stage_bg_color);

//Show the Stage
stage.show();

//Add destroy event on exit
stage.connect("destroy", Clutter.main_quit);

//Start the main Loop
Clutter.main();

And this is the result

There isn’t much to explain as the code is straight forward :)

Add an Actor

Previous was just an empty stage.  So we need to add some objects on it.

#!/usr/bin/gjs

//Import Clutter
const Clutter = imports.gi.Clutter;

//Initialize Clutter
Clutter.init (null, 0);

//Create some colors from Clutter Color pattern
let stage_bg_color = Clutter.Color.get_static(Clutter.StaticColor.CHOCOLATE_DARK);
let actor_bg_color_plum = Clutter.Color.get_static(Clutter.StaticColor.PLUM);

//Some constants for sizes
const Size_Large = 500;
const Size_Small = 200;

//Create a custom color
//let black = new Clutter.Color( {red:0, blue:0, green:0, alpha:255} );

//Create Stage
let stage = Clutter.Stage.get_default();

//Some Stage Options
stage.set_size(Size_Large, Size_Large);
stage.title = "Actor Example";
stage.set_background_color(stage_bg_color);

//Create an actor
let myactor = new Clutter.Actor();

//Actor Options
myactor.set_position(20,20);
myactor.set_size(Size_Small,Size_Small);
myactor.set_background_color(actor_bg_color_plum);

//Add Actor to the Stage
stage.add_child(myactor);

//Show the Stage
stage.show();

//Add destroy event on exit
stage.connect("destroy", Clutter.main_quit);

//Start the main Loop
Clutter.main();

And this is the result

This is a stupid way to add objects, normally we add them inside some containers, but I will explain this in a next tutorial, because we have many layouts, depending our needs.

Add some event handling

The only event we had so far was the stage.connect("destroy", Clutter.main_quit); which kills the application when we press Mutter’s ‘x’ button. Next I will create another event for pressing mouse over our plum actor.

#!/usr/bin/gjs

//Import Clutter
const Clutter = imports.gi.Clutter;

//Initialize Clutter
Clutter.init (null, 0);

//Create some colors from Clutter Color pattern
let stage_bg_color = Clutter.Color.get_static(Clutter.StaticColor.CHOCOLATE_DARK);
let actor_bg_color_plum = Clutter.Color.get_static(Clutter.StaticColor.PLUM);

//Some constants for sizes
const Size_Large = 500;
const Size_Small = 200;

//Create a custom color
//let black = new Clutter.Color( {red:0, blue:0, green:0, alpha:255} );

//Create Stage
let stage = Clutter.Stage.get_default();

//Some Stage Options
stage.set_size(Size_Large, Size_Large);
stage.title = "Event Example";
stage.set_background_color(stage_bg_color);

//Create an actor
let myactor = new Clutter.Actor();

//Actor Options
myactor.set_position(20,20);
myactor.set_size(Size_Small,Size_Small);
myactor.set_background_color(actor_bg_color_plum);

//Set actore re-active on events
myactor.set_reactive(true);

//Make a dummy function that prints a message in terminal 
function print_something(stage, event) {	
	print("Hello World!");
}

//Add the signal to our actor
myactor.connect("button-press-event", print_something);

//Add Actor to the Stage
stage.add_child(myactor);

//Show the Stage
stage.show();

//Add destroy event on exit
stage.connect("destroy", Clutter.main_quit);

//Start the main Loop
Clutter.main();

And this is the result

When we click on Plum box, we get an impressive (ha!) message in our terminal. Notice that we have to set our actors reactive in order to response in events. Many times we forget that and we are wondering why our events don’t work. Also the print something function doesn’t accept parameters so we have to pass there an array if we need some extra variables.

Documentation

Hmm, there isn’t any of it. You can check the C API of Clutter  which is really amazing, and read the G Object Introspection tutorials, which explain how to translate C to JavaScript, not in very comprehensive way thought. You can also Google for PyGtk tutorials which are similar to JavaScript.

Next time I”ll show how to add text, images and make some layouts. Of course this isn’t meant to be a complete guide, but something you can start fast with.

Gjs and Clutter is the bright future of Gnome!