libgdx：[42]游戏世界GUI

本篇将会实现游戏世界的GUI并将他添加到游戏的场景中去。

工具/原料

libgdx

Implementing the game GUI 实现游戏世界的GUI

1、本章的最后部分我们将要实现游戏世界的GUI并把他添加到游戏时间的场景中。它会展示出游戏的当期的得分，剩余的生命值，还有当前的帧频。在我们能向屏幕输出任何的文本之前我们会载入一个b足毂忍珩itmap字体。幸运的是，Libgdx提供一个我们可以使用的默认的字体(Arial 15pt)。复制这两个文件：arial-15.fnt和arial-15.png到CanyonBunny-android/assets/images/.*Libgdx字体文件可以在Packt's的站点下载：ttp://www.packtpub.com/learning-libgdx-game-development/book

2、This is how Libgdx's default bitmap font looks:图片展示的就是Libgdx的默认bitmap字体的样子：

3、Add the following import line to Assets:把下面的导入代码添加到Assets中：import com.badlogic.gdx.graphics.g2d.BitmapFont;把下面的代码添加到Assetsas中：Add the following lines of code to Assetsas follows:

4、添加的代码中包括一个新的内部类AssetFonts它掌控这三个不同尺寸配置的bitmap字体。尺寸的不同是通过缩放实现的。Bitmap字体必须必须手工销毁，所以对应的调用语句需要添加到dispose()方法中。

5、我们现在准备好了实现游戏的GUI了。对我们将要实现什么样的效果有一个初步的印象是很必要的，我们这里有一个图片，那是我们将要实现的目标：

6、屏幕的左上角我们看到一个金币的图片和文本样式的得分。右上角有三个兔子头的图片表示我们的玩家的剩余生命值。屏幕的右下角显示的是当前的帧频数，表示我们的游戏当前的性能好坏。帧频的颜色会根据数值变化。把下面的导入语句添加到WorldRenderer:import com.badlogic.gdx.graphics.g2d.BitmapFont;然后添加如下代码到WorldRenderer:

7、添加的代码创建了以个新的camera专门用来绘制游戏的GUI。游戏GUI的相机视窗使用了一个更大的不同的常量值来设置。我们必须把bitmap字体绘制成15个像素高。如果我们使用5米乘5米的视窗，那么在任何时候将只有三分之一的字体是可见的。剩余的代码做的事情和游戏camera做的事情是相同的，通常它允许我们独立的移动游戏camera，而不移动GUIcamera。

The GUI score 得分

1、这里有一个GUI元素的截屏，像我们展示了当前的玩家得分。

2、Add the following code in WorldRenderer:把下面的代码添加到WorldRenderer中：。。。 。。。

3、金币的图片被绘制在屏幕的左上角。紧跟着它的是用大字体绘制的当前的得分。

The GUI extra lives 剩余生命值

1、Here is a screenshot of the GUI element showing the player's remaining extra lives:这里是一个剩余生命值的GUI元素的截屏：

2、把下列代码添加到WorldRenderer:private void renderGuiExtraLive (SpriteBatch batch) {float x = cameraGUI.viewportWidth – 50Constants.LIVES_START * 50;float y = -15;for (int i = 0; i < Constants.LIVES_START; i++) {if (worldController.lives <= i)batch.setColor(0.5f, 0.5f, 0.5f, 0.5f);batch.draw(Assets.instance.bunny.head,x + i * 50, y, 50, 50, 120, 100, 0.35f, -0.35f, 0);batch.setColor(1, 1, 1, 1);}}

3、兔子头的图片代表着剩余的玩家的生命值，他们被绘制在屏幕的右上角。这个方法从左至右绘制图片。在一个新的兔子头的图片被绘制之前，会检测当前的生命值是否已经被用掉了。如果是这种情况，兔子头的图片会被绘制成灰色透明的状态，这是通过把sprite batch的色彩实现的。

The GUI FPS counter GUI帧频

1、这里有一个显示当前的每秒帧频的GUI元素的图片的截屏：

2、添加如下代码到 WorldRenderer:private void renderGuiFpsCounter (SpriteBatch batch) {float x = cameraGUI.viewportWidth - 55;float y = cameraGUI.viewportHeight - 15;int fps = Gdx.graphics.getFramesPerSecond();BitmapFont fpsFont = Assets.instance.fonts.defaultNormal;if (fps >= 45) {// 45 or more FPS show up in greenfpsFont.setColor(0, 1, 0, 1);} else if (fps >= 30) {// 30 or more FPS show up in yellowfpsFont.setColor(1, 1, 0, 1);} else {// less than 30 FPS show up in redfpsFont.setColor(1, 0, 0, 1);}fpsFont.draw(batch, "FPS: " + fps, x, y);fpsFont.setColor(1, 1, 1, 1); // white}

3、一个FPS 数值显示为文本样式的 FPS:后面紧跟着当前的每秒的帧数，显示在屏幕的右下角。文本的颜色依赖于当期的帧数状态。如果帧数是45或者更高，文本的颜色将会是绿色，标志着当期的绘制的性能很好。如果在30以上，将会显示为黄色表示当前的绘制性能在一个平常的状态，在任何时候如果低于30 FPS将会显示为红色，这表示当前的绘制性能很糟糕。

Rendering the GUI 绘制GUI

1、添加代码到 WorldRenderer:private 箪滹埘麽void renderGui (SpriteBatch batch) {batch.s髫潋啜缅etProjectionMatrix(cameraGUI.combined);batch.begin();// draw collected gold coins icon + text// (anchored to top left edge)renderGuiScore(batch);// draw extra lives icon + text (anchored to top right edge)renderGuiExtraLive(batch);// draw FPS text (anchored to bottom right edge)renderGuiFpsCounter(batch);batch.end();}

2、Furthermore, change ren蟠校盯昂der()in WorldRenderer as following:另外更改WorldRenderer中的render()方法如下所示:public void render () {renderWorld(batch);renderGui(batch);}The implementation of the game's GUI is now finished.对于游戏的GUI的实现工作现在就完成了。

Summary 概述

1、这一章我们学会了如何实现我们的游戏对象，我们还学习了如何如何使用几个不同的纹理图创建复合对象。另外还介绍了如何实现level加载器，然后我们使用level加载器装配了我们的游戏世界，从现在起它将会按照顺序创建我们的游戏对象。我们学会了如何使用bitmap 字体并使用了libgdx的默认的字体创建了我们的GUI文本。另外GUI元素被用来描绘当前的游戏状态，比如当前的游戏玩家的得分，生命值。

2、记住我们任然可以使用我们的相机helper类，他允许我们在游戏场景中移动并且可以缩放。下一章中我们将会实现剩下的没有实现的游戏基础项目，比如玩家角色，可收集的物品和收集物品的检测工作。