Web

Flashで3D作ってみました。

3Dを使ったFlashコンテンツやサイトもめずらしくなくなってきましたが、

ここまでノータッチで来てました。

先日ちょっと時間が出来たので、ようやくワンタッチしてみました。

Flash上での3D表現は主に2パターンで、
透視変換を用いてUIやグラフィックをActionScriptで擬似3Dとして表現する方法と、
3Dレンダリングソフトで作成した3D素材をFlashに読み込ませる方法だと思います。

しかし3D素材を読み込む場合では、それを単にムービーとして扱ってしまうと、
面白みに欠けるというか、せっかくのWebコンテンツなのに
インタラクティブ性に乏しくなる気がして個人的にはあまり好みません。

最近はFlashで3Dを扱うとなると、3Dのクラスライブラリー｢Sandy｣なんかがあって、
結構気軽に出来そうな感じです。
でも基礎固めという意味で、頭の中ではなんとなく分かっていても、
それを実際に形にせねばと思い、
今回はActionScriptで擬似3D空間の簡単なものを作ってみました。

単純に球体がクルクル回ってます。

実際は平面状を左右に往復しているだけです。

人間の目と脳は大きいものは手前に、小さいものは奥にあるように判断するので、

回転しているように見えるだけです。

ソースはこちら

//初期設定
number = 8; 　//球の数
speed = 1; 　//回転速度比
radius = 150; 　//回転半径
rX = 1;　//回転半径のX軸方向の比率
rY = 0;　//回転半径のY軸方向の比率
rZ = 1;　//回転半径のZ軸方向の比率
centerX = 250;　//回転の中心のX座標
centerY = 225;　//回転の中心のY座標
centerZ = 150;　//回転の中心のZ座標
dist = 150;　//投影面までの距離
blurLevel = 5; //ブラーの強さ
a = 0;
//設定表示
changePanel.rNum = number;
changePanel.rSpeed = "nomal";
changePanel.nSpeed = speed;
//ブラーの設定
blur = new flash.filters.BlurFilter();
blur.quality = 1;
//実行
setTrigFunc(number,radius,speed);
//三角関数の値を格納
function setTrigFunc(n, r, s) {
sin_array = new Array();
cos_array = new Array();
for (k=0; k<=720; k++) {
rad = k/180*Math.PI;
sin_array[k] = Math.sin(rad);
cos_array[k] = Math.cos(rad);
}
_root.attachMovie("base","base",1,{_x:0, _y:0});
moveSphere(n,r,s);
}
//アタッチとアニメーション
function moveSphere(n, r, s) {
for (i=1; i<=n; i++) {
base.attachMovie("sphere","s"+i,i,{_x:-50, _y:0});
}
onEnterFrame = function () {
rY = 1-(_ymouse/450);
rZ = _ymouse/450;
for (j=1; j<=n; j++) {
aR = (a*s)%360+Math.round(360*j/n);
posiX = r*rX*cos_array[aR];
posiY = r*rY*sin_array[aR];
posiZ = centerZ-r*rZ*sin_array[aR];
scale = dist/(dist+posiZ);
sName = "s"+j;
base[sName]._x = posiX+centerX;
base[sName]._y = posiY+centerY;
base[sName]._xscale = base[sName]._yscale=100*scale;
base[sName].swapDepths(Math.round(-posiZ));
blur.blurX = blur.blurY=sin_array[aR]*(-blurLevel*rZ);
base[sName].filters = [blur];
}
a++;
if (a>=360) {
a = 0;
}
};
}

球の数、速度変更のボタンアクションは省略

今回は仮想3D空間での物体移動を参考にさせて頂きました。
主にインスタンスの深度のところで良い案が浮かばなくて、参考になりました。
カスタム関数setTrigFunc()はCPU負荷を考えて試しにやってみたんですが、
あんまり意味なかったです。
球のグラフィックの描画が無駄に重いみたいで、目立ったシャギーが出てしまうのが残念。

数も速度もたぶん任意の値で設定して問題ないですが、負荷を考えて制限をつけました。
自宅の貧弱なPCでも数が30までは試してみましたが問題なかったですけどね。

簡単に作ってアップしてしまったので、予期せぬバグがあるかもしれません。
何かあればご連絡いただけると幸いです。

擬似3D、結構簡単ですがやってて面白いんで、実用してみたいなぁ。
次回はもう少し凝ったやつにしてみようと。

◆オススメ書籍

ActionScript 3.0 アニメーション

3Dはもちろん、数学的、物理的にプログラムをするなら、これは最高の一冊です。
アニメーションの制御に必要な数学・物理の公式が分かりやすく書かれている上に、
ActionScriptで記述された解説があるので、即応用可能です。
サンプルのソースはActionScript3.0ですが、
もちろんActionScript2.0に転用可能ですし、
今後身につけなければならないであろうActionScript3.0の学習にもなります。
少々値は張りますがFlash、ActionScriptでの制作には欠かせない
究極の一冊かと思います。