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 );
}
* 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;
}
* 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 );
}
* 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 );
}
* 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で作るまでもないようなプログラミングですね。
関連記事
