Make and use bitmap fonts
(비트 맵 글꼴 만들기 및 사용)

​ Used Starling or Cocos, or even Unity, we must not unfamiliar bitmap fonts, simple picture, into the custom text, you can make a good text display in the project effect. The LayaAir also supports the use and display of bitmap fonts. The following is the use of bitmap fonts in LayaAir.
(사용 된 Starling이나 Cocos, 또는 Unity조차도, 익숙하지 않은 비트 맵 글꼴, 간단한 그림을 사용자 지정 텍스트에 넣지 않아야합니다. 프로젝트 효과에서 좋은 텍스트 디스플레이를 만들 수 있습니다. LayaAir은 비트 맵 글꼴의 사용과 표시도 지원합니다. 다음은 LayaAir에서 비트 맵 글꼴을 사용하는 방법입니다.)

Make bitmap fonts
(비트 맵 글꼴 만들기)

​ 1. The text to be used for export is written in a TXT file
 (1. 내보내기에 사용될 텍스트가 TXT 파일로 작성됩니다.)

​ 

​ 2. Select File -> Save as Unicode-encoded txt file.
 (2. 파일 -> 유니 코드로 인코딩 된 txt 파일로 저장을 선택하십시오.)
​ 

​ 3. Download and install Windows free bitmap font production tools under Bitmap Font Generator.
(3. 비트 맵 글꼴 생성기에서 Windows 무료 비트 맵 글꼴 제작 도구를 다운로드하여 설치하십시오.)
​ Download address：http://www.angelcode.com/products/bmfont/
(다운로드 주소 : http : //www.angelcode.com/products/bmfont/)

​ 4.Open the software, select Option-> FontSetting,set the general settings for the fonts that need to be exported, click OK after setting the button to save.
(4. 소프트웨어를 열고 Option-> FontSetting을 선택하고 내보낼 글꼴에 대한 일반 설정을 지정하고 저장 버튼을 설정 한 후 확인을 클릭하십시오.)

Important parameter description:
(중요한 매개 변수 설명 :)

​ Font: the font used to export bitmap fonts.
(글꼴 : 비트 맵 글꼴을 내보내는 데 사용되는 글꼴입니다.)
​ Size: sets the font size used for exporting bitmap fonts. It is recommended that you use the same size when you display it.
(크기 : 비트 맵 글꼴을 내보내는 데 사용되는 글꼴 크기를 설정합니다. 그것을 표시 할 때 동일한 크기를 사용하는 것이 좋습니다.)
​ Height: set the font’s drawing height and keep the default 100%.
(높이 : 글꼴의 그림 높이를 설정하고 기본값을 100 %로 유지합니다.)
​ Note: selects Unicode value for Charset.
(참고 : 문자 집합에 유니 코드 값을 선택합니다.)

​ 

​ 5. Select in menu bar Edit-> Select chars from file, and choose the txt file just created. if have a failed prompted alert, please check whether the txt file is unicode encoded file and the text contains the font.
(5. 메뉴 모음에서 편집 -> 파일에서 문자 선택을 선택하고 방금 작성한 txt 파일을 선택하십시오. 경고 메시지가 표시되지 않으면 txt 파일이 유니 코드로 인코딩 된 파일이고 텍스트에 글꼴이 포함되어 있는지 확인하십시오.)

​ 

​ 6. To set export styles, select Options->Export Options in the menu bar, open Export Options, set export options, and then click the OK button to save.
(6. 내보내기 스타일을 설정하려면 메뉴 모음에서 옵션 -> 내보내기 옵션을 선택하고 내보내기 옵션을 연 다음 내보내기 옵션을 설정 한 다음 확인 버튼을 클릭하여 저장합니다.)

​ Padding: the inner border of text, or text to understand the surrounding blank much. This property is important when posting styles, and you need to reserve space for use with strokes, luminous effects, and so on. For example, it is expected to add a 2px border, and then add a lower right corner 2px projection, so set the padding:2px 4PX 4PX 2px.
(채우기 : 텍스트의 내부 테두리 또는 주변 빈을 많이 이해하는 텍스트. 이 속성은 스타일을 게시 할 때 중요하며 획, 발광 효과 등과 함께 사용할 공간을 예약해야합니다. 예를 들어 2px 테두리를 추가 한 다음 오른쪽 하단 2px 투영을 추가해야하므로 2px 4PX 4PX 2px 패딩을 설정하십시오.)
​ Bit depth: must be 32 bits, otherwise there is no transparent layer.
(비트 심도 : 32 비트 여야하며, 그렇지 않으면 투명 레이어가 없습니다.)
​ Presets: font settings initialization of the default color channel.
(기본 설정 : 기본 색상 채널의 글꼴 설정 초기화.)
​ Font descriptor: font description file, select xml.
(글꼴 설명자 : 글꼴 설명 파일, xml을 선택하십시오.)
​ Textures: texture picture format, select png.
(텍스처 : 텍스처 그림 형식, PNG 선택.)

​ 
​ 7. To export the bitmap font. Select in menu bar Options-> Save bitmap font as …, export is generated by a font description file (.fnt format) and a font texture file (.png format).
(7. 비트 맵 글꼴을 내보내려면. 메뉴 모음에서 옵션 -> 비트 맵 글꼴 저장 ...을 선택하면 내보내기가 글꼴 설명 파일 (.fnt 형식) 및 글꼴 텍스처 파일 (.png 형식)에 의해 생성됩니다.)

Use bitmap fonts in the LayaAir project
(LayaAir 프로젝트에서 비트 맵 글꼴 사용)

​ 1. put the resources in the output directory of the project.
(1. 프로젝트의 출력 디렉토리에 자원을 넣으십시오.)
​ Modify the exported bitmap file the same name (.fnt file and .png file) and place it in the bin / h5 directory of the LayaAir project.
(내 보낸 비트 맵 파일을 동일한 이름 (.fnt 파일 및 .png 파일)으로 수정하고 LayaAir 프로젝트의 bin / h5 디렉토리에 저장합니다.)

​ 

​ Picture: change the name of test_0.png to test.png, to ensure that the same name with the fnt file. Then put the test.png and test.fnt files under the H5 directory.
(사진 : test_0.png의 이름을 test.png로 변경하여 fnt 파일과 동일한 이름을 사용하도록합니다. 그런 다음 test.png 및 test.fnt 파일을 H5 디렉토리 아래에 놓습니다.)

Bitmap fonts are generalely used in the LayaAir project:
(비트 맵 글꼴은 일반적으로 LayaAir 프로젝트에서 사용됩니다.)

1. Create a bitmap font object.
   (비트 맵 글꼴 객체를 만듭니다.)
2. Load the bitmap font and follow for completion.
   (비트 맵 글꼴을로드하고 완료를 위해 따라하십시오.)
3. register bitmap fonts.
4. use fonts.

The following is a complete example implementation.
(다음은 완벽한 구현 예입니다.)

The complete code is as follows:
(전체 코드는 다음과 같습니다.)

//엔진 초기화
Laya.init(550,400);
//사용자 정의 파일 이름
this.mFontName = "diyFont";
this.mBitmapFont = new Laya.BitmapFont();
//여기서 확장을 할 필요는 없으며 외부 보증 fnt는 png 파일과 이름이 같습니다.
this.mBitmapFont.loadFont("res/bitmapFont/test.fnt",new Laya.Handler(this,onLoaded));

function onLoaded(){
    init();
}
function init(){
    //비트 맵 글꼴에 공백이 없으면 공백 폭을 설정하는 것이 가장 좋습니다.
    this.mBitmapFont.setSpaceWidth(10);
    Laya.Text.registerBitmapFont(this.mFontName,this.mBitmapFont);
    var txt = new Laya.Text();
    txt.text = "layabox 테스트 파일입니다.";
    //너비, 높이 자동 설정
    txt.width = 250;
    //자동 줄 바꿈
    txt.wordWrap = true;
    txt.align = "center";
    //등록 된 글꼴 사용
    txt.font = this.mFontName;
    txt.fontSize = 50;
    txt.leading = 5;
    Laya.stage.addChild(txt);
}

Text related interface in the class:
(클래스의 텍스트 관련 인터페이스 :)

registerBitmapFont () method

public static function registerBitmapFont(name:String, bitmapFont:BitmapFont):void

Registered bitmap font.

Parameter

​ name:String - the name of the bitmap font.
​ bitmapFont:BitmapFont - Bitmap font file

unregisterBitmapFont () method

public static function unregisterBitmapFont(name:String, destory:Boolean = true):void

Remove the registered bitmap font file.

Parameter

​ name:String - The name of the bitmap font.
​ destory:Boolean (default = true) - whether to destroy the current font file.

BitmapFont related interfaces in the class :
(클래스의 BitmapFont 관련 인터페이스 :)

loadFont () method

public function loadFont(path:String, complete:Handler):void

Loads bitmap font files by specifying bitmap font file paths.

parameter
​ path:String - The path to the bitmap font file
​ complete:Handler - Load the completion of the callback, notify the upper font file has been completed to load and parse.

parseFont () Method

public function parseFont(xml:XmlDom, texture:Texture):void

Parse the font file.

parameter

​ xml:XmlDom - Font file XML
​ texture:Texture - Font texture

destory () Method

public function destory():void

Destroy bitmap fonts and destroy them by default when calling Text.unregisterBitmapFont.

setSpaceWidth () Method

public function setSpaceWidth(spaceWidth:Number):void

Set the width of the space (if the font library has spaces, it can be set aside).

Parameter

​ spaceWidth:Number - width, unit in pixels.

Using bitmap fonts in LayaAir IDE
(LayaAir IDE에서 비트 맵 글꼴 사용)

1. Place the font file in the resource directory of the LayaAir IDE project (laya / assets /), ensure that both file names are same, such as test.fnt and test.png. This will automatically registers a bitmap font called test.
   (글꼴 파일을 LayaAir IDE 프로젝트의 리소스 디렉토리 (laya / assets /)에 놓고 test.fnt 및 test.png와 같은 두 파일 이름이 같은지 확인하십시오. 이렇게하면 test라는 비트 맵 글꼴이 자동으로 등록됩니다.)

1. Set the font property value of the text component will modify bitmap font attributes, located in the import editor.
   (텍스트 구성 요소의 글꼴 속성 값을 설정하면 가져 오기 편집기에있는 비트 맵 글꼴 특성이 수정됩니다.)

1. Before instantiate program code that uses a bitmap font, you need to create and register the bitmap font used in the page.
   (비트 맵 글꼴을 사용하는 프로그램 코드를 인스턴스화하기 전에 페이지에 사용 된 비트 맵 글꼴을 만들고 등록해야합니다.)