Starling 이미지 로드 및 scale & rotation

Programming/Framework 2012.01.12 10:52

package {
	import starling.events.Event;
	import starling.core.Starling;
	import starling.display.Sprite;
	import starling.display.Button;
	import starling.display.Image;
	import starling.textures.Texture;
	import starling.events.Touch;
	import starling.events.TouchEvent;
	import starling.events.TouchPhase;
	import starling.animation.Tween;
	import starling.animation.Transitions;
	import starling.utils.deg2rad;
	import starling.display.DisplayObject;
	import starling.text.TextField;
    import starling.utils.HAlign;
    import starling.utils.VAlign;
    
    import utils.TouchSheet;
	
	import flash.geom.Rectangle;
	import flash.geom.Point;
	import flash.display.Bitmap;
	import flash.net.URLRequest;
	import flash.display.Loader;
	import flash.events.Event;

	public class Demo extends Sprite {

		private var _loader:Loader;
		private var _image:Image;
		private var _posText:TextField;
		private var _sheet:TouchSheet;
		
		public function Demo() {
			_loader = new Loader();
			_loader.load(new URLRequest("http://cfile24.uf.tistory.com/image/11252E424F0ADA1C069349"));
			_loader.contentLoaderInfo.addEventListener(flash.events.Event.COMPLETE, onLoadedHandler);
		}

		
		private function onLoadedHandler(e:flash.events.Event):void{
			var bitmap:Bitmap = _loader.content as Bitmap;
			var texture:Texture = Texture.fromBitmap(bitmap);
			_image = new Image(texture);
			
			
			 var description:String = 
                "- touch and drag to move the images \n" +
                "- pinch with 2 fingers to scale and rotate \n" +
                "- double tap brings an image to the front \n" +
                "- use Ctrl/Cmd & Shift to simulate multi-touch";
            
            var infoText:TextField = new TextField(300, 75, description);
            infoText.x = 10;
			infoText.y = 35;
			infoText.fontSize = 12;
			infoText.color = 0x999999;
            infoText.vAlign = VAlign.TOP;
            infoText.hAlign = HAlign.LEFT;
            addChild(infoText);
			
			_sheet = new TouchSheet(_image);
			_sheet.scaleX = 0.2;
			_sheet.scaleY = 0.2;
			setAlignCenter(_sheet);
			_sheet.addEventListener(TouchEvent.TOUCH, onTouchHandler);
			addChild(_sheet);
			
			_posText = new TextField(400, 480, "");
			_posText.x = 10;
			_posText.y = 105;
			_posText.fontSize = 12;
			_posText.color = 0xBBBBBB;
            _posText.vAlign = VAlign.TOP;
            _posText.hAlign = HAlign.LEFT;
			_posText.touchable = false;
            addChild(_posText);
			
			stage.addEventListener(starling.events.Event.RESIZE, onResizeHandler);
			
		}
		
		private function onTouchHandler(e:TouchEvent):void{
			var touches:Vector.<Touch> = e.getTouches(_sheet);
			_posText.text = "_sheet.x : "+_sheet.x+"\n"+
							"_sheet.y : "+_sheet.y+"\n"+
							"_sheet.width  : "+_sheet.width+"\n"+
							"_sheet.height : "+_sheet.height;
			
			var len:int = touches.length;
			for(var i:int=0;i<len;i++){
				var touch:Touch = touches[i];
				var currentPoint:Point = touch.getLocation(_sheet);
				var previousPoint:Point = touch.getPreviousLocation(_sheet);
				_posText.text +="\n\n"+"touches["+i+"]========================\n"+
								"previousGlobalX : "+touch.previousGlobalX+"\n"+
								"previousGlobalY : "+touch.previousGlobalY+"\n"+
								"globalX : "+touch.globalX+"\n"+
								"globalY : "+touch.globalY+"\n"+
								"getLocation().x : "+currentPoint.x+"\n"+
								"getLocation().y : "+currentPoint.y+"\n"+
								"getPreviousLocation().x : "+previousPoint.x+"\n"+
								"getPreviousLocation().y : "+previousPoint.y;
			}
			
		}
		
		private function onResizeHandler(e:starling.events.Event):void{
			
		}

		private function setAlignCenter(inTarget:DisplayObject):void{
			inTarget.x = stage.stageWidth >> 1;
			inTarget.y = stage.stageHeight >> 1;
		}

		public override function dispose():void {
			super.dispose();
		}
	}
}

저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

Starling performance test

Project/Programming 2012.01.10 21:58

package {
	import starling.events.Event;
	import starling.core.Starling;
	import starling.display.Sprite;
	import starling.display.Button;
	import starling.textures.Texture;
	import starling.display.DisplayObject;
	import starling.display.Image;
	import starling.utils.deg2rad;
	import flash.display.Bitmap;


	public class Demo extends Sprite {

		[Embed(source = "f60.png")]
		private var MyBitmap:Class;
		
		private var _myTexture:Texture;
		private var _arrButterflys:Vector.<Butterfly>;

		public function Demo() {
			// addedToStage 이벤트에 대한 리스너 추가
			addEventListener( Event.ADDED_TO_STAGE , onAddedToStage);
		}


		private function onAddedToStage(e:Event):void {
			var myBitmap:Bitmap = new MyBitmap() as Bitmap;
			_myTexture = Texture.fromBitmap(myBitmap);

			var len:int = 800;
			
			_arrButterflys = new Vector.<Butterfly>(len, false);
			
			for (var i:int = 0; i<len; i++) {
				var fly:Butterfly = new Butterfly(_myTexture);
				
				fly.alpha = Math.random();
				fly.destX = Math.random()*stage.stageWidth;
				fly.destY = Math.random()*stage.stageHeight;
				
				fly.setVertexColor(0, Math.random()*0xFFFFFF);
				fly.setVertexColor(1, Math.random()*0xFFFFFF);
				fly.setVertexColor(2, Math.random()*0xFFFFFF);
				fly.setVertexColor(3, Math.random()*0xFFFFFF);
				
				fly.x = Math.random()*stage.stageWidth;
				fly.y = Math.random()*stage.stageHeight;
				fly.rotation = deg2rad(Math.random()*360);
				
				fly.pivotX = fly.width >> 1;
				fly.pivotY = fly.height >> 1;
				
				_arrButterflys[i] = fly;
				addChild(fly);
			}

			stage.addEventListener(Event.ENTER_FRAME, onFrame);
		}
		
		private function onFrame(e:Event):void{

			var len:uint = _arrButterflys.length;

			for (var i:int = 0; i < len; i++){

				// move the sausages around
				var fly:Butterfly = _arrButterflys[i];
				
				fly.x -= ( fly.x - fly.destX ) * .1;
				fly.y -= ( fly.y - fly.destY ) * .1;

				if (Math.abs(fly.x - fly.destX)<1 && Math.abs(fly.y-fly.destY) < 1){
					fly.destX = Math.random()*stage.stageWidth;
					fly.destY = Math.random()*stage.stageHeight;
					fly.rotation = deg2rad(Math.random()*360);
				}
			}
		}

		public override function dispose():void {
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			_myTexture.dispose();
			super.dispose();
		}
	}
}

import starling.display.Image;
import starling.textures.Texture;

class Butterfly extends Image{
	
	public var destX:Number = 0;
	public var destY:Number = 0;
	
	public function Butterfly(inTexture:Texture):void{
		super(inTexture);
	}
}

저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

[Starling-10] 터치 이벤트와 Touch 클래스

Programming/Framework 2012.01.10 14:39
Starling은 손가락의 조작이나 마우스 조작 모두 동일한 이벤트( TouchEvent )로 취급한다. Flash Player의 마우스 이벤트와는 달리 이벤트 종류는 TouchEvent.TOUCH 하나 뿐이다. 따라서 클릭 및 이동 등의 조작 상태는 이벤트에 포함되어 있는 Touch 객체 속성에서 판단하게 되어 있다.

Starling의 모든 표시 객체(Sprite, Stage, Quad, …)는 TouchEvent을 처리할 수 있다. 단, Button 클래스는 내부적으로 터치 이벤트를 triggered 이벤트로 변환하고 있기 때문에 자신의 리스너를 추가하는 것은 주의가 필요하다. 또한 표시 객체 자신이나 부모 개체 touchable 속성이 false의 경우는 TouchEvent를 받을 수 없다.

아무튼 Starling에서 터치 작업을 처리하려면 우선 표시 객체에 TouchEvent.TOUCH 이벤트 리스너를 추가해야 한다. 아래는 샘플이다.

import starling.events.TouchEvent;
myImage.addEventListener(TouchEvent.TOUCH,onTouch);

private function onTouch(e:TouchEvent):void {
trace(e.target);
}

Starling의 이벤트는 표시 목록에 버블링하기 위해 아래의 계층 객체에서 이벤트도 검색할 수 있다. (참고:사양에서는 계층의 위에서 아래로 전파하지만 지금의 구현에서는 Stage에서 이벤트를 받을 수도 있는 것 같다.)

샘플에서 사용하는 target 속​​성과 currentTarget 속​​성 사용법은 Flash Player 표준 이벤트와 동일하다. 기타 TouchEvent에는 다음과 같은 속성도 있다. 모든 읽기 전용이다.

ctrlKey : 이벤트가 발생할 때 Ctrl 키가 눌리고 있었는지 나타내는
shiftKey : 이벤트 발생시 Shift 키가 눌리고 있었는지 나타내는
timestamp : 터치가 시작된 이후의 시간(초)
touches : 사용 가능한 Touch 객체의 벡터

마지막 touches은 이벤트와 관련된 하나 이상의 Touch 객체의 벡터다. Touch 객체는 이벤트 발생시킨 손가락이나 마우스 조작 정보를 보유하고 있다.


Touch 객체 가져오기
TouchEvent에는 Touch 객체를 취득하기 위한 메소드가 포함되어 있다. 멀티 터치를 사용하지 않는 경우 getTouch()메소드에서 Touch 객체를 얻을 수 있다. (멀티 터치의 경우는 후술)

private function onTouch(e:TouchEvent):void {
var touch:Touch = e.getTouch(stage);
if (touch) {
  trace(e.target, touch.target);
}
}

getTouch() 메소드의 첫 번째 인수는 검색할 Touch 객체를 좁히려는 조건이다. 작업의 대상이 된 표시 객체가 인수로 지정된 오브젝트와 일치하는 또는 인수 계층 아래에​​ 포함된 경우, getTouch()는 값을 반환한다. 실제 작업의 대상은 Touch 객체 취득 후에 target 속​​성에서 볼 수 있다. (작업의 대상과 이벤트의 대상은 반드시 일치하지 않는다는 것에 유의)

Touch객체는 target 이외에도 작업을 식별하는 특성이 몇 가지가 더 있다.

target : 터치 조작의 대상이 된 표시 객체
id : 터치를 식별하는 숫자
timestamp : 터치 조작 시간 (터치 시작으로부터 초)


TouchPhase
위에서 이야기한 것처럼, Touch 객체는 작업 상태를 나타내는 속성이 있다. 속성 이름은 phase다.

phase : 현재 터치 상황

phase 속성에 설정 가능한 값은 TouchPhases 클래스에 정의되어 있다. 자주 사용되는 값은 다음 세 가지다.

BEGAN : 손가락이 화면에 접한 또는 마우스 버튼이 눌러진
MOVED : 손가락이 화면을 이동하거나 마우스 버튼이 눌러진 상태 이동
ENDED : 손가락이 화면에서 떨어진 또는 마우스 버튼에서 떨어진

BEGAN이 한 번, MOVED가 0 이상 반복되고, ENDED가 한 번 발생하는 것이 기본적인 흐름이다.다음과 같은 상태도 있다.

STATIONARY : 손가락 또는 마우스가 이전 프레임에서 이동

일반적으로 이 상태에서는 이벤트가 발생되지 않아야하지만, 멀티 터치를 취급하는 경우에는 STATIONARY가 포함될 수 있다.마지막으로 마우스 이용 때만 나타나는 상태다.

HOVER : 마우스 버튼이 눌러지지 않은 상태에서 표시 객체에 포인터가 있을 때

손가락으로 (지금까지) 접하지 않고 포인터를 이동시킬 수 없기 때문에 OVER는 있어도 HOVER는 없다는 것이다.


포인터 위치 가져오기
Touch 객체는 스테이지의 현재 위치와 이전 위치 속성을 가지고 있다. 다음 네 가지다. 형태는 모두 Number.

globalX : 스테이지 좌표를 기준으로 한 현재의 손가락 (포인터)의 x 좌표
globalY : 스테이지 좌표를 기준으로 한 현재의 손가락 (포인터)의 y 좌표
previousGlobalX : 스테이지 좌표를 기준으로 이전의 손가락 (포인터)의 x 좌표
previousGlobalY : 스테이지 좌표를 기준으로 이전의 손가락 (포인터)의 y 좌표

그러나 대부분의 경우 다른 좌표계에서의 위치를​​ 계산하게 될 것이다. 그래서, Touch 클래스에는 위의 속성 값을 특정 객체를 기준으로 한 좌표로 변환하는 메소드를 제공 한다.

public function getLocation(space:DisplayObject):Point
public function getPreviousLocation(space:DisplayObject):Point

이 두 메소드는 인수 객체의 좌표를 기준으로 한 현재의 위치 또는 마지막 위치를 반환한다.아래는 Touch 객체의 위치 정보를 사용하는 샘플이다.

var touch:Touch = event.getTouch(this, TouchPhase.MOVED);
if (touch) {
// 부모 개체를 기준으로 이동 거리를 계산하는
var currentPos:Point = touch.getLocation(parent);
var previousPos:Point = touch.getPreviousLocation(parent);
var delta:Point = currentPos.subtract(previousPos);

// 객체의 위치를​​ 변경
x += delta.x;
y += delta.y;
}

getTouch() 메소드의 두 번째 인수는 원하는 상태를 지정할 수 있다. 위의 예제에서는 손가락 이동 정보를 취급하기 위하여 TouchPhase.MOVED를 지정하고 있다.


더블 클릭의 사용 방법
Touch 객체를 통해 더블 클릭을 감지할 수 있도록 tapCount 속성이 있다. 이 속성을 사용하여 더블 클릭에 해당하는 코드를 작성한 것이 아래의 예제다.

touch = event.getTouch(this, TouchPhase.ENDED);
if (touch & & touch.tapCount == 2) parent.addChild (this);

작동 상태가 ENDED의 Touch 객체가 존재하며 탭 횟수가 2 회인 경우를 검색하고 있다.멀티 터치Starling은 멀티 터치도 지원한다. 멀티 터치를 처리하려면 Starling 객체에 다음과 같이 설정한다.

mStarling.simulateMultitouch = true;

이 상태에서 실제로 멀티 터치를 하면 터치 때마다 Touch 객체가 만들어진다. 그리고 TouchEvent에 전달된다. TouchEvent에서 여러 Touch 개체를 가져오려면 getTouches() 메소드를 사용한다. 아래는 그 예제다.

var touches:Vector.<Touch>=touchEvent.getTouches(this); 


반환 값은 Touch 벡터다. getTouch()뿐만 아니라 두 번째 인수로 원하는 상태를 지정할 수 있다.참고로 Ctrl 키를 사용하여 데스크탑 환경에서도 멀티 터치를 시뮬레이션할 수 있게 되어 있다. 물론 실제 터치 디바이스에서는 손가락으로 조작하면 된다.

원본 : http://cuaoar.jp/2012/01/starling-touch.html



package {
	import starling.events.Event;
	import starling.events.Touch;
	import starling.events.TouchEvent;
	import starling.events.TouchPhase;
	import starling.core.Starling;
	import starling.display.Sprite;
	import starling.display.Image;
	import starling.textures.Texture;
	import starling.display.DisplayObject;
	import starling.animation.Tween;
	import starling.animation.Transitions;
	import starling.utils.deg2rad;
	import flash.display.Bitmap;
	import flash.geom.Point;


	public class Demo extends Sprite {

		[Embed(source="icon128.png")]
		private var MyBitmap:Class;
		
		private var myButton:Image;

		public function Demo() {
			// addedToStage 이벤트에 대한 리스너 추가
			addEventListener( Event.ADDED_TO_STAGE , onAddedToStage);
		}


		private function onAddedToStage(e:Event):void {
			var myBitmap:Bitmap = new MyBitmap() as Bitmap;
			var myTexture:Texture = Texture.fromBitmap(myBitmap);
			
			myButton = new Image(myTexture);
			myButton.addEventListener(TouchEvent.TOUCH, onTouchHandler);
			
			myButton.pivotX = myButton.width >> 1;
			myButton.pivotY = myButton.height >> 1;
			addChild(myButton);
			setAlign(myButton);

		}
		
		private function onTouchHandler(e:TouchEvent):void{
			var touch:Touch = e.getTouch(myButton);
			if(touch){
				switch(touch.phase){
					case TouchPhase.BEGAN : myButton.setVertexColor(0, 0xFF6600);
											myButton.setVertexColor(1, 0xFF6600);
											myButton.setVertexColor(2, 0xFF6600);
											myButton.setVertexColor(3, 0xFF6600);
					break;
					case TouchPhase.MOVED : 
					break;
					case TouchPhase.ENDED : myButton.setVertexColor(0, 0xFFFFFF);
											myButton.setVertexColor(1, 0xFFFFFF);
											myButton.setVertexColor(2, 0xFFFFFF);
											myButton.setVertexColor(3, 0xFFFFFF);
				}
			}
			
			
			/*
			touch = e.getTouch(myButton, TouchPhase.MOVED);   
			if (touch) {        
					// 부모 개체를 기준으로 이동 거리를 계산하는      
					 var currentPos:Point = touch.getLocation(parent);      
					 var previousPos:Point = touch.getPreviousLocation(parent);     
					 var delta:Point = currentPos.subtract(previousPos);        
			 
					// 객체의 위치를​​ 변경     
					 myButton.x +=  delta.x;     
					 myButton.y +=  delta.y; 
			}
			*/
			
			touch = e.getTouch(this, TouchPhase.ENDED); 
			if (touch && touch.tapCount == 2){
				rotationToTween(0.6, 90, Transitions.EASE_OUT_BOUNCE);
			}
			
			var touches:Vector.<Touch> = e.getTouches(stage); 
			if(touches.length == 2){
				var firstPos:Point = touches[0].getLocation(parent);      
				var secondPos:Point = touches[1].getLocation(parent);  
				var distance:Number = Point.distance(firstPos, secondPos);

				scaleToTween(0.2, distance*0.01, Transitions.EASE_OUT);
			}else{
				touch = e.getTouch(this, TouchPhase.MOVED); 
				if (touch){
					moveToTween(0.14, touch.globalX, touch.globalY, Transitions.EASE_OUT);
				}
			}
			
		}
		
		private function rotationToTween(inTime:Number, inRot:int, inEase:String):void{
			var tween:Tween = new Tween(myButton, inTime, inEase);
			tween.animate("rotation", myButton.rotation+deg2rad(inRot));
			Starling.juggler.add(tween);
		}
		
		private function moveToTween(inTime:Number, inX:int, inY:int, inEase:String):void{
			var tween:Tween = new Tween(myButton, inTime, inEase);
			tween.moveTo(inX, inY);
			Starling.juggler.add(tween);
		}
		
		private function scaleToTween(inTime:Number, inScale:Number, inEase:String):void{
			var tween:Tween = new Tween(myButton, inTime, inEase);
			tween.scaleTo(inScale);
			Starling.juggler.add(tween);
		}

		private function setAlign(inTarget:DisplayObject):void {
			inTarget.x = stage.stageWidth >> 1;
			inTarget.y = stage.stageHeight >> 1;
		}

		public override function dispose():void {
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			super.dispose();
		}
	}
}

저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

[Starling-09] Starling의 Button 클래스 사용

Programming/Framework 2012.01.09 11:22
Starling은 버튼을 쉽게 구현할 수 있도록 Button 클래스가 포함되어 있다. Button 클래스는 DisplayObjectContainer 클래스의 서브 클래스다. 따라서 모든 표시 객체를 자식으로 가질 수 있지만 보통은 스킨 이미지와 제목을 표시한다. 그리고 버튼 클릭을 알리는 기능이 있다.

아래가 Button의 생성자다. 첫 번째 인수는 버튼에 대한 스킨이 되는 텍스처이고 옵션으로, 두 번째 인수에 제목을, 3번 째 인수에는 누를 때 표시할 텍스처를 지정할 수 있다.
Button(upState:Texture, text:String = "", downState:Texture=null)

Flash Professional에서 만든 버튼과 달리, "오버" 스킨은 지정할 수 없다. 아마도 이것은 터치 장치의 이용을 전제로 하고 있기 때문이라고 생각된다.

버튼을 클릭하면 (또는 탭하면) triggered라는 이벤트가 발생한다. 클릭시 실행하고 싶은 처리는 triggered 이벤트 리스너 함수에 작성한다. 아래는 그 예제다. 텍스처 포함 관련 부분은 여러번 나왔기 때문에 생략한다.
import starling.display.Button;
	import starling.events.Event;

	private var myButton:Button;

	private function onAddedToStage(e:Event):void {
		var myBitmap:Bitmap = new MyBitmap  ;
		var myTexture:Texture = Texture.fromBitmap(myBitmap);

		// 텍스처를 지정하여 단추의 객체를 생성
		myButton = new Button(myTexture);

		// triggered 이벤트 수신기를 추가
		myButton.addEventListener(Event.TRIGgered, onTriggered);
	}

	private function onTriggered(e:Event):void {
		// 이벤트를 발생 개체를 가져
		trace(e.target);
	}

Staring 이벤트는 Flash Player의 이벤트처럼 버블링(표시 목록 계층 간에 전파, 자식에서 부모 방향으로만 지원) 하는 여러 버튼을 사용할 때는 triggered 이벤트를 부모 객체에서 처리하는 것도 가능하다.


스킨 지정
Starling 버튼은 터치하면 (또는 버튼에 마우스가 눌러진 상태가 되면), 버튼의 표시 크기가 조금 작아진다. 손가락을 떼면 원래 크기로 돌아간다. 이 것은 버튼에 표준 텍스처 하나만 지정된 경우의 동작이다. 버튼을 눌린 상태에 해당하는 텍스처를 지정하면 텍스처가 작아지는 대신 스킨이 바뀐다.

이 두 텍스처는 생성자에 지정할 수 있지만 나중에 속성에서도 설정할 수 있다. 아래가 속성 목록이다.

upState : 버튼이 터치되지 않은 상태로 표시되는 텍스처
downState : 버튼이 터치되는 상태로 표시되는 텍스처
scaleWhenDown : 터치되어있는 상태 텍스처의 표시 비율

upState과 downState가 각 상태로 표시하는 텍스처를 설정하는 속성이다. (upState는 생성자에서 지정 필수) 성능의 관점에서 어느 텍스처도 같은 텍스처 아틀라스에 있는 것이 바람직할 것이다. 마지막 scaleWhenDown는 0에서 1 사이의 숫자를 지정한다. 이 값은 downState = null의 경우에만 사용할 수 있다.

위에서도 썼지만, 단순한 장식 추가가 필요한 경우, 2 개의 텍스처 이외에도 항시 표시 객체를 추가할 수 있다. 만약 동작을 변경하려면, 커스텀 버튼 클래스를 만드는 편이 빠를지도 모른다.


텍스트 표시
Starling의 버튼은 텍스처로 지정한 이미지에 텍스트를 표시할 수 있다. 텍스트는 생성자에서 지정하거나 인스턴스 생성 후, text 속성에 설정한다. textBounds 속성을 사용하여 텍스트의 위치를​​ 지정할 수도 있다.

text : 버튼에 표시되는 텍스트
textBounds : 텍스트 표시 영역을 Rectangle로 지정

텍스트 표시에 사용할 글꼴의 모양을 설정하는 속성도 있다. 거의 TextField의 경우와 동일하다.

fontName : 텍스트 표시에 사용할 글꼴 이름
fontSize : 텍스트 표시에 사용할 글꼴의 크기
fontColor : 글꼴 색상
fontBold : 글꼴을 굵게 표시 여부를 지정

포함된 글꼴과 비트맵 글꼴을 사용할 수 있다.


버튼 비활성화
버튼을 사용할 수 없는 상태라면 enabled 속성의 값을 false로 적용한다.

enabled : 버튼을 사용할 수 있는지 여부를 지정
alphaWhenDisabled : 버튼이 비활성화 때 알파 값

기본적으로 단추를 비활성화하면 버튼의 표시가 반투명하게 된다. 그 때 사용되는 알파 값은 alphaWhenDisabled에 설정된 값이다.


원본 : http://cuaoar.jp/2012/01/starling-button.html




package {
	import starling.events.Event;
	import starling.core.Starling;
	import starling.display.Sprite;
	import starling.display.Button;
	import starling.textures.Texture;
	import starling.display.DisplayObject;
	import flash.geom.Rectangle;
	import flash.display.Bitmap;

	public class Demo extends Sprite {

		[Embed(source="icon128.png")]
		private var MyBitmap:Class;
		
		private var myButton:Button;

		public function Demo() {
			// addedToStage 이벤트에 대한 리스너 추가
			addEventListener( Event.ADDED_TO_STAGE , onAddedToStage);
		}


		private function onAddedToStage(e:Event):void {
			var myBitmap:Bitmap = new MyBitmap() as Bitmap;
			var myTexture:Texture = Texture.fromBitmap(myBitmap);

			// 텍스처를 지정하여 단추의 객체를 생성
			myButton = new Button(myTexture);
			
			// 터치 상태일 때, 텍스처의 표시 비율
			myButton.scaleWhenDown = 0.95;
			
			myButton.fontColor = 0xFFFFFF;
			myButton.fontBold = true;
			myButton.fontSize = 24;
			myButton.text = "BUTTON";
			myButton.textBounds = new Rectangle(myButton.width-60>>1, 85, 60, 30);
			
			// 
			addChild(myButton);
			setAlign(myButton);
			
			// triggered 이벤트 수신기를 추가
			myButton.addEventListener(Event.TRIGGERED, onTriggered);
		}

		private function onTriggered(e:Event):void {
			// 이벤트를 발생 개체를 가져
			trace(e.target);
			myButton.fontColor = Math.random()*0xFFFFFF;
		}

		private function setAlign(inTarget:DisplayObject):void {
			inTarget.x = stage.stageWidth - inTarget.width >> 1;
			inTarget.y = stage.stageHeight - inTarget.height >> 1;
		}

		public override function dispose():void {
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			super.dispose();
		}
	}
}

저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

[Starling-08] Starling에서 TextFiled의 사용

Programming/Framework 2012.01.09 10:27
Starling에서는 문자를 표시하기 위해 TextField 라는 클래스가 제공하고 있다. 글꼴 종류, 크기, 색상, 위치 등을 지정하여 텍스트를 화면에 표시할 수 있다.

그렇다고해도, GPU에서 직접 글꼴을 취급할 수는 없다. 사실, 뒤에서 Flash Player의 TextFiled를 사용하여 CPU에서 그린 것을 비트맵화 하여 GPU에 업로드하는 형식으로 사용한다. 즉, Starling의 TextField가 제공하는 것은 주어진 텍스트 및 글꼴에서 동적으로 텍스처를 생성하는 기능인 것이다. 따라서 커서가 표시되는 입력 텍스트와 같이 문자를 선택하는 등의 작업은 할 수 없다.(비트맵이므로)

또한, 동적으로 생성할 이유가 없는 텍스트는 TextField를 사용하는 것보다는 사전에 텍스처로 준비하여 사용하는 것이 효율적이다.


TextField 인스턴스 생성
아래는 TextField의 ​​생성자 정의를 보여준다. 표시 영역의 너비와 높이, 표시할 텍스트의 3개의 인수가 필요하다.
TextField (width:int, height:int, text:String, fontName:String = "Verdana", fontSize:Number=12,
  color:uint=0x0, bold:Boolean=false);
//

어떤 값을 나중에 변경할 수 있지만 효율 측면에서 너비와 높이를 바꾸지 않는 것이 좋다. 아래는 Hello World를 표시하는 예제다. 글꼴 크기와 색상을 인스턴스 생성 후에 지정하고 있다.
import starling.text.TextField;

	private var myTextField:TextField;

	private function onAddedToStage(e:Event):void {
		// TextField 인스턴스를 생성
		myTextField = new TextField(160,80,"Hello World");

		// TextField 인스턴스에 속성을 지정
		myTextField.fontSize = 16;
		myTextField.color = 0x993333;
		myTextField.border = true;

		addChild(myTextField);
	}

border 속성 값을 true로 하면 TextField 영역을 눈으로 확인할 수 있기 때문에 개발시 유용하다. Starling의 TextField에는 지정된 너비와 높이에서 텍스트를 초과하지 않게 글꼴 크기를 자동 조정하는 편리한 기능이 있다.
myTextField.autoScale = true;

TextField 객체의 autoScale 속성을 true로 설정하면 전체 텍스트 표시가 글꼴 크기 지정보다 우선한다. Starling 유용한 클래스 Starling은 색상을 지정하는 Color라는 유용한 클래스가 있다. TextField의 color 속성의 지정에 사용할 수 있다.
import starling.utils.Color;
 
myTextField.color = Color.AQUA;

또한 텍스트 배치 값을 가진 클래스도 있다. 세로 배치는 HAlign, 가로 배치는 VAligin 다.
import starling.utils.HAlign ;
import starling.utils.VAlign ;
 
// TextField의 ​​왼쪽을 기준으로 문자를 배치
myTextField.hAlign = HAlign.LEFT;
myTextField.vAlign = VAlign.TOP;

HAlign에 정의되어 있는 값은 LEFT, CENTER, RIGHT 이렇게 3 종류이고 VAlign에 정의되어 있는 값은, TOP, CENTER, BOTTOM 이렇게 3 종류다. 글꼴 포함 Starling의 TextField에서 포함된 TrueType 글꼴 이용이 가능하다. 글꼴을 포함하면 표시 결과가 실행 환경에 의존하지 않기 때문에 권장한다. 다음은 글꼴 포함된 샘플이다. Ubuntu라는 글꼴을 포함하고 있다.
[Embed(source="Ubuntu-R.ttf",embedAsCFF="false", fontFamily="Ubuntu")]
	private static const UbuntuRegular:Class;

	private function onAddedToStage(e:Event):void {
		myTextField = new TextField(160,80,"Hello World"," Ubuntu ",16);
		myTextField.color = 0x993333;
		addChild(myTextField);
	}

Embed 지정 시에는 embedAsCFF 계정은 필수다. 비트맵 글꼴 사용 Starling의 TextField에서 비트맵 글꼴을 사용할 수 있다. 비트맵 글꼴은 문자를 비트맵으로 내보낸 것이다. 개별 문자 파일의 위치 정보 등은 별도 XML 형식으로 작성한다. XML 파일은 다음과 같은 형식으로되어 있다. 기본 정보, 문자 코드와 텍스처 관련, 그리고 옵션으로 커닝 정보다.

  
  
  
    
  
  
    
    
  
   
    
  


이러한 비트맵 글꼴 정보는 BitmapFont 클래스에 로드한다. 다음은 그 절차다. 먼저 각각의 파일을 포함한다. 여기는 텍스처 아틀라스와 동일한 절차다.
[Embed (source="desyrel.png")]
private static const DesyrelTexture:Class;
 
[Embed (source = "desyrel.fnt"mimeType = "application / octet - stream")]
private static const DesyrelXml:Class;
다음 BitmapFont 객체를 생성한다.
import starling.text.BitmapFont;
	import starling.textures.Texture;

	private function onAddedToStage(e:Event):void {
		
		// 비트맵 글꼴로드
		var texture:Texture = Texture.fromBitmap(new DesyrelTexture);
		
		// 문자 정보 가져오기
		var xml:XML = XML(new DesyrelXml);

		// BitmapFont 인스턴스 생성
		var myBitmapFont:BitmapFont = new BitmapFont(texture,xml);

		//... 앞으로는 아래에 계속
	}

생성한 BitmapFont객체는 사용하기 전에 registerBitmapFont() 메소드를 통해서 TextField 클래스에 등록한다. (registerBitmapFont()는 정적 메서드다) 그 후, TextField의 ​​fontName 속성에 비트맵 글꼴의 이름을 설정하면 표시된다. 글꼴 이름은 BitmapFont 객체의 name 속성에서 가져올 수 있다.
import starling.text.TextField;
	private function onAddedToStage(e:Event):void {
		//... 위에서 계속

		// TextField 클래스 비트맵 글꼴을 등록
		TextField.registerBitmapFont(myBitmapFont);

		// TextField 인스턴스를 생성;
		myTextField = new TextField(300,150,"Hello World");

		// 비트맵 폰트의 폰트 이름을 설정
		myTextField.fontName = myBitmapFont.name;

		addChild(myTextField);
	}

필요하지 않은 비트맵 글꼴은 unregisterBitmapFont() 메소드로 등록을 삭제할 수 있다. 인수에는 삭제할 글꼴 이름을 지정한다. 이 때 삭제된 BitmapFont 대해 dispose()가 실행된다. 이것을 피하고 싶은 경우에는 두 번째 인수에 false를 지정한다.
TextField.unregisterBitmapFont (myBitmapFont.name, false );

비트맵 글꼴 텍스처는 독립적인 파일이 아닌 일반 텍스처 아틀라스와 함께 파일에 추가하는 형태로 사용할 수 있다. 이는 텍스처 전환을 줄일 수 있다. 비트맵 글꼴 표시 설정 비트맵 글꼴을 제작시의 크기로 표시하고 싶을 때는 TextField 객체의 fontSize 속성 BitmapFont.NATIVE_SIZE를 지정한다.
// 비트맵 글꼴의 원래 크기로 보기
myTextField.fontSize = BitmapFont.NATIVE_SIZE ;

또한 비트맵 글꼴을 제작시 모양으로 표시하고 싶을 때는 TextField 객체의 fontSize 속성 Color.WHITE을 지정한다.
// 비트맵 글꼴 텍스처 그대로보기
myTextField.color = Color.WHITE ;

color 속성의 기본 값은 아무 것도 지정하지 않으면 검은색 텍스트가 렌더링된다. 마지막으로 비트맵 글꼴의 제작에는 다음과 같은 것을 권장하고 있다.

Windows : Bitmap Font Generator (Angel Code : 무료)
Mac OS : Glyph Designer (71squared : 유료)


원본 : http://cuaoar.jp/2011/12/starling-textfiled.html




package {
	import starling.events.Event;
	import starling.core.Starling;
	import starling.display.Sprite;
	import starling.text.TextField;

	public class Demo extends Sprite {

		private var _myTextField:TextField;

		public function Demo() {
			// addedToStage 이벤트에 대한 리스너 추가
			addEventListener( Event.ADDED_TO_STAGE , onAddedToStage);
		}
		private function onAddedToStage(e:Event):void {

			// TextField 인스턴스를 생성

			var len:int = 50;
			for (var i:int = 0; i<len; i++) {
				var myTextField = new TextField(160,80,"Hello World 한글" + i);

				// TextField 인스턴스에 속성을 지정
				myTextField.fontSize = 16;
				myTextField.color = Math.random()*0xFF0000+i;
				myTextField.border = true;

				addChild(myTextField);

				myTextField.x = stage.stageWidth >> 1;
				myTextField.y = stage.stageHeight >> 1;

				myTextField.alpha =  0.20;
				myTextField.rotation = i;
			}

			_myTextField = new TextField(160,80,"Hello World");
			_myTextField.fontSize = 24;
			_myTextField.color = 0xFFFFFF;
			//_myTextField.border = true;
			
			addChild(_myTextField);
			setAlign(_myTextField);

		}

		private function setAlign(inTarget:TextField):void {
			inTarget.x = stage.stageWidth - inTarget.width >> 1;
			inTarget.y = stage.stageHeight - inTarget.height >> 1;
		}

		public override function dispose():void {
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			super.dispose();
		}
	}
}

 
저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

[Starling-07] MovieClip 클래스를 이용한 애니메이션

Project/Programming 2012.01.09 00:49
Flash에서 애니메이션이라고 하면 역시 MovieClip이지만 Starling에도 MovieClip 클래스가 있다. 물론 애니메이션을 위한 클래스지만 Starling의 MovieClip은 화면에 표시할 수 있는 것이 비트맵 이미지 또는 색상을 지정한 사각형 뿐이다. 따라서 MovieClip라는 이름은 같지만 Starling의 MovieClip은 프레임마다 할당된 비트맵을 표시하는 클래스인 것이다.

또한 Starling MovieClip의 자식 객체를 관리하거나 프레임에 스크립트가 들어가는 기능은 없다. 이 점도 Flash Player의 MovieClip과는 크게 다르다. (Starling은 표시 목록의 관리는 Sprite의 책임이다. 한편, MovieClip은 Image 클래스에 타임 라인 기능을 더한 Image의 서브 클래스다. MovieClip이 Sprite의 하위 클래스인 Flash Player와는 달리, 양쪽의 역할은 분리되어 있다.)


스프라이트 시트와 TextureAtlas
MovieClip의 각 프레임을 볼 때 GPU는 표시 프레임에 할당된 텍스처, 셰이더에서 사용할 수 있도록 준비가 이루어진다. 이 때 텍스처가 프레임마다 물리적으로 다른 비트맵 파일이면 프레임을 진행할 때마다 텍스처 전환이 발생한다.

텍스처 전환 처리에는 당연히 시간이 걸린다. 또한 텍스처의 GPU에 업로드가 필요할 때 추가 오버헤드가 증가한다. 일반적으로 이 문제를 해결하기 위해 각 프레임의 텍스처를 하나의 파일에 정의한다. 이 것을 스프 라이트 시트라고  한다.

아래 그림은 Starling 샘플에 포함된 스프라이트 시트의 일부를 자른 것이다.




여러 프레임에 해당하는 텍스처가 1개의 파일로 되어 있으면 GPU를 이용해서 사용 위치를 바꾸는 것만으로 텍스처 자체를 전환하지 않고 렌더링 처리가 가능하다. 따라서 고속 프레임을 업데이트할 수 있다.

또한 Stage3D에서 취급할 수 있는 텍스처의 폭은 2의 계승이라는 규칙 때문에, 그 이외의 너비 텍스처는 Starling 내부에 여분의 사전 처리가 발생한다. 하지만 스프라이트 시트의 경우 표시되는 텍스처가 더 큰 텍스처(스프라이트시트)가 아니기 때문에 개별 텍스처 너비 사이즈를 걱정할 필요가 없다.

이 것을 최적화한 1단계가 TextureAtlas다. TextureAtlas는 여러 스프라이트시트를 하나의 파일에 정리한 것이다. 동시에 여러 애니메이션을 재생하는 경우 특히 유용하다. TextureAtlas를 만들기 위해, 차기 버전의 Flash Professional CS6에서 지원되는 것 같다. 벡터 애니메이션 스프라이트시트로 내보내기 기능을 기다리거나 Texture Packer 등의 도구를 이용하면 된다.


TextureAtlas 로드
TextureAtlas를 사용하여 프레임마다 각각 TextureAtlas의 어떤 영역을 표시할지 정보가 필요하다. 따라서 다음과 같은 형식으로 각 프레임의 텍스처 정보를 지정하게 되어 있다. 도구를 사용하여 TextureAtlas를 생성하는 경우 이러한 XML 파일도 동시에 생성된다.

  
  
  
  


TextureAtlas 태그 imagePath 속성은 TextureAtlas의 파일 이름이다. SubTexutre 태그의 name 속성은 애니메이션의 고유 이름 뒤에 프레임 번호를 추가한 것이다. 나머지 x, y, height, width에서 텍스처로 사용 영역을 지정한다. (실제로 SubTexture는 텍스처의 일부를 처리하는 클래스가 있다) TextureAtlas가 준비되면 다음과 같은 프로그램에 포함한다.
[Embed (source = "atlas.png")]
private static const MyBitmap:Class;
 
[Embed (source = "atlas.xml"mimeType = "application / octet - stream")]
private static const MyXml:Class;

이러한 정보는 TextureAtlas라는 클래스에서 함께 관리한다. TextureAtlas(PNG 파일)은 일단 Texture 클래스 로딩하면서 XML 파일과 함께 TextureAtras 생성자에 전달한다. TextureAtlas 객체에서 고유 이름을 지정하여 Texture(실제로는 SubTexture의) 벡터를 얻을 수 있다. 이 때 사용하는 메소드가 getTextures()다.
import starling.textures.TextureAtlas;

	private function onAddedToStage(e:Event):void {
		// 텍스처 아틀라스로드
		var myTexture:Texture = Texture.fromBitmap(new MyBitmap);
		// 텍스처 아틀라스의 영역 정보 가져오기
		var myXml:XML = XML(new MyXml);

		// TextureAtlas 인스턴스 생성
		var myTextureAtlas:TextureAtlas = new TextureAtlas(myTexture,myXml);
		// "walk_"를 식별 이름으로 가진 Texture 벡터 생성
		var frames:Vector. = myTextureAtlas.getTextures("walk_");

		// ... 앞으로는 아래에 계속
	}

벡터의 첫 번째 텍스처의 크기가 애니메이션의 영역을 결정한다. 애니메이션 여기까지 왔으면 나머지는 MovieClip의 인스턴스를 생성하면 된다. MovieClip 생성자의 인수에서 얻은 텍스처 벡터를 지정한다.
import starling.display.MovieClip;

	private var myMovieClip:MovieClip;

	private function onAddedToStage(e:Event):void {
		//... 위에서 계속

		// MovieClip 객체의 생성
		myMovieClip = new MovieClip(frames);

		// 애니메이션 재생 시작
		Starling.juggler.add(myMovieClip);
		addChild(myMovieClip);
	}

알겠지만, Tween뿐만 아니라 MovieClip의 재생도 Juggler을 사용한다. MovieClip도 IAnimatable의 서브클래스다. Juggler에 MovieClip을 추가하면 재생이 시작된다. 재생을 제어하는​​ 세 가지 메소드가 포함되어 있다.
myMovieClip.play();
myMovieClip.pause();
myMovieClip.stop();

pause()를 실행한 다음에 play()를 실행하면 현재 상태부터 재생되지만 stop()을 실행한 다음에 play()를 호출하면 처음 부터 다시 재생된다. 애니메이션은 default로 반복 재생된다. 이 설정은 loop 속성을 설정하여 바꿀 수 있다. 재생 여부 isPlaying 속성을 확인한다. 애니메이션이 끝까지 재생되면 movieComplete 이벤트가 발생한다. 재생이 완​​료되면 다음 작업으로 이동하고자하는 경우에 사용할 수 있을 것이다.
myMovieClip.addEventListener(Event.MOVIE_COMPLETED, onMovieComplete);

애니메이션이 반복되는 경우에는 재생이 완​​료될 때마다 movieComplete 이벤트가 발생한다. MovieClip의 부모 Sprite가 Stage에서 제거되면 MovieClip 재생을 중지해야한다. 그래서 다음과 같은 코드를 추가한다.
addEventListener(Event.REMOVED_FROM_STAGE,onRemovedFromStage);

	private function onRemovedFromStage(event:Event):void {
		Starling.juggler.remove(myMovieClip);
	}

Juggler의 remove() 메소드는 MovieClip뿐만 아니라 Tween도 삭제할 수 있다. 또 다른 MovieClip 사용 MovieClip의 생성자의 두 번째 파라미터에 임의의 프레임 속도를 지정할 수 있다.
// 40 fps를 지정
myMovieClip = new MovieClip (frames, 40);

MovieClip마다 다른 프레임 속도를 지정할 수 있다. 재생중인 프레임 속도는 fps 속성에서 가져올 수 있다. 또한 fps 속성 값을 설정하여 프레임 속도를 변경할 수도 있다. 그리고 모든 프레임에 대해 별도의 재생 시간을 지정할 수 있다. 아래는 5 번째 프레임을 2 초 동안 재생하도록 설정하는 예다.
myMovieClip.setFrameDuration(5, 2);

나중에 프레임을 추가하거나 삭제할 수도 있다. 이를 위해서 addFrameAt() removeFrameAt() 메서드를 사용한다. 아래는 5 프레임 애니메이션을 10번 째 프레임에 추가하거나 5 프레임을 제거하는 것이다. 
myMovieClip.addFrameAt(5, frames [10]);
myMovieClip.removeFrameAt(5);

프레임의 텍스처를 바꿀 수도 있다. setFrameTexture() 메소드를 사용하면 된다.
myMovieClip.setFrameTexture(5, frames [10]);

프레임에 소리를 연결할 수도 있다. setFrameSound() 메서드를 사용한다.
[Embed (source = "step.mp3")]

private static const StepSound:Class;
 
myMovieClip.setFrameSound (5, new StepSound() as Sound);

이제 5번 째 프레임이 표시되는 타이밍에 지정한 소리가 재생된다. 프레임에 직접 스크립트를 연결할 수는 없다. 그 대신 Juggler.delayCall() 메서드를 사용할 수 있다. 이상에서 Starling 애니메이션의 기본은 끝이다. Starling 표현의 유연성은 CPU 렌더링보다 미약하다. 그러나 빠른 렌더링을 안정적으로 해야할 경우에 선택하면 적당할 것이다.


원본 : http://cuaoar.jp/2011/12/movieclip-starling.html


 


package {
	import starling.events.Event;
	import starling.display.Sprite;
	import starling.display.DisplayObject;
	import starling.display.Image;
	import starling.textures.Texture;
	import starling.textures.RenderTexture;
	import starling.textures.TextureAtlas;
	import starling.display.MovieClip;
	import starling.core.Starling;

	public class Demo extends Sprite {

		[Embed(source = "patch.png")]
		private var MyBitmap:Class;

		[Embed(source = "patch.xml",mimeType = "application/octet-stream")]
		private var MyXml:Class;
		
		private var _arrMovieClips:Array;


		public function Demo() {
			// addedToStage 이벤트에 대한 리스너 추가
			addEventListener(Event.ADDED_TO_STAGE,onAddedToStage);
		}
		private function onAddedToStage(e:Event):void {

			// 텍스처 아틀라스로드
			var myTexture:Texture = Texture.fromBitmap(new MyBitmap());

			// 텍스처 아틀라스의 영역 정보 가져오기
			var myXml:XML = XML(new MyXml());

			// TextureAtlas 인스턴스 생성
			var myTextureAtlas:TextureAtlas = new TextureAtlas(myTexture,myXml);

			// "walk_"를 식별 이름으로 가진 Texture 벡터 생성
			var frames:Vector.<Texture>=myTextureAtlas.getTextures("patch_");

			// MovieClip 객체의 생성
			
			_arrMovieClips = [];
			var count:int = 20;
			for(var i:int=0;i<count;i++){
				var myMovieClip = new MovieClip(frames, 60);
				myMovieClip.x = 20+((stage.stageWidth-90)/count)*i;
				myMovieClip.y = stage.stageHeight - myMovieClip.height >> 1;
				Starling.juggler.add(myMovieClip);
				_arrMovieClips.push(myMovieClip);
				addChild(myMovieClip);
				
			}
			
		//	myMovieClip.setFrameDuration(5, 2);

		//	myMovieClip.addFrameAt(5,frames[10]);
		//	myMovieClip.removeFrameAt(5);
		}

		private function setAlign(inTarget:DisplayObject):void{
			inTarget.x = stage.stageWidth >> 1;
			inTarget.y = stage.stageHeight >> 1;
		}

		public override function dispose():void {
			removeEventListener(Event.ADDED_TO_STAGE,onAddedToStage);
			super.dispose();
		}
	}
}

저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

[Starling-06] 비트맵을 표시하는 방법

Project/Programming 2012.01.08 04:49
이번에는 비트맵(텍스처)을 표시하는 방법이다. Starling에서는 비트맵 또는 이전 포스트와 같이 사각형을 사용하여 화면을 구성한다. 기사의 뒷 부분에서 동적으로 텍스처 업데이트하는 방법도 소개한다. (참고 : 앞으로 내용에서 "텍스처 = 비트맵"으로 이해)


Image와 Texture 클래스
Starling 프레임워크는 비트맵을 표시하기 위하여 Image를 사용한다. Image는 Quad의 서브클래스다. 따라서 Quad에서 비트맵 처리 기능을 추가한 것이 Image 클래스가 되는 것이다. Flash Player 표시 객체는 Bitmap에 BitmapData가 있지만 Starling에서는 Image에 Texture가 있다. Texture에 로드할 수 있는 이미지 포멧은 PNG, JPEG, JPEG-XR, ATF 이렇게 4 종류이다. 각 형식마다 전용 읽기 함수가 포함되어 있다. 예를 들어, Bitmap 객체에서 Texture 객체를 만드는 경우 다음과 같다.
var myTexture:Texture = Texture.fromBitmap(myBitmap);

다음은 생성된 Texture에서 Image 객체를 생성하고 표시 목록에 추가하는 것만으로 화면에 비트맵이 표시된다. 아래는 myBitmap.png라는 파일을 표시하는 예제다. 포함된 비트맵 처리 부분을 제외하면 사각형을 표시하는 샘플 코드와 거의 동일하다.

package { import starling.events.Event; import starling.display.Sprite; import starling.display.Image; import starling.textures.Texture; import flash.display.Bitmap; public class Demo extends Sprite { // PNG 파일을 포함 [Embed(source = "icon128.png")] private var MyBitmap:Class; private var myImage:Image; public function Demo() { // addedToStage 이벤트에 대한 리스너 추가 addEventListener( Event.ADDED_TO_STAGE , onAddedToStage); } private function onAddedToStage(e:Event):void { var myBitmap:Bitmap = new MyBitmap() as Bitmap; // Bitmap에서 Texture 오브젝트를 생성 var myTexture:Texture = Texture.fromBitmap(myBitmap); // Image 객체를 생성 myImage = new Image(myTexture); // 표시 목록에 추가 addChild(myImage); } public override function dispose():void { removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage); super.dispose(); } } }

Starling의 Texture는 가로와 세로 픽셀 수가 2층(1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048)을 전제로하고 있는 것 같다. 다른 크기의 비트맵에서 Texture를 생성하면 Starling은 자동으로 가장 가까운 크기에 맞게 Texture를 다시 만든다.


벡터 이미지를 텍스처로보기
Flash Player 표시 객체는 벡터 데이터를 비트맵화 하는 기능을 가지고 있다. 이것을 이용하면 AS3 및 Flash Professional 기능을 사용하여 그린 벡터 이미지에서 Image 개체를 생성할 수 있다. 처리 효율을 생각하면 일부러 런타임에 비트맵을 생성하는 것보다는 사전에 비트맵화해 두는 것이 좋을 것이다. 따라서 이 방법은 동적으로 텍스처를 생성해야하는 경우에 필요하다. 구체적인 예를 소개한다. 아래는 Sprite의 graphic 특성에 그린 원을 텍스처로 변환하여 Image 객체로 화면에 표시하는 예제다.

private function onAddedToStage(e:Event):void{ var radius:uint = 100; // Flash Player의 Sprite를 생성 var shape : flash.display.Sprite = new flash.display.Sprite(); // 임의의 색상을 결정 graphics 속성 원을 그린다 var color:uint = Math.random() * 0xFFFFFF; shape.graphics.beginFill(color); shape.graphics.drawCircle(radius, radius, radius); shape.graphics.endFill(); // Sprite를 BitmapData로 변환; var buffer : BitmapData = new BitmapData (radius * 2, radius * 2, true, color); buffer.draw(shape); // BitmapData에서 Texture를 생성 var myTexture:Texture = Texture.fromBitmapData(buffer); // Texture에서 Image를 만듭니다 myImage = new Image(myTexture); // 표시 목록에 추가 addChild(myImage); }

이 경우 코드에서 Flash Player 표시 객체를 사용하게되므로, Starling 표시 객체와 혼동하지 않도록 주의가 필요하다.


동적 텍스처의 업데이트
위의 방법을 사용하면 동적으로 생성한 비트맵을 볼 수 있다. 그러나 표시 비트맵을 업데이트하려면 벡터 이미지 만들기부터 다시 한다. 즉, CPU 그리기 및 GPU 렌더링이 모두 행해지는 것은 그다지 효율적 수단은 아닌 것 같다.(항상 피해야한다는 의미는 아니다.)

이럴 때는 RenderTexture 클래스가 유용하다. RenderTexture은 Texture의 서브 클래스에서, "Starling 표시 객체"를 기존의 Image 객체에 그리는 기능을 제공한다. 이는 GPU만을 사용하기 때문에 효율적이다. RenderTexture은 "Flash Player 표시 객체"를 취급하지 않기 때문에 이미 준비되어 있는 Image 객체를 비트맵으로 합성하는 방법이 기본이다. 특히 미리보기 그래픽을 알고 있는 경우에 유효하다. RenderTexture 생성자는 그리기 영역의 크기만을 지정한다. 이 시점에서 RenderTexture 아직 새하얀(투명)상태다.다음으로 RenderTextire 인스턴스를 사용하여 Image의 인스턴스를 생성하는 단계로 위 코드에서 보았던 방식 그대로다.

import starling.textures.RenderTexture; private var myRenderTexture:RenderTexture; private function onAddedToStage(e : Event):void { // RenderTexture 객체를 생성 myRenderTexture = new RenderTexture(320,480); // RenderTexture에서 Image를 만든다 var canvas:Image = new Image(myRenderTexture); // 표시 목록에 추가 addChild(canvas); }

이제 그리기 영역 지정이 완료되었다.
다음은 RenderTexture를 업데이트하면 화면 표시도 자동으로 업데이트된다. RenderTexuture에 Starling의 표시 객체를 그리려면, draw() 메서드를 사용한다. 그릴 표시 객체는 위치, 비율, 각도, 알파를 지정할 수 있다. 아래 예제에서는 RenderTexture의 x 좌표와 y 좌표를 지정하고 있다.

myImage.x = 10; myImage.y = 20; myRenderTexture.draw(myImage);

많은 표시 객체를 그리고 싶은 경우를 위해, drawBundled() 메소드도 포함되어 있다. 이것은 여러 표시 객체 그리기를 일괄적으로 실행하는 것으로, 처리 효율의 향상을 노린 것이다. GPU를 효율적으로 사용하기 위해서 GPU에 대한 그리기 요청 횟수를 줄이는 것은 중요하다. drawBundled()의 인수는 함수를 지정한다. 함수에서 draw()은 함께 처리된다. 아래는 이미지를 조금씩 회전시키는 예제다.
myRenderTexture.drawBundled(rot);
	private function rot():void {
		var count:int = 30;
		var diff:Number = 2 * Math.PI / count;

		for (var i:int = 0; i < count; ++i) {
			myImage.rotation = diff * i;
			myRenderTexture.draw(myImage);
		}
	}

행하면 아래와 같이된다.



이미지는 Starling 샘플에 포함된 것을 사용했다. RenderTexture에 그려진 내용을 모두 삭제하려면 clear() 메소드를 사용한다.


자원의 해제
불필요하게 된 텍스처가 있는 경우에는 dispose()가 리소스를 해제한다. 특히 RenderTexture은 일시적인 이용이 많다고 생각되므로 잊지 말아야한다.
public override function dispose():void {
		myRenderTexture.dispose();
		super.dispose();
	}

원본 : http://cuaoar.jp/2011/12/starling-flash-1.html


 
package {
	import starling.events.Event;
	import starling.display.Sprite;
	import starling.display.Image;
	import starling.textures.Texture;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import starling.textures.RenderTexture;

	public class Demo extends Sprite {

		[Embed(source = "icon128.png")]
		private var MyBitmap:Class;

		private var myRenderTexture:RenderTexture;
		private var myImage:Image;

		public function Demo() {
			// addedToStage 이벤트에 대한 리스너 추가
			addEventListener( Event.ADDED_TO_STAGE , onAddedToStage);
		}
		private function onAddedToStage(e:Event):void {

			// RenderTexture 객체를 생성
			myRenderTexture = new RenderTexture(330,330);

			// RenderTexture에서 Image를 만든다
			var canvas:Image = new Image(myRenderTexture);

			canvas.x = stage.stageWidth- canvas.width >> 1;
			canvas.y = stage.stageHeight- canvas.height >> 1;
			// 표시 목록에 추가
			addChild(canvas);


			var myBitmap:Bitmap = new MyBitmap() as Bitmap;

			// Bitmap에서 Texture 오브젝트를 생성
			var myTexture:Texture = Texture.fromBitmap(myBitmap);

			// Image 객체를 생성
			myImage = new Image(myTexture);
			myImage.x = 165;
			myImage.y = 165;
			
			addEventListener(Event.ENTER_FRAME, run);

		}
		
		private function run(e:Event):void{
			myRenderTexture.drawBundled(rot);
		}

		private function rot():void {
			var count:int = 8;
			var diff:Number = (Math.random()*2) * Math.PI / count;

			for (var i:int = 0; i < count; ++i) {
				myImage.rotation += diff * i;
				myRenderTexture.draw(myImage);
			}
		}

		public override function dispose():void {
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			removeEventListener(Event.ENTER_FRAME, run);
			myRenderTexture.dispose();
			myImage.dispose();
			super.dispose();
		}
	}
}
 
저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

[Starling-04] EnterFrame 이벤트를 이용한 애니메이션

Programming/Framework 2012.01.08 00:12
이번에는 이전 포스트에서 소개한 코드를 기반으로 사각형을 이동시켜본다. EnterFrame 이벤트를 사용한다. Starling의 표기 객체는 Flash Player 표시 객체와 같게, EnterFrame 이벤트를 지원한다. 따라서 EnterFrame 이벤트 수신기를 추가하면 새로운 프레임을 볼 때마다 리스너 함수가 실행된다. Starling의 이벤트 방식과 리스너 등록 방법도 FlashPlayer 표시 목록과 거의 동일하다.

이번에 소개하는 방법은 기존의 Flash 컨텐츠를 재사용하기 쉬운 방법이다. 이번 예제에서는 그라데이션으로 사각형에 색을 채우고 회전시켜 본다. Quad 클래스는 정점마다 색을 지정하는 메소드가 있어서 편리하다. 메소드는 setVertexColor() 이다. setVertexColor()의 첫 번째 인자는 정점의 번호다. 번호는 0부터 시작하여 왼쪽, 오른쪽 위 및 왼쪽 아래 오른쪽 아래 정점이다. 두 번째 인수는 색상을 지정한다.

// myQuad.color = 0xABCDEF; 대신 다음을 작성 
myQuad.setVertexColor (0, 0x000000); 
myQuad.setVertexColor (1, 0xFF0000); 
myQuad.setVertexColor (2, 0x00FF00); 
myQuad.setVertexColor (3, 0x0000FF); 


이렇게 지정하면 나머지는 자동으로 각 정점 사이의 픽셀의 색이 보완되기 때문에 사각형에 그라데이션이 입혀진다.


EnterFrame 이벤트 리스너 사용

본론으로 돌아가서 EnterFrame 이벤트 리스너를 추가하는 방법이다. 사용하는 Event 클래스가 Starling 프레이워크에 포함된 클래스라는 점에 주의가 필요하다. 그러나 지금까지 AS3의 이벤트 처리 코드를 구현해 봤다면 별 어려움 없이 사용할 수 있을 것이다. (리스너 함수 삭제 타이밍이 약간 다르다 : 아래)
아래는 EnterFrame 이벤트를 사용하여 프레임마다 사각형을 회전시키는 샘플이다. 이전 예제의 onAddedStage()를 수정한 것이다.
private function onAddedToStage(e:Event):void {
// Quad의 인스턴스를 생성
myQuad = new Quad(200,200);
 
// 각 정점의 색상을 지정 myQuad.setVertexColor(0,0x000000);
myQuad.setVertexColor(1,0xFF0000);
myQuad.setVertexColor(2,0x00FF00);
myQuad.setVertexColor(3,0x0000FF);

// Quad의 인스턴스를 중앙에 표시;
myQuad.x = stage.stageWidth - myQuad.width >> 1;
myQuad.y = stage.stageHeight - myQuad.height >> 1;

// Sprite에 Quad 인스턴스를 추가
addChild(myQuad);

// EnterFrame 이벤트 리스너 추가
myQuad.addEventListener( Event.ENTER_FRAME , onEnterFrame);
}

private function onEnterFrame(e:Event):void {
// Quad의 인스턴스를 회전
if (e.currentTarget as Quad) {
   myQuad.rotation += .01; }
}

프레임마다 rotation 값을 0.01씩 증가시키고 있기 때문에 위 코드를 실행하면 사각형이 시계 방향으로 회전한다. 이 때 회전의 중심점은 사각형의 왼쪽 상단 모서리가 된다. Starling 표시 객체에는 기준점을 지정하기 위한 속성 pivotX과 pivotY가 있다. 이들을 사용하면 사각형 내의 임의의 점을 기준으로 회전시킬 수 있다. pivotX와 pivotY의 초기값은 모두 0이다. 즉, 표시 객체의 기본 등록 포인트는 왼쪽 모서리가 된다. 여기서는 기준점을 사각형의 중심으로 변경해 보자.
// 기준점을 Quad 인스턴스의 중심으로 설정
myQuad.pivotX = myQuad.width >> 1;
myQuad.pivotY = myQuad.height >> 1;

이렇게 기준점을 변경하면 표시 위치의 기준도 다르기 때문에 표시 위치가 어긋난다. 이번 예에서는 사각형의 폭과 높이의 절반인 100 픽셀씩 왼쪽과 위로 이동한다.
// Quad의 인스턴스를 중앙에 표시
myQuad.x = (stage.stageWidth - myQuad.width >> 1) + myQuad.pivotX;
myQuad.y = (stage.stageHeight - myQuad.height >> 1) + myQuad.pivotY;

myQuad.pivotX = myQuad.width >> 1 이므로, 아래와 같이 축약할 수가 있을 것이다.
// Quad의 인스턴스를 중앙에 표시
myQuad.x = stage.stageWidth >> 1;
myQuad.y = stage.stageHeight >> 1;

이상으로 화면의 중앙에 위치하는 사각형을 중심점을 기준으로 회전해봤다.


자원의 개방(메모리 해제)

Starling 표시 객체에는 dispose()라는 메소드가 있다. 이는 표시 객체가 삭제되는 타이밍을 알리는 표시객체에서 사용하는 리소스를 해제하기 위한 메소드이다. Starling에서 표시 객체의 서브 클래스를 정의할 때 dispose() 실행을 잊지 않도록 한다. 그렇지 않으면 메모리 누수의 원인이 될 수도 있다.
아래 예제 코드는 dispose()를 사용하는 예다.
public override function dispose():void {			
removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
myQuad.removeEventListener(Event.ENTER_FRAME, onEnterFrame);

super.dispose();
}

샘플은 이벤트 리스너를 제거하는 것이다. Starling 이벤트 리스너에 약한 참조를 사용할수 없기 때문에 삭제 타이밍에 확실히 삭제하도록 한다. 메소드의 마지막 행에서 super.dispose()를 호출한다. 이렇게 하면 객체에 addChild()로 추가된 모든 자식 객체에 대해 dispose()가 호출된다. 따라서 myQuad.dispose()는 명시적으로 기술할 필요가 없다. 기타 표시 목록에 추가되지 않은 객체가 있다면 dispose() 실행은 필수다.

또한 표시 목록에 추가할 수 없는 객체에서 리소스의 개방이 필요한 객체가 있다면 여기에 필요한 처리를 기술한다. 예를 들어, 다른 객체와 공유하는 전용 텍스처(여기서는 myTexture)를 참조하고 있다면 이 객체를 소멸한다면 myTexture.dispose()를 실행하여 myTexture가 확보한 비트맵 메모리 공간을 해제해야 한다.



원문 : http://cuaoar.jp/2011/12/enterframe-starling.html

package {
	import starling.events.Event;
	import starling.display.Quad;
	import starling.display.Sprite;

	public class Demo extends Sprite {
		private var myQuad:Quad;

		public function Demo() {
			// addedToStage 이벤트에 대한 리스너 추가
			addEventListener( Event.ADDED_TO_STAGE , onAddedToStage);
		}
		private function onAddedToStage(e:Event):void {

			// Quad의 인스턴스를 생성           
			myQuad = new Quad(200,200);

			// 각 정점의 색상을 지정         
			myQuad.setVertexColor(0,0xFFFFFF);
			myQuad.setVertexColor(1,0xFF0000);
			myQuad.setVertexColor(2,0x00FF00);
			myQuad.setVertexColor(3,0x0000FF);


			// 기준점을 Quad 인스턴스의 중심으로 설정
			myQuad.pivotX = myQuad.width >> 1;
			myQuad.pivotY = myQuad.height >> 1;

			// Quad의 인스턴스를 중앙에 표시
			myQuad.x = stage.stageWidth >> 1;
			myQuad.y = stage.stageHeight >> 1;

			// Sprite에 Quad 인스턴스를 추가            
			addChild(myQuad);

			// EnterFrame 이벤트 리스너 추가            
			myQuad.addEventListener( Event.ENTER_FRAME , onEnterFrame);
		}

		private function onEnterFrame(e:Event):void {
			// Quad의 인스턴스를 회전           
			if (e.currentTarget as Quad) {
				myQuad.rotation +=  .01;
			}
		}

		public override function dispose():void {
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			myQuad.removeEventListener(Event.ENTER_FRAME, onEnterFrame);

			super.dispose();
		}
	}
}
저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

[Starling-03] Flash 컨텐츠 표시의 기본

Programming/Framework 2012.01.05 01:50
Starling은 Stage3D를 이용한 빠른 2D 드로잉을 실현하기 위해 설계된 framework이다. 이전 기사에서 개요와 간단한 사용법을 소개했다. Starling에서는 3가지 방법으로 애니메이션을 사용할 수 있다. 이 방법을 여러 번에 나눠서 소개한다. 기존의 애니메이션 방법과 비교해 보자.

개발 환경 준비
Starling의 개발 환경은 Flash Player 11과 AIR 3가 필요하다. 툴은 Flash Builer 4.6을 권장한다. Flash Professional CS5 또는 CS5.5를 사용하는 경우 다음 문서에서 소개하는 기능확장이 편리하다.
Flash Professional CS5 or CS5.5에 Flash Player 11 설정 MXP

그리고 Starling framework는 github에서 구할 수 있다.
PrimaryFeather / Starling - Framework / zipball

위 링크에서 다운로드한 zip에 포함되어 있는 SWC 파일을 경로에 추가하면 Starling 애플리케이션을 개발 할 수 있다. 또한 혼합 모드에 direct를 지정하지 않으면 제작에 성공해도 화면에 표시할 수 없다. 따라서 SWF 경우 wmode = direct를, AIR일 경우 <renderMode> direct </renderMode> 로 지정하는 것을 잊지 말아야한다.

Starling 인스턴스 생성
Starling로 렌더링하려면 먼저 Starling의 인스턴스를 생성한 다음 start() 메소드를 호출한다. 이 부분은 어떤 Starling을 개발에도 그대로 사용할 수 있다. 아래가 가장 간단한 예제이므로 사용해보자. fla 파일에서 document class로 사용하는 것이 편하다.

package{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import starling.core.Starling;

        public class StartStarling extends Sprite{
		private var myStarling:Starling;

		public function StartStarling(){
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;

			// Starling의 인스턴스를 생성
			myStarling = new Starling(MyStarlingSprite,stage);
			// 그리기 작업을 시작
			myStarling.start();
		}
	}
}

Starling의 생성자 첫 번째 인수는 Starling의 Sprite다. 이 Sprite의 내용이 실제 화면 그리기에 사용된다. 그리기 정보는 Flash Player의 Sprite와 마찬가지로 자식 객체의 목록 구조와 같이 유지된다. 두 번째 인수는 표기 객체의 그리기 stage다. Starling 생성자는 5개의 인수를 가지지만 3 번째 이후 인수는 기본값을 가지고 있기 때문에 일반적으로 지정할 필요가 없다. 명시적으로 소프트웨어에서 3D 렌더링을 사용하려는 경우에는 5개의 인수를 작성할 수 있다. 마지막 인수가 혼합 모드를 지정한다.

// 5 번째 째의 인수로 그리기 모드를 지정 myStarling = new Starling (Game, stage, null, null, Context3DRenderMode.SOFTWARE );

이렇게 할 경우, 어떤 환경에서도 GPU로 렌더링 되지 않고 CPU로 처리하게 된다. 만약 실행 중에 소프트웨어 렌더링으로 대체되어 있는지 확인하고 싶다면 Starling 인스턴스 context.driverInfo 속성을 통해서 확인할 수 있다. 다음은 context3DCreate 이벤트를 사용하여 Stage3D를 초기화 한 후, 소프트웨어 렌더링의 프레임 속도를 절반으로 설정하는 예를 보여준다.

stage.stage3Ds[0].addEventListener (Event.CONTEXT3D_CREATE,onContext3DCreate); private function onContext3DCreate (event : Event) : void { if (Starling.context.driverInfo.toLowerCase() indexOf ( "software ")!=- 1){ Starling.current.nativeStage.frameRate = 30; } }

Starling 런타임 오류 검사를 수행하려는 경우에는 start()를 호출하기 전에 다음 설정을 추가한다.
myStarling.enableErrorChecking = true;

그러나 오류 검사 및 성능에 미치는 영향이 크기 때문에 디버깅 이외에는 설정하지 않는 것이 좋다. 기타 Starling 클래스의 기능은 다음 기회에 소개할 예정이다. 우선 온라인 문서는 이 곳에서 확인할 수 있다. Starling @ Starling Framework Reference

사용자 정의 Sprite 만들기

(참고 : 앞으로 Sprite와 같은 클래스 이름은 설명이 없는 한 모두 Starling 프레임워크에 종속된 클래스다. 익숙해질 때까지 실수에 주의가 필요하다.)

다음은 Starling의 생성자의 첫 번째 인자로 지정하는 Sprite 사용자 정의 클래스를 만든다. 만드는 단계는, 표시 오브젝트를 작성하고 Sprite에 addChild() 메소드를 추가하는 기존의 방식과 비슷하다. Stage3D의 그리기 단위는 삼각형이지만 Starling은 삼각형 2개를 기본으로 한다. 따라서 사각형에 해당하는 Quad 클래스의 인스턴스를 표시하는 방법에서 시작한다. 아래의 샘플은 화면에 사각형을 표시하는 것을 수행한다.

package { import Starling.display.Quad; import Starling.display.Sprite; public class MyStarlingSprite extends Sprite { private var myQuad:Quad; public function MyStarlingSprite() { // Quad의 인스턴스를 생성 myQuad = new Quad(200,200); // 우선 채우기 색상을 지정 myQuad.color = 0xABCDEF; // Sprite에 Quad 인스턴스를 추가 addChild(myQuad); } } }

위 코드를 실행하면 사각형이 화면 왼쪽에 그려진다. 사각형을 화면 중앙에 표시하려면 다음과 같이 Quad의 좌표를 설정한다.

myQuad.x = stage.stageWidth - myQuad.width>> 1; myQuad.y = stage.stageHeight - myQuad.height>> 1;
단, 위의 코드는 stage 속성에 대한 액세스를 포함한다. 따라서 Sprite가 초기화가 끝나기 전에 실행되면 오류가 발생한다. 그래서 addedToStage 이벤트를 이용한다. 이 addedToStage 이벤트는 Starling 이벤트지만, Flash Player의 addedToStage 이벤트 처럼 Stage가 이용 가능하게 된 것을 알려준다.

package { import Starling.events.Event; import Starling.display.Quad; import Starling.display.Sprite; public class MyStarlingSprite extends Sprite { private var myQuad:Quad; public function MyStarlingSprite() { // addedToStage 이벤트에 대한 수신기를 추가 addEventListener( Event.ADDED_TO_STAGE , onAddedToStage); } private function onAddedToStage(e : Event ):void { // Quad의 인스턴스를 생성 myQuad = new Quad(200,200); myQuad.color = 0xABCDEF; myQuad.x = stage.stageWidth - myQuad.width >> 1; myQuad.y = stage.stageHeight - myQuad.height >> 1; // Sprite에 Quad 인스턴스를 추가 addChild(myQuad); } } }

원문 : http://cuaoar.jp/2011/12/starling-flash.html
저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

[Starling-02] Starling 2D framework 소개

Programming/Framework 2012.01.04 18:25
이전 포스트에서 이야기한 내용과 같이 Stage3D의 지원을 통해서 FlashPlayer 렌더링 기술은 확실히 진화했다. 오랜만에 느껴보는 진화다. Starling 외에도 ND2D와 같은 framework가 등장하고 있으니 앞으로 여러가지 다양하고 새로운 것들이 나타날 것 같은 예감이다.(Alchemy의 이야기와 FlashPlayer에서 다중스레드 지원 이야기 등등)

이번에는 조금 더 자세하게 Starling을 소개한다.

Starling 아키텍처
Starling은 Stage3D로 구축되어 있다. Stage3D는 데스크탑 환경에서 DirectX 및 OpenGL, 모바일 환경에서는 OpenGL ES2에 구축되어 있다. 따라서 OpenGL 등이 GPU의 API를 직접 호출하기 때문에 Starling이 두 계층 사이에서 GPU를 사용할 수 있는 것이다.

1. Starling
2. Stage3D
3. OpenGL, DirectX, OpenGL ES2
3. GPU


Starling은 약 80kb 용량으로 가볍지만 이 때문에 Starling에서는 기존의 플래시 표시객체의 모든 기능이 제공되지는 않고 한정적이다. 아무래도 주로 게임 용도를 염두에 두고 설계되었기 때문이라고 생각된다.(물론 게임 이외에도 사용할 수 있다.) Starling의 이벤트 모델, 클래스 계층 구조도 기존 플래시 구조와 비슷하다. 계층의 순서는 아래와 같다.

1. starling.events.EventDispatcher
2. starling.display.DisplayObject
3. starling.display.DisplayObjectContainer

이어서 DisplayObjectContainer 아래에 Button, Sprite, TextField등이 정렬된다.
MovieClip은 조금 다르다. Image class의 서브 클래스이다. 아래와 같은 계층관계를 가지고 있다.

1. starling.display.DisplayObject
2. starling.display.Quad
3. starling.display.Image
4. starling.display.MovieClip


Image의 서브 클래스인 MovieClip은 GPU를 활용하기 위해 최적화되어 있기 때문에 기존에 타임라인 애니메이션을 좋아하는 사람은 활용도가 높다. 그리고 Quad라는 새로운 클래스가 등장했는데 Quad는 사각형 영역을 그리기 위한 클래스다.

비트맵 이미지를 표시하려면 다음과 같다.
// 비트맵을 포함
[Embed (source = "myBitmap.png")]
private static const myBitmap:Class;

// 비트맵 텍스처를 생성
var texture:Texture = Texture.fromBitmap(new myBitmap());

// 텍스터를 사용하여 이미지 객체를 생성
var image:Image = new Image(texture);

// 이미지의 표시 위치를 지정
image.x = 300;
image.y = 150;

// 이미지를 표시
addChild(image);

기존의 DisplayObject와 Starling을 동시에 사용하는 경우
Stage3D는 기존의 표시객체와 다른 레이어에 그려진다. 참고로 GPU에서는 비디오 재생을 StageVideo(FlashPlayer 10.2에서 도입) 레이어에 별도로 그려진다. 각 레이어의 관계는 아래와 같다.

1. 표시목록
2. Stage3D
3. StageVideo


각각이 독립된 레이어로 다른 레이어의 display 데이터에 직접 액세스할 수 없다. 예를 들어, StageVideo에서 재생중인 영상을 표시객체에 붙이는 것은 현재는 할 수 없다. 표시 목록과 Starling(즉 Stage3D)를 동시에 사용할 경우, 표시 목록이 레이어이므로 모든 표시 객체는 Starling의 객체 위에 표시된다. Stage3D는 프레임마다 모든 영역을 다시 그린다. 그리고 현재 버전에서는 Stage3D 객체를 투과할 수 없다. 따라서 StageVideo 위에 객체를 올리기 위해서는 Starling객체가 아닌 표시객체를 사용해야 한다.


Stage3D를 사용할 수 없는 경우
Starling의 Stage3D를 사용하려면 wmode를 direct로 지정해야 한다. wmode가 지정되지 않았거나 wmode가 다른 값으로 설정되어 있으면 런타임 오류가 발생한다. Starling은 오류가 발견되면 wmode가 올바르게 지정되지 않았다는 메시지를 출력한다. 따라서 HTML에서 플래시가 제대로 임베드 되지 않았을 경우, 쉽게 발견할 수 있다. wmode가 올바르게 지정되어 있어도 드라이버의 버전, 또는 GPU를 사용할 수 없는 경우에는 Stage3D가 SwiftShader로 대체되어 실행되기 때문에 원하는 속도를 내기 어렵다. FlashPlayer 11버전이 설치되어 있더라도 느리다면 드라이버 설치 버전이 최신인지 확인이 필요하다.

원문 : http://cuaoar.jp/2011/09/starling-actionscript-3-1.html 
저작자 표시 비영리 변경 금지
신고
    

설정

트랙백

댓글

[UPL006] BitmapData를 이용한 드로잉

Project/UPL 2009.08.17 03:57


1. stage에 마우스 클릭 후, 드로잉하면 30개의 라인을 화면에 그려준다.
1-1. 마우스 움직임의 속도에 따라 30개의 라인 넓이가 조정된다.
1-2. 라인의 alpha값은 0.16

2. 버튼 기능
2-1. '지우기' 버튼은 그려진 비트맵 데이터를 clear함.
2-2. '로컬 이미지 적용' 버튼은 로컬에 있는 이미지 파일을 적용하여 라인의 위치 색으로 설정함.
2-3. '그림 다운로드' 버튼은 현재까지 그려진 bitmap 이미지를 로컬에 저장함.
2-4. RGB 색 선택시 해당 색으로 배경 색을 변경함.

Bitmap을 이용한 라인 표현은 ActionScript 3.0을 Processing 언어와 유사하게 개발하고 있는 Frocessing 라이브러리를 이용함.






신고
    

설정

트랙백

댓글

[UPL005] 비트맵을 활용한 인터렉션 속도 개선

Project/UPL 2009.08.13 05:20


플래시는 화면에 올려진 모든 오브젝트를 FPS에 따라 화면에 다시 그리는 과정에서 연산처리에 영향을 주어 CPU 속도를 떨어뜨리게 되는데, 비트맵을 활용하면 사용자의 인터렉션에 영향을 주지 않는 범위를 하나의 오브젝트로 대체하여 속도를 개선할 수 있다.

[아래 보여지는 결과물은 화면이 작은 관계로 오른쪽에 버튼이 개수가 많지 않기 때문에 효과를 제대로 확인하기 위해서는 왼쪽 상단에 있는 ‘F’ 버튼을 눌러 전체 화면으로 하고 테스트해야 한다.]


위 결과물은 왼쪽에 메뉴에 해당하는 버튼그룹이 있고 오른쪽에는 마우스를 오버하면 scale을 주기적으로 변경하는 모션이 적용되어 있다. 왼쪽 메뉴에 해당하는 수많은 버튼들이 모두 stage 상에 올려져 있을 경우, 플래시 전체에 영향을 주어 모션이 부자연스럽고 느리게 움직이는 것을 볼 수 있다.

이때 오른쪽 상단의 ‘비트맵 변환’ 체크박스를 체크하고 확인해 보면 모션이 자연스럽게 적용되는 것을 볼 수 있다. 비트맵 변환을 체크할 경우 왼쪽에 있는 모든 버튼들은 하나의 비트맵으로 처리하여 시각적으로 존재하는 버튼처럼 적용된 것이다. 이렇게 하나의 비트맵으로 적용하여 화면에 배치할 경우 버튼에 마우스 오버시 색을 표시하는 오버효과가 적용되지 않는다. 그렇기 때문에 사용자가 왼쪽 메뉴 영역으로 마우스를 이동할 경우 기존의 비트맵 이미지를 다시 원래의 버튼들로 대체하여 사용자의 눈을 속이는 것이다.

사용자가 마우스를 이동할 경우 인터렉션 반응을 하지 않아도 되는 영역을 이렇게 하나의 오브젝트로 대체하는 것만으로도 플래시의 불필요한 속도저하 요소를 제거할 수 있다.

신고
    

설정

트랙백

댓글

[UPL004] Bitmap을 이용한 물고기 표현

Project/UPL 2009.08.08 02:10


아래 샘플 화면을 클릭하면 300개의 객체를 EnterFrame 1회마다 Bitmap에 표시하며 각각의 객체는 나머지 객체(299개)와의 위치 관계를 검사하여 유기적으로 좌표를 이동한다.

기능 설정

1. 300개의 +모양의 픽셀 정보를 가지고 있는 객체를 EnterFrame에 따라 화면(Bitmap)에 그리고 alpha 값을 0.86로 적용하는 행위를 반복한다.

2. 300개의 객체에 구현된 특정 메소드 실행시 자신 이외의 299개와의 위치 관계를 조사하여 근접한 경우 일정한 간격을 유지하며 같은 색으로 변경되며 최종적으로 하나의 색만 살아 남게 된다.

3. 객체가 먹이존에 근접한 경우 객체는 먹이존으로 유입되며 먹이존은 마우스로 이동 가능하다.

4. 화면 클릭시 전체(300개) 객체의 색을 랜덤으로 변경하며 클릭한 좌표(지름 40)에 위치하는 객체는 주변으로 흩어진다. (단 먹이존 클릭시 제외)





신고
    

설정

트랙백

댓글

[UPL003] BitmapData 픽셀 드로잉&CS4 3D 랜더링 속도

Project/UPL 2009.08.05 21:17


9000개의 픽셀을 이용하여 BitmapData에 드로잉하는 속도는 기존의 플래시플레이어에서는 상상도 할 수 없는 속도를 낸다. 물론 단순한 setPixel을 통한 색 변환 비주얼이지만...



신고
    

설정

트랙백

댓글

[AS3] getTileColor 메소드를 이용한 이미지

Programming/ActionScript 3.0 2008.01.28 19:11
BitmapData의 일정한 간격의 pixel 컬러를 추축하는 메소드를 작성하고 이미지를 뽑아 보았다. 땡굴이 형님도 비슷한 작업을 진행중인 듯 싶다. 원본 이미지의 사이즈와 상관없이 16x16픽셀 아이콘도 이러한 확대한 결과물을 만들 수 있어서 여러가지로 사용할 수 있을 듯 싶다.

랜덤한 형태에서 좀더 관련이 있는 부분들을 조합하면 불규칙적이지만 규칙이 있는 재질을 만들어 낼 수 있을 듯 싶다.









사용자 삽입 이미지

신고
    

설정

트랙백

댓글

[AS3] 텍스트 넘버링....

Project/Programming 2007.11.04 05:38
오랜만에 개인 작업물을 포스팅 하는 것 같다. 이번에는 3개의 클래스를 테스트하는 과정에서 만들어 진 것이다. 하나는 caurina Tweener를 통해 모션 효과를 주었고, 두 번째는 실무 작업에 쓰였던 DZeroNumber 넘버링 클래스, 그리고 세 번째는 이미지를 틀어서 사각 박스 모션을 적용하는 클래스를 사용했다.

화면에서 클릭을 하면 넘버링 효과와 함께 클릭한 위치로 텍스트필드가 이동을 한다. 이동 좌표 모션은 랜덤한 4 point 좌표에 해당하는 Bezier 곡선으로 이동을 하며,  DropShadow 필터의 blurY, blurX, distance, angle 속성 또한 랜덤으로 적용하였다.

텍스트필드가 위로 올라가는 느낌이 나도록 distance와 blurX, blurY속성은 같은 값이 되도록 하였다. 텍스트 모션이 끝나는 시점에서 화면을 BitmapData로 저장하여 사각 박스의 한 면이 떨어지는 효과를 넣었는데 up, down, right, left는 랜덤으로 그때마다 적용을 달리 해봤다.

별 의미 없는 작업이지만 재미있게 놀았던 것 같다…





신고
    

설정

트랙백

댓글

[AS3] BitmapData.lock and unlock 기능

Programming/ActionScript 3.0 2007.09.03 09:45
BitmapData에 있는 lock/unlock 메소드는 레퍼런스에 기능이 명시 되어 있지만 짧게 설명되어 있어서 지나치기 쉬운 것 같다. 아래는 레퍼런스에 나와 있는 내용이다.

public function lock():void
언어 버전 :     ActionScript 3.0
Player 버전 :     Flash Player 9
이 BitmapData 객체를 변경할 때 BitmapData 객체를 참조하는 어떤 객체(예: Bitmap 객체)도 업데이트되지 않도록 이미지를 잠급니다. 성능을 높이려면 setPixel() 또는 setPixel32() 메서드를 여러 차례 호출하기 전후에 이 메서드를 unlock() 메서드와 함께 사용합니다.

레퍼런스의 내용만으로는 정확히 어떠한 역할을 하는지 알기 쉽지 않다. lock 메소드는 BitmapData의 정보를 화면에 draw하는 처리과정을 일시적으로 사용하지 않도록 하여 불필요한 처리과정을 제거함으로써 퍼포먼스를 향상시킬 수 있다. 예를 들면

보통 BitmapData를 처리하기 위해 addChild(new Bitmap(bitmap))와 같이 addChild한 이후에 setPixel() 또는 setPixel32() 메소드를 사용하는 경우가 많은데, 이때 setPixel() 또는 setPixel32()와 같은 메소드는 그 메소드 자체 처리만으로도 addChild 되어 있는 경우 화면에 draw하는 기능을 함께 처리해 버린다. 따라서 addChild되어 있는 BitmapData에 setPixel() 또는 setPixel32() 메소드를 여러 번 사용하여 복잡한 처리를 할 경우에 setPixel() 또는 setPixel32() 메소드를 호출될 때마다 화면에 draw 하기 때문에 불필요한 CPU 처리를 하게 되는 것이다.

물론 setPixel() 또는 setPixel32()메소드의 처리 과정을 화면에 표시해야 하는 경우라면 별로 효력이 없겠으나 setPixel() 또는 setPixel32() 메소드를 여러 번 처리한 이후 결과만을 화면에 표시할 경우는 lock 메소드를 통해서 화면에 표시하는 기능을 잠그고 일련의 처리를 완료한 이후에 unlock 메소드를 통해서 잠근 기능을 풀어주면 불필요한 처리를 하지 않으면서 화면에 처리한 결과를 표시할 수 있다.

아래 예제를 돌려보면 lock/unlock를 사용하지 않았을 때와 사용했을 때의 차이를 확인 할 수 있다.

lockTest(700, 700);

function lockTest(w:uint, h:uint) {
var bm:BitmapData = new BitmapData(w,h);
addChild(new Bitmap(bm));

trace("lock/Unlock 사용 안함 : "+drawBitmap(bm) + "ms");

bm.lock();
trace("lock/Unlock 사용 : "+drawBitmap(bm) + "ms");
bm.unlock();
}
function drawBitmap(bm:BitmapData):uint {
var start:uint = getTimer();
var w:uint=bm.width;
var h:uint=bm.height;

for (var x:uint=0; x < w; x++) {
for (var y:uint=0; y < h; y++) {
bm.setPixel(x,y,Math.random()*0xFFFFFF);
}
}
return getTimer() - start;
}

// output
lock/Unlock 사용 안함 : 214ms
lock/Unlock 사용 : 157ms

output 결과는 시스템에 따라 다소 차이가 있을 수 있는데 테스트한 컴퓨터 스펙은 아래와 같다.

소니 바이오 노트북 VGN-SZ18LP
Genuine Intel® CPU T2400 @ 1.83GHz
메모리 1.50GB RAM

신고
    

설정

트랙백

댓글

Flickr Searcher 1.8 업로드

Project/Programming 2007.05.13 13:49

사용자 삽입 이미지


사용자 삽입 이미지

사용자 삽입 이미지


Flickr의 Open API를 이용한 사진 검색 어플리케이션 'FlickrSearcher'
version 1.8

http://dicaland.cafe24.com/flickr/FlickrSearcher1_8.swf
====================================================================================================

FlickrSearcher1_8.exe

Version 1.8  Release date : 2007/05/13
Change log
1. photo 썸네일 클릭시에 나타나는 왼쪽 중앙에 있는 information 버튼의 가독성을 위하여 색 변경
2. Search history 기능 추가 : 특정 모드(tags, name, email, nsid)를 통해 검색한 history를 저장할 수 있도록 함.
(최근 검색한 검색어와 페이지 수를 통해서 되돌아 갈 수 있도록 함)
====================================================================================================


신고
    

설정

트랙백

댓글

Flickr Searcher 1.7 업로드

Project/Programming 2007.05.10 11:45
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지

Flickr의 Open API를 이용한 사진 검색 어플리케이션 'FlickrSearcher'
version 1.7

====================================================================================================
Version 1.7  Release date : 2007/05/10
Change log
1. 1.6에서 'VIEW AUTHOR PHOTOS'로 검색을 할때 search mode 'name'으로 이동하면서 textField 길이가 불규칙하게 변했던 버그 수정.
2. 정보 TextField를 선택가능 하도록 변경.
3. Photo Information에서 이미지의 exif 정보를 볼 수 있도록 기능 추가.
====================================================================================================
신고
    

설정

트랙백

댓글

Flickr의 Open API를 이용한 사진 검색 어플리케이션

Project/Programming 2007.05.09 09:23



Flickr의 Open API를 이용한 사진 검색 어플리케이션 'FlickrSearcher'


사용자 삽입 이미지
사용자 삽입 이미지

====================================================================================================
Version 1.6  Release date : 2007/05/08
Change log
1.    search mode를 tag, name, email, nsid와 같이 4개 모드로 검색 가능하도록 기능 추가.
2.    tag로 검색할 경우에는 ‘,’ 구분자를 통해 복수 tag 검색 가능 추가. ex) quality, blue, yellow
3.    author & photo information 확인 가능.
4.    author의 정보에 있는 “VIEW AUTHOR PHOTOS” 버튼을 통해 author의 사진들을 볼 수 있는 기능 추가.
5.    photo information에서 이미지의 크기별로 view가 가능하며 해당 이미지를 download하는 기능 추가.
6.    license 적용(크리에이티브 커먼즈의 저작권 규약 표시)
7.    author의 icon 이미지 표시(이미지에 대한 모든 정보를 사전에 습득할 시, 속도 문제를 감안하여 해당 이미지를 클릭한 이후 적용됨).
8.    편의성을 고려하여 1.0버전에 있던 fullscreen 모드 삭제,
9.    기타 1.0버전에 없는 다수 기능 추가.
====================================================================================================
Version 1.0  Release date : 2007/05/03
Change log
최신 버전 업데이트시 자동 알림 기능 추가

version 1.0 개발 상세내용

====================================================================================================

국내 포탈사이트 open API에 대한 단상


신고
    

설정

트랙백

댓글

크로스도메인 정책과 플래시의 bitmapData 문제

Programming/ActionScript 2.0 2007.04.30 02:01
요즘 집에서 flickr api를 이용하여 이미지 갤러리를 만들고 있는데 한 가지 문제로 인하여 구현 하고자 하는 기능을 진행하지 못하는 상황이 발생했다.

문제는 로컬에서 load한 이미지(http://경로를 포함한 flickr의 이미지)를 bitmapData로 변환하면 제대로 작동하지만 이것은 개인 계정이나 flickr와 도메인 정책이 다른 웹에 올려놓고 이미지를 load한 후 그 load한 무비클립을 bitmapData로 변환 후 draw하게 되면 작동하지 않는다.

그 동안은 한 계정, 또는 플래시 라이브러리에 있는 이미지를 사용했기 때문에 이러한 문제를 확인하지 못하였으나 flickr를 이용하여 만들다 보니 서로 다른 도메인 계정에서 load한 이미지는 bitmapData로 만들 수 없다는 결론이다.

상식적으로는 도메인이 다르더라도 일단 무비클립에 이미지를 load한 상황이라면 화면에 보이는 무비클립을 비트맵데이터로 전환할 수 있을 것이라는 생각을 했었는데…

신고
    

설정

트랙백

댓글

[UI&C] Crop BitmapData

Project/UI&C Lab 2007.02.21 11:03
이번에는 BitmapData를 이용하여 특정 무비클립을 bitmap으로 전환하고 다시 무비클립으로 되돌리는 클래스를 제작한 이후에 재미난 기능을 추가했다.

플래시 8의 bitmapData 클래스가 아니라면 예전에는 상상도 못할 구현이 가능해졌다. 플래시로 만든 마술이라고 해야할까...;;

사용자 삽입 이미지

위에 보이는 이미지는 중앙에 있는 crop 버튼을 누르게 되면 현재 화면에 보여지고 있는 오른쪽 네비게이션을 포함한 화면에 보여지는 모든 무비클립을 하나의 BitmapData로 전환하고 기존에 있던 무비클립을 visible = false를 적용한다. 이렇게 하면 화면에서 event가 발생하는 모든 것들은 bitmapData로 전환되기 때문에 작동하지 않는다.

여기서 화면에서 특정 좌표에 마우스로 클릭하고 사각 박스를 드레그하여 영역을 잡게 되면 그 영역을 새로운 bitmapData로 전환하여 무비클립을 생성하게 되는데 그 무비클립을 마우스로 press and drag하면 그 부분만 따로 분리하게 만들어 졌다. 화면에 보여지는 것처럼 rectangle로 선택한 영역을 따로 분리되는 것을 볼수가 있다.

ctrl 키를 누르게되면 순차적으로 다시 제자리로 되돌아간 이후 기존에 있던 무비크립으로 대체된다.

사용자 삽입 이미지

이것은 위의 것을 조금 응용한 모션이다. 중앙에 있는 crop 버튼을 누르게되면 화면에서 random 좌표의 사각 박스가 화면에서 분리되어 위로 올라가게 된다. _y값 모션에서 blur 필터를 적용하였다. 모두 올라간 이후에는 ctrl 키를 누르면 다시 각각의 영역이 자신의 자리로 되돌아 오게 된다.

이번 아이디어의 구상은 처음 원하는 무비클립을 bitmapData로 전환하고 되돌리는 클래스를 제작한 이후에 파생된 모션 형태이다. 이것은 많은 부분에서 활용도가 높을 것으로 예상된다. 예를 들면 처음 모션이 이루어진 이후에 더이상 움직임이 없는 배경의 경우는 이렇게 bitmapData로 전환하게 되면 모션을 주기 위해서 생성했던 많은 무비클립들을 하나의 무비클립으로 대체할 수있어 리소스 낭비를 줄일 수 있는 점이 있을 것이고, 화면전환효과에서 이를 활용하면 다양한 형태의 전환효과를 만들어 낼 수 있을 것으로 예상된다.

신고
    

설정

트랙백

댓글

[UI&C Lab] Create Random MovieClip

Project/UI&C Lab 2007.02.21 11:01
사용자 삽입 이미지

Create Random MovieClip_1

stage의 특정 random 영역에 무비클립을 생성한다. 생성할 때는 중심점이 되는 new Point(x,y)좌표점을 rnadom으로 설정하므로써 그룹단위로 무비클립을 생성하게 된다. 여기서의 문제점은 무비클립이 많아지면 많아질수록 CPU의 과부화 문제가 발생한다. 노트북에서는 무비클립 300개 이상이되면 그때부터 현저하게 속도 저하가 발생한다.

사용자 삽입 이미지

Create Random MovieClip_2

앞의 버전에서 발생한 CPU 문제점을 BitmapData를 통해서 해결한 버전이다. 생성 방법은 앞과 동일하며 그룹단위(무비클립이 30개 단위로 그룹으로 묶는다 if count%30 == 0)

한 그룹이 완료되었을 때 BitmapData를 통해서 화면에 보여지는 무비클립들을 빈 무비클립으로 생성한 무비클립에 draw하고 생성했던 30개의 무비클립을 remove 시킨다. 그리고 다시 30개의 그룹이 완료되면 또다시 밑에 있는 BitmapData로 그린 무비클립과 새로 생성한 무비클립을 다시 BitmapData로 draw시킨다.

이렇게 진행하면 쌓이는 무비클립이 30개 이상을 넘지 않기 때문에 생성하는 무비클립의 갯수가 무한정 늘어난다고 하여도 CPU의 문제는 없다.

진행을 하면서 오류를 범했던 부분은 BitmapData를 draw시키는 무비클립을 draw 시킬때 마다 새로 생성하지 않고 같은 무비클립에 draw시킬 경우에 기존의 draw시킨 무비클립이 메모리에 쌓이는 문제로 인하여 CPU문제가 그대로 존재한다는 것이었다. 이는 30개 그룹단위로 draw시킨때 같은 depth에 새로 무비클립을 생성하여 기존의 무비클립을 삭제하는 형태로 해결하였다.

BitmapData로 draw시킬때 alpha 값을 50%으로 설정하여 draw시키는 시점과 30개의 무비클립이 삭제되는 시점을 화면에 보여주고 있다

사용자 삽입 이미지
Create Random MovieClip_3
 
앞의 구조와 같다. 앞의 경우는 draw시키는 시점을 alpha = 50으로 보여주었으나 여기서는 Bitmap에 blur 필터를 적용한 것이다.
var filter = new BlurFilter (2, 2, 1);
bitmap.applyFilter (bitmap,bitmap.rectangle, new Point (0, 0) , filter);
 

사용자 삽입 이미지
 
Create Random MovieClip_4
 
앞에서 연구한 결과를 가지고 비주얼적으로 표현할 수 있는 방법으로 이와 같은 형태로 작업을 진행하였다.
 
이것은 앞의 것들과 무비클립의 생성과정은 동일하다. 여기서 해당 무비클립이 그룹단위로 생성할때 자신의 고유색을 가지고 생성을 하는데 그 색은 Shift버튼을 누르면 나타나는 background 이미지의 pixel단위 RGB를 축출하여 적용하였다.이미지의 사이즈가 작기 때문에 앞의 것들보다 무비클립을 작게 하였다.
 
사용자 삽입 이미지
 
Shift 버튼을 눌렀을때 배경을 볼 수 있다.
 
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지

Create Random MovieClip의 가장 중요한 부분은 화면에 나타난 무비클립이 변형되지 않는다는 전제조건이 있을 경우에는 해당 무비클립을 stage에 남겨두는 것이 아니라 remove 시키되 기존의 이미지가 그대로 남도록 BitmapData를 사용하여 특정 무비클립에 draw시키므로써 수많은 무비클립의 생성으로 발생하는 플래시의 전체적인 cpu 문제점을 해소하는 것에 중점을 두었다.
신고
    

설정

트랙백

댓글

[UI&C Lab] trapezoid navigation

Project/UI&C Lab 2007.02.21 11:00
사용자 삽입 이미지

사용자 삽입 이미지

사용자 삽입 이미지

trapezoid navigation 은 좌우로 슬라이드되는 형태의 네비게이션을 만들기 위해 만들었는데 여러장을 적용했을 경우 CPU문제가 있어서 잠시 보류중이다. 이것은 무비클립을 좌우로 사다리꼴모양으로 외곡시켜기 중앙에 위치했을 때는 무비클립을 사용할 수 있도록 만들어 졌다.
 
신고
    

설정

트랙백

댓글

[UI&C Lab] BitmpData Characters...

Project/UI&C Lab 2007.02.21 10:59
이번은 BitmapData를 이용하여 배경 이미지의 색을 축출하여 문자가 포함된 무비클립의 색을 변경하는 작업을 해봤다. 이미지의 윤곽을 잘 보이도록 하기 위해서 무비클립의 갯수를 늘려 6000개가 넘어가니 무비클립을 생성할 때와 색을 입힐때 다소 처리 시간이 지연되는 경향이 있다...
사용자 삽입 이미지

사용자 삽입 이미지

사용자 삽입 이미지

사용자 삽입 이미지


신고
    

설정

트랙백

댓글