casualplay.net blog

BitmapDataクラスのperlinNoiseメソッドを使用することで、Photoshopでいう「雲模様」の効果を作ることができます。例では簡易的に雲を表現しましたが、他のフィルタと組み合わせることで、煙や炎などのリアルな表現もFlashのみで表現することが可能になります。

ステージ上にアルファを含んだグラデーションで塗った長方形"gmask"を配置し、アルファチャンネルを利用したマスクとして雲に対して適用しています。アルファチャンネルのマスクを利用するためには、マスクと対象のムービークリップのcacheAsBitmapをtrueにする必要があります。

import flash.display.*;
import flash.geom.*;

var w:Number = 360;
var h:Number = 150;
var octaves:Number = 3;

var bmp:BitmapData = new BitmapData(w, h, true, 0);
var mc:MovieClip = this.createEmptyMovieClip("mc", 1);
mc.attachBitmap(bmp, 1);
mc.blendMode = "hardlight";
mc._y = 90;

mc.cacheAsBitmap = true;
gmask.cacheAsBitmap = true;
mc.setMask(gmask);

var offset:Array = new Array();
var speed:Array = new Array();

for (var i:Number = 0; i < octaves; i++) {
	offset[i] = new Point(Math.random()*w, Math.random()*h);
	speed[i] = new Point(3, Math.random()*4-2);
}

var rdm:Number = Math.random()*1000;
var clr:ColorTransform = new ColorTransform(1.5, 1.5, 2, 1, 0, 0, 0, -30);

this.onEnterFrame = function():Void {
	for (i = 0; i < octaves; i++) {
		offset[i].x += speed[i].x;
		offset[i].y += speed[i].y;
	}
	bmp.perlinNoise(w/3, h/2, octaves, rdm, false, true, 0, true, offset);
	bmp.colorTransform(bmp.rectangle, clr);
};

CPU負荷が高い処理なので、あまり大きな描画領域には適用しない方が無難です。また、perlinNoiseのオクターブの数値(上ではoctaves)を減らすことで負荷を少し抑えられます。