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

이번에는 비트맵(텍스처)을 표시하는 방법이다. 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();
		}
	}
}