📄 map45rotate.htm
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="css/stdlayout.css" type="text/css">
<link rel="stylesheet" href="css/print.css" type="text/css">
<meta content="text/html; charset=gb2312" http-equiv="content-type">
<title>斜角地图</title>
</head>
<body>
<h3><a href="http://caterpillar.onlyfun.net/GossipCN/index.html">From
Gossip@caterpillar</a></h3>
<h1><a href="ComputerGraphics.htm">Computer Graphics: 斜角地图</a></h1>
全平面的地图是从上往下俯视景物与操作人物，如我们前一个主题所介绍的平面地图，市面上有许多游戏是采斜角方向来
观看景物，这种方式可以制作出类似3D的画面，而使用到的贴图技巧却只有2D而已，而且效果并不差，下图是一个斜角地图的范例：<br>
<img style="width: 516px; height: 271px;" alt="" src="images/map45Rotate-1.jpg"><br>
<br>
这是下一个主题的完成图，我们先看看上图的草地如何制作，其它再如法泡制就可以了；斜角地图是由一个一个的菱形方块所组成，我们如下绘制出一个小图：<br>
<img style="width: 313px; height: 97px;" alt="" src="images/map45Rotate-2.jpg"><br>
<br>
<span class="postbody"></span>
电脑的图档规定都是四方形，所以我们的菱形外的白色区域必须经过处理，让图绘制出来时，白方区域部份变为透明，不同的绘图API处理透明图
的函式并不同，这方面请自行查询，在Java中，如果使用的图片不超过256色，则使用GIF档是个不错的方式，我们只要将GIF档的指定颜包设定为透
明，当图片绘制的时候其背景就是透明的了。 <br>
<br>
拼接地图时，我们将下一个菱形接在左下或右下，如下所示： <br>
<img style="width: 265px; height: 142px;" alt="" src="images/map45Rotate-3.jpg"><br>
<br>
在程式中这并不难作到，只要将图片的贴图位置不断往下平移Height/2，再往左或往右平移Width/2即可，如下所示： <br>
<img style="width: 384px; height: 205px;" alt="" src="images/map45Rotate-4.jpg"><br>
<br>
我们举个实例来说好了，假设我们所使用的图片如下所示，图片是32X16像素大小，下图已经过放大，这样看的比较清楚： <br>
<img style="width: 273px; height: 152px;" alt="" src="images/map45Rotate-5.jpg"><br>
<br>
<br>
其中蓝色部份我们已设定为透明，如果我们将图片加以拼接，就可以出现一小块斜角地图了： <br>
<img style="width: 472px; height: 253px;" alt="" src="images/map45Rotate-6.jpg"><br>
<br>
下图是16X16张小图所拼接出来的斜角地图： <br>
<img style="width: 488px; height: 244px;" alt="" src="images/map45Rotate-7.jpg"><br>
<br>
<ul>
<li>Map45Rotate.java</li>
</ul>
<pre>package onlyfun.caterpillar.graphics.animation;<br> <br>import java.awt.*; <br>import javax.swing.JApplet; <br> <br>public class Map45Rotate extends JApplet { <br> private Image offScreen; <br> <br> public void init() { <br> setBackground(Color.white); <br> <br> //取得影像 <br> MediaTracker mediaTracker = new MediaTracker(this); <br> Image floor =getImage(getDocumentBase(),"floor.gif");<br> mediaTracker.addImage(floor,0); <br> <br> try { <br> showStatus("影像载入中(Loading Images)..."); <br> mediaTracker.waitForAll(); <br> } <br> catch(InterruptedException e){<br> e.printStackTrace();<br> }<br> <br> int appletWidth = getSize().width; <br> int appletHeight = getSize().height; <br> <br> //建立次画面 <br> offScreen = createImage(appletWidth, appletHeight); <br> Graphics drawOffScreen = offScreen.getGraphics(); <br> <br> int halfWidth = floor.getWidth(this) / 2; <br> int halfHeight = floor.getHeight(this) / 2; <br> <br> int startX = appletWidth / 2;<br> int startY = appletHeight / 8;<br> <br> // 绘制地板 <br> for(int j = 0; j < 15; j++) { <br> for(int i = 0; i < 15; i++) { <br> int x = startX - i*halfWidth + j*halfWidth; <br> int y = startY + i*halfHeight + j*halfHeight; <br> drawOffScreen.drawImage(floor, x, y,this); <br> } <br> }<br> } <br> <br> public void paint(Graphics g) { <br> //将次画面贴到主画面中 <br> g.drawImage(offScreen,0,0,this); <br> } <br>}<br></pre>
<br>
<br>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -