物理エンジンライブラリ「APE」を試す!

2008年6月7日(土)
喜安 亮介

初期設定と設計

 まずは今回作成するサンプルflaファイル一式をこちらからダウンロードしてください(http://www.thinkit.co.jp/images/article/91/1/9111.zip)(9111.zip/1.01 MB)。

 flaファイルを展開すると上から「Actions」「Click」「Title」「Container」「Background」という5枚のレイヤーが見えると思います。「Actions」という名前のレイヤー第1フレーム目にAS3のコードを記述していきます。

 それでは、図2の(1)のソースコードをご覧ください。このサンプルで必要になるAPEクラスをimportさせAPEクラスが使えるようにしておきます。APEのクラスライブラリを読み込むimport文は次のように書きます。

import org.cove.ape.*;

 行末にあるアスタリスク "*"で指定することにより、org/cova/apeパッケージ内のクラスファイルをすべてをロードすることができます。

 まず準備段階としてムービー全体のフレームレートと表示クオリティを設定します。ステージのフレームレート(1秒あたりのフレーム数)は30に設定します。レンダリングクオリティ(表示クオリティ)は普通で設定します。

stage.frameRate = 30; 
stage.quality = "medium"; 
APEngine.init(1/2);

 APEngine.initメソッドは、引数なしで呼び出すと0.25(1/4)という値がデフォルトで設定されます。引数に少ない値を指定すればするほどパーティクル(Particle)の落下スピードが減速されます。一般的には1/3~1/4ぐらいの数値を設定するのが適当ですが、好みに合わせて変更してください。ちなみにこのサンプルでは1/2に設定してあります。

APEngine.container = container_mc;
APEngine.addForce(new VectorForce( false, 0, 2 ) );
APEngine.damping = .97;

 APEのコンテナを設定するcontainerプロパティに、container_mcというインスタンスを代入します。defaultGroupという変数名でGroupオブジェクトを生成しておきます。

var defaultGroup:Group = new Group();
defaultGroup.collideInternal = true;

イベントリスナーの登録と追加

 ソースコードの方は前後してしまいますが、サンプルの右下に見える「CLICK」という文字の再生開始ボタンのコードを記述していきます。

 それでは、図2の(6)のソースコードをご覧ください。再生開始ボタンのインスタンス名をclick_mcに設定します。このオブジェクトに対してイベントリスナーの登録をしていきます。最初の3行はaddEventListener()メソッドにより、それぞれのマウスイベントで発生するイベントハンドラを設定します。1つ目のイベントリスナーはMOUSE_DOWNというマウスイベントにより、startという関数を呼び出すようにしています。2つ目と3つ目はROLL_OUT、ROLL_OVERというそれぞれのマウスイベントで、bhtという関数を呼び出します。

click_mc.addEventListener(MouseEvent.MOUSE_DOWN, start );
click_mc.addEventListener(MouseEvent.ROLL_OUT, bht );
click_mc.addEventListener(MouseEvent.ROLL_OVER, bht );

 buttunModeプロパティをtrueにすることで、インスタンスにロールオーバーしたら指カーソルに変化するよう設定します。alphaプロパティでは、インスタンスにマウスが触れていないときの透明度を0.6に設定しインスタンスを少し透かした状態にします。

click_mc.buttonMode = true; 
click_mc.alpha = .6;

 それでは、図2の(5)のソースコードをご覧ください。ここではマウスイベントで実行される関数を定義しています。最初に定義する関数はrunという名前で、APEngine.step()メソッドとAPEngine.paint()メソッドを実行するという処理を書きます。

function run(evt:Event):void {
APEngine.step();
APEngine.paint(); }

 start関数はイベントリスナーの登録と,click_mcインスタンスが画面から見えなくなるようにvisbleプロパティにfalseの値を設定しておきます。

function start(e:Event) {
addEventListener(Event.ENTER_FRAME, run);
click_mc.visible = false; }

 bht関数hはマウスのロールアウト時とロールオーバー時でインスタンスの透明度を変化させるように定義しています。MouseEventオブジェクトのtypeプロパティがrollOutの場合には、click_mcインスタンスの透明度を0.6に設定します(.6という表記法は、0.6の省略表記です)。

function bht(e:MouseEvent) {
if (e.type == 'rollOut') {
click_mc.alpha = .6

 そしてtypeプロパティがrollOverの場合は透明度を1に設定します。

} else if(e.type == 'rollOver'){
click_mc.alpha = 1
}   }

 マウスのクリックによりstartという関数が呼ばれ、その処理の中のイベントリスナーでrunという関数が呼ばれているのがわかると思います。そのrunという関数がstep()メソッドとpaint()メソッドを実行することによりそれぞれのパーティクルが画面に描画されるという仕組みです。bht関数はマウスイベントにより、click_mcインスタンスのalpa値をコントロールしています。

有限会社タグパンダ
Web制作会社、有限会社タグパンダの代表取締役。同社ではディレクター兼デザイナーとして、Webクリエイティブ全般の指揮をとっている。技術書籍や記事の執筆活動も行っており、著書に「スタイルシートワークショップ CSS+XHTMLによるWeb標準実践ガイド」(ソフトバンククリエイティブ)がある。有限会社タグパンダ: http://www.tagpanda.co.jp/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています