イラレからSVG形式で保存してPapervision3Dで読み込む

Adobe Illustrator CS3から書き出したベクターデータ(svg形式)がvectorvisionで読める!papervision3Dで動かせる。すごい、軽くてきれいだし(ベクターだから当たり前か)割と簡単だったので、メモしときます。

画像は僕が主催で行っている、謎のクリエイター集団の勉強会、『Splaaaash!』のロゴマーク。
デザインはtommmmmmmmyさん。
次回の勉強会は2月、デジタルハリウッド大阪校で。

続きを読む イラレからSVG形式で保存してPapervision3Dで読み込む

1/31イメディオのセミナー(AS3.0講座)が満員!キャンセル待ちです

ワタクシ秋葉秀樹が講師を務めさせていただいておりますイメディオのセミナー、「『脱・やらず嫌い!』デザイナーのためのFlash ActionScript3.0(ノンプログラマ編)」の1/31(土)がいま現在満席、キャンセル待ち状態となっています。

この日記を読んでくださっている受講生の方がいらっしゃいましたら、一つよろしくお願いします!

自分で作ったテキストですが、25ページありますので、1日で学ぶ内容としては初心者の方でもちょっと頑張ってもらわないといけないので僕も気を引き締めていきたいと思います。

もし、1/31の講座でキャンセルが出なかったとしても、翌月2月24日(火)に再演をいたしますので、ぜひそちらもご検討下さい。

『脱・やらず嫌い!』デザイナーのためのFlash ActionScript3.0 / 秋葉秀樹

ヒトダマをビルボード手法で作ってみました

仕事サボってヒトダマを作って遊んでます、こんな大人をゆるしてください。
まだ、ゲーム機が今ほどスペックが高くなかった頃、3D表現に例えば「木」をいっぱい配置するとき、ポリゴン数の節約のため、1枚にの板ポリゴンに1枚の木の画像を貼って、常にカメラを向いておき、カメラが木の横に動いたとしても、ペラペラの木だってバレない様に、木自身のY軸(縦の軸)を回転させる手法が取られていた話は有名で、「ビルボード」なんて呼ばれてたらしいです。

そんなビルボードの手法、使ってみたくてと思いつつ、木を使うのもオモシロくないし、何か無いかな?って何気なくひらめいたのがヒトダマ。

炎って形がとくに決まってないから、ビルボードを使うにはもってこいだ!と思ったんですね。

さて、炎をどう作るか・・・最近乾燥してるから家の中で炎は燃やしたくないなあ〜火事は恐いし。
そうだ、ソフトを使おう、確かAppleのタイトルムービー作成ソフト「LiveType」を久しぶりに使ってみよう。
LiveTypeには炎が入っていたはず。というわけで
メディアブラウザ>オブジェクト>パイロ>彗星にしてみる、なるほど、ヒトダマにも見えてきた。

Apple LiveTypeの画面

アルファチャンネルを持ってるからそれごとmov形式にて書き出しました。
そのままFlash Video Encoder(最近名前が変わったよね)に持ってきてflvにエンコード。

そのまま同じ階層でいい、置いておこう。 名前は「hitodama.flv」。

さて、背景どうしよっかな?と考えたあげく、背景は暗い方がフンイキ出ますね。
そんなわけで天空のテクスチャを作ることにした、んだけど、球体にテクスチャを貼ると、そのままじゃ極座標に行くほど変に画像が歪むんです。QTVRとか作ってる人って上手ですね、そのあたり。

で、僕はそんなことまで出来ないので、自然景観ソフト「Vue」を使ってみることにしました、ありがたいことに、「空を書き出す」コマンドが用意されている。

vue

月夜、いい感じです、またこのサムネイルがフンイキを醸し出しています。
でも残念なことに空の書き出しだけではVue5 infineteのバージョンだと、本当に空だけしか書き出せないです、何か方法ないかな?天空を自分で作る方法もあるけど、かなり熟練しないと厳しいので、また練習しとこう。

vue

さて、jpegに書き出しする時は形式を「UV球」にしました。、するとQTVR風の画像に書き出してくれてます
書き出された画像はこの通り。

Atmosphere.jpg

素材の準備ができたところでFlashへ。
今回はVideoStreamMaterialというPapervision3Dのクラスを使います、そうなんです、ビデオを扱うからですね。
普通、flvを扱うときって結構面倒です、少なくともVideoクラス、NetConnectionクラス、NetStreamクラスを使います、NetStreamは再生とか「今何秒?」とかを扱う役目で、再生したあとこれが制御役になるのです。

flvを読み込み、設定が終わったらVideoStreamMaterialへVideoとNetStreamを引数に渡すんですが・・・何だこりゃ?

アルファチャンネルが効いてない。

何か設定があるのか、と思い、まずはコンストラクタ、第三引数はprecise:Boolean = falseとなっていたので、trueにしても変わらず。
ヘルプを見ると気になるプロパティ「movieTransparent」が、継承元はMovieMaterial。
なにをいじってもダメでした。

GoogleCode調べてみると、なんだ、そうだったのか、こんなのがあった。
http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/org/papervision3d/materials/VideoStreamMaterial.as
VideoStreamMaterial(video:Video, stream:NetStream, precise:Boolean = false, transparent:Boolean = false)
と書いてあるので、バージョンの違いか、ひとまず修正。
中身を見てみると、うん確かに
super ( DisplayObject(video), transparent );
になってる。

カーソルキー上下で一応カメラポジションを変えてますが、もう少しいい動きを考えてみたいものです。
こんな感じで書いてみましたが、まだまだ勉強が必要ですね。

AS3 DisplacementMapFilterで波紋を作る練習

僕の名刺です。チョイっとクリックしてみてください。

いつも縦の名刺ですが、今回ちょっと横向きなんてどうだろ?なんて思い、勝手にデザインを変えちゃいました、以外と僕の中では新鮮。
今回の勉強はDisplacementMapFilterクラスという、あんまり聞き慣れてなかったフィルターを使った練習をメモしておきます。
僕がよく生徒さんの前で講義に使うAdobe Photoshop等などには良く見かけるFilter機能ですが、これを使う事でワープ効果なんて表現も出来るらしい、ということで実験。
やってみると、波紋を出すポイントがずれて、最初は苦労したけどPointクラスとMatrixクラスをうまく使う事で座標をマウスクリックした座標に合わせる事が可能です。

これは単純にリンケージしたムービークリップシンボルのスーパークラスをわざとSpriteに定義しています。これが名刺の画像が入ったMCなわけです。そのままaddChildしときます。

続いて以下の定義というのは・・・

spriteはその中に波紋の元となる円をgraphics.drawCircleで3重丸を入れているSpriteで、これに対してまずベベルフィルタ(エンボスのようなもの)とフラーフィルタ(ぼかしフィルタ)をかける事で、波紋の形状が出来上がります。ただし、必要なのは、このSprite内の画像のBitmapData型の情報が必要なので、private var bm:BitmapDataを仮で定義しておきます。毎フレーム処理の時に、このBitmapdataにdrawすることで波紋の形状を更新しているわけです。
しかし厄介なのは、このdrawしている第二引数にMatrixで位置を移動させないと、円の真ん中から右下だけをdrawしてしまうので、このようにしています。

これによって波紋の円の左上から右下までしっかりとdrawしてくれるというワケです。
private var clickPoint:Pointにはクリックした瞬間のマウスの座標が入ります。これがDisplacementMapFilterクラスを実行している際に必要になってきます。
それでは本題のDisplacementMapFilter。

var pt:Point = 〜〜の部分はクリックされた地点を計算してPointオブジェクトに格納します。

さて毎フレームごとに上記のgetFilterメソッドが呼び出されます。
ここで一番ハマったのは、毎フレーム、呼び出しているはずなのに、波紋が大きく伸びていかない。なぜだ!?
で、さんざん試行錯誤したあげく、ヘルプにこんな事が書いていた。

フィルタ操作の潜在的な問題

なんじゃそりゃ?
で、調べてやっと解決の糸口が見えました、要はフィルタの中身を変形して更新するときは、一旦配列のコピーを作ってそれを適用させないといけない、ということで、

が要るというわけです。ちょっとまどろっこしいけど、一応これで解決してます。

DisplacementMapFilterコンストラクタへの引数はいっぱいあって、色々試してみましたが、一番しっくり来たのがこの値でした。ちなみに3,4引数のBitmapDataChannel.RED定数はBLUEでもGREENでも、結果はこの場合、同じでした。
5,6引数の100の値は大きいほど効果が目に見て現れやすいです。
DisplacementMapFilterModeは4つの定数の中で、CLAMPにしてみました。

あまり波紋が大きくなると、極端に重くなるので、波紋が広がっている間は次の波紋は出ないようにしてます。この辺は改良が出来そうです、研究しておきます。