Starling 과 Image. 그리고 VertexData - 3.Starling Image

앞선 포스팅에서 했던 작업들과 똑같은 것을 starling 에서 해보는 것이 이번 포스팅의 목표이다.

Starling 과 Image. 그리고 VertexData - 1.개념잡기

Starling 과 Image. 그리고 VertexData - 2. stage3D 맛보기

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  " 이다

public function set numVertices(value:int):void { mRawData.fixed = false; var i:int; var delta:int = value - mNumVertices; for (i=0; i<delta; ++i) mRawData.push(0, 0, 0, 0, 0, 1, 0, 0); // alpha should be '1' per default for (i=0; i<-(delta*ELEMENTS_PER_VERTEX); ++i) mRawData.pop(); mNumVertices = value; mRawData.fixed = true; }

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 메소드를 실행한다.

public function setTexCoords(vertexID:int, coords:Point):void { mVertexData.setTexCoords(vertexID, coords.x, coords.y); onVertexDataChanged(); }

Image 클래스의 setTexCoords  메소드

정점데이터를 조작하기 위해선 VertexData 클래스를 살펴봐야 한다.

다행스럽게도 VertexData 에는 setPosition 이라는 정점의 x,y 값을 조작하는 메소드가 이미 있다. 

하지만 Image 클래스를 통해 접근할수가 없도록 되어 있다.

이딴 수작을!!  

Image 클래스에 아래의 메소드를 추가하자.

public function setTexPositions( $vertexID: int, $tx: Number, $ty: Number ): void { mVertexData.setPosition( $vertexID, $tx, $ty ); onVertexDataChanged(); }

이젠 우린 Image 객체에서 텍스쳐의 정점데이터를 조작할 수 있다.

백문이불여일RUN

대충 준비는 끝난 것 같다. 이젠 실제로 코딩에 들어가보자.

목표는 말했다시피 두 포스팅을 통해 했던 작업을  Starling 에서 그대로 재현하는 것이다.

프로젝트는 이전과 똑같은 것을 사용하되 view 부분만 바꾸면 된다.

_starlingView = new Starling( StarlingView, stage ); _starlingView.addEventListener( Event.ROOT_CREATED, function( $e: Event, $view: StarlingView ): void { Starling.current.start(); Starling.current.showStats = true; $view.init( _model ); });

변경된 메인클래스.

StarlingVIew 는 아래와 같다. 

package view { import flash.events.Event; import starling.display.Image; import starling.display.Sprite; import starling.textures.Texture; public class StarlingView extends Sprite { private var _model: Model; private var _img: Image; public function StarlingView() { super(); } public function init( $model: Model ): void { _model = $model; _model.addEventListener( Event.CHANGE, update ); initImage(); update(); } private function initImage(): void { var tex: Texture = Texture.fromBitmap( Model.IMG ); _img = new Image( tex ); addChild( _img ); } private function update( $e: Event = null ): void { var vertieces: Vector.< Number > = _model.getVertices(); _img.setTexPositions( 0, vertieces[0], vertieces[1] ); _img.setTexPositions( 1, vertieces[2], vertieces[3] ); _img.setTexPositions( 2, vertieces[4], vertieces[5] ); _img.setTexPositions( 3, vertieces[6], vertieces[7] ); } } }

포스팅을 처음부터 쭉 따라오신 분이라면 따로 설명할 것이 없을 정도로 간단하다.

모델에서 디스패치된 이벤트는  starling.events.Event 가 아니라 flash.events.Event 라는점을 주의하자.

Starling 소율.swf

몇몇분은 여기서  몇가지 의문을 느낄 수 있을 것이다.

우리는 이미지의 x,y 좌표는 건드리지 않았다. 그럼 현재 이미지의 x,y 좌표는 얼마일까?

setPosition 으로 설정한 정점의 x,y 값은 Starling 의 stage 상에서의 절대위치를 가르킨다.

실제론 이 정점데이터는 텍스쳐의 widht, height 값으로 처음 초기화 된 후 변경되지 않고 저장되어 있다가

최종적으로 렌더링될 때 자신의 x,y (Global 좌표계) 값으로 보정되어 렌더링된다.

이미지의 x,y 값을 조정하면 화면에선 그만큼 이동되어 보여질 것이다.

이런 x,y 속성과의 불일치는 후에 문제가 생길 수 있다.

이것을 해결하는 여러방법이 있다. 

현재 model 에서 받는 좌표는 최상위 stage, 즉 Global 좌표계이다.

이좌표를 해당 객체의 좌표계로 바꾸던지,

애초에 해당객체가 포함된 컨테이너의 좌표계를 전달하던지해서 단순히 대상 x,y 값을 빼던지,

받은 좌표를 자동으로 보정하도록 메소드를 변경( 혹은 추가 ) 하던지 등등.

이는 각자의 취향에 맞게 선택하도록 하자.

이어서..

여태 한 것은 사실은 정말 간단한 것들이다.

겨우 이걸 하기위해서 3번의 포스팅까지 했다.

결과적으로 단순히 메소드를 추가 하면 끝나는 것을 stage, stage3d 를 먼저 해보고 돌아온 이유는

사용법을 아는 것과 이해를 하는 것은 다르기 때문이다.

이젠 전반적인 준비는 되었으니 다음엔 조금 더 복잡한 걸 해보기로 하자.

우리의 최종 목표.

걍 버텍스만 조절하면 될 거 같았지만..

계속....