Main Content

レゴブロックが降ってきて文字になります

三遊亭円楽師匠

先日の大阪てらこ27回目のテーマがですね、『3Dやってみよう』ということで、僕もようやくPV3Dを触ってみようかなーと思っていたのですが、あまりおもしろいアイデアも浮かばず、とりあえず観客席いっぱいに三遊亭円楽師匠(追記:わわわ、このタイミングで・・。ご冥福をお祈り申し上げます。。)を並べる事しかできずに力尽きたため(上記画像参照:まだ公開しません)、替わりに2次元でありながら3次元にも見えるクォータービューなオープニングムービーを作ってきましたので、そこんとこ宜しくお願い致します。

オープニングムービー

This movie requires Flash Player 9

(※FlashPlayer10以上推奨)

こちらはですね、勉強会スタートの合図といいますか、秋の大運動会をイメージしておりまして、参加者のみなさんが入場行進してきますよってことなんです。もちろん、行進曲といえば、皆さんご存知『カービィのグルメレース』で決まりでしょうよ。

レゴブロックを降らすポイントをだらだらと

このムービーのプログラム的な流れについてだらだら説明させて頂きます。

まずはですね、テキストを構成する各ブロックの座標位置を調べないといけません。
そこで、テキスト込みのTextFieldをBitmap化してそれをgetPixelで全ピクセル走査していき、そのピクセルの有無を配列に入れていく方法をとっています。

例えば、「てら子」という文字を走査して、以下のような配列を得るわけです。

0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0
0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0
0,0,1,1,1,1,1,1,0,0,0,0,1,1,0,0,0,0,0,0,1,1,0,0,0,0,0
0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0
0,0,0,0,1,0,0,0,0,0,1,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0
0,0,0,0,1,0,0,0,0,0,1,1,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0
0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0
0,0,0,0,0,1,1,1,0,0,0,0,1,1,0,0,0,0,0,1,1,0,0,0,0,0,0

これに沿って「1」の箇所にレゴブロックを配置していくわけなんですねー。

んで、これで完成かなーなんて思ったらまだちょとその考えは甘くてですね、
実際にプレビューしてみるとレゴブロックの重なり順がおかしいことに気付きます。

そうなんです。
今回のようなクォータービューな視点だと、以下の2点を同時に満たさなければなりませんよね。

  • 右にあるブロックほど手前にある
  • さらに上にあるブロックほど手前にある

というわけで、以下のようなコードでブロックを再配置してやらないといけないのです。

var _sortArr:Array = [];//ソート用に使う配列
for (var i:int = 0; i < blocks.length; i++) {
   var b:Block = blocks[i];
   _sortArr.push({
     block:b,
     x: b.x,
     y: b.y
   });
}

_sortArr.sortOn([‘x’,’y’], [Array.NUMERIC, Array.NUMERIC | Array.DESCENDING]);
for (i = 0; i < _sortArr.length; i++) {
   setChildIndex(_sortArr[i].block, i);
}

というわけでポイントはsortOnの中身ですね。
xについて昇順にソートした結果の中でさらにyについて降順にソートしてます。
xでの結果を固定したままy順にソートするところがポイントです。sortOnさんすげえ!

あとは、これら大量のオブジェクトをBeTweenAS3で高速トゥイーンさせてやるのですが、
この際に、cacheAsBitmapをtrueにすることを忘れずに。
これは、変形しない大量のオブジェクトを扱う時に絶大な効果を発揮します。
使い回しまくるブロックをキャッシュ化することで生成時やトゥイーン時の負荷を軽減してくれるわけですね。cacheAsBitmapさんもステキ!

だいたいそんな感じです。
あとは楽しい音楽掛けて行進させましょう。

『as3isolib』

上記のようなことがさくっと実現できるらしいライブラリ『as3isolib』を教えてもらいましたので追記。みんなでググってみよう。

他に参考にしたエントリー様たち

というわけで今回は、PV3Dと、Flash上で公式にYouTube動画が読み込めるようになったらしいのを試したかったのと、あとBetweenAS3に触れてみようっていう事でした。

以下、今回参考にしたエントリー達です。ありがとうございます!助かります!

Comments

No comment yet.

Compose Comment