StarSpriteクラスを作ってみた

StarSpriteクラスを作ってみた

ASDocの練習 ＋ 星を描きたかった。

少しだけ解説あり。でもそんな難しいことやってないけど・・・。

@author Hiiragi

by Hiiragi 08 Jan 2010

Tags

class graphics star
Embed

package 
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Point;
	
	/**
	 * StarSpriteクラスを作ってみた
	 * 
	 * ASDocの練習 ＋ 星を描きたかった。
	 * 
	 * 少しだけ解説あり。でもそんな難しいことやってないけど・・・。
	 * 
	 * @author Hiiragi
	 */
	
	[SWF(width=465, height=465, frameRate=30, backgroundColor=0)]
	public class Main extends Sprite 
	{
		private var starSprite1:StarSprite;
		private var starSprite2:StarSprite;
		private var starSprite3:StarSprite;
		private var starSprite4:StarSprite;
		
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			
			//4つのStarSpriteを作って、それぞれ違う形や色にする。
			
			starSprite1 = new StarSprite(0, 0, 50);
			starSprite1.x = this.stage.stageWidth / 3 * 1;
			starSprite1.y = this.stage.stageHeight / 3 * 1;
			this.addChild(starSprite1);
			
			starSprite2 = new StarSprite(0, 0, 100, 0xFF6666, 10, 0xFF0000);
			starSprite2.x = this.stage.stageWidth / 3 * 2;
			starSprite2.y = this.stage.stageHeight / 3 * 1;
			this.addChild(starSprite2);
			
			starSprite3 = new StarSprite(0, 0, 100, 0x66FF66, 1, 0x00FF00, 0.1);
			starSprite3.x = this.stage.stageWidth / 3 * 1;
			starSprite3.y = this.stage.stageHeight / 3 * 2;
			this.addChild(starSprite3);
			
			starSprite4 = new StarSprite(0, 0, 100, 0xFFFF00, 1, 0xFFFF99, 0.7);
			starSprite4.x = this.stage.stageWidth / 3 * 2;
			starSprite4.y = this.stage.stageHeight / 3 * 2;
			this.addChild(starSprite4);
			
			//addEventListner
			this.addEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
		}
		
		private function onEnterFrameHandler(e:Event):void 
		{
			//それぞれ適当に回す。
			starSprite1.rotation += 1;
			starSprite2.rotation += 2;
			starSprite3.rotation += 3;
			starSprite4.rotation += 4;
			
		}
	}
	
	
	
}

import flash.display.Sprite;
import flash.geom.Point;

/**
 * 星が描かれたSprite
 * 
 * @param	x	星の中心座標x
 * @param	y	星の中心座標y
 * @param	radius	星の大きさ。中心座標からトゲトゲまでの距離。
 * @param	fillColor	塗りつぶす色
 * @param	lineThickness	外枠の線の大きさ
 * @param	lineColor	外枠の色
 * @param	insideRatio	星の外接円と、内側の五角形の外接円の大きさ。デフォルトは五芒星を描いたときの大きさ。
 */

//insideRatioの0．382は黄金比から割り出してます。
//以下のページの五角形の図にある線aと線cの比率です。
//http://www.sci-museum.jp/news/text/e060519.html

class StarSprite extends Sprite
{
	public function StarSprite(x:Number, 
								y:Number, 
								radius:Number, 
								fillColor:int = 0xFFFF00,
								lineThickness:int = 1,
								lineColor:int = 0xFFFF99,
								insideRatio:Number = 0.382)
	{
		//色を決定
		this.graphics.beginFill(fillColor);
		this.graphics.lineStyle(lineThickness, lineColor);
		
		var pointArray:Array = [];	//五角形を結ぶPointを入れる配列
		
		var i:int = 0;	//for文用。
		var dRad:Number = Math.PI * 2 / 5;	//5角形の内角における、1角分の角度。
		var rad:Number = -Math.PI / 2;	//始点を一番上の点に持ってくるために90度分マイナス。
		
		//まず外接円上の点をpointArrayのインデックス0と偶数の部分に入れる
		for (i=0; i<5; i++)
		{
			pointArray[i * 2] = new Point(Math.cos(rad) * radius + x , Math.sin(rad) * radius + y);
			rad += dRad;
		}
		
		radius *= insideRatio;	//内側の五角形の外接円を書くために、半径をinsideRatioの比率にする。
		rad = -Math.PI / 2 + dRad / 2;	//始点を調整。頂点から時計回りに描いていくので、頂点の次の点の位置を計算する。
		
		//内側の五角形の座標をpointArrayのインデックスの奇数部分に入れる
		for (i=0; i<5; i++)
		{
			pointArray[i*2 + 1] = new Point(Math.cos(rad) * radius + x , Math.sin(rad) * radius + y);
			rad += dRad;
		}
		
		//これで座標は計算できたので、あとはその順番にlineToで結ぶだけ。
		this.graphics.moveTo(pointArray[0].x, pointArray[0].y);
		var len:int = pointArray.length;
		for (i = 1; i<len; i++)
		{
			this.graphics.lineTo(pointArray[i].x, pointArray[i].y);
		}
		
		this.graphics.endFill();
	}
}