[Starling-08] Starling에서 TextFiled의 사용

Starling에서는 문자를 표시하기 위해 TextField 라는 클래스가 제공하고 있다. 글꼴 종류, 크기, 색상, 위치 등을 지정하여 텍스트를 화면에 표시할 수 있다.

그렇다고해도, GPU에서 직접 글꼴을 취급할 수는 없다. 사실, 뒤에서 Flash Player의 TextFiled를 사용하여 CPU에서 그린 것을 비트맵화 하여 GPU에 업로드하는 형식으로 사용한다. 즉, Starling의 TextField가 제공하는 것은 주어진 텍스트 및 글꼴에서 동적으로 텍스처를 생성하는 기능인 것이다. 따라서 커서가 표시되는 입력 텍스트와 같이 문자를 선택하는 등의 작업은 할 수 없다.(비트맵이므로)

또한, 동적으로 생성할 이유가 없는 텍스트는 TextField를 사용하는 것보다는 사전에 텍스처로 준비하여 사용하는 것이 효율적이다.


TextField 인스턴스 생성
아래는 TextField의 ​​생성자 정의를 보여준다. 표시 영역의 너비와 높이, 표시할 텍스트의 3개의 인수가 필요하다.

TextField (width:int, height:int, text:String, fontName:String = "Verdana", fontSize:Number=12,
  color:uint=0x0, bold:Boolean=false);

//

어떤 값을 나중에 변경할 수 있지만 효율 측면에서 너비와 높이를 바꾸지 않는 것이 좋다. 아래는 Hello World를 표시하는 예제다. 글꼴 크기와 색상을 인스턴스 생성 후에 지정하고 있다.

import starling.text.TextField;

	private var myTextField:TextField;

	private function onAddedToStage(e:Event):void {
		// TextField 인스턴스를 생성
		myTextField = new TextField(160,80,"Hello World");

		// TextField 인스턴스에 속성을 지정
		myTextField.fontSize = 16;
		myTextField.color = 0x993333;
		myTextField.border = true;

		addChild(myTextField);
	}

border 속성 값을 true로 하면 TextField 영역을 눈으로 확인할 수 있기 때문에 개발시 유용하다. Starling의 TextField에는 지정된 너비와 높이에서 텍스트를 초과하지 않게 글꼴 크기를 자동 조정하는 편리한 기능이 있다.

myTextField.autoScale = true;

TextField 객체의 autoScale 속성을 true로 설정하면 전체 텍스트 표시가 글꼴 크기 지정보다 우선한다. Starling 유용한 클래스 Starling은 색상을 지정하는 Color라는 유용한 클래스가 있다. TextField의 color 속성의 지정에 사용할 수 있다.

import starling.utils.Color;
 
myTextField.color = Color.AQUA;

또한 텍스트 배치 값을 가진 클래스도 있다. 세로 배치는 HAlign, 가로 배치는 VAligin 다.

import starling.utils.HAlign ;
import starling.utils.VAlign ;
 
// TextField의 ​​왼쪽을 기준으로 문자를 배치
myTextField.hAlign = HAlign.LEFT;
myTextField.vAlign = VAlign.TOP;

HAlign에 정의되어 있는 값은 LEFT, CENTER, RIGHT 이렇게 3 종류이고 VAlign에 정의되어 있는 값은, TOP, CENTER, BOTTOM 이렇게 3 종류다. 글꼴 포함 Starling의 TextField에서 포함된 TrueType 글꼴 이용이 가능하다. 글꼴을 포함하면 표시 결과가 실행 환경에 의존하지 않기 때문에 권장한다. 다음은 글꼴 포함된 샘플이다. Ubuntu라는 글꼴을 포함하고 있다.

[Embed(source="Ubuntu-R.ttf",embedAsCFF="false", fontFamily="Ubuntu")]
	private static const UbuntuRegular:Class;

	private function onAddedToStage(e:Event):void {
		myTextField = new TextField(160,80,"Hello World"," Ubuntu ",16);
		myTextField.color = 0x993333;
		addChild(myTextField);
	}

Embed 지정 시에는 embedAsCFF 계정은 필수다. 비트맵 글꼴 사용 Starling의 TextField에서 비트맵 글꼴을 사용할 수 있다. 비트맵 글꼴은 문자를 비트맵으로 내보낸 것이다. 개별 문자 파일의 위치 정보 등은 별도 XML 형식으로 작성한다. XML 파일은 다음과 같은 형식으로되어 있다. 기본 정보, 문자 코드와 텍스처 관련, 그리고 옵션으로 커닝 정보다.

이러한 비트맵 글꼴 정보는 BitmapFont 클래스에 로드한다. 다음은 그 절차다. 먼저 각각의 파일을 포함한다. 여기는 텍스처 아틀라스와 동일한 절차다.

[Embed (source="desyrel.png")]
private static const DesyrelTexture:Class;
 
[Embed (source = "desyrel.fnt"mimeType = "application / octet - stream")]
private static const DesyrelXml:Class;

다음 BitmapFont 객체를 생성한다.

import starling.text.BitmapFont;
	import starling.textures.Texture;

	private function onAddedToStage(e:Event):void {
		
		// 비트맵 글꼴로드
		var texture:Texture = Texture.fromBitmap(new DesyrelTexture);
		
		// 문자 정보 가져오기
		var xml:XML = XML(new DesyrelXml);

		// BitmapFont 인스턴스 생성
		var myBitmapFont:BitmapFont = new BitmapFont(texture,xml);

		//... 앞으로는 아래에 계속
	}

생성한 BitmapFont객체는 사용하기 전에 registerBitmapFont() 메소드를 통해서 TextField 클래스에 등록한다. (registerBitmapFont()는 정적 메서드다) 그 후, TextField의 ​​fontName 속성에 비트맵 글꼴의 이름을 설정하면 표시된다. 글꼴 이름은 BitmapFont 객체의 name 속성에서 가져올 수 있다.

import starling.text.TextField;
	private function onAddedToStage(e:Event):void {
		//... 위에서 계속

		// TextField 클래스 비트맵 글꼴을 등록
		TextField.registerBitmapFont(myBitmapFont);

		// TextField 인스턴스를 생성;
		myTextField = new TextField(300,150,"Hello World");

		// 비트맵 폰트의 폰트 이름을 설정
		myTextField.fontName = myBitmapFont.name;

		addChild(myTextField);
	}

필요하지 않은 비트맵 글꼴은 unregisterBitmapFont() 메소드로 등록을 삭제할 수 있다. 인수에는 삭제할 글꼴 이름을 지정한다. 이 때 삭제된 BitmapFont 대해 dispose()가 실행된다. 이것을 피하고 싶은 경우에는 두 번째 인수에 false를 지정한다.

TextField.unregisterBitmapFont (myBitmapFont.name, false );

비트맵 글꼴 텍스처는 독립적인 파일이 아닌 일반 텍스처 아틀라스와 함께 파일에 추가하는 형태로 사용할 수 있다. 이는 텍스처 전환을 줄일 수 있다. 비트맵 글꼴 표시 설정 비트맵 글꼴을 제작시의 크기로 표시하고 싶을 때는 TextField 객체의 fontSize 속성 BitmapFont.NATIVE_SIZE를 지정한다.

// 비트맵 글꼴의 원래 크기로 보기
myTextField.fontSize = BitmapFont.NATIVE_SIZE ;

또한 비트맵 글꼴을 제작시 모양으로 표시하고 싶을 때는 TextField 객체의 fontSize 속성 Color.WHITE을 지정한다.

// 비트맵 글꼴 텍스처 그대로보기
myTextField.color = Color.WHITE ;

color 속성의 기본 값은 아무 것도 지정하지 않으면 검은색 텍스트가 렌더링된다. 마지막으로 비트맵 글꼴의 제작에는 다음과 같은 것을 권장하고 있다.

Windows : Bitmap Font Generator (Angel Code : 무료)
Mac OS : Glyph Designer (71squared : 유료)


원본 : http://cuaoar.jp/2011/12/starling-textfiled.html

package {
	import starling.events.Event;
	import starling.core.Starling;
	import starling.display.Sprite;
	import starling.text.TextField;

	public class Demo extends Sprite {

		private var _myTextField:TextField;

		public function Demo() {
			// addedToStage 이벤트에 대한 리스너 추가
			addEventListener( Event.ADDED_TO_STAGE , onAddedToStage);
		}
		private function onAddedToStage(e:Event):void {

			// TextField 인스턴스를 생성

			var len:int = 50;
			for (var i:int = 0; i<len; i++) {
				var myTextField = new TextField(160,80,"Hello World 한글" + i);

				// TextField 인스턴스에 속성을 지정
				myTextField.fontSize = 16;
				myTextField.color = Math.random()*0xFF0000+i;
				myTextField.border = true;

				addChild(myTextField);

				myTextField.x = stage.stageWidth >> 1;
				myTextField.y = stage.stageHeight >> 1;

				myTextField.alpha =  0.20;
				myTextField.rotation = i;
			}

			_myTextField = new TextField(160,80,"Hello World");
			_myTextField.fontSize = 24;
			_myTextField.color = 0xFFFFFF;
			//_myTextField.border = true;
			
			addChild(_myTextField);
			setAlign(_myTextField);

		}

		private function setAlign(inTarget:TextField):void {
			inTarget.x = stage.stageWidth - inTarget.width >> 1;
			inTarget.y = stage.stageHeight - inTarget.height >> 1;
		}

		public override function dispose():void {
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			super.dispose();
		}
	}
}