この記事で紹介するのは、複数のビデオを表示できるビデオショーケースのテンプレートです。このビデオショーケースにはビジュアルナビゲーションやビデオチャプタのキャプション機能が付いています。どのような用途にも使えますが、プライベートなビデオコレクションを公開したいという人に特におすすめです。しかも、このテンプレートは簡単にカスタマイズができるようになっています。

この記事では、ビデオショーケースの概要と、そのカスタマイズ方法について解説します。

必要ソフトウェア

この記事では、以下のソフトウェアを使用しています。

Flash CS3 Professional

• 体験版
• 購入

1.「Box2DFlashAS3」とはどのようなものか?

「Box2DFlashAS3」とはhttp://box2dflash.sourceforge.net/にて配布されています、オープンソースの物理演算ライブラリです。
ActionScript3.0で書かれたクラスファイルとなっていますので、flaファイルと同じフォルダにライブラリ一式を入れておけば高性能な物理演算をFlash内で利用することができます。
実際に使用した際のサンプルは先ほど紹介しましたhttp://box2dflash.sourceforge.net/を見ますと確認することができます。
四角形や円に限らず多角形も作ることができたり、モデル同士をジョイントで繋いだりと、魅力的な機能と精度を備えています。

2.実際に制作したサンプル「引越し奉行」

http://www.skt-products.com/contents/hikkoshi.html

私が実際に「Box2DFlashAS3」を使って制作したシンプルなミニゲーム「引越し奉行」をご紹介いたします。
画面の左端から、右にある家に向かって物を投げるという内容です。
ゲーム中に登場する家は「壁・屋根・床・家具」など、全て「Box2DFlashAS3」でできており、物をぶつけることで豪快に崩壊します。その様もかなりリアルで、あたかも本当に柱や屋根があるようです。
こういった、形が崩れていく表現には非常に効果のあるライブラリだと思います。

図：豪快に崩壊します。

また、ゲーム開始時に見える投石器も、「Box2DFlashAS3」で出来ています。
アーム右側の重りの重さでアームを回転させ、遠心力で物を上空に飛ばしています。こういった使い方にも十分使える優れたライブラリです。
ロープの部分にはジョイント機能を使用しており、アームに付けられた重りは振り子運動のように揺れます。

図：モデルごとに重さを設定できるので、投石器のような仕組みも再現できる。ロープの部分にはジョイントが使われている

もう一箇所、タイトル画面の開始ボタンを押した際、文字がバラバラになって落下しますが、この文字にも
「Box2DFlashAS3」を利用しています。文字と同じ形の「Box2DFlashAS3」モデル（以後、「モデル」）を用意し、落下してこないように「スリープ状態」にしておきます。
「スリープ」は「Box2DFlashAS3」の機能の１つで、他のモデルと触れるまで動かずに留まる機能です。
開始ボタンをクリックした際にスリープを解除して落下させています。

図：開始ボタンをクリックすると、文字のモデルのスリープが解除され、一斉に落下する

3.Box2DFlashAS3のサンプルを学ぶ

これからBox2DFlashAS3の組み込みを簡単にご紹介いたしますが、残念ながら今の段階では組み込めばすぐに、お手軽に使える、という状態にはなっていません。
サンプルとなるflaファイルが２つ入っていますので、この中身を見て利用するための手順を学ぶ必要があります。

サンプル「HelloWorld.fla」は、このライブラリのもっとも基本的な機能に絞って作られています。
flaファイルの中身はライブラリにムービークリップが３つあるだけで、あとはドキュメントクラスが設定されているだけです。
ドキュメントクラス「HelloWorld.as」にモデル生成などの情報が入っていますので、まずはこれを見て仕組みを理解すると良いです。（下図）

図：「HelloWorld.fla」　モデルの作成のみの基本的な機能

もう一つのflaファイル「PhysTest.fla」は「Box2DFlashAS3」が持っている機能のほとんどを利用していますので、こちらを学ぶと、このライブラリの一通りの機能を学ぶことができます。こちらはドキュメントクラスに「Main.as」を設定しています。（下図）

図：「PhysTest.fla」　ジョイント、モーター、マウス操作など一通りの機能を使用したサンプル

4.コンテンツの目的にあわせてライブラリを充実させる

サンプルのゲームを作るには、Box2DFlashAS3にいくつかの機能を加え、カスタマイズする必要があります。
このカスタマイズは少し時間のかかる作業ですが、ここで作っておくと、今後の制作にも十分役に立ちます。

上記のサンプル「HelloWorld.fla」「PhysTest.fla」は、swfファイルを実行した段階から物理演算が行なわれていますが、コンテンツの内容によっては常に必要ではなく、要所要所で利用するケースがあります。
今回私が制作した「引越し奉行」も同様に、swfを実行した時点ではライブラリを利用していません。
このような場合はドキュメントクラスを利用せずに、必要な時にflash側のアクションスクリプトから実行するようにします。

例えば、サンプルの「HelloWorld.fla」をドキュメントクラス無しで利用する場合は、プロパティパネルにある項目「ドキュメントクラス」を消し、「Box2DFlashAS3」を利用したいタイムラインに次のように書きます。

var _Box2D:HelloWorld = new HelloWorld();

  

  this.addChild(_Box2D);

次に、その時の状況に応じて作成するモデルを変更する場合や、ユーザーの操作によってモデルが追加、削除される場合があります。
こういう状況のため、簡単にモデルを生成する命令集をクラス内に作成しました。
flaファイル内のアクションスクリプトからモデルを生成したり、削除しています。

例えば「HelloWorld.fla」の場合、ボックス型のモデルを作っているのは「HelloWorld.as」内の次のスクリプトになります。(ソースの64行目～72行目）

boxDef = new b2BoxDef();

boxDef.extents.Set(Math.random() * 15 + 10, Math.random() * 15 + 10);

boxDef.density = 1.0;

boxDef.friction = 0.5;

boxDef.restitution = 0.2;

bodyDef.AddShape(boxDef);

bodyDef.userData = new PhysBox();

bodyDef.userData.width = boxDef.extents.x * 2; 

bodyDef.userData.height = boxDef.extents.y * 2;

ここの箇所をpublic functionとしてas内に定義しておけば、flaドキュメント内のアクションスクリプトからメソッドを実行してボックスのモデルを生成することができます。引き数でボックスの座標や大きさを指定できるようにしておけばとても便利です。

これで一通りの機能を揃えますと、実際に制作することができます。
制作で行なう作業は「モデルの配置」がほとんどですので、ここまで出来ましたら完成したも同然です。

5.使用の感想

制作期間は1ヶ月ほどでしたが、作業全体で考えますと「Box2DFlashAS3」の使い方を調べ、カスタマイズする方に時間を費やした感じです。ゲームの制作に取り掛かると、比較的短期間で作ることができましたので、今後大いに活用できそうです。

2月現在のバージョン（1.4.3）では特定のモデルの参照を取得することが少し難しいため、この関連の機能が強化されると更に便利になりそうです。

また、今回は触れておりませんが、ジョイントやモーターなど便利な機能も多いので、一度お試し頂くことをお勧めします。

著者について