Clutter::Cookbook(3) Examples of how to use Clutter


This document tries to provide examples on how to perform some common tasks when building an application or a toolkit using the Clutter Perl bindings.

The original version of this document can be found on the Clutter project main site; the online version is aimed at the C API.


Maintaining the aspect ratio when loading a texture

Clutter::Texture already provides a property that maintains the aspect ratio of an image loaded on a texture:

    type: boolean
    default: FALSE

Usually, you just need to set it to TRUE before setting the image data:

  $texture = Clutter::Texture->new();
  $texture->set(keep_aspect_ratio => TRUE);

This will set up a texture with the contents of filename, a width of 100 pixels and an height maintaining the same aspect ratio of the original image.

Clutter::Texture, like the rest of Clutter's actors, is a height-for-width actor. This means that the width will be queried first and then the height set for the given width. If you need to set the height of a texture and maintain the same aspect ratio, you will need to change the texture to be a width-for-height actor instead, by using this property:

    type: Clutter::RequestMode

And then setting the height for the actor:

  $texture = Clutter::Texture->new();
      keep_aspect_ratio => TRUE,
      request_mode      => 'width-for-height',

This will set up a texture with the contents of filename, a height of 100 pixels and a width maintaining the same aspect ratio of the original image.


Inverting animations

If an animation is composed by two identical parts with the latter part ``flipping'' the animation of the former one, e.g.:

                        / scale from 2.0 to 1.0
  begin                /
  +--------------------|--------------------+------> time
  \                                         end
   \ scale from 1.0 to 2.0

Instead of using two different effects or two different behaviours you might simply use the

    type: Clutter::TimelineDirection

Property of Clutter::Timeline. Set up the timeline duration to be the exact half of the overall animation and connect a callback to the


Signal and change the direction property; you will also need to rewind the timeline so that the state is reset at the right frame number:

  $timeline = Clutter::Timeline->new();
  $timeline->set_duration(250); # 250 msecs
  $timeline->signal_connect(completed => sub {

When the timeline is complete it will be restarted from the end and go backward to the start. Any Clutter::Behaviour attached to the timeline will be reversed as well, giving you the desired effect.


Emmanuele Bassi <[email protected]>


Copyright (C) 2008 Intel Corporation