Computer Graphics: 斜角地圖

全平面的地圖是從上往下俯視景物與操作人物，如我們前一個主題所介紹的平面地圖，市面上有許多遊戲是採斜角方向來 觀看景物，這種方式可以製作出類似3D的畫面，而使用到的貼圖技巧卻只有2D而已，而且效果並不差，下圖是一個斜角地圖的範例：


這是下一個主題的完成圖，我們先看看上圖的草地如何製作，其它再如法泡製就可以了；斜角地圖是由一個一個的菱形方塊所組成，我們如下繪製出一個小圖：


電腦的圖檔規定都是四方形，所以我們的菱形外的白色區域必須經過處理，讓圖繪製出來時，白方區域部份變為透明，不同的繪圖API處理透明圖 的函式並不同，這方面請自行查詢，在Java中，如果使用的圖片不超過256色，則使用GIF檔是個不錯的方式，我們只要將GIF檔的指定顏包設定為透 明，當圖片繪製的時候其背景就是透明的了。

拼接地圖時，我們將下一個菱形接在左下或右下，如下所示：


在程式中這並不難作到，只要將圖片的貼圖位置不斷往下平移Height/2，再往左或往右平移Width/2即可，如下所示：


我們舉個實例來說好了，假設我們所使用的圖片如下所示，圖片是32X16像素大小，下圖已經過放大，這樣看的比較清楚：



其中藍色部份我們已設定為透明，如果我們將圖片加以拼接，就可以出現一小塊斜角地圖了：


下圖是16X16張小圖所拼接出來的斜角地圖：

• Map45Rotate.java

package onlyfun.caterpillar.graphics.animation;
 
import java.awt.*; 
import javax.swing.JApplet; 
 
public class Map45Rotate extends JApplet {  
    private Image offScreen;  
 
    public void init() { 
        setBackground(Color.white);   
 
        //取得影像 
        MediaTracker mediaTracker = new MediaTracker(this); 
        Image floor =getImage(getDocumentBase(),"floor.gif");
        mediaTracker.addImage(floor,0); 
      
        try { 
            showStatus("影像載入中(Loading Images)..."); 
            mediaTracker.waitForAll(); 
        } 
        catch(InterruptedException e){
            e.printStackTrace();
        }
 
        int appletWidth  = getSize().width;    
        int appletHeight = getSize().height;  
        
        //建立次畫面 
        offScreen = createImage(appletWidth, appletHeight); 
        Graphics drawOffScreen = offScreen.getGraphics(); 
      
        int halfWidth = floor.getWidth(this) / 2; 
        int halfHeight = floor.getHeight(this) / 2; 
        
        int startX = appletWidth / 2;
        int startY = appletHeight / 8;
      
        // 繪製地板 
        for(int j = 0; j < 15; j++) { 
            for(int i = 0; i < 15; i++) { 
                int x = startX - i*halfWidth + j*halfWidth; 
                int y = startY + i*halfHeight + j*halfHeight; 
                drawOffScreen.drawImage(floor, x, y,this); 
            } 
        }
    } 
 
    public void paint(Graphics g) { 
        //將次畫面貼到主畫面中 
        g.drawImage(offScreen,0,0,this); 
    } 
}