Use of the android game development framework libgdx (III)-Chinese display and Chinese Character drawing

The libgdx used in this article is version 0.92, which may be different from the latest version. The full text is for reference only.

I wanted to write this article, but yesterday I talked to a friend in the group about how libgdx displays Chinese characters. I have not noticed this problem before and found it to be quite serious. If it does not support Chinese, libgdx would be a little unpleasant to use.

Let's take a look at the BitmapFont class, which is related to text painting. Let's take a look at the source code:

public BitmapFont () {         this(Gdx.files.classpath("com/badlogic/gdx/utils/arial-15.fnt"),             Gdx.files.classpath("com/badlogic/gdx/utils/arial-15.png"), false, true); }

This is the structure of the website. We can see that there are two files, arial-15.fntand arial-15.png.

Part of the arial-15.fnt file:

info face="Arial" size=15 bold=0 italic=0 charset="" unicode=0 stretchH=100 smooth=1 aa=1 padding=0,0,0,0 spacing=1,1
common lineHeight=18 base=14 scaleW=256 scaleH=256 pages=1 packed=0
page id=0 file="arial-15.png"
chars count=189
char id=32   x=0     y=0     width=0     height=0     xoffset=0     yoffset=14    xadvance=4     page=0  chnl=0 
char id=255   x=0     y=0     width=8     height=19     xoffset=-1     yoffset=0    xadvance=7     page=0  chnl=0 
char id=254   x=8     y=0     width=9     height=19     xoffset=1     yoffset=0    xadvance=8     page=0  chnl=0 
char id=253   x=17     y=0     width=8     height=19     xoffset=-1     yoffset=0    xadvance=7     page=0  chnl=0 
char id=252   x=25     y=0     width=9     height=19     xoffset=1     yoffset=0    xadvance=8     page=0  chnl=0 
char id=251   x=34     y=0     width=9     height=19     xoffset=1     yoffset=0    xadvance=8     page=0  chnl=0 
char id=250   x=43     y=0     width=9     height=19     xoffset=1     yoffset=0    xadvance=8     page=0  chnl=0 
char id=249   x=52     y=0     width=9     height=19     xoffset=1     yoffset=0    xadvance=8     page=0  chnl=0 
char id=248   x=61     y=0     width=9     height=19     xoffset=1     yoffset=0    xadvance=8     page=0  chnl=0 
char id=247   x=70     y=0     width=9     height=19     xoffset=1     yoffset=0    xadvance=8     page=0  chnl=0 
char id=246   x=79     y=0     width=9     height=19     xoffset=1     yoffset=0    xadvance=8     page=0  chnl=0 
char id=245   x=88     y=0     width=9     height=19     xoffset=1     yoffset=0    xadvance=8     page=0  chnl=0 
char id=244   x=97     y=0     width=9     height=19     xoffset=1     yoffset=0    xadvance=8     page=0  chnl=0 
char id=243   x=106     y=0     width=9     height=19     xoffset=1     yoffset=0    xadvance=8     page=0  chnl=0 
char id=242   x=115     y=0     width=9     height=19     xoffset=1     yoffset=0    xadvance=8     page=0  chnl=0 
char id=241   x=124     y=0     width=9     height=19     xoffset=1     yoffset=0    xadvance=8     page=0  chnl=0 
char id=240   x=133     y=0     width=9     height=19     xoffset=1     yoffset=0    xadvance=8     page=0  chnl=0 
char id=239   x=142     y=0     width=5     height=19     xoffset=0     yoffset=0    xadvance=3     page=0  chnl=0 
…

kernings count=374
kerning first=49  second=49  amount=-1
kerning first=121  second=44  amount=-1
kerning first=121  second=46  amount=-1
kerning first=119  second=44  amount=-1
kerning first=119  second=46  amount=-1
kerning first=118  second=44  amount=-1
kerning first=118  second=46  amount=-1
kerning first=114  second=44  amount=-1
kerning first=114  second=46  amount=-1
kerning first=89  second=44  amount=-2
kerning first=89  second=45  amount=-1
kerning first=89  second=46  amount=-2
kerning first=89  second=58  amount=-1
kerning first=89  second=59  amount=-1
kerning first=89  second=65  amount=-1
kerning first=89  second=97  amount=-1
kerning first=89  second=101  amount=-1

…

 

Let's look at arial-15.png:

It can be seen that the libgdx text is based on the fnt file to obtain the Coordinate Position of the corresponding text in png, and then extract the corresponding part of the image for painting.

Therefore, it is easy to make libgdx support the Chinese idea. We can construct fnt and png files by ourselves, including the Chinese words we want to use.

The author provides us with a corresponding tool: Hiero.

Download and double-click it to run. Select a usable font in the list on the right and enter the required Chinese characters. It is best to retain the automatically generated English letters and symbols.

You can set the effect in Effects on the right side:

Click File-Save as BMFont Files to generate two Files and copy them to the asserts folder.

Use

bitmapFont = new BitmapFont(Gdx.files.internal("cf.fnt"), Gdx.files.internal("cf.png"), false);

Specify the file we generated as a reference for drawing, and then draw:

BitmapFont. draw (spriteBatch, "FPS" + Gdx. graphics. getFramesPerSecond (), 5, Gdx. graphics. getHeight ()-10); bitmapFont. draw (spriteBatch, "Happy Singles Day", 0, Gdx. graphics. getHeight ()/2-8 );

Effect:

Multi-line text:

Yes

public TextBounds drawMultiLine (SpriteBatch spriteBatch, CharSequence str, float x, float y)

Or

public TextBounds drawMultiLine (SpriteBatch spriteBatch, CharSequence str, float x, float y, float alignmentWidth,HAlignment alignment)