プログラミングとイラストレーション » Flash Pro CC, Starlingの描画APIを使ってグラフィックを描く
プログラミングとイラストレーション > Flash > Flash Pro CC, Starlingの描画APIを使ってグラフィックを描く

Flash Pro CC, Starlingの描画APIを使ってグラフィックを描く

Flash Pro CC, Starlingの描画APIを使ってグラフィックを描く

Starlingに備わったネイティブのGraphics API を使って線やストローク、塗りをCPU で描画し、それを、さらにビットマップデータ上でラスタライズして、テクスチャとしてGPU にアップロードする方法です。

Flash Pro CC, Starlingの描画APIを使ってグラフィックを描く : デモ

Flash Pro CC, Starlingの描画APIを使ってグラフィックを描く : ZIPファイル(78kb)

1.Main.fla

1. Flashコンテンツのパフォーマンスをグラフ化するstatsをダウンロードします。

statsサイト(外部サイト):http://github.com/mrdoob/Hi-ReS-Stats

2. Flash Professional CC にダウンロードしたstatsファイルを以下のように、Flashメニューから設定します。

Flash – 環境設定 – コンパイラー – ソースパス で、Hi-ReS-Stats-master/src を設定します。

3. Starlingファイルをダウンロードします。

Starlingサイト(外部サイト):http://gamua.com/starling/

4. Flash Professional CC にダウンロードしたstarlingファイルを以下のように、Flashメニューから設定します。

Flash – 環境設定 – コンパイラー – ソースパス で、starling/src を設定します。

Flash – 環境設定 – コンパイラー – ライブラリパス で、starling/bin を設定します。

5. プロパティのクラスに「StartUp」を記述します。

2.StartUp.as

プログラム言語は、ActionScript3.0です。

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import starling.core.Starling;
	import net.hires.debug.Stats;
	
	public class StartUp extends Sprite
	{
		private var mStarling:Starling;
		
		public function StartUp()
		{
			//fps計測用クラス
			addChild(new Stats());
			
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			//starlingインスタンスの作成
			mStarling = new Starling(StaringNativeDrawAPI, stage);//Starlingのネイティブの描画APIを使って、円を描画
			
			//アンチエイリアスの設定 0:アンチなし、2:最小限のアンチエイリアス、4:高品質、6:最高品質
			mStarling.antiAliasing = 2;
			
			//スタート
			mStarling.start();
		}
	}
}

3.StaringNativeDrawAPI.as

//描画API
package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	
	import starling.display.Image;
	import starling.display.Sprite;
	import starling.events.Event;
	import starling.textures.Texture;
	
	public class StaringNativeDrawAPI extends Sprite
	{
		public function StaringNativeDrawAPI()
		{
			addEventListener(Event.ADDED_TO_STAGE, onAdded);
		}
		
		private function onAdded(e:Event):void
		{
			//ベクターシェイプの作成
			var s:flash.display.Sprite = new flash.display.Sprite();
			
			//カラーの設定
			var color:uint = Math.random() * 0xffffff;
			
			//半径
			var radius:uint = 100;
			
			//指定した半径で円を描画
			s.graphics.beginFill(color, 1.0);
			s.graphics.drawCircle(radius, radius, radius);
			s.graphics.endFill();
			
			//ビットマップデータの作成
			var buffer:BitmapData = new BitmapData(radius*2,radius*2,true,color);
			
			//ビットマップデータ上でシェイプを描く
			buffer.draw(s);
			
			//ビットマップデータからテクスチャを作成
			var texture:Texture = Texture.fromBitmapData(buffer);
			
			//テクスチャからImageを作成
			var image:Image = new Image(texture);
			image.x = stage.stageWidth/2 - image.width/2;
			image.y = stage.stageHeight/2 - image.height/2;
			
			//表示
			addChild(image);
		}
	}
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントフィード

トラックバック URL : http://www.htmlcode.jp/flash-pro-cc-starling%e3%81%ae%e6%8f%8f%e7%94%bbapi%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%82%b0%e3%83%a9%e3%83%95%e3%82%a3%e3%83%83%e3%82%af%e3%82%92%e6%8f%8f%e3%81%8f/trackback/