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>