본문 바로가기

Starling

Starling - Introducing 번역 2 > Display List , Event Model , Touch Events





목차

First Flight ------------------------------------------------------------------------------------------------- 1

What Is Starling?

Why Starling?

Philosophy 

Intuitive 

Lightweight 

Free 

How 

Layering Restrictions 

Getting Started

Setting Up Your Scene

Wmode Requirements

Stage Quality

Progressive Enhancements

The Display List

Event Model

Event Propagation

Touch Events

Simulating Multi-touch

Texture

Image

Collision Detection

Drawing API

Flat Sprites

MovieClip

Texture Atlas

Juggler

Button

TextField

Embedded Fonts 

Bitmap Fonts 

RenderTexture

Tweens

Asset Management 

Handling Screen Resizes

Plugging Starling with Robotlegs 

Plugging Starling with Box2D

Profiling Starling 

Particles 

-----------------------------------------------------------------------------------------------------------------

파란색 부분 번역.

의역이 조금 있습니다. 사실 많을지도 모릅니다.

의미전달이 더 용이하다 판단 될 경우 원문의 단어를 그대로 사용했습니다.

매끈한 말로 번역할 만한 실력이 안되므로  적당히 감안해 봐주세요.


The Display List



Starling 은  기존의 Flash Display List 와 같은 규칙을 따른다.

(즉, 객체들은 디스플레이 리스트에 추가되기전까진 stage 를 이용할수없다)

안전하게 stage에 접근하기 위해, 우리는 Flash 의 매우중요한 이벤트들 중 몇가지에 의존한다.

그것들은 Starling 안에서도 이용할수있다.


Event.ADDED

객체가 부모에 추가될때

Event.ADDED_TO_STAGE: 

객체가 stage에 연결되어 있는 부모에 추가되어서 보여질때 

Event.REMOVED: 

객체가 부모에서 제거될때

Event.REMOVED_FROM_STAGE:

객체가 stage에 연결되어있는 부모로부터 제거되어 보여지지 않게 되었을때.



우리는  나열되어 있는 이 이벤트들을 적극적으로 이용한다.

다른 플래시 컨텐츠처럼 이런 이벤트들은 객체를 비활성시키고 퍼포먼스와 리소스를 최적화거나 초기화 할수있도록한다.


아래는 DisplayObject 클래스에 의해 정의된 메서드들의 목록이다 .


removeFromParent: 

부모가 있다면 객체를 부모에서 제거한다.


getTransformationMatrixToSpace:

로컬 좌표계와 다른 transformation을 대변하는 매트릭스를 생성한다 .


getBounds:

 다른좌표계에서의 객체를 완전히 둘러싼(에워싼) rectangle 객체를 반환한다.


hitTestPoint:

로컬좌표계의 가장 위에 위치한 point 객체를 반환한다.테스트가 실패하면 nill 을 반환


globalToLocal:

글로벌의(stage) 좌표에서 로컬 좌표계로 point를 변형시킨다.


localToGlobal:

로컬좌표계에서 글로벌 좌표계로 point를 변형시킨다.



아래는 DisplayObject 클래스에서 정의된 속성들의 목록이다.

이들 노출된 속성은 알아보기 매우 쉽고

DisplayObject 의 등록포인트를 동적으로 변화시키는 pivotX 와 pIvotY 처럼 몇가지는  다소 개선되었다.



transformationMatrix:

그부모로부터 상대적인 객체의 transformation Matrix.


bounds:

부모의 로컬좌표의 상대적인 객체의경계선


width:


height:

높이.


root: 모두가 알고있는 그 root.


x: 우리 모두가 알고있는 그 x


y :아 이런거 싫어 이젠 걍 생략


pivotX: 객체 좌표공간의 기준이 되는  x좌표(디폴트 0)


pivotY: 객체 좌표공간의 기준이 되는  y좌표(디폴트 0)


scaleX: 생략


scaleY: 생략


rotation: 라디안 각도(라.디.안 주의!!)


alpha: 생략


visible: 생략


touchable: 객체가(그리고 객체의 자식들이) 터치 이벤트를 받을 수 있는지를 나타낸다.


parent: 생략


stage: 생략



고전적인 Flash APIs 처럼, Sprite 는 당신이 사용할 수 있는 가장 가벼운 컨테이너이다.

물론  컨테이너의 기능과 DisplayObject의 서브클래스로서  당신은  위에서 언급한 모든 api 를 사용할 수 있다.

지금까지 우리는  컨텐트를 컨테이너에 추가하지 않았지만 scene을 제외하고,사실은,

우리의 Game 클래스가 DisplayObjectContainer 인 Sprite를 상속했다는 것을 기억하자.



아래는  DisplayObjectContainer클래스의 api 이다.



addChild: 다들 아는 그것.


addChildAt: 생략


dispose: 등록한 모든 리스너와 GPU 버퍼를 제거한다.


removeFromParent: 부모객체에서 제거한다.


removeChild: 생략


removeChildAt: 생략


removeChildren: 생략


getChildAt: 생략


getChildByName:  생략


getChildIndex:  생략


setChildIndex:  생략


swapChildren:  생략


swapChildrenAt:  생략


contains:  생략



Starling은 자동으로 디폴트 SWF 백그라운드 컬러를 받으며, 원한다면 아래의 SWF 태그를 사용하여  설정할수있다


[SWF(width="1280", height="752", frameRate="60", backgroundColor="#990000")]

 

또한 디스플레이 리스트에 추가된 모든 디스플레이 오브젝트를 통하여

이 행동를 오버라이드 하거나, 컬러를 stage에 전달할 수 있다.

      



지금까지 우리는어떠한 텍스쳐도 사용하지 않았고,

quad객체로 이루어진 두개의 삼각형을 가지고 있으며,

plane의 vertex 들은 GPU에 의해 다른 색으로 채워져 있다.


당연하지만, 만약 단색를 원한다면  Quad 객체의 color 속성을 사용하면 된다.

그럼 그림 12과 같은 결과를 얻을 것이다.


그림12


이제 Event.ENTER_FRAME 이벤트를 사용하여

해당 핸들러로 사각형의 색을 간단한 이징효과를 사용하여  랜덤한 색으로 채울 것이다.

 





이 사각형을 회전 시키기위해 rotation 속성을 사용하지만

플래시플레이어와는 달리 Starling에서는  호도각(radian) 값을 사용한다는 것을 기억하자.


이 선택은 Sparrow (다른 라이브러리입니다) 와 Starling 사이의 일관성을 지키기  위해서이다.


당신이 일반각(degree) 를 사용하여 회전을 시키기 원한다면

언제든지 starling.utils.deg2rad 함수를 사용하여 그때 그때마다 변환하면 된다.



sprite.rotation = deg2rad(Math.random()*360);



만약 당신이 기존의 일반각(degree) 으로 작업하는걸 선호한다면 부담가지지 말고 Starling 의 소스 코드를 수정해라.


한가지 멋진 것을 알려주자면

모든 DisplayObject 는 pivotX 와 pivotY 속성을 가지며 이를 이용하여 런타임때 중심점을 바꾸는 것이 가능하다.



q.pivotX = q.width >> 1;

q.pivotY = q.height >> 1;



이는 Starling을 사용하는 액션스크립트 개발자에게 있어선 매우 반가운 것이다.


Quad로 만들어진 사각형은 DisplayObject 이므로 TextField 와 같이 Sprite에 포함되는 것이 가능하며,

고전적인 디스플레이 리스트와 같이 이 Sprite를 움직이면 그 이하의 자식들도 같이 움직이게 된다.





이제 우린,

Sprite와 Sprite에 포함되어있는 Quad 와 TextField 모두를 컨테이너(Sprite) 의 중심점을 기준으로 회전시키게 된다.





우리의 코드는 왠지 허접해 보인다.

몇개의 코드를  내부컬러,행위,자식들이 정의된 CustomSprite클래스에 옮기도록 하자.

아래코드는 CustomSprite 클래스의 코드이다.





그리고 이것은 우리의 game 클래스이다.





Game 클래스의 메인루프에서 custom srpite를 update하면

CustomSprite 의 내부 update API에 의해 객체들을 컨트롤 할 수 있게 된다.

객체들에 대한 이러한 접근을 사용하면, pause등의 메카니즘을 전체에 추가하는것도 쉬울것이다.



우리의 조잡한 테스트에 구린 상호작용을 추가해보자.

우리는 마우스를 따라다니는 사각형의 움직임을 추가할것이다. 

아래는 그것을 가능하게 하는 코드를 추가한 허접한 코드이다.

(이해하기 힘든 아메리칸 스타일 조크라니 )






우리는 어떤 마우스 API 도 사용하지 않았고,

실제로 Starling 에는 마우스의 개념조차 없다.


터치이벤트에 주목하자. 


우리는 마치 고전적인 MousEvent.MOUSE_MOVE 이벤트 처럼 마우스(혹은 손가락) 의 움직임을 청취하고 있다.

매프레임, 우리는 현재의 마우스 위치를 TouchEvent 객체의 getTouch 나 getLocation같은 헬퍼 APIs 를 이용하여 보관한다.


마우스 위치가 저장되면,

우리는 onFrame 이벤트 핸들러 안에서 간단한 이징 방정식을 사용하여 사각형을 움직인다.


앞서 언급한 것처럼,

Starling 은 GPU에서 프로그래밍하는것을 쉽게 해줄 뿐만아니라

리소스에서 객체를 제거하는 것도 쉽다.

예를들어 우리가 사각형을 클릭했을때 화면에서 제거되기를 원하다면 아래와 같이 할 수 있다.



우리의 자식은 제거되었지만 Event.ENTER_FRAME 리스너를 제거하지 않았다는것을 주목하자.

만약 sprite에 여전히 리스너가 등록되어 있다면 hasEventListener API 를 사용하여 테스트 할 수 있다.




안전하게 자식을 제거하려면  removeChild API 의 두번째 인자인  dispose 를 사용하며,

이는 객체가 제거될 때 객체에 등록된 모든 리스너를 제거하도록 해준다.




만약 자식이 스스로도 자식들을 가지고 있다면 그또한 모두 처리된다.

removeChildren  이나 removeChildAt 같은 자식들을 제거하는 api의 dispose 인자는 모두 같은 기능을 한다.


dispose 행위는 GPU 버퍼 역시 비우지만 texure는 그렇지 않다는것을 주의하자. 

texture 를 제거하기 위해서 Texture 나 TextureAtlas  클래스 객체의 메서드와 같은 이름의 api 인 dispose를 호출하면 된다.

어떤 DisplayObject 라도 dispose를 호출함으로서 모든 리스너들을 명쾌하게 제거 할 수 있다.



clicked.dispose()



처음으로 사용해본 Starling 의 이벤트모델은 고전적인 플래시의 것과 매우 유사하다.

Starling 에서 사용가능한 EventDispatcher API 들에 대해 조금의 시간을 더 투자해보자.





Event Model



그림 2에서 보이는 것처럼 모든 Starling 객체는 EventDispatcher 의 하위 클래스이다.


그림2



고전적인 EventDispatcher API 처럼, 모든 Starling 객체는 리스너를 등록하거나 제거하는 API가 노출되어 있다.



• addEventListener:

구체적인 이벤트의 리스너를 등록.


• hasEventListener: 

구체적인 이벤트가 등록되어 있는지 테스트.


• removeEventListener:

이벤트리스너를 제거


• removeEventListeners: 

구체적인 이벤트에 관한, 혹은 모든 리스너를 제거




추가된 매우 편리한 API removeEventListeners 를 주목하자.

언제든지, 당신이 특정 이벤트에 등록된 모든 리스너를 제거하기를 원하면

removeEventListeners 에 이벤트 타입을 전달하면된다.


button.removeEventListeners(Event.TRIGGERED);


이벤트타입에 상관없이 모든 리스너를 제거하기를 원하면 

이벤트 타입 인자를 적지 않고 removeEventListeners API 를 호출 하면된다.


button.removeEventListeners ();


리스너를 제거하기위한 인자를 가진  removeChild API 를 우리가 최근에 사용한것을 기억하자.

무엇을 호출해도 내부적으로는 동일한 API 이다.




Event Propagation (이벤트전파)



Starling 수업의 초반부터 쭉 이야기 했듯이

Starling 은 Stage3D 상에서  display list 의 개념을 재현하였다.


대단한 소식 하나는,

이벤트전파의 힘을 Starling 을 통해 재사용 할수 있다는 것이다.

이벤트전파는 당신의 코드를 깨끗하게 만들기 위해 등록하고 제거해야 하는 리스너의 수를 제한해야 할 상황에서

매우 유용하게 사용된다.


이벤트전파의 개념에 대해 친숙하지 않다면 

http://www.adobe.com/devnet/actionscript/articles/event_handling_as3.html

이곳에서 자세한 내용들을 확인 할수 있다.


흥미로운 점은,

Starling 이 다루는 이벤트전파는, 고전적인 플래시의 것과 약간 다르다는 것이다.

Starling 은 버블 단계만을 지원한다.캡쳐 단계에 대한 개념은 존재하지 않는다.

 이벤트전파가 어떤 영향을 미치는지 이후의 예제를 통하여 보고 배울 것이다.




Touch Events



앞서 언급한것처럼 Starling 은 Sparrow 의 사촌이며,

그 때문에 터치 이벤트의 메커니즘은 모바일과 모바일에 대한 터치 상호작용에 적절하게 되어있다.


마우스상호작용으로 디자인된 데스크탑 어플리케이션에서 사용된다면 처음엔 상당히 혼란스러울 것이다.



먼저,


당신이 만약 그림 2를 봤다면

고전적인 display list 와는 반대로 Starling 에는 모든 display 객체의 기본 상호작용을 하게끔 하는

InteractiveObject  클래스가 계층에 없다는 것을 눈치 챌 것이다.


차이점을 말하자면,

DisplayObject 클래스는 상호작용행위가 이미 구현되어 있다.


우리는 지난 예제에서 touch 이벤트를 사용하였다.

마우스를 사각형에 터치하면 반응하는 매우 기본적인 예제를 시작했었는데

이때 , 우리는 TouchEvent.TOUCH  이벤트를 사용했다.



// when the sprite is touched

_customSprite.addEventListener(TouchEvent.TOUCH, onTouchedSprite);



당신은  "이거면 되는거야?"  라고 생각했을지도 모른다.


사실, 이 이벤트는 매우 막강하다.

왜냐하면 당신은 이 하나의 이벤트를 통하여 수많은 상태를 감지해 낼수 있기 때문이다.

마우스나 손가락이 그래픽 객체에 상호작용하면  매번,  TouchEvent.TOUCH 이벤트가 발생한다.


아래의 코드로 우리는 onTouch 이벤트 핸들러에서 터치객체의 상태속성을 trace 할것이다.


우리가 사각형을 클릭하는등의 상호작용을 시작하면

매번 다른 상태가 트리거되는것을 볼 수 잇을 것이다.


아래는 Touch Phase API 에서 사용가능한 phase 상수들의 목록이다.



• began:

마우스나 손가락의 상호작용이 시작. (마우스 다운과 유사)


• ended:

마우스나 손가락의 상호작용이 끝남.(마우스 클릭과 유사)


• hover:

A mouse or finger is hovering an object. (similar to a native mouse over state) 

마우스나 손가락이 객체위를 맴돔 (마우스 오버와 유사)


• moved: 

마우스나 손가락이 객체위를 움직임.(마우스를 다운한 상태에서 움직이는 상태와 유사)


• stationary:

마우스나 손가락이 객체위에서 상호작용을 멈춘 채 유지.




TouchEvent 이벤트객체에서 이용할 수 있는 API도 살펴보자.



• ctrlKey:

컨트롤 키가 눌러졌는지 아닌지에 대한 Boolean 값을 반환


• getTouch:

명확한 대상과 단계(phase) 에서  발생한 첫번째 Touch 객체를 얻는다.


• getTouches:

명확한 대상과 단계(phase) 에서 발생한 Touch 객체들의 목록을 얻는다.


• shiftKey:

쉬프트키가 눌러졌는지 아닌지에 대한 Boolean 값을 반환


• timestamp: 

이벤트가 발생한 시간 (어플리케이션이 실행된 이후부터의 초)


• touches: 

현재 발생한 모든 Touch 객체들



쉬프트키와 컨트롤키 속성은 키보드키들의 조합을 감지하는데에 유용하다.




상호작용이 일어나면 손가락이나 마우스는 그 상호작용과 관련된 Touch 객체를 얻을 수 있다.

이젠 Touch 객체로 이용할 수 있는 API를 보도록 하자.


• clone: 

객체 복사.


• getLocation:

touch 의 현재 위치를  display 객체의 로컬 좌표계로 전환.


• getPreviousLocation:

touch 의 이전 위치를 display 객체의 로컬 좌표계로 전환.


• globalX: 

화면 좌표계의 터치 x 좌표 


• globalY: 

화면 좌표계의 터치 y 좌표 


• id: 

객체의 고유 id


• phase: 

touch 의 현재 단계


• previousGlobalX:

화면 좌표계의 이전 x 좌표


• previousGlobalY: 

화면 좌표계의 이전 y 좌표


• tapCount:

빠르게 손가락으로 탭을 한 횟수. 더블 탭을 감지할 때 사용한다.


• target:

터치가 발생한 display 객체.


• timestamp:

이벤트가 발생한 시간 (어플리케이션이 실행된 이후부터의 초)




Simulating Multi-touch



모바일에서 사용할 컨텐츠를 개발할때,

인스턴스의 크기를 조절하는등, 멀티터치 상호작용을 필요로 할만한 많은 상황이 존재하게 된다.


데스크탑에서는 이러한 테스트를 하지 못하지만,

Starling 은 멀티터치 시뮬레이션을 하기 위한 훌륭한 빌트-인 메카니즘을 제공한다.


이를 사용하려면  Starling 객체의 simulateMultiTouch  속성을 이용해야 한다.


컨트롤 키를 누르면 자동적으로 2개의 작은 점이 나타나 멀티터치 입력을 시뮬레이션 할 수 있다. 

그림 14가 바로 그것이다.


그림 14



아래의 코드를 통해,

멀티플 터치 포인트를 이용하여 마치 2개의 손가락을 사용하는 것처럼 사각형을 크기조절 한다.
우리는 터치 포인트를 받아 그들의 거리를 계산하게 된다.


이젠 텍스쳐로 덮어보자!


To be continued . . .