libgdx遊戲引擎開發筆記（四）文字顯示BitmapFont

      由于Libgdx底層是用OpenGL實作的，是以Libgdx是可以支援中文的，在libgdx中的漢字都是通過貼圖的方式顯示，使用BitmapFont和SpriteBatch組合來完成文字的繪制，構造BitmapFont時需要一個描述文字構成的fnt檔案，和一個提供文字圖檔的png檔案。是以顯示中文，歸根結底就是讀取一個包含中文資訊的.fnt檔案和相應的.png檔案并展示出來的問題。

1.如何生成這兩個檔案那？

    下載下傳完成之後，輕按兩下打開界面很簡單，可以對文字制作特效、改變背景顔色、設定内間距等等，右側還有作提供給我們的做好的字型效果點選， Add按鈕就可以添加，看下圖我寫的幾個文字：

<a target="_blank" href="http://blog.51cto.com/attachment/201307/110251284.png"></a>

   最後，點選File,儲存即可，我們可以看到生成了兩個檔案喽！

<a target="_blank" href="http://blog.51cto.com/attachment/201307/110430761.png"></a>

2.如何使用這兩個檔案并顯示出來那？

  A.将這兩個檔案放到項目的Asset檔案夾下，之後就是代碼中的調用了。

   （為什麼使用這兩個檔案那？由于Libgdx底層是用OpenGL實作的，是以Libgdx是可以支援中文的。但是libgdx中的漢字都是通過貼圖的方式顯示的，我們用EditPlus打開 Potato.fnt檔案，可以很明顯看出，libgdx的文字繪制是根據fnt檔案擷取對應文字的在png中的坐标位置，然後截取圖檔的相應部分進行繪制。）

<a target="_blank" href="http://blog.51cto.com/attachment/201307/111219677.png"></a>

   B.在代碼調用顯示

1

2

3

4

5

6

7

8

9

10

11

12

<code>package</code> <code>com.zhf.android_libgdx;</code>

<code>import</code> <code>com.badlogic.gdx.backends.android.AndroidApplication;</code>

<code>import</code> <code>android.os.Bundle;</code>

<code>public</code> <code>class</code> <code>MainActivity </code><code>extends</code> <code>AndroidApplication {</code>

<code>    </code><code>@Override</code>

<code>    </code><code>protected</code> <code>void</code> <code>onCreate(Bundle savedInstanceState) {</code>

<code>        </code><code>super</code><code>.onCreate(savedInstanceState);</code>

<code>        </code><code>//在此啟動遊戲，FirstGame實作了ApplicationListener的類</code>

<code>        </code><code>initialize(</code><code>new</code> <code>FirstGame(), </code><code>false</code><code>);  </code><code>//specifying the configuration for the GLSurfaceView.</code>

<code>        </code><code>//第二個參數如果設為true，則在opengl 2.0可用的情況下會使用opengl 2.0。</code>

<code>    </code><code>}</code>

<code>}</code>

  主界面：

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

<code>import</code> <code>javax.microedition.khronos.opengles.GL10;</code>

<code>import</code> <code>com.badlogic.gdx.ApplicationListener;</code>

<code>import</code> <code>com.badlogic.gdx.Gdx;</code>

<code>import</code> <code>com.badlogic.gdx.graphics.g2d.BitmapFont;</code>

<code>import</code> <code>com.badlogic.gdx.graphics.g2d.SpriteBatch;</code>

<code>public</code> <code>class</code> <code>FirstGame </code><code>implements</code> <code>ApplicationListener {</code>

<code>    </code><code>private</code> <code>SpriteBatch batch; </code><code>// 繪圖時用的SpriteBatch</code>

<code>    </code><code>private</code> <code>BitmapFont bitmapFont;</code>

<code>    </code><code>public</code> <code>void</code> <code>create() {</code>

<code>        </code><code>// 執行個體化</code>

<code>        </code><code>batch = </code><code>new</code> <code>SpriteBatch();</code>

<code>        </code><code>bitmapFont = </code><code>new</code> <code>BitmapFont(Gdx.files.</code><code>internal</code><code>(</code><code>"photo.fnt"</code><code>), Gdx.files.</code><code>internal</code><code>(</code><code>"photo.png"</code><code>), </code><code>false</code><code>);</code>

<code>        </code><code>bitmapFont.setColor(</code><code>0</code><code>.5f, </code><code>0</code><code>.5f, </code><code>0</code><code>.5f, </code><code>1</code><code>);  </code><code>//設定顔色</code>

<code>        </code><code>bitmapFont.setScale(</code><code>1</code><code>.0f);  </code><code>//設定字型比例大小</code>

<code>    </code><code>public</code> <code>void</code> <code>render() {</code>

<code>        </code><code>// STUB</code>

<code>        </code><code>Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);</code>

<code>        </code><code>Gdx.gl.glClearColor(0f, 0f, 0f, 0f);</code>

<code>        </code><code>batch.begin();</code>

<code>                                                                                                   </code> 

<code>        </code><code>bitmapFont.draw(batch, </code><code>"狂奔的蝸牛"</code><code>,</code><code>200</code><code>, </code><code>160</code><code>);</code>

<code>        </code><code>//顯示特定的字元</code>

<code>//      bitmapFont.draw(batch, "狂奔的蝸牛",100,200,3,5);  //隻顯示蝸牛</code>

<code>        </code><code>//一行根本寫不完,我們隻需要在中文字元中加入換行符（\n）即可，而且它還是自動識别的，非常簡單。</code>

<code>        </code><code>bitmapFont.drawMultiLine(batch, </code><code>"技術路，\n一步一個腳印！"</code><code>, Gdx.graphics.getWidth() / </code><code>5</code><code>, Gdx.graphics.getHeight()*</code><code>0</code><code>.8f);</code>

<code>        </code><code>batch.end();</code>

<code>//顯示特定的字元：可以調用public TextBounds draw(SpriteBatch spriteBatch, CharSequence str, float x, float y)</code>

<code>//      第一個參數是SpriteBatch類的對象，這裡不多解釋了。</code>

<code>//      第二個參數是字元串，也你要輸出的中文字元，例如剛才我們寫的“狂奔的蝸牛”這個就是第二個對應的字元。</code>

<code>//      第三個和第四個參數（即float x, float y），它們是繪制字中文字元的起點坐标，遵循普通坐标系（左下角起點）。</code>

<code>//      第五個參數和第六個參數，是設定從第幾個字元開始輸出，到第幾個字元結束，比如我們要輸出“蝸牛”這2個字就将start改為3，end改為5，這裡面第一個字元預設編碼是0而不是1，請牢記。</code>

<code>                                                                                               </code> 

<code>//或者public TextBounds drawMultiLine (SpriteBatch spriteBatch, CharSequence str, float x, float y, float alignmentWidth,HAlignment alignment)</code>

<code>//      後兩個參數介紹： float alignmentWidth----》是指文字的對齊方式，有LEFT、RIGHT、CENTER幾種方式。其中，LEFT的繪制原點是左上角、RIGHT的繪制原點是由上角、CENTER的繪制原點是每行文字中心，向兩邊展開。</code>

<code>//                 HAlignment alignment----》對LEFT不起作用，隻對RIGHT和CENTER起作用，對RIGHT來說就相當于把繪制原點平移alignmentWidth的寬度，對CENTER來說相當于平移繪制原點平移alignmentWidth/2的寬度。</code>

<code>    </code><code>public</code> <code>void</code> <code>resize(</code><code>int</code> <code>width, </code><code>int</code> <code>height) {</code>

<code>    </code><code>public</code> <code>void</code> <code>pause() {</code>

<code>    </code><code>public</code> <code>void</code> <code>resume() {</code>

<code>    </code><code>public</code> <code>void</code> <code>dispose() {</code>

<code>        </code><code>batch.dispose();</code>

<code>        </code><code>bitmapFont.dispose();</code>

   C.效果圖：

<a target="_blank" href="http://blog.51cto.com/attachment/201307/112505199.png"></a>

ok！搞定！ 中文顯示出來了，到時候大家可以根據自己的情況來制作自己喜歡的文字效果

<b>     本文轉自zhf651555765 51CTO部落格，原文連結：http://blog.51cto.com/smallwoniu/1256054</b><b>，如需轉載請自行聯系原作者</b>