libgdx游戏引擎开发笔记（八）SuperJumper游戏例子的讲解（篇二）---- 游戏界面跳转

   接着上一篇的讲解，今天我们来完成帮助和分数排行榜多界面的跳转，当然不会像是Activity之间跳转，那样会很卡的，具体怎么做我们往下看吧！

1.Help界面的跳转

1.1在上次的代码基础上，我们看到MainMenuScreen中在update()中留有注释的代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<code>if</code> <code>(OverlapTester.pointInRectangle(playBounds, touchPoint.x, touchPoint.y)) {</code>

<code>            </code><code>//播放点击音效</code>

<code>            </code><code>Assets.playSound(Assets.clickSound);</code>

<code>            </code><code>//game.setScreen(new GameScreen(game));</code>

<code>             </code><code>return</code><code>;</code>

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

<code>        </code><code>if</code> <code>(OverlapTester.pointInRectangle(highscoresBounds, touchPoint.x, touchPoint.y)) {</code>

<code>            </code><code>//game.setScreen(new HighscoresScreen(game));</code>

<code>            </code><code>return</code><code>;</code>

<code>        </code><code>if</code> <code>(OverlapTester.pointInRectangle(helpBounds, touchPoint.x, touchPoint.y)) {</code>

<code>            </code><code>//game.setScreen(new HelpScreen(game));</code>

1.2HelpScreen类：

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

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

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

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

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

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

<code>import</code> <code>com.badlogic.gdx.graphics.GL10;</code>

<code>import</code> <code>com.badlogic.gdx.graphics.GLCommon;</code>

<code>import</code> <code>com.badlogic.gdx.graphics.OrthographicCamera;</code>

<code>import</code> <code>com.badlogic.gdx.graphics.Texture;</code>

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

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

<code>import</code> <code>com.badlogic.gdx.math.Rectangle;</code>

<code>import</code> <code>com.badlogic.gdx.math.Vector3;</code>

<code>/**</code>

<code> </code><code>* 帮助界面一</code>

<code> </code><code>* @author ZHF</code>

<code> </code><code>*</code>

<code> </code><code>*/</code>

<code>public</code> <code>class</code> <code>HelpScreen </code><code>implements</code> <code>Screen {</code>

<code>    </code><code>Game game;</code>

<code>    </code><code>OrthographicCamera guiCam;  </code><code>//相机</code>

<code>    </code><code>SpriteBatch batcher;  </code><code>//用来绘画界面的</code>

<code>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 </code> 

<code>    </code><code>Rectangle nextBounds;  </code><code>//下一个screen</code>

<code>    </code><code>Vector3 touchPoint;   </code><code>//按下的触点</code>

<code>    </code><code>Texture helpImage;   </code><code>//帮助界面图片</code>

<code>    </code><code>TextureRegion helpRegion;  </code><code>//帮助界面区域</code>

<code>    </code><code>public</code> <code>HelpScreen(Game game) {</code>

<code>        </code><code>this</code><code>.game = game;</code>

<code>        </code><code>//初始化了一个OrthographicCamera(正交相机)，并把宽度和高度设置为320*480，也就是屏幕的大小。随后将OrthographicCamera的位置，也就是position设置在屏幕的中点 (因为此为2D游戏，所以不需要考虑Z轴)</code>

<code>        </code><code>guiCam = </code><code>new</code> <code>OrthographicCamera(</code><code>320</code><code>, </code><code>480</code><code>);</code>

<code>        </code><code>guiCam.position.</code><code>set</code><code>(</code><code>320</code> <code>/ </code><code>2</code><code>, </code><code>480</code> <code>/ </code><code>2</code><code>, </code><code>0</code><code>);</code>

<code>        </code><code>nextBounds = </code><code>new</code> <code>Rectangle(</code><code>320</code> <code>- </code><code>64</code><code>, </code><code>0</code><code>, </code><code>64</code><code>, </code><code>64</code><code>);</code>

<code>        </code><code>touchPoint = </code><code>new</code> <code>Vector3();</code>

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

<code>        </code><code>helpImage = Assets.loadTexture(</code><code>"data/help1.png"</code><code>);  </code><code>//加载图片资源到内存</code>

<code>        </code><code>helpRegion = </code><code>new</code> <code>TextureRegion(helpImage, </code><code>0</code><code>, </code><code>0</code><code>, </code><code>320</code><code>, </code><code>480</code><code>);</code>

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

<code>    </code><code>/**刷新**/</code>

<code>    </code><code>public</code> <code>void</code> <code>update(float deltaTime) {</code>

<code>        </code><code>//检测捕获到按下位置</code>

<code>        </code><code>if</code> <code>(Gdx.input.justTouched()) {</code>

<code>            </code><code>guiCam.unproject(touchPoint.</code><code>set</code><code>(Gdx.input.getX(), Gdx.input.getY(),</code>

<code>                    </code><code>0</code><code>));</code>

<code>            </code><code>//点击切换到下一个界面</code>

<code>            </code><code>if</code> <code>(OverlapTester.pointInRectangle(nextBounds, touchPoint.x,</code>

<code>                    </code><code>touchPoint.y)) {</code>

<code>                </code><code>Assets.playSound(Assets.clickSound);</code>

<code>//              game.setScreen(new HelpScreen2(game));  //切换到下一屏</code>

<code>                </code><code>return</code><code>;</code>

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

<code>    </code><code>public</code> <code>void</code> <code>draw(float deltaTime) {</code>

<code>        </code><code>GLCommon gl = Gdx.gl;</code>

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

<code>        </code><code>guiCam.update();</code>

<code>        </code><code>//设置绘画属性： 因为自定义了OrthographicCamera ，所以要将OrthographicCamera 的 投影矩阵传递给 batcher。在投影矩阵中是把得到的点击坐标弄成touchPoint向量，把得到的点击坐标，由左上为（0，0）的坐标系--》左下为（0，0）的坐标系。</code>

<code>        </code><code>batcher.setProjectionMatrix(guiCam.combined);</code>

<code>        </code><code>batcher.disableBlending();</code>

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

<code>        </code><code>batcher.draw(helpRegion, </code><code>0</code><code>, </code><code>0</code><code>, </code><code>320</code><code>, </code><code>480</code><code>);</code>

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

<code>        </code><code>batcher.enableBlending();</code>

<code>        </code><code>batcher.draw(Assets.arrow, </code><code>320</code><code>, </code><code>0</code><code>, -</code><code>64</code><code>, </code><code>64</code><code>);</code>

<code>        </code><code>gl.glDisable(GL10.GL_BLEND);</code>

<code>    </code><code>/**系统会开启一个线程来不断的调用**/</code>

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

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

<code>        </code><code>update(delta);</code>

<code>        </code><code>draw(delta);</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>show() {</code>

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

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

<code>        </code><code>helpImage.dispose();</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>

这样，我们的代码还不能运行，因为我们的帮助界面里有下一条的按钮，还需要修改Asset类：

声明：

<code>public</code> <code>static</code> <code>TextureRegion arrow; </code><code>//帮助下一条按钮区域</code>

实例化：

<code>//下一条按按钮</code>

<code>arrow = </code><code>new</code> <code>TextureRegion(items, </code><code>0</code><code>, </code><code>64</code><code>, </code><code>64</code><code>, </code><code>64</code><code>);</code>

ok! 在主菜单界面上点击Help已经成功实现跳转，接下来按下右下角的下一条，界面不会发生改变，为什么哪？

因为我们将一行代码注释掉了哦，现在我们取消注释，创建HelpScreen2,代码基本上没有改变，仅仅是在：

<code>helpImage = Assets.loadTexture(</code><code>"data/help1.png"</code><code>);  </code><code>//加载图片资源到内存</code>

将图片help1改为help2，即可实现跳转。

再在：

<code>game.setScreen(</code><code>new</code> <code>HelpScreen2(game));  </code><code>//切换到下一屏</code>

将HelpScreen2改为HelpScreen3，同理，这样一直下去到HelpScreen5，完成点击下一条切换帮助界面（这里有5张help图片，分别代表5个界面哦）！

 1.3.在最后一屏HelpScreen5我们将切换到下一屏的代码改到主菜单界面

<code>game.setScreen(</code><code>new</code> <code>MainMenuScreen(game));  </code><code>//切换到下一屏</code>

效果图：

   ok！到此帮助界面的切换我们已经完成！！！

2.排行榜界面的跳转

   2.1.同理，首先放开MainMenuScreen中的那行注释：

<code>game.setScreen(</code><code>new</code> <code>HighscoresScreen(game));</code>

2.2.HighscoresScreen类

95

96

97

98

99

100

101

102

<code> </code><code>* 排行榜界面</code>

<code>public</code> <code>class</code> <code>HighscoresScreen </code><code>implements</code> <code>Screen {</code>

<code>    </code><code>OrthographicCamera guiCam;</code>

<code>    </code><code>SpriteBatch batcher;</code>

<code>    </code><code>Rectangle backBounds;</code>

<code>    </code><code>Vector3 touchPoint;</code>

<code>                                                                                                                                                                                                                                                                                                 </code> 

<code>    </code><code>String</code><code>[] highScores;  </code><code>//高分</code>

<code>    </code><code>float xOffset = </code><code>0</code><code>;</code>

<code>    </code><code>public</code> <code>HighscoresScreen(Game game) {</code>

<code>        </code><code>backBounds = </code><code>new</code> <code>Rectangle(</code><code>0</code><code>, </code><code>0</code><code>, </code><code>64</code><code>, </code><code>64</code><code>);</code>

<code>        </code><code>//实例化分数数组</code>

<code>        </code><code>highScores = </code><code>new</code> <code>String</code><code>[</code><code>5</code><code>];</code>

<code>        </code><code>for</code> <code>(</code><code>int</code> <code>i = </code><code>0</code><code>; i &lt; </code><code>5</code><code>; i++) {</code>

<code>            </code><code>highScores[i] = i + </code><code>1</code> <code>+ </code><code>". "</code> <code>+ Settings.highscores[i];</code>

<code>            </code><code>//显示排行榜文字</code>

<code>            </code><code>xOffset = Math.max(Assets.font.getBounds(highScores[i]).width,</code>

<code>                    </code><code>xOffset);</code>

<code>        </code><code>//分数显示位置</code>

<code>        </code><code>xOffset = </code><code>160</code> <code>- xOffset / </code><code>2</code> <code>+ Assets.font.getSpaceWidth() / </code><code>2</code><code>;</code>

<code>            </code><code>//返回到主菜单界面</code>

<code>            </code><code>if</code> <code>(OverlapTester.pointInRectangle(backBounds, touchPoint.x,</code>

<code>                </code><code>game.setScreen(</code><code>new</code> <code>MainMenuScreen(game));</code>

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

<code>                                                                                                                                                                                                                                                                                                     </code> 

<code>        </code><code>batcher.draw(Assets.backgroundRegion, </code><code>0</code><code>, </code><code>0</code><code>, </code><code>320</code><code>, </code><code>480</code><code>);</code>

<code>        </code><code>//画出排行榜</code>

<code>        </code><code>batcher.draw(Assets.highScoresRegion, </code><code>10</code><code>, </code><code>360</code> <code>- </code><code>16</code><code>, </code><code>300</code><code>, </code><code>33</code><code>);</code>

<code>        </code><code>//画出数组中的分数在对应的位置</code>

<code>        </code><code>float y = </code><code>230</code><code>;</code>

<code>        </code><code>for</code> <code>(</code><code>int</code> <code>i = </code><code>4</code><code>; i &gt;= </code><code>0</code><code>; i--) {</code>

<code>            </code><code>Assets.font.draw(batcher, highScores[i], xOffset, y);</code>

<code>            </code><code>y += Assets.font.getLineHeight();</code>

<code>        </code><code>batcher.draw(Assets.arrow, </code><code>0</code><code>, </code><code>0</code><code>, </code><code>64</code><code>, </code><code>64</code><code>);</code>

我们还需要在资源加载类Asset中添加几行代码：

<code>public</code> <code>static</code> <code>BitmapFont font;  </code><code>//文字</code>

<code>public</code> <code>static</code> <code>TextureRegion highScoresRegion;  </code><code>//排行榜</code>

<code>//分数</code>

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

<code>//排行榜</code>

<code> </code><code>highScoresRegion = </code><code>new</code> <code>TextureRegion(Assets.items, </code><code>0</code><code>, </code><code>257</code><code>, </code><code>300</code><code>,</code><code>110</code><code>/ </code><code>3</code><code>);</code>

再在Settings中实例化默认分数排行榜的值

<code>//默认分数排行榜分数</code>

<code>public</code> <code>final</code> <code>static</code> <code>int</code><code>[] highscores = </code><code>new</code> <code>int</code><code>[] {</code><code>100</code><code>, </code><code>80</code><code>, </code><code>50</code><code>, </code><code>30</code><code>, </code><code>10</code><code>};</code>

   ok! 运行一下试试！发现可以实现跳转了！嘿嘿！

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

  顺便说一下，下一讲我们将接触游戏的主界面，里面包含了碰撞判断和点击区域判断，声音音效控制，游戏的一般框架等等，在这里还强调一下，这个游戏不包括舞台和演员这两个类，还需要通过其他的Demo来学习。

<b>     本文转自zhf651555765 51CTO博客，原文链接：http://blog.51cto.com/smallwoniu/1262699</b><b>，如需转载请自行联系原作者</b>