Processingで作った作品をAS3に移植しました。
プログラムのイメージ画像。
こちらもご覧ください。 FlashDevelop環境で、AS3を開発してみる。
処理の流れ
- setup関数で初期化
- Event.ENTER_FRAMEでdraw関数をループ実行
- マウスクリックでreset関数を実行し、カンバスをクリア。
という流れになっています。
setupメソッドから見てみます。
* A initialization function which refers Processing.
*/
public function setup():void {
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;
canvas = new BitmapData( stage.stageWidth, stage.stageHeight, false, bgColor );
addChild( new Bitmap( canvas ) );
element = getCross();
addEventListener( Event.ENTER_FRAME, draw );
stage.addEventListener( MouseEvent.MOUSE_DOWN, reset );
}
変数canvasにステージのサイズで新しいBitmapDataインスタンスを生成し、その変数を利用してBitmapインスタンスをメインの表示リストに追加します。
次に変数エレメントにgetCross関数で描画用のエレメントを格納します。getCross関数については後述します。
Event.ENTER_FRAMEにリスナーを張り、draw関数を登録します。ステージがクリックされた時に、reset関数を呼ぶように、リスナーを張ります。
ここで、メインのSpriteインスタンスでなく、ステージにしたのは、Spriteの内容がビットマップのみだと、MouseEventを取れない（らしい）からです。
* A function which returns the drawing element.
* @return a drawing element
*/
public function getCross():DisplayObject {
var sp:Shape = new Shape();
sp.graphics.beginFill( 0xFFFFFF );
sp.graphics.lineTo( 1, 0 );
sp.graphics.lineTo( 2, 0 );
sp.graphics.lineTo( 2, 1 );
sp.graphics.lineTo( 3, 1 );
sp.graphics.lineTo( 3, 2 );
sp.graphics.lineTo( 2, 2 );
sp.graphics.lineTo( 2, 3 );
sp.graphics.lineTo( 1, 3 );
sp.graphics.lineTo( 1, 2 );
sp.graphics.lineTo( 0, 2 );
sp.graphics.lineTo( 0, 1 );
sp.graphics.lineTo( 1, 1 );
sp.graphics.lineTo( 1, 0 );
sp.graphics.endFill();
return sp as DisplayObject;
}
getCross関数は描画用のDisplayObjectを返す関数です。
46行目で格納している、変数elementはDisplayObject型なので、戻り値の型指定がDisplayObjectになっていますが
実際に返しているオブジェクトはSpriteです。
returnするときに、as演算子を使って、DisplayObjectとしています。
何故、elementをSprite型にしないかというと、別の描画要素を返す関数を作る時にBitmapにしたい場合もあったり、Shapeにしたい場合もあると想定して
格納できるインスタンスの範囲を限定したくなかったからです。
ここではGraphics.lineTo関数を使って、十字のグラフィックを作成しています。
* A drawing function called from Event.ENTER_FRAME
* @param event Event
*/
public function draw( event:Event ):void {
var posX:uint = Math.random() * stage.stageWidth;
var posY:uint = Math.random() * stage.stageHeight;
var scale:Number = Math.random() * 6;
var radian:Number = Math.random() * 360 * Math.PI / 180;
var matrix:Matrix = new Matrix();
matrix.rotate( radian );
matrix.scale( scale, scale );
matrix.translate( posX, posY );
var coltrans:ColorTransform = new ColorTransform( 0, 0, 0, 0, Math.random() * 0xFF, 0x00, 0x64, 0xFF * 0.2 );
canvas.draw( element, matrix, coltrans, null, null, false );
}
draw関数は、毎フレーム描画するためのメソッドです。
ランダムにX座標、Y座標、拡大率、角度（ラジアン）を設定し、カンバスに直接描いていきます。
* A reset function called from MouseEvent.MOUSE_DOWN
* @param event Event
*/
public function reset( event:MouseEvent ):void {
var rect:Rectangle = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight);
canvas.fillRect( rect, bgColor );
}
reset関数は、ステージをクリックした際に呼び出されるメソッドです。 カンバスをステージのサイズと初期設定の背景色で塗りつぶすだけです。
非常にシンプルなので、AS3で作るまでもないようなプログラミングですね。
