Quartz Composerにどっぷり!
Quartz Composer入門

今回のテーマ

今回のテーマは、Mac OS X 10.4 ( Tiger ) で新たに追加された「 Quartz Composer 」です。

推奨環境 この解説は、以下の環境を前提に作成し、動作確認等を行っています。ご確認ください。

改版履歴

アウトライン
Quartz Composerとは?

Mac OS X 10.4 の開発ツールとして追加された Quartz Composer。Mac OS X のグラフィックエンジンである Quartz を駆使してグラフィックやアニメーションを作成するのは、それなりに手間がかかりますが、この Quartz Composer を使うと簡単に 2D / 3D のアニメーションを作ることが出来るようになります。このアニメーションは、単体で動くアニメーションとしても動きますし、Cocoa などのアプリケーションを使って外部からアニメーションの内容を制御することもできます。

Mac OS X 10.4 に付属の Xcode Tools をインストールすると、/Developer/Application/Graphics Tools/ に Quartz Composer もインストールされます。

同時に、Quartz Comporser で作成したサンプルもインストールされます。/Developer/Examples/Quartz Composer/ にサンプルがあります。「 .qtz 」という拡張子のファイルが Quartz Comporser で作成されたファイルです。これを Quartz Composer で開いてみると、どんなアニメーションが作れるのかに触れることが出来るでしょう。

これが、Quartz Composer の画面です。手前のウィンドウがビューワで、生成された画像を表示するところです。奥のウィンドウがエディタで、パッチ ( Patch ) と呼ばれる長方形のモジュールを繋いでいって画像の生成や動きなどの制御方法を決めていきます。

基本の基本:画像データを表示

最初は、基本の基本として画像ファイルを画面に表示させてみましょう。Quartz Composer を起動したら、「 File > New 」メニューで新規ドキュメントを作成します。

まず、Image Importer という名前のパッチをエディタの左側にあるパッチライブラリ ( Patch Library ) からドラッグしてエディタに配置します ( ダブルクリックでも可 )。Image Importer パッチは、画像ファイルを読み込むためのパッチです。このパッチは「 Generator 」というカテゴリに属していますが、この Generator に属しているパッチは、画像などのデータの生成をする役割を持ちます。

補足:パッチは沢山あるために探すのがちょっと大変ですが、そんなときは、ツールバーの「 Search in Libraries 」のところに文字列を入力すると、パッチライブラリの中が絞り込まれて見つけやすくなります。

配置した Image Importer パッチを選択してツールバーの Inspector ボタンをクリックすると Inspector ウィンドウが開きます。このウィンドウを使ってパッチの各種設定を行います。ウィンドウ上部のメニューから「 Settings 」を選択すると、「 Import From File... 」という画像ファイルを選択するためのボタンが表示されますので、これをクリックして読み込む画像ファイルを選択してください。

これで、Image Importer パッチの「 Image ○ 」のところから指定した画像データが出力されるようになります。

次に、この画像データを画面に表示させるようにします。「 Billboard 」というパッチをパッチライブラリからドラッグしてエディタに配置します。この Billboard というパッチは、画像を表示するためのパッチです。このパッチは「 Renderer 」というカテゴリに属していますが、このRendererに属しているパッチが実際に画面への描画を行う役割を持ちます。

Image Importer パッチの「 Image ○ 」でマウスボタンを押し、Billboardパッチの「 ○ Image 」までマウスをドラッグすると、この2つのパッチをつなぐことが出来ます。

パッチの右側にある丸はデータの出力を行うポートで、左側にある丸はデータの入力を行うポートです。ここをつなぐことで、データの受け渡しができます。Image Importer パッチがファイルから読み込んだ画像データを Billboard バッチへ渡すことで画面に画像を表示することが出来る訳です。この状態でビューワを見ると以下のように画像が表示されることがわかります。

Billboard パッチが画像を描画する際の背景との合成方法を Blending で決めることができます。このサンプルで使用しているカエルの画像はアルファチャンネル ( 透明度 ) を持っている画像です。Blending を Over にすると、アルファチャンネルを考慮した描画になります。

補足:Quartz Composer のエディタウィンドウに画像ファイルをドロップするだけでも、Image Importer パッチが作成されます。

首振りアニメーション

次は、簡単なアニメーションを作ります。Billboard パッチには、X Position や Y Position といった様々な属性があります。この値は Inspector から固定の値を指定できますが、他のパッチから入力することも可能です。Billboard パッチの Rotation は、画像の回転角度 ( 単位 : 度 ) を指定するところですが、ここに Controller の LFO ( Low Frequency Oscillation ) パッチを使ってカエルの首振りアニメを実現します。

LFO パッチは、様々な波形を出力するものです。この図では、Type が sin になっているので、sin 波を出力します。つまり、時間とともに出力される値が大きくなったり小さくなったりするわけです。Period が周期 ( 単位 : 秒 ) ですので、大きな値にすると緩やかな sin 波になります。Phase が初期の角度 ( 単位 : 度 )、Amplitude が振幅で値の変化する範囲を決めます。Offset が全体に加える値です。式にすると以下のような感じになります。th が 0 からどんどん大きな値になっていきます。

Result = Amplitude * sin( th / Period + Phase ) + Offset

計算結果は、Result に出力されますので、それを Billboard の Rotation に入力することで、カエルの表示角度が 1 秒周期で、-30 度から +30 度の範囲で変わります。

パーティクルでド派手な演出

次に、パーティクル ( 粒子 ) を使った派手な演出をしてみましょう。まずは、Sumbeams というパッチを配置します。この Sunbeams パッチは、太陽が輝いているような画像データを出力するものです。次に、Particle System というパッチを配置し、それぞれの Image ポートをつなぎます。そして、Particle System の Blending を Over にし、アルファチャンネルを有効にします。

すると、カエルの周りに太陽のような輝く物体が沢山飛び交うはずです。Particle System というパッチは、入力された画像を沢山飛ばすという派手なパッチなのです。

Particle System の [ X, Y, Z ] Position は、パーティクル群の中心位置、[ X, Y, Z ] [ Min, Max ] Velocity は各パーティクルの初速度の範囲を決めるものです。各パーティクルを作るときに指定した範囲の中でランダムな値にしてばらつかせています。X Min Velocity = 1.0, X Max Velocity = 2.0 にすると、パーティクルの初速度が 1.0 〜 2.0 の間でランダムに決まります。[ Min, Max ] Size はパーティクルのサイズの範囲を決めるもの。Lifetime は、生み出したパーティクルの寿命で、寿命になると画面から消えて、また新たなパーティクルが発生します。Size Delta は、パーティクルのサイズを徐々に大きくしたり、小さくしたりするための値。プラスにすると時間が経つにつれて大きくなります。Opacity Delta は、透明度の変化量。マイナスにしておくと、徐々に薄くなっていきます。Attraction は中心に向かう力、Gravity は、重力の強さで、プラスで下向きの重力、マイナスで上向きの重力になります。

さて、このパーティクル、カエルの後ろに飛ばしたいですよね。画面に描画を行う Renderer のパッチには前後関係があります。この前後関係を変えるにはパッチのコンテキストメニューを使います。Control キー + クリックか右クリックしてコンテキストメニューを表示させ、Rendering Layer からどのレイヤにそのパッチを表示させるかを選びます。数字が小さいほど奥の方になります。Layer 1 にすることで、パーティクルを後ろに回すことが出来ます。各パッチの右上の部分に数字が書かれていますが、これがパッチのレイヤーの番号になります。

補足:パーティクルの数を変えるには、Inspector の Settings を使います。Start Up Delay の値は、指定された個数のパーティクルを何秒かけて生成するかの時間の指定です。つまり、 0.0 秒に指定すると、一気にすべてのパーティクルが飛び出てきます。長くすると、ちょっとずつパーティクルが生成されますので、Lifetime の時間とうまく調整することで、常に一定の量のパーティクルを画面に表示させたり、逆に発生と消滅を繰り返すようにもできます。

サンプル
カエルの画像
Quartz Composerのファイル
背景を塗りましょ

ビューワの背景がチェック模様になっているということは、まだ何も描画されていない状態ということなので、背景を塗りつぶすことにしましょう。RendererカテゴリのClearパッチを使うと、指定した色で全体を塗りつぶすことができます。Clear Color のところをクリックして色を指定します。これもレイヤーを一番奥 ( Layer 1 ) にしてください。

単色ではなくグラデーションを描画するパッチもあります。Renderer カテゴリの Gradient パッチを使います。これもレイヤーを一番奥の方にしてください。

Direction で、グラデーションの方向を横 ( Horizontal ) か縦 ( = Vertical ) かを決め、[ Start, Middle, End ] Color で、始点/中心点/終点での色を指定します。

立体的な首振り : 3Dアニメーション

Billboard パッチは、X, Y 座標のみの指定しかできませんので、2D の表示になります。これを高機能にしたのが Sprite パッチで、使い方は似ていますが、Z 座標の指定が追加されていて 3D の表示が可能になります。Image Importer から画像を取り込み、LFO から Y Rotation を制御、Blending は Over にします。すると、立体的な首振りアニメーションが行われるようになります。

サンプル
カエルの画像
Quartz Composerのファイル
座標系について

グラフィックを扱う上では座標系の話を抜きにはできません。Quartz Composer では、ウィンドウの中心が原点で、右に向かって X 座標、上に向かって Y 座標、手前に向かって Z 座標が伸びています。Z = 0.0 のところでは、ウィンドウの右端が X = +1.0、左端が X = -1.0 になっていて、Y 座標については、画像表示エリアの縦横の比率によって変化します。もし、画像表示エリアが正方形ならば、 -1.0 〜 +1.0 の範囲が表示されることになります。Billboard の Width や Sprite の Width や Height は表示する際の大きさの指定で、今回のサンプルでは 1 を指定していました。つまり、ウィンドウの幅は 2 あるので、ちょうど横方向には半分の領域を使うサイズに表示されています。

ただし、Z = 0.0 以外のところでは変わってきます。Z が正の数の場合、つまり、手前にある場合は大きく表示されますので、X 座標や Y 座標の範囲は狭くなりますし、Z 座標が負の数の場合は、広くなります。

補足 : Billboard パッチでは、画像の大きさを決めるのは、Width ( 幅 ) だけで高さの指定はできません。これは、入力された画像のアスペクト比によって決まるからです。

カエルの大量発生

Particle System パッチを使って、カエルが沢山画面の中を左から右に泳ぐような感じにしてみます。Particle System の image を Image Importer から読み込みます。まず、カエルを画面の右から左に向かって移動するようにするために、中心位置を右端にします ( X Position = 1.0 )。

Particle System を使うと、その中心から吹き出すようになりますが、画面の右端からのいろんなところから発生させるようにしたいと思います。LFO パッチの Type を Random にして、Particle System の Y Position にいれます。こうすると、Particle System の中心の Y 座標がランダムに移動するので、カエルの発生位置がぱらつきます。

後は、Particle System から飛び出してくるカエルの速度等は左側に流れるように調整したら完了です。サンプルでは、同じやり方で画面の下から泡が浮かび上がっていく絵を付け加えています。

サンプル
Quartz Composerのファイル
泡の画像
Particle System の使い道

Particle System は、設定する項目が沢山ありますので様々な使い方が考えられますが、どんな使い道があるのかのサンプルを紹介します。

1 つ目は、宇宙旅行風です。X 軸方向と Y 軸方向の速度を同じにして、Z 軸方向で手前に移動させるようにすると以下のようになります。

Quartz Composerのファイル

2 つ目は、噴水風です。Y軸方向を上向きのみにして、重力を強めに設定すると噴水のようになります。また、Lifetime を長めに、Set Up Delay を短めにすることで、一気に吹き出して、しばらく止まって、というのを繰り返すようにできます。

Quartz Composerのファイル

3 つ目は、煙風です。Y軸方向を上向きのみにして重力をなくすと煙のようになります。Lifetime と Set Up Delay は同じくらいの長さにしておくと、常に煙が出続けます。

Quartz Composerのファイル

クイックリファレンス