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で作るまでもないようなプログラミングですね。
