본문 바로가기

Starling

Starling - Introducing 번역 1 > 준비




목차

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 

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


파란색 부분 번역.

의역이 조금 있습니다.

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






First Flight



What is Starling ?


Starling 이란 Stage3D APIs (Flash Player 11와 Adobe AIR 3 에서 데스크탑에서 가능한)  위에서 

개발할 수 있는 ActionScript3 2D 프레임워크이다. 

Starling 은 주로 게임 개발을 위해 디자인되었지만, 다른 용도로도 많이 쓰일 수 있다. 

Starling은 저레벨 Stage3D APIs 를 건드리지 않고도 GPU 가속된 어플리케이션을 만들 수 있게 해준다.



Why Starling ?


대부분의 Flash 개발자들은 하이레벨 프레임워크를 코딩 할 필요없이 GPU 가속 (Stage3D를 통한)을 활용하여 로우레벨 Stage3D APIs를 파헤지고 싶어한다. Starling 은 Flash Player APIs 의 설계를 모방해서 완벽하게 디자인되었고, Stage3D (Molehill) 의 복잡한 특성을 추상화하여 누구나 쉽고 직관적인 프로그래밍을 가능하게 한다.


Starling 은 ActionScript 3 개발자들을 위한 것이며,

특히나 2D 게임 개발에 참여한 사람들을 위한 것이니 ActionScript 3에 대한 기본적인 이해가 있어야만 할것이다. 

이런 디자인으로(가볍고, 융통성있고, 간단한),  Starling 은 UI 같은 다른  경우에서에도 사용된다.

즉, 모든것은 최대한 직관적이게(이해하기 쉽게) 디자인 되었고, Java나 .Net 같은 개발자도 매우 빠르게 이해할 것이다.  



Philosophy


직관적


Starling 은 배우기 쉽다. Flash/Flex 개발자들은 즉시 편하게 사용할 것이다.

왜냐면  Starling 은  ActionScript  형식(신조,사상) 을 대부분 따르고 로우레벨 Stage3D APIs 의 복잡함을 추상화한다.

vertices buffer, perspective matrices, shader programs 와 assembly bytecode  같은 개념의 코딩 대신에

DOM 디스플레이리스트와 이벤트모델과 같은 친숙한 개념이나 MovieClip, Sprite, TextField 등과 같은 친숙한 API를

사용하게 될 것이다. 


경량


Starling 은 많은 방면에서 가벼운 새이다. 클래스 갯수는 많지 않다. (약 80k 코드)

Flash Player 11 이나 AIR3 을 제외하고는 외부적인 의존성은 없다. (모바일 지원은 나중에 나올 예정이다.) 

이것은 당신의 어플리케이션을 작게하고 작업흐름을 간단하게 유지시켜 준다. 


무료


Staring 는 무료이고 활발하다.

Simplified BSD 라이센스 아래에 있고, 상업적인 어플에서조차 무료로 이용 가능하다. 

우리는 매일 작업하고, 더 발전 시킬수 있도록 활발한 커뮤니티도 운영한다. 



How


Starling 은 모바일 기계의 OpenGL ES2 와, 데스크탑의 OpenGL & DirectX 위에서 작동하는 저레벨  GPU APIs인

Stage3D APIs를 드러나지 않게 사용한다. 

개발자로서, 당신은  Starling 이 iOS에 맞먹는 OpenGL ES2 APIs 에 기반에서 작동되는 라이브러리인 Sparrow를

ActionScript 3 버전으로 포팅했다는 것을 알아야 한다. 


<그림1>



Starling 은 Flash 개발자들이 이미 익숙해하는 많은 API를 재생성 했다.

그림 2는 그래픽 요소에 대한 Staring 에 의해 노출된 API를 그려놓았다. 




많은 사람들이 Stage3D APIs 는 3D 컨텐츠에 제한되어 있다고 생각하지만,(사실 이름이 약간 혼란스럽다)

2D 컨텐츠 역시 만들어 낼 수 있다. 

그림 3을 보라

drawTriangles API로 무비클립 같은 어떤것을 어떻게 그릴 수 있는가?


<그림3>


사실, 이것은 매우 간단하다. GPU 는 삼각형을 그리는데 매우 능률적이다.

drawTriangles API 는 두개의 삼각형을 그릴 것이고 샘플 텍스쳐를 UV 맵핑을 이용하여 삼각형에  적용시킨다. 

그러면 Starlin에서 Sprite 로 불리우는 텍스쳐가 입힌 사각형으로 완성된다.

매프레임 삼각형의 텍스쳐를 업데이트하면 무비클립이 된다.  죽여주지 ?


이제, 굿뉴스를 알려주겠다.

Staring를 이용하면, 이런 디테일은 필요조차 없다.

그냥 프레임을 Staring 무비클립에 제공하면 된다.


<그림 4>



Staring 이 이 복잡한 과정을 어떻게 단순화시켰는지 알려주겠다.

로우레벨의 Stage3D API 를 사용하여 간단한 텍스쳐화된 사각형을 디스플레이하려면 우리가 어떤 코드를 써야하는 지 알아보자.






그러면 그림 5와 같이 결과를 얻는다.


<그림5>


이결과에 비하면 꽤나 복잡한 코드이긴하지?

근데 이것이 로우레벨 API 에 접근한 댓가이다.

많은 것들을 컨트롤 할수 있지만, 로우레벨스러운 (-..-) 댓가가 잇다.


Starling 을 사용하면  아래의 코드만 작성하면 된다




복잡한 Stage3D API가 보이지않는곳에서 실행되는 반면,

이미 Flash API에 익숙해진 ActionScript 3 개발자로서 노출된 이 API에는 매우 친숙해 할것이다. 


redraw regions feature 를 사용하려고 하면 (try to use the redraw regions feature) 

Starling 은 고전적인 디스플레이 리스트가 아닌, Stage3D 위에 있는 모든 것을 렌더링한다.

<그림 6> 이 그 결과이다.

사각형이 매프레임 회전하고 있다.

redraw regions feature는 디스플레이 리스트 (CPU 에서 실행되는) 에 있는 FPS 카운터만 보여준다.  


<그림6>


Stage 3D 아키텍쳐에의해 컨텐츠는 GPU에 의해서 완벽하게 렌더링되고 합성되었다는 것을 기억하자.

그 결과로 디스플레이리스트을 위해 사용된 redraw regions feature은 이용되지못한다


(이문장의 번역은 자신이 없다. 원문은 아래와 같다)


If you try to use the redraw regions feature, you will see that Starling, as expected,

renders everything on Stage3D, not the classic display list. Figure 6 illustrates the

behavior. We have a quad rotating on each frame; the redraw regions only show the

FPS counter sitting in the display list (running on the CPU).

Remember that with the Stage 3D architecture, the content is completely rendered and

composited by the GPU. As a result, the redraw regions feature used for the display list

cannot be used.


(redraw regions feature 이 의미하는것이 무엇인지 모르겠다.

어떠한 기능을 뜻하는 명사인지,특정 지역을 다시 렌더링하는 행위인지,아니면 어떤 특징속성을 바꿔 렌더링되는것인지..

이부분에 대해 도움을 주신 김나솔님께 감사의 말을 드립니다.)



Layer Restrictions


Staring을 사용하는 (결과적으로 stage 3D 역시) 개발자로서 당신은 콘텐츠를 개발할때 한가지 제한을 기억해야한다. 

먼저 밝혔던 바와 같이 stage3D 는 말 그대로 Flash Player 내부에서 새롭게 렌더링 되는 아키텍쳐이다.

GPU 레이어 가 display list  레이어에 아래에 위치한다는것은 display list  안에서 실행되는 그 어떤 컨텐츠라도

stage3D 컨텐츠 위에 위치하게 된다. display list  안에서 실행되는 컨텐츠가 stage3D 레이어 아래로 가는 일은 절대 없다. 

<그림7> 은 레이어표를 나타낸다. 



<그림7>



stage 3D 오브젝트는 투명화 될 수 없다는 것을 기억해라.

이런 능력은 개발자가  StageVideo 테크놀로지를

(Flash Player 10.2에 소개됨 http://www.adobe.com/devnet/flashplayer/articles/stage_video.html)

이용해서 비디오를 플레이하고, stage 3D를 통해서 렌더된 컨텐츠로 비디오를 덮어씌울 수 있게 해준다.  

이런 특징은 Flash Player나 AIR의 미래 버전에서 사용될 지도 모른다. 



Getting started


프레임웍 다운로드 방법, 개발도구 설정, swc 다운로드 등등... 생략



Setting Up Your Scene


소개가 너무 길었는데, 코드를 파헤쳐보고, 이 작은 새가 할 수 있는 게 뭔지 보자.


Staring 의 설정은 매우 쉽다. 

먼저 Staring 오브젝트를 생성하고 당신의 메인 클래스에 추가해야 한다.


// 지금부터, 무비클립이나 스프라이트 등등과 같은 오브젝트를 언급한다면 특별히 명시된 경우 외에는

//Flash Player에서 사용하는 원래의 것이 아닌, Starling API를 의미한다.


Staring 생성자는 많은 파라메터를 필요로한다. 시그너쳐는 아래와 같다.




사실 처음 두개의 파라메터는 정말 흔하게 쓰이는 것들일 뿐이다.

rootClass 파라메터는 starling.display.Sprite을 상속한 클레스의 참조를 기대하고 두번째 파라메터는 우리의 stage 이다





아래는  stage에 add될 때 간단한 사각형을 만드는 Game 클래스이다. 



그냥 우리가 평소에 하던것처럼

Event.ADDED_TO_STAGE 이벤트를 청취하고 

이벤트 핸들러에서 우리의 어플리케이션을 초기화한다.

그러면 우리는 안전하게 스테이지에 접근할 수 있다.


** 다시 한번, 이 미묘한 디테일에 주의하라. 여기서 말하는 우리의 게임 클래스는 flash.display.package가 아닌

starling.display package에서 온 Sprite 클래스를 상속하는 것이다.

당신의 import 선언을 항상 체크하고 당신이 Starling APIs 를 사용하고 있다는 것을 명확히 알고 있길 바란다.

곧 익숙해 질것이다. 근데 시작하는 단계에서는 좀 헷갈릴 수도 있다.


위의 코드를 테스트함으로써 우리는 아래의 결과를 얻는다.

Flash 에서 기대할 수 있는 것처럼, 오브젝트는 디폴트 포지션을  0,0 으로 가진다는 것을 기억하라.

우리 사각형 가운데 몇줄 더 추가해보자





비트를 오른쪽으로 한번 이동하는것은 (>>1)   2 로 나누는 것과 똑같다는 것을 기억하라.

<그림8> 은 그 결과이다.


<그림8>



anti-aliasing 값은 원하는 anti-aliasing 을 설정할 수 있게 해준다. 

보통은 1의 값이 사용된다. 하지만 당신이 원한다면 다른값을 설정할 수 있다.

엄밀히 말하자면 0 에서 16 까지 설정할수있지만, 가장 보편적으로 쓰는 값은 아래와 같다. 


• 0: No anti-aliasing

• 2: Minimal anti-aliasing.

• 4: High-quality anti-aliasing.

• 16: Very high-quality anti-aliasing.


우리는 2 보다 높이 설정할 필요가 거의 없지만 ( 특히 2D 컨텐츠에서) 당신의 상황에 따라 선택할 수도 있다. 

그림 9는 두개의 다른 값 (1과 4) 이 가지는 경미한 차이점에 관한 것이다. 


<그림9>


당신이 원하는 퀄리티로 조정하기 위해 2 이상의 값도 사용할 수 있다.

물론 높은 값을 선택하는 것은 퍼포먼스에 영향을 준다.



Staring 객체에서 사용 가능한 다른 API를 보자,.


• enableErrorChecking :

에러 체크를 가능하게 또는 불가능 하게 해준다. 렌더러에 의해 발생한 에러가 어플리케이션에 보고가 되는지 명시한다. 

enableErrorChecking 가 true 이면 Starling 에 의해 내부적으로 호출된 the clear(), and drawTriangles() 메소드는 동기화되고 에러를 발생시킬수 있다. (can throw erros.)

enableErrorChecking 가 false 이면  the clear(), and drawTriangles() 메소드는 비동기되고 에러는 보고되지 않는다. 

enableErrorChecking 은 렌더링 퍼포먼스를 줄인다. 디버깅때에만 에러 체크를 가능하게 해야한다.


•  isStarted : 

Starling 객체가 시작되었는지 나타낸다.


• juggler :

juggler 는 간단한 객체이다. IAnimatable 인터페이스를 구현하는 객체의 리스트를 저장하고

명령했을 때 (advanceTime 메소드를 호출함으로써) 저장된리스트들의 시간을 앞당기는 것 밖에 하지 않는다.

애니메이션이 완료되면, 저장된 리스트들을 제거한다.


• start :

렌더링과 이벤트 핸들링을 시작한다.


• stop:

렌더링과 이벤트 핸들링을 멈춘다.

게임이 리소스를 저장하기위해 백그라운드 갈때 렌더링을 멈추기 위하여 사용한다.


• dispose : 

현재 GPU 메모리에 있고 렌더링 되어진 모든 켄턴츠를 제거하려고 할때 이 메소드를 호출한다. 

이 API는 쉐이더 프로그램과 리스너를 영원히 제거한다. 




당신의 Starling 객체가 한번 생성된다면, 사용된 렌더러에 대한 정보를 제공하는 Debug trace 는 자동적으로 출력된다. 

SWF 가 올바르게 페이지에 embed 되거나 독립실행형 (플래시플레이어를 말하는듯 - 번역자 주) 에서 테스트 할때

STARLING 은 아래와 같이 출력한다. 


[Starling] Initialization complete.

[Starling] Display Driver:OpenGL Vendor=NVIDIA Corporation Version=2.1 NVIDIA-7.2.9

Renderer=NVIDIA GeForce GT 330M OpenGL Engine GLSL=1.20 (Direct blitting)


물론 하드웨어 세부사항은 당신의 환경 설정에 달려있다.

드라이버 버전에 대한 정보을 알려줌으로써 GPU 가속을 우리가 사용하고 있다는 것을 알려준다.



이 디버그의 목적으로는 


software 에서 실행되는 당신의 컨텐츠 퍼포먼스에 관련된 아이디어를 얻기 위해 Flash Player 을 통한

내부적인 sofrware 폴백의 사용을 강요하고 싶을지도 모른다.

그럴경우 당신은 software fallbak 을 사용하고 싶다고 알리기만 하면 된다.


mStarling = new Starling(Game, stage, null, null, Context3DRenderMode.SOFTWARE);


software 를 사용할 때, 출력된 메세지는 우리가 소프트웨어 모드에서 실행하고 있다는 것을 증명한다. 


[Starling] Initialization complete.

[Starling] Display Driver:Software (Direct blitting)


몇몇의 유져는 software 모드에서 실행되고 있을 때의 퍼포먼스에 대한 아이디어를 얻기 위해

software 에서 당신의 컨텐츠를 테스트 하기를 원한다.

2009년 1월1일 이전에 나온 그래픽 드라이버라면, 님의 컨텐츠는 software 로 실행된다.

이것은 나중에 수정될것이다.  Flash Player 와 AIR의 미래 버전들은 이 룰을 완화할지도 모른다.


이제 당신의 SWF에 stage3D가 embed 되기위한 자격을 알아보자.


 

Wmode Requirements


stage3D와 GPU가속을 사용하기 위해선 페이지의 embed mode 를 direct 로 설정해야 한다는 것을 기억해야한다.

만약 어떤값도 명시하지않거나 direct 외에 다른값(transparent , opaque, window)을 사용하면 stage3D는사용할수없게 된다.

대신, Stage3D 의  requestContext3D 호출될때  런타임예외가  Context3D 객체생성이 실패 했다는 것을 당신에게 알려준다.


런타임에외 대화상자는 그림10과 같다.





이것은 당신의 어플리케이션이 잘못된 wmode를 사용하여 Embed 된 이러한 상황을 취급할때 중요하다. 

당신은 표시된 메세지가 알려주는 이슈에 대해 적절한 반응을 할 필요가 있다.

다행이도, Starling 이것을  자동으로 처리하고 그림 11과 같이 메세지를 출력 한다.

Starling 소스 코드를 수정하여 이메세지나  look and feel 환경까지 수정해도 괜찮다.



Stage Quality

플래시 개발자에겐  Stage Quality 의 개념은 새로운 것이 아니다.

주목할 만하지만 Stage3D 을 사용한 작업과 그러한 Starling 의 결과물에서  Stage Quality는 퍼포먼스에 영향을 주지 않는다.


Progressive Enhancements (혁신적인 개선(향상))


앞서 말한것과 같이 GPU 가속이 제역할을 하지 못할때, Stage3d 는 software 모드가되어

내부적으로 software  엔진을 사용하고  SwiftShader(Transgaming) 가 호출된다.


이러한 상황에서 당신의 컨텐츠가 제대로 실행되도록 하기 위해 당신은 software 에서 실행되는 순간을

감지하여 software 에서 느려지게될 잠재적인 효과를 제거해야할 필요가 있다.


2d context 의 컨텐츠에서 software 대비책(fallback)은  많은 객체를 다루며 동시에 훌륭한 퍼포먼스를 제공하도록 해야한다.

하지만 여전히, 이것을 감지해도,

당신은 static property  context 를 사용하여 Starling 객체에서 context3D 객체에 접근할수있다.  


// are we running hardware of software ?

var isHW:Boolean = Starling.context.driverInfo.toLowerCase().indexOf("software") ==

−1;


항상  software fallback 을 염두에 두고 컨텐트를 설계하는것은 좋은 습관이고

그럼으로써 모든 상황에서 사용자에게 가능한한 최상의 경험을 하도록 보장하게 한다.

몇몇의 개발자는 그들의 Stage3D 게임이  software 로 실행될때 역시 좋은 환경이 되도록 하기위해

하드웨어 가속을 끊임없이 껐다 켰다하며 개발한다,


이제 매우 흥미진진한 주제 Starling의 디스플레이 리스트를 보도록 하자!


To be continued . . .