エンジニア ブログ

メディア教育開発センター　近藤智嗣様からのご依頼で、Flash上でのお絵かきシステム「恐竜はどんな色？」を制作しました。

このページを表示するためには Flash Player が必要です。

var so = new SWFObject(“http://labs.logosware.com/wp-content/blogs.dir/7/files/2007/04/lunchbutton.swf”, “lunchButton”, “470”, “85”, “8”, “#FFFFFF”); so.addParam(“wmode”, “transparent”); so.write(“lunch”);

「恐竜はどんな色？」について

独立行政法人 メディア教育開発センター
研究開発部　近藤智嗣

システムの概要
　博物館に展示されている恐竜の多くは、化石骨格標本として展示されています。肉付きや皮膚の色は、パネルや模型として展示されていることもありますが、基本的には見学者が想像して見ることになります。皮膚は皮膚痕の化石として残っている場合もありますが、色まではわかりません。

　このFlashクライアント「恐竜はどんな色？」は、博物館に展示されている恐竜の皮膚を描くためのものです。ただ描くだけでなく、描いた恐竜が3DCGの恐竜となり動き出します。さらに、博物館の展示室では、化石骨格標本と3DCGが融合され、ミクストリアリティとして見ることができるというシステムです。

　「恐竜はどんな色？」は、博物館の展示室で恐竜の化石骨格を見ながら想像を膨らまして描くこともできますし、家でじっくり時間をかけて描くこともできます。家で描いた絵はサーバーにアップされ、博物館では、ミクストリアリティとして自分の描いた恐竜を見ることができます。
現在、用意されている恐竜は、ステゴサウルスとエウオプロケファルスの2種類ですが、順次増やしていく予定です。

研究の目的

　「恐竜はどんな色？」は、科学博物館での利用を前提としていますので、描かれた恐竜の芸術性よりも科学的な思考を養うことを目的としています。そのため、子どもが描いた絵はそのまま3DCGのテクスチャとして貼り付けられるのではなく、恐竜の皮膚の凹凸や陰影が自動的に付加されます。そして塗った色の境界は自然な感じになるようにしぶきがはねたような効果が自動的に付加されます。

　科学的に皮膚を考えるということは、自然界の物理現象などからある程度の可能性の高低をつけることができる場合もあるということです。たとえばステゴサウルスのような恐竜は、体温を下げるのが不得手であると考えられています。そうならば、太陽光線を吸収しやすい黒っぽい体色の個体よりも、太陽光線を反射しやすい白っぽい体色の個体の方が、オーバーヒートのリスクが低かった可能性があることや、足の速くない動物がストライプ模様をしていると目立ち過ぎるためシマウマ風の模様だと得することがなかったというようなことです。また、生息地の環境も皮膚の色や模様を考えるためのヒントになります。

ただし正解があるわけではないので、あり得なかったような恐竜も自由に描いてもらい人気投票をするようなことも計画しています。

システム構成について

ロゴスウェア株式会社
Flashテクノロジーグループ　山田博之

今回、依頼を受けて制作した「恐竜はどんな色？」のシステムは、

1. クライアント側(Flash)で皮膚を描画
2. データをサーバーに格納
3. 専用アプリケーションで3Dオブジェクトへ模様を貼り付けて表示

という３つのステップを経て、最終的な恐竜のイメージを生成します。
このうち、１と２の部分をロゴスウェアで開発しました。描画用のFlashクライアントをメインに、データを格納するWEBサーバー（PHP、MySQL）の構成で設計されています。

Flash上で最終イメージを生成

　恐竜の3Dモデル貼り付けるテクスチャーは、このツールを用いて手描きした画像だけではなく、ハイライトや凹凸の情報を合成した状態にする必要がありました。

　単に画像の合成までであれば、従来のFlash8ベース(ActionScript2.0)でBitmap合成により画像を処理して対応可能でしたが、さらにJpeg画像に圧縮してからサーバーへ送信する必要があったため、Flex2でActionScript3.0による開発を行いました。

これにより、サーバー側の負荷と、通信量の低減を同時に実現しています。

ActionScrit2.0と3.0が混在した開発

最終的な恐竜画像の出力を考慮し、基本的にはFlex2ベースでの開発を行っていますが、当時、Flash上で自由なインタフェースを開発する環境が整っていなかったため、実験的にFlash8で制作したインタフェースを共存させる手法を導入しました。

主に処理負荷が高い描画部分、保存部分をFlex2上でコーディングし、見た目に関わる部分をFlash8上で作成、ボタン動作に関わる部分をActionScript2.0を用いたクラスで作成します。

これらを連結するために、LocalConnectionを利用した「AvmBridge」クラスを作成し、Flex2とFlash8の動作をリンクさせる仕組みを開発しました。この「AvmBridge」により、Flex2で開発した、ActionScript3.0による速度的、機能的な恩恵を受けつつ、これまで使い慣れた、Flash8を用いたインタフェース設計を行うことが可能となりました。

今後は、ユーザー管理、恐竜管理を実装した後、Papervison3Dによる、Flash上でのリアルタイムプレビューを実装する予定です。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

ロゴスウェア

ロゴスウェア株式会社は、インターネットや情報技術を使って学習に革新的進化をもたらす製品を開発することを目標に、2001年7月に設立されたテクノロジー系ベンチャー企業です。

最新記事 by ロゴスウェア (全て見る)

• Amazon Linux（EC2）と PHPSTORM で Xdebug を行う - 2018年9月26日
• やらないことの合意 - 2018年6月27日
• 卒園アルバムとプロジェクトマネジメント - 2018年3月30日