スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--.--.-- | | スポンサー広告

ブラーを使った奥行き表現

ムービークリップの奥行きにあわせてブラーの強さを変えて遠近感を出すサンプルを作ってみました。




マウスのボタン押下でズームイン、離すとズームアウトします。あと、マウスカーソルの位置に合わせて、x座標/y座標も変化します。
再配置ボタンを押すとムービークリップをテキトーにちらかして置き直します。

ムービークリップの配置ですが、x座標/y座標に関しては乱数をつかってテキトーに散らばせています。z座標は、(仮想の)スクリーンからの最大距離(サンプルでは20)と階層の数(サンプルでは6階層)から等間隔に決めています。

そんで、depthをイロイロする手間をはぶくために奥のヤツからgetNextHighestDepth()とattachMovieを使ってムービークリップを作っています。

遠近処理のほーは、各ムービークリップのz座標から位置と大きさとブラーの強さを決定して適用しています。また、視点に近づきすぎたムービークリップは非表示にしています。

スクリプトのほーはこんなカンジです。

import flash.filters.BlurFilter;
// 同階層に置くムービークリップ数
var mcCnt:Number = 2;
// 階層数
var layerCnt:Number = 6;
// ムービークリップの配列
var mc_array:Array = new Array();
// スクリーンまでの距離
var d:Number = 20;
// スクリーンからの最大深度
var maxZ:Number = 20;
// ブラー係数
var blur:Number = 0.5;
// 原点
var oX:Number = Stage.width / 2;
var oY:Number = Stage.height / 2;
// ズーム処理をするか?
var zooming:Boolean = false;
// ズーム値
var zoom:Number = 0;
// フレーム毎の処理
function onEnterFrame() {
// ズーム
zoom += zooming ? 1 : -1;
if (zoom < 0) {
zoom = 0;
} else if (zoom > maxZ) {
zoom = maxZ;
}
// マウスカーソルにあわせて移動
var dx:Number = _xmouse - Stage.width / 2;
var dy:Number = _ymouse - Stage.height / 2;
for (var i:Number = 0; i < mc_array.length; i++) {
var mc:MovieClip = mc_array[i];
mc.tX = -dx;
mc.tY = -dy;
mc.tZ = -zoom;
}
// 遠近処理
perspective();
}

// 初期化
init();
// クリックイベント用スクリーン
var screen_mc:MovieClip
= _root.createEmptyMovieClip("screen_mc",
_root.getNextHighestDepth());
screen_mc.beginFill(0x000000, 0);
screen_mc.moveTo(0, 0);
screen_mc.lineTo(0, Stage.height);
screen_mc.lineTo(Stage.width, Stage.height);
screen_mc.lineTo(Stage.width, 0);
screen_mc.lineTo(0, 0);
screen_mc.endFill();
screen_mc.onPress = function() {
zooming = true;
}
screen_mc.onRelease = function() {
zooming = false;
}
screen_mc.onReleaseOutside = function() {
zooming = false;
}
// 再配置ボタン
var reset_btn:MovieClip
= _root.attachMovie("RESET_BTN",
"reset_btn",
_root.getNextHighestDepth());
reset_btn._x = 10;
reset_btn._y = 10;
reset_btn.onRelease = init;
// 初期化処理
function init():Void {
for (var i:Number = 0; i < mc_array.length; i++) {
var mc:MovieClip = mc_array[i];
mc.removeMovieClip();
}
mc_array = new Array();
// z座標を持つムービークリップを生成する。
var dz:Number = maxZ / (layerCnt - 1);
for (var i:Number = layerCnt - 1; i >= 0; i--) {
// z座標
var z:Number = i * dz;
// 階層内にムービークリップ生成
for (var j:Number = 0; j < mcCnt; j++) {
var depth:Number = _root.getNextHighestDepth();
var mc:MovieClip
= _root.attachMovie("JIEN_MC", "mc_" + depth, depth);
// 座標設定
mc.orgZ = z;
mc.orgX = Math.random() * Stage.width * 1.5
- Stage.width / 3.0;
mc.orgY = Math.random() * Stage.height * 1.5
- Stage.height / 3.0;
mc.tX = 0;
mc.tY = 0;
mc.tZ = 0;
mc_array.push(mc);
}
}
// 遠近処理
perspective();
}
// 遠近処理
function perspective() {
for (var i:String in mc_array) {
var mc:MovieClip = mc_array[i];
var z:Number = mc.orgZ + mc.tZ;
if (z > -d + 1) {
var s:Number = d / (d + z);
// 位置
mc._x = (mc.orgX + mc.tX - oX) * s + oX;
mc._y = (mc.orgY + mc.tY - oY) * s + oY;
// 大きさ
mc._xscale = s * 100;
mc._yscale = s * 100;
// ブラー
var b:Number = Math.abs(z * blur);
var filter:BlurFilter = new BlurFilter(b, b);
mc.filters = [filter];
mc._visible = true;
} else {
mc._visible = false;
}
}
}
init()メソッドに、ムービークリップを生成して3次元空間上に配置する処理を記述しています。すでに配置済みだったらソレを消去して、layerCntで指定された階層の奥のほーからムービークリップを生成します。"JIEN_MC"は配置するムービークリップシンボルの識別子です。

orgX, orgY, orgZというのが3次元空間上の座標です。orgZは何階層目のムービークリップかで決定しています。orgX/orgYは、ステージの1.5倍の広さにランダムで配置します。
tX, tY, tZというのは、マウスの動きやクリックでの変化量です。init()内ではいずれの値も0です。
生成したムービークリップはmc_arrayという配列に保持しています。

perspective()メソッドが遠近感をつける処理です。
dは視点からスクリーンまでの距離で、ムービークリップのz座標が視点から1以下になったら非表示にしています。

奥行きによる拡大/縮小は
d / (d + z)
で計算しています。位置に関しては、ステージの中心からの拡大/縮小、大きさは_xscale/_yscaleプロパティを設定しています。

ブラーは、BlurFilterを使っています。BlurFilterに設定する値をz座標に比例するようにしています。

移動処理はonEnterFrameでやってます。ズームイン/アウトはtZを変化させて、マウスカーソルにあわせた動きはtX, tYを変化させて、先ほどのperspective()メソッドを呼んでいます。
スポンサーサイト

テーマ:Flash - ジャンル:コンピュータ

2007.05.05 | | Comments(0) | Trackback(0) | Flash/ActionScript

コメント

コメントの投稿


秘密にする

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

名前:
メール:
件名:
本文:

ブログ内検索


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。