앞선 포스팅에서 했던 작업들과 똑같은 것을 starling 에서 해보는 것이 이번 포스팅의 목표이다.
Starilng 이 렌더링하는 방법은 내부적으로 stage3D 의 방식과 같다.
정점데이터를 정의하고 인덱스버퍼를 만든 후 업로드한다.
코딩에 들어가기전에 몇가지 알고 넘어가야 하는 점이 있다.
Starling 의 DisplayObject
Starling 에서 직접 인스턴스화 시킬 수 있는 DisplayObject 는
Quad, Image, MovieClip 3가지뿐이며 가장 단순한 Quad 를 시작으로 차례대로 왼쪽 클래스를 상속하고 있다.
나머지는 모두 이들로 이루어진 DisplayObjectContainer 이다.
(TextField, Button 역시 단순히 Image 를 자식으로 가지는 DisplayObjectContainer 일 뿐이다 )
이 3가지 DisplayObject 클래스들은 다시 렌더링방법의 관점에서 2가지로 분류할 수 있는데
MovieClip 은 Image 를 상속하여 단지 매프레임마다 Image의 텍스쳐를 바꾸기만 할 뿐이다.
결과적으로 Starling 의 모든 DisplayObject는 클래스구조가 아닌 렌더링 개념상으로 Image 이냐 Quad 이냐로 나뉜다.
즉 텍스쳐매핑이 되었느냐, 아니냐로 나뉘게 된다.
이것이 중요한 이유는 AGAL 에선 텍스쳐매핑을 하느냐 아니냐로 쉐이더가 바뀌게 되기 때문이다..
VertexData
이전 포스팅에서 우리는 stage3D 에서 직접 텍스쳐를 렌더링하는 코드를 짜며
정점데이터의 구조를 x,y,z,u,v 로 했었다.
Starling 은 2D 엔진이므로 텍스쳐매핑을 위해선 z가 빠진 x,y,u,v 가 필요하다.
그리고 텍스쳐매핑이 필요없는 Quad 는 x,y, 와 색상데이터 r,g,b,a 를 사용한다.
개념상으로 Image 는 텍스쳐매핑이 이루어진 Quad 일 뿐이라고 판단한 다니엘은 Image 를 Quad의 하위클래스로 두었고
이 둘 모두의 렌더링 데이터를 관리하도록 한것이 VertexData 클래스이다.
VertextData 의 구조는 " x, y, r, g, b, a, u, v " 이다
VertexData Class 의 mRawData. mRawData 에 x,y,r,g,b,a,u,v 데이터를 저장하게 된다.
현재 글쓰는 시점에서 Starling 은 1.3 버전이다.
1.4 버전에서는 버텍스데이터 (mRawData ) 가 Vector.<Number> 가 아니라 Bytearray 로 바뀔 것이라 한다.
추가ps. 결국 몇몇 문제로 인해 bytearray 로의 변경은 1.4버전에서 이루어지지 않고 다음 버전으로 미루어졌다.
모든 DisplayObject 의 렌더링에 관련된 데이터는 결국 저기로 들어간 후
렌더링 시 QuadBatch 을 통해 객체가 텍스쳐를 포함하느냐 아니냐로 판단하여 쉐이더를 사용하게 된다.
Image 클래스의 vertexData 조작
image 클래스에는 setTexCoords 라는 메소드가 있다.
setTexCoords(vertexID:int, coords:Point):void
Sets the texture coordinates of a vertex.
이는 각 정점의 uv 를 설정하는 메소드이다.
알고 있겠지만 uv 는 0 ~ 1 사이의 값이고
vertexID 는 각 정점의 위치에 해당하며 각위치는 아래의 그림과 같다.
텍스쳐의 UV & vertexID
UV 를 변경한 화면을 보여주고 싶으나 소율이의 얼굴이 찌그러지길래 차마 올릴수가 없다. 패스하자.
각 정점의 UV 값은 setTexCoords 메소드로 변경할 수 있으나 x,y 값은 어떻게 바꿔야 할까?
앞서 언급한것처럼 실제 정점데이터는 VertexData 가 관리한다.
Image 클래스의 setTexCoords 메소드 역시 사실은 Image 클래스 내부 VertexData 객체의 setTexCoords 메소드를 실행한다.
Image 클래스의 setTexCoords 메소드
정점데이터를 조작하기 위해선 VertexData 클래스를 살펴봐야 한다.
다행스럽게도 VertexData 에는 setPosition 이라는 정점의 x,y 값을 조작하는 메소드가 이미 있다.
하지만 Image 클래스를 통해 접근할수가 없도록 되어 있다.
이딴 수작을!!
Image 클래스에 아래의 메소드를 추가하자.
이젠 우린 Image 객체에서 텍스쳐의 정점데이터를 조작할 수 있다.
백문이불여일RUN
대충 준비는 끝난 것 같다. 이젠 실제로 코딩에 들어가보자.
목표는 말했다시피 두 포스팅을 통해 했던 작업을 Starling 에서 그대로 재현하는 것이다.
프로젝트는 이전과 똑같은 것을 사용하되 view 부분만 바꾸면 된다.
변경된 메인클래스.
StarlingVIew 는 아래와 같다.
포스팅을 처음부터 쭉 따라오신 분이라면 따로 설명할 것이 없을 정도로 간단하다.
모델에서 디스패치된 이벤트는 starling.events.Event 가 아니라 flash.events.Event 라는점을 주의하자.
'Starling' 카테고리의 다른 글
[Starling] (미완료) 다수의 저글러 활용 & 애니메이션 시간 조작 (0) | 2014.03.17 |
---|---|
Feathers 라이브러리에 대한 생각. (4) | 2013.12.08 |
Starling 과 Image. 그리고 VertexData - 2. stage3D 맛보기 (0) | 2013.08.25 |
Starling 과 Image. 그리고 VertexData - 1.개념잡기 (0) | 2013.08.20 |
Starling - Introducing 번역 6 > Tween,AssetManagement, MultiResolution & resize, Plugging... (2) | 2013.07.15 |