あしたから本気出す工作スクリプトで超軽量飛行機雲を作る

10月16日
スクリプトで超軽量飛行機雲を作る

beginGradientFillとBlurFilterを使って、飛行機雲をプログラムしてみます。
完成品はこんな感じです。

flash player required.

ファイル容量は1.48 KBと軽い。以下ソースです。

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:

import flash.geom.Matrix;
import flash.filters.BlurFilter;

class MyCloud{
  var mc,mcSrc:MovieClip;
  var arUnit,arFilter,arParamGradationColors,arParamGradationAlphas
    ,arParamGradationRatios:Array;
  var nTimerHide,nSegment,nSpanX,nStepGradation
     ,nAlphaMax,nPositionX:Number;
  var oMatrix:Matrix;
  function MyCloud(mcSrcIn:MovieClip){
    this.mcSrc = mcSrcIn;
    this.mc = _root.createEmptyMovieClip('mcCloud',_root.getNextHighestDepth());
    var owner:Object = this;
    this.mc.onEnterFrame = function(){owner.McOnEnterFrame();}

    this.nSpanX = 64;
    this.nSegment = Math.floor(Stage.width / this.nSpanX) + 2;
    this.nStepGradation = 20;
    this.nAlphaMax = 60;

    this.arUnit = new Array();
    for(var i=0;i<this.nSegment;i++)this.arUnit.push(new MyCloudUnit(this.arUnit));

    this.arParamGradationColors = new Array(0xFFFFFF,0xFFFFFF);
    this.arParamGradationAlphas = new Array(0x00,0x00);
    this.arParamGradationRatios = new Array(0x00,0xFF);
    this.arFilter = new Array(new BlurFilter(10,10,1));
    this.oMatrix = new Matrix();
  }
  function McOnEnterFrame(){
    for(var i=this.arUnit.length - 1;i>0;i--)this.arUnit[i].Update();
    this.arUnit[0].y = this.mcSrc._y;
    this.nPositionX = this.mcSrc._x + this.mcSrc._width;

    this.mc.clear();
    for(var i=0;i<this.arUnit.length - 1;i++){
      this.CalcGradation(i);
      this.DrawGradation(i);
    }
    this.mc.filters = this.arFilter;
  }
  function CalcGradation(i){
    this.arParamGradationAlphas[0] = i * this.nStepGradation;
    this.arParamGradationAlphas[1] = (i + 1) * this.nStepGradation;
    if(this.arParamGradationAlphas[0] > this.nAlphaMax)this.arParamGradationAlphas[0] = this.nAlphaMax;
    if(this.arParamGradationAlphas[1] > this.nAlphaMax)this.arParamGradationAlphas[1] = this.nAlphaMax;
    this.oMatrix.createGradientBox(this.nSpanX,0,0,this.nPositionX,this.arUnit[i].y);
  }
  function DrawGradation(i){
    this.mc.beginGradientFill("linear",this.arParamGradationColors,
        this.arParamGradationAlphas,this.arParamGradationRatios,this.oMatrix);
    this.mc.moveTo(this.nPositionX,this.arUnit[i].y);
    this.mc.lineTo(this.nPositionX,this.arUnit[i].y + this.mcSrc._height);
    this.nPositionX += this.nSpanX;
    this.mc.lineTo(this.nPositionX,this.arUnit[i + 1].y + this.mcSrc._height);
    this.mc.lineTo(this.nPositionX,this.arUnit[i + 1].y);
    this.mc.endFill();
  }
}

1行目：beginGradientFillで必要。
2行目：同じく、BlurFilter。Flash Playerはver8以上対応。
4行目：MyCloudという名前をつけました。命名はもちろん任意。
5行目：mcは雲描画用。mcSrcは飛行機のMovieClipで、
コンストラクタで参照を受け取ります(11行目)。
6-10行目：変数もろもろ。ちょっと多くてすみません。
11行目：ここからコンストラクタ。
12行目：飛行機のMovieClipの参照を格納。
13行目：空のMovieClip作成。この上に雲を描画します。
15行目：そのonEnterFrameハンドラで雲を描画します。
17-20行目：パラメータとかの設定。18行目はちょっと適当・・。
22行目：飛行機雲を構成するセグメントは、それ自体をクラスに
してしまいます。arUnitはそれを格納する配列。
23行目：セグメントのクラスをインスタンス化。
25-29行目：グラデーションとBlurFilterの設定。ここで色とか変えられます。
31行目：ここから毎フレームの描画を記述。
32,33行目：セグメントを変形。
36行目：前フレームの描画を消す。
37行目：セグメント毎に、
38行目：グラデーションを計算して
39行目：描画。
40行目：それが終わったら、
41行目：BlurFilterを適用。MovieClipのfiltersにフィルターの配列を代入
してやると、フィルターがかかる。関数でもよかったかなと思う。
43-51行目：各セグメントを塗りつぶすグラデーションを計算。
変数名が長くてすみません。
44行目：飛行機の付け根から、1セグメントごとに
45行目：だんだん雲が濃くなるように、グラデーションのアルファを調整。
46-49行目：雲が濃くなりすぎると綺麗でないので、適当に最大値設定。
50行目：グラデーションの基準位置を指定。
52-62行目：セグメントを描画。

以下、セグメントのクラス。

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:

class MyCloudUnit{
  var nIndex,y:Number;
  var arUnit:Array;
  function MyCloudUnit(arUnitIn:Array){
    this.arUnit = arUnitIn;
    this.nIndex = this.arUnit.length;
  }
  function Update(){
    var nNoise:Number = Math.random() * 3;
    nNoise -= 0.5;
    if(this.nIndex)this.y = this.arUnit[this.nIndex - 1].y + nNoise;
  }
}

1行目：セグメントのクラス。
2行目：nIndexは、自分が何番目のセグメントかを格納。
3行目：セグメントの配列の参照。これはnIndex格納用。
8行目：毎フレーム実行される関数。雲の変形。
9,10行目：適当にノイズつけてやる。
11行目：一つ前のセグメント(があれば、そ)の位置をコピーする。

そして、以下flaファイルの1フレーム目に記述するソース。

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:

var oCloud:Object = new MyCloud(this.mcSource);

this.mcSource.onEnterFrame = function(){
  this._xscale = 100 * _root._xmouse / Stage.width;
  if(this._xscale < 5)this._xscale = 5;
  this._yscale = this._xscale;
  var nParam:Number = this._xscale * 0.05;
  this._x = _root._xmouse - this._width * 0.5 + nParam * Math.random();
  this._y = _root._ymouse - this._height * 0.5 + nParam * Math.random();
}

1行目：雲クラスをインスタンス化。飛行機のMovieClipを渡します。
3-10行目：マウス位置に飛行機がくるように毎フレーム実行。
4-6行目：マウス位置で飛行機の大きさが変わる。
7行目：適当にノイズつけてやる。
8,9行目：飛行機の位置を変更

ダウンロード
サンプルファイルはこちら

ご参考になれば幸いです。m(_　_)m

twitterでつぶやき中