Computer Graphics: 捲軸背景

橫向捲軸或縱向捲軸的遊戲大家應該有玩過，其背景其本身都很單調，例如一個星空不斷的移動，或是一個海洋，其實它 只使用到一張背景圖片不斷的播放而已，其製作的概念是將圖片的兩端接起來，然後像跑馬燈一樣不斷的捲動，所以背景就會循環播放，如下圖所示：



當然電腦上的圖片可無法像紙片一樣的「捲」起來，我們製作的方法是在播放區域超出圖片範圍時，從圖片後端剪下一段並補到播放畫面上，如下圖所示： 


按照以上，只要稍微計算一下，就可以輕易的製作出捲動的效果，不過這邊要介紹一個投機但方便的方法，可以省下一些運算的成本，我們將背景圖 片複製為兩個，首先一張圖的繪製目標X1位置由0開始，另一張圖繪製目標位置X2由-ImageWidth開始，也就是在繪圖區域之外，其中 ImageWidth為圖片寬度，如下圖所示：


X1與X2都一直向右移動，所以圖片可以完美的播放，如果X1超過繪圖區域右緣了，就將X1設定為-ImageWidth，同樣的，如果X2超出繪圖區域 右緣，就將之再設定為-ImageWidth，如此循環不已，背景就可以不斷的播放了。

• ScrollBackground.java

package onlyfun.caterpillar.graphics.animation; 
 
import java.awt.*; 
import javax.swing.JApplet;
 
public class ScrollBackground extends JApplet 
                                    implements Runnable { 
    private int appletWidth, appletHeight, imageWidth;
    private int x1, x2; 
    private Image scrollImage, scrollImage2, offScreen; 
 
    public void init() { 
        appletWidth = getSize().width; 
        appletHeight = getSize().height; 
  
       //取得捲動畫面影像 
        MediaTracker mediaTracker = new MediaTracker(this); 
        scrollImage  = 
                 getImage(getDocumentBase(),"scroll.gif"); 
        mediaTracker.addImage(scrollImage,0); 
 
        try { 
            mediaTracker.waitForAll(); 
        }      
        catch(InterruptedException e){}  
 
        //複製捲動畫面影像 
        scrollImage2 = createImage(scrollImage.getSource()); 
        offScreen = createImage(appletWidth, appletHeight); 
         
        imageWidth = scrollImage.getWidth(this); 
 
        x1 = 0;                  
        x2 = -imageWidth;
    } 
 
    public void start() {   
       (new Thread(this)).start();  
    } 
 
    public void paint(Graphics g) {  
        g.drawImage(offScreen, 0, 0, this); 
    } 
 
    public void update(Graphics g) { 
        paint(g); 
    } 
 
    public void run() { 
        Graphics gOffScreen = offScreen.getGraphics();
        
        while(true) {
            gOffScreen.drawImage(scrollImage, x1, 0, this); 
            gOffScreen.drawImage(scrollImage2, x2, 0, this);
            
            repaint();           
 
            try { 
                Thread.sleep(33); 
            } 
            catch(InterruptedException e){ } 
 
            //更新影像位置(產生捲動效果) 
            if(x1 == appletWidth) 
                x1 = -imageWidth; 
            else 
                x1++; 
 
            if(x2 == appletWidth) 
                x2 = -imageWidth; 
            else 
                x2++; 
        } 
    } 
}