Spark Project勉強会#9でジェフに誕生日ケーキを渡してきた
SWFObjectの作者であるジェフ氏が来日中で、ゲストとして参加されたSpark Project勉強会#9に参加してきました。
Spark Project勉強会とは>>コチラ
今回はなんと、Non – 技術系Semi-Flasherの僕が発表をさせて頂きました。
この記事では、発表した作品の制作経緯を綴ろうと思います。
勉強会当日はジェフの誕生日らしい
当日はジェフの誕生日ということで(実は2日前の5.26と判明)、
「スペシャルイベント誕生日コンテンツを発表しよう」というものが開催されました。
1人1~2分程度に誕生日おめでとうを発表します。
が、前々から人前で話す重要性はヒシヒシと感じ、しかも現在ニートに属する者としては、人と会うこと自体が少なくなっています。このままニート時代が続いてしまうと、社会復帰できなくなるのでは(半分冗談)？
1~2分なら僕でもパッと見でなんとか発表できるんではないかと思い、マウスを取りSparkのwikiを書き換えて、自分の名前を追加した次第です。
誕生日会で重要なのは、ウケとおいじりだろうと思い、パッと見と演出重視で、技術云々はどうにもならない為、最近実験中のFLARToolkitでバースデイケーキを作ってジェフにプレゼントしようと思いました。
プラス、場を盛り上げるための一役を買えたらなお良いなと思いました。
以下のような計画で制作を進める
- ジェフにケーキの箱を開けてもらう
- ケーキはそこには無く、マーカーがある
- Webカムによってスクリーンにケーキが映る
- ろうそくに火をつける
- ハッピーバースデイの歌を歌ってもらう(ここ重要)
- 歌い終わったら火をジェフにマイクに息を吹いてもらい、消してもらう
- 盛り上がって欲しい
ただ、マーカーの上にオブジェクトが出るだけというのはもう飽きました。飽きたんですよ！
FLARToolKitを使ったAR系Flashの作り方：第4回 FLARToolKitを使ったコンテンツいろいろ｜gihyo.jp … 技術評論社Saqoosha先生の言葉より
そうなんです。僕も見飽きた感でいっぱいです。
けれども今の僕は、ただ表示させるしかできないため、
ケーキの箱を作ったり、歌をみんなで歌うなどの演出で場が盛り上がれば良いなという考えで進めました。
ケーキのモデリングをする
FLARToolkitで3Dモデルを読み込むときの注意は、アニメーションを行うオブジェクトのポリゴン数と、アニメーション時のIKの有無だと思っています。ここをミスるとかなり読み込みに時間がかかったり、極端にFPSが下がってしまいます。
まだ、マッピングしていない状態です。実際は、イチゴ、ブルーベリーは、コピーペーストするため、UVマッピングを施した後に配置していきます。
原点(0,0,0)の部分を上面図を中心に合わせて、正面図、側面図で面位置に合わせておきます。後で座標を変更するときに回転させるからです。
三角ポリゴンにした状態で、3445ポリゴンです。
実際サクサク動きました。
UVマップを貼るとこうなります。イチゴとかの素材は、Fliｃｋｒとかで探して、適当にマッピングしました。
ここで重要なのは、中央にFlashのロゴがあること。誰も気づいてくれませんでした！！ｗｗ
実際に貼ったマップは以下。
ケーキ、イチゴ、ブルーベリーの底面は見えないため、ポリゴンを貼っていません。
ろうそくは、ケーキに対するマッスが小さく、細いので蝋部分の縦の分割線はもっと減らしたほうがよかったかもしれません。
これではポリゴンの無駄遣い。
火と煙のモデリング
一番ネックになると思われる火と煙。
アニメーションをさせるため、ボーンとウェイトを仕込みます。
ウェイトとは、1つ1つのボーンの動作範囲をポイント単位で0~100%で設定していきます。
火と煙にモーションを付ける
ここでは、IKを利用せず、1つ1つのボーンに対してキーフレームを打っています。
理由は、IKを利用すると、Colladaデータを読み込むときに時間がすごくかかってしまうからです。しかも、火も煙もボーンが少ないため、IK不要であることと、下手にIKしても帰って思い通りのモーションになり辛いというのも1つの理由です。
煙にモーションをつけているところ。ダンスっぽくしてみました。(してみた、というより、そうなった）
モデリングしたオブジェクトを配置する
DAEクラスを拡張したCakeクラス
package birthdayCake.assets
{
import org.papervision3d.objects.parsers.DAE;
/**
* ...
* @author Shunsuke Ohba
*/
public class Cake extends DAE
{
private static const CAKE_URL:String = "model/cake.dae";
public function Cake()
{
load(CAKE_URL);
scale = 1000;
rotationX = 90;
rotationZ = -90;
}
}
}
ポイントになるのは、マーカーの面を地として、ケーキを置きたい為、座標を変更します。
rotationX = 90; rotationZ = -90;
Lightwave上で原寸モデリングした場合、Papervision3Dにインポートすると、約1/1000サイズになるため、大きさを1000倍にします。
scale = 1000;
ろうそくの3DモデルDisplayObject3Dを継承したCandleクラス
public function Candle()
{
//蝋部分の3Dモデル
_candleBase = new DAE();
_candleBase.load(CANDLE_URL);
_candleBase.scale = 1000;
rotationX = 90;
rotationZ = -90;
addChild(_candleBase);
//火のモデルをCandleの入れ子にする
_fire = new Fire;
//ろうそくの高さが80mmであるため火の位置を修正
_fire.y = 80;
//火のアニメーションを読み込んだらaddChildする
_fire.addEventListener("modelLoaded", function(e:Event):void
{
addChild(_fire);
});
}
ここで気をつけたいのは、火の3Dモデルの位置調整で
_fire.y = 80;
としていますが、FLARToolkitだと、マーカーに対して垂直方向は、Z軸です。
が、ここではPapervision3D上であるため、天地方向はY軸で調整します。
煙の3Dモデルは、DisplayObject3Dを継承したFireクラスに入れ子状態にして、マイクの反応でaddChild、removeChildするようにしています。
そのマイクの部分であるWindクラス。
public function Wind()
{
_mic=Microphone.getMicrophone();
_mic.gain = 20;
_mic.setLoopBack(true);
//ハウリングがひどかったため、以下のような処理
var soundTransform:SoundTransform = SoundMixer.soundTransform;
soundTransform.volume=0;
SoundMixer.soundTransform = soundTransform;
}
マイクのハウリングをどうしても解消できなくて、小さな音でもハウリングして、ろうそくの火がきえてしまうため、trick7 – CBCNET掲載サンプルのソースとMicrophoneクラス雑感のコメントに記載されているコードを使わせていただきました。
マイクから音を出す必要はなかったため、マイクから音を出さないようにして対応しました。
完成したものが以下の動画です。
FLARToolkit cake from bao_bao on Vimeo.
結果、ジェフに喜んでもらえたようで、懇親会のときにありがとうって言ってくれました。
それは本当にうれしかったのですが、久々の人前での発表後は、極度の緊張が続いていて手が震え続けてました。人前で話せる機会がせっかくあるため、ネタをしこんで、積極的にいかにゃあならんなーっと思いました。
それと、言語の壁をおもいっきし感じたので、英語がんばります。
発表を聞いてくれた方々ありがとうございました。
mariroom先生、演出に協力してくれてありがとうございました。
参考記事
