遊戲介面的滾動背景

上一篇我們講了如何製作開始選單，開始選單比較簡單，就只涉及了一個Entity，接下來幾篇，我們要一步步實現遊戲介面，對應的gameState為GAME_STATE_PLAYING。
這一篇，我們先講滾動的背景是怎麼做到的。
FlappyBird從遊戲效果來說，算是一個橫板的卷軸遊戲。什麼叫橫板卷軸遊戲呢？比如馬里奧，就是隨著人物的移動，背景會不斷滾動變換，像是卷軸展開一樣的效果。
橫板卷軸遊戲的背景有一副很長的圖，事先繪製好之後，隨著人物的移動，移動背景圖，達到卷軸的效果。說到這裡大家可能有疑問了。FlappyBird這遊戲是沒有終點也沒有關卡一說的啊，那他的背景理論上是無限滾動的，永遠沒有盡頭，那麼要怎麼實現這樣的背景呢？其實，FlappyBird只有一副背景圖，但是確能做到背景無限滾動，這背後是有一個技巧的。
假如我們拿兩張背景圖橫著拼在一起，我們看看是什麼情況：

發現了沒，這個背景圖設計的很巧妙，兩段正好是可以“無縫連結”的。其實我們就可以這樣一直連線下去，就能創造無限的背景圖了。具體在程式裡怎麼做呢？請看下面這張圖。

兩幅背景圖（其實都是同樣的圖）暫時叫BG1，BG2吧，兩張圖一起往右邊運動，當BG2的左側要離開螢幕的最右邊時把BG2再移回BG1開始的位置，這樣相當於又回到圖中的情況，開始下一次迴圈。

如果還是不理解，可以看下程式碼：

public class Background {

    private final Image IMG_BG = new ImageIcon("images/bg.png").getImage();
    private
 
 int firstBgX=-IMG_BG.getWidth(null),secBgX=0;
    private int rollingSpeed = 6;

    public void draw(Graphics g) {
        g.drawImage(IMG_BG, firstBgX, 0, null);
        g.drawImage(IMG_BG, secBgX, 0, null);
    }

    public void logic() {
        firstBgX+=rollingSpeed;
        secBgX+=rollingSpeed;
        if
 
(firstBgX==0) {
            secBgX = -IMG_BG.getWidth(null);
        }
        if(firstBgX==IMG_BG.getWidth(null)) {
            firstBgX = -IMG_BG.getWidth(null);
        }
    }

}

可以看到firstBgX也就是前面背景的x座標開始是在負的IMG_BG.WIDTH，rollingSpeed表示移動的速度，每一幀兩幅背景的x座標加上rollingSpeed，當firstBgX等於0，也就是第一張圖完全進入了螢幕，第二張圖完全離開了螢幕，此時，把第二張圖的x座標設定成負的IMG_BG.WIDTH，當第一張圖的x座標等於正的IMG_BG.WIDTH，也就是第一張圖完全移出了螢幕，第二張圖完全進入了螢幕，此時，再把第一張圖的x座標設定為負的IMG_BG.WIDTH，即又回到了開始狀態，繼續迴圈下去。這樣我們就得到了無限滾動的背景。

看一下實現的效果：

小結

這一篇講了滾軸遊戲的背景滾動的特點，FlappyBird的背景圖設計的很巧妙，使我們只需要一幅圖就能做出無限滾動的背景圖片。
下一篇，我們要開始講我們的主角，小鳥的實現程式碼，對應的Entity為Bird。