スポンサーサイト

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

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

床面の反射を描画する

ツルツルの床っぽく、タイルが次々と落下してくるのが床面にうつりこんでいるようなサンプルです。




タイルをクリックすると、背景がそのタイルの色になります。

このサンプルでは、ステージの上部2/3に落下するタイルを描画するムービークリップを配置して、フレーム毎にそのムービークリップから上下反転/縮小した画像を切り取り、下部1/3に表示しています。

また、床面のムービークリップにはアルファマスクをかけてソレっぽく透過するようにしてます。

ActionScriptはこんなカンジです。

import flash.geom.Matrix;
import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.ColorTransform;
// 背景
var depth:Number = _root.getNextHighestDepth();
var back_mc:MovieClip
= _root.createEmptyMovieClip("back_" + depth, depth);
back_mc.beginFill(0xFFFFFF);
back_mc.moveTo(0, 0);
back_mc.lineTo(0, Stage.height);
back_mc.lineTo(Stage.width, Stage.height);
back_mc.lineTo(Stage.width, 0);
back_mc.lineTo(0, 0);
back_mc.endFill();
// 表示スクリーン
depth = _root.getNextHighestDepth();
var screen_mc:MovieClip
= _root.createEmptyMovieClip("screen_" + depth, depth);
screen_mc._x = 0;
screen_mc._y = 0;
// スクリーンと床の境界y座標
var oY:Number = Stage.height * 2 / 3;
// スクリーンマスク
depth = _root.getNextHighestDepth();
var screen_mask_mc:MovieClip
= _root.createEmptyMovieClip("screen_mask_" + depth, depth);
screen_mask_mc.beginFill(0xFFFFFF);
screen_mask_mc.moveTo(0, 0);
screen_mask_mc.lineTo(0, oY);
screen_mask_mc.lineTo(Stage.width, oY);
screen_mask_mc.lineTo(Stage.width, 0);
screen_mask_mc.lineTo(0, 0);
screen_mask_mc.endFill();
screen_mc.setMask(screen_mask_mc);
// 床面
depth = _root.getNextHighestDepth();
var floor_mc:MovieClip
= _root.createEmptyMovieClip("floor_" + depth, depth);
floor_mc._x = 0;
floor_mc._y = oY;
// 床面マスク
depth = _root.getNextHighestDepth();
var floor_mask_mc:MovieClip
= _root.createEmptyMovieClip("floor_mask_" + depth, depth);
var mtx:Matrix = new Matrix();
mtx.createGradientBox(Stage.width,
Stage.height - oY,
Math.PI / 2);
floor_mask_mc.beginGradientFill("linear",
[0xFFFFFF, 0xFFFFFF],
[60, 0], [0, 255],
mtx);
floor_mask_mc.moveTo(0, 0);
floor_mask_mc.lineTo(0, Stage.height - oY);
floor_mask_mc.lineTo(Stage.width, Stage.height - oY);
floor_mask_mc.lineTo(Stage.width, 0);
floor_mask_mc.lineTo(0, 0);
floor_mask_mc.endFill();
floor_mask_mc._x = 0;
floor_mask_mc._y = oY;
floor_mask_mc.cacheAsBitmap = true;
floor_mc.setMask(floor_mask_mc);
floor_mc.cacheAsBitmap = true;
// タイルのサイズ
var tile_w:Number = 40;
var tile_h:Number = 40;
// タイル発生頻度
var r:Number = 5;
// フレーム毎の処理
function onEnterFrame() {
if (Math.random() * 100 < r) {
createTile(screen_mc);
}
reflect();
}
// 落下するタイルを生成します。
function createTile(parent_mc:MovieClip):Void {
var d:Number = parent_mc.getNextHighestDepth();
var mc:MovieClip
= parent_mc.createEmptyMovieClip("tile_" + d, d);
var c:Number = Math.floor(Math.random() * 0x1000000);
var speed:Number = 3 + Math.floor(Math.random() * 2);
// 色
mc.beginFill(c);
mc.moveTo(0, 0);
mc.lineTo(0, tile_h);
mc.lineTo(tile_w, tile_h);
mc.lineTo(tile_w, 0);
mc.lineTo(0, 0);
mc.endFill();
// グラデーション
var go:Number = 1;
var gw:Number = tile_w - 2 * go;
var gh:Number = tile_h - 2 * go;
var gMtx:Matrix = new Matrix();
gMtx.createGradientBox(gw, gh, Math.PI / 2);
mc.beginGradientFill("linear",
[0x000000, 0xFFFFFF],
[30, 70],
[0, 255],
gMtx);
mc.moveTo(go, go);
mc.lineTo(go, go + gh);
mc.lineTo(go + gw, go + gh);
mc.lineTo(go + gw, go);
mc.lineTo(go, go);
mc.endFill();
// ハイライト
var ho:Number = 1;
var hw:Number = tile_w - 2 * ho;
var hh:Number = Math.round(tile_h * 0.40);
var hMtx:Matrix = new Matrix();
hMtx.createGradientBox(hw, hh, Math.PI / 2);
mc.beginGradientFill("linear",
[0xFFFFFF, 0xFFFFFF],
[90, 30],
[0, 255],
hMtx);
mc.moveTo(ho, ho);
mc.lineTo(ho, ho + hh);
mc.lineTo(ho + hw, ho + hh);
mc.lineTo(ho + hw, ho);
mc.lineTo(ho, ho);
mc.endFill();
// 初期位置
mc._x = Math.floor(Math.random() * (Stage.width - tile_w));
mc._y = -tile_h;
// 落下
mc.speed = speed;
mc.onEnterFrame = function() {
this._y += this.speed;
if (this._y > Stage.height) {
this.removeMovieClip();
}
}
// 背景色変更
mc.c = c;
mc.back = back_mc;
mc.onRelease = function() {
var ct:ColorTransform = new ColorTransform();
ct.rgb = this.c;
this.back.transform.colorTransform = ct;
}
}
// スクリーンを床面に反射させます。
function reflect():Void {
// 反射画像の縮小率
var s:Number = 0.8;
// 反射画像切り取り
var bitmap:BitmapData
= new BitmapData(Stage.width,
Stage.height - oY,
true,
0x000000);
var mtx:Matrix = new Matrix();
mtx.scale(1.0, -s);
mtx.ty = oY * s;
var rect:Rectangle = new Rectangle(0,
0,
Stage.width,
(Stage.height - oY) / s);
bitmap.draw(screen_mc,
mtx,
new ColorTransform(),
"normal",
rect,
true);
floor_mc.attachBitmap(bitmap, 1);
}
最初に作ってるback_mcは背景のムービークリップで、初期状態では白い矩形デス。タイルがクリックされたときはコイツのtransform.colorTransformプロパティを設定して色を変えます。

screen_mcが落下するタイルを描画する領域のムービークリップで、同サイズのマスクをかけています。

foor_mcが床面反射を描画するムービークリップで、下に向かって透過するようにアルファマスクをかけています。

フレーム毎にしてる処理は2つあって、ひとつは一定の確率でタイルムービークリップを作るというモノです。タイルには落下するための処理と、クリックされたときに背景の色を変えるイベントハンドラをくっつけています。

もうヒトツの処理は最後のreflectメソッドで、床面の反射を描画してます。縮小率と下部の高さから上部ムービークリップから切り出すサイズを算出し、反転/縮小と位置をMatrixで指定して、BitmapDataとして切り出しています。
スポンサーサイト

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

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

コメント

コメントの投稿


秘密にする

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

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

ブログ内検索


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