第41節 - LibGDX: Tiled (Scrollable Background with Camera & HUD)
這一節我會介紹LibGDX遊戲的Scrollable Background with Camera & Head-up Display(HUD)，所謂HUD簡單代表一隻遊戲內的分數和生命值(Scores & Lives)等等，我會在這節詳細介紹。
以下重溫上幾節的內容:
- 第36節 - LibGDX: Tiled Map Editor (Background & Foreground)介紹用Tiled Map Editor來製作一個2D遊戲(2D Platformer Game)的背景。
- 第37節 - LibGDX: Jumping Action介紹Jumping Action。
- 第38節 - LibGDX: Tiled (Collision Detection)介紹過如何利用Tiled Map Editor製造碰撞效果。
- 第39節 - LibGDX: Tiled (Bullet Class)介紹Bullet Class，則是加入發射子彈的方法。
- 第40節 - LibGDX: Audio(Sound & Music)介紹加入背景音樂和發射子彈的音效。
執行結果:
以下是 LibGDX: Tiled (Scrollable Background with Camera & HUD)程式執行的結果:
Scrollable Background with Camera
以下是3D構圖:
- 建立一張全新Tiled Map，但這張Tiled Map的大小要比屏幕長一倍，則2048px X 768px。
- 建立一個camera物件，並設定viewport大小相等於屏幕大小，則1048px X 768px。
- 要做到camera跟隨屏幕左右移動，其實很簡單，只要把camera的X Position設定為主角hero1的X Position就可以，則camera.position.x = position.x;。
- 最後，用setView()方法，把camera設定在tiled Map內，並把tiled Map的Layer(background、foreground和upperlayer)顯示在屏幕上。
Head-up Display (HUD) - Scores & Lives
要把遊戲分數和主角hero1的生命數量(Scores & Lives)顯示在屏幕上，但又不會跟隨屏幕左右移動，其實很簡單，只要把HUD顯示在另一個屏幕上就可以:
以下是3D構圖:
- 建立一張全新Tiled Map，但這張Tiled Map的大小要比屏幕長一倍，則2048px X 768px。
- 建立一個camera物件，並設定viewport大小相等於屏幕大小，則1048px X 768px。
- 要做到camera跟隨屏幕左右移動，其實很簡單，只要把camera的X Position設定為主角hero1的X Position就可以，則camera.position.x = position.x;。
- 最後，用setView()方法，把camera設定在tiled Map內，並把tiled Map的Layer(background、foreground和upperlayer)顯示在屏幕上。
- 最後，建立一個新的SpriteBatch物件(HUDBatch)，再建立一個BitMapFont物件(font1)和建立三個Sprite物件(spriteHero1、 spriteHero2和spriteHero3)，最後把它們顯示在新一層屏幕上。
2) MyDemo41.java新加入部分
以下部分會列出在MyDemo41.java程式新加的部分，如下圖:
- 建立HUDBatch、font1、SpriteHero1、SpriteHero2和SpriteHero3變數(Variable)。
- 在create()方法內建立SpriteBatch物件(HUDBatch)。
- 再在create()方法內建立BitMapFont物件(font1)，並設定font1的顏色為黃色。
再在create()方法內設定SpriteHero1、SpriteHero2和SpriteHero3的圖片、位置和大小。 - 最後，用新建立的SpriteBatch物件(HUDBatch)內，把font1、spriteHero1、 spriteHero2和spriteHero3顯示在新一層屏幕上。
- 別忘記呼叫dispose()方法，執行HUDBatch.dispose();和font1.dispose(); 釋放資源。
LibGDX程式
DesktopLauncher.java
- DesktopLauncher是PC Desktop的Starter Class，我們在DesktopLauncher內設定顯示的大小為1024 X 768 px。
- 把新的Tiled Map (map.tmx和tilemap.png)儲存到Android的Assets文件夾內(/map/...)。
Bullet.java
- 首先在Bullet類別的Constructor內，把bulletPosition和bulletVelocityX傳入。
bulletPosition就是主角hero1的子彈發射位置。 - 建立一個update()方法，把子彈的位置加上bulletVelocityX傳入的數值。
BackgroundSound.java
- 首先在BackgroundSound類別的Constructor內，把bgsound1.mp3傳入Sound物件(sound)內。
- 建立一個playSound()方法，用sound.loop()方法重複播放背景音樂，音量是0至1，0.5f代表設定音量為一半。
GunSound.java
- 首先在GunSound類別的Constructor內，把gun1.mp3傳入Sound物件(sound)內。
- 建立一個playSound()方法，用sound.play()方法播放發射子彈音效，音量是0至1，0.5f代表設定音量為一半。
注意，發射子彈音效不須要重複播放，所以我們不用sound.loop()方法。
MyDemo41.java
- 建立HUDBatch、font1、SpriteHero1、SpriteHero2和SpriteHero3變數(Variable)。
- 在create()方法內建立SpriteBatch物件(HUDBatch)。
- 再在create()方法內建立BitMapFont物件(font1)，並設定font1的顏色為黃色。
再在create()方法內設定SpriteHero1、SpriteHero2和SpriteHero3的圖片、位置和大小。 - 最後，用新建立的SpriteBatch物件(HUDBatch)內，把font1、spriteHero1、 spriteHero2和spriteHero3顯示在新一層屏幕上。
- 別忘記呼叫dispose()方法，執行HUDBatch.dispose();和font1.dispose(); 釋放資源。
執行程式:
