📄 scrollbackground.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>
横向卷轴或纵向卷轴的游戏大家应该有玩过，其背景其本身都很单调，例如一个星空不断的移动，或是一个海洋，其实它
只使用到一张背景图片不断的播放而已，其制作的概念是将图片的两端接起来，然后像跑马灯一样不断的卷动，所以背景就会循环播放，如下图所示： <br>
<img style="width: 471px; height: 201px;" alt="" src="images/scrollBackground-1.jpg"><br>
<br>
<br>
当然电脑上的图片可无法像纸片一样的“卷”起来，我们制作的方法是在播放区域超出图片范围时，从图片后端剪下一段并补到播放画面上，如下图所示： <br>
<img style="width: 342px; height: 211px;" alt="" src="images/scrollBackground-2.jpg"><br>
<br>
按照以上，只要稍微计算一下，就可以轻易的制作出卷动的效果，不过这边要介绍一个投机但方便的方法，可以省下一些运算的成本，我们将背景图
片复制为两个，首先一张图的绘制目标X1位置由0开始，另一张图绘制目标位置X2由-ImageWidth开始，也就是在绘图区域之外，其中
ImageWidth为图片宽度，如下图所示： <br>
<span class="postbody"></span><img style="width: 526px; height: 199px;" alt="" src="images/scrollBackground-3.jpg"><br>
<br>
X1与X2都一直向右移动，所以图片可以完美的播放，如果X1超过绘图区域右缘了，就将X1设定为-ImageWidth，同样的，如果X2超出绘图区域
右缘，就将之再设定为-ImageWidth，如此循环不已，背景就可以不断的播放了。 <br>
<p></p>
卷轴背景的基本工作原理还可以再变化一下，例如可以制作远景与近景，远景在荧幕上方更新，图片更新速度较慢，而近景在荧幕下方更新，而更新速度较快，还有
如云彩的行进等等，像这类的变化应用不少。<br>
<br>
<cite class="urllink"></cite><a class="urllink" href="scrollBackground.html"><cite class="urllink">连结 </cite></a>示范星空背
景的卷轴播放，以下是示范程式：<br>
<ul>
<li> ScrollBackground.java</li>
</ul>
<pre>package onlyfun.caterpillar.graphics.animation; <br> <br>import java.awt.*; <br>import javax.swing.JApplet;<br> <br>public class ScrollBackground extends JApplet <br> implements Runnable { <br> private int appletWidth, appletHeight, imageWidth;<br> private int x1, x2; <br> private Image scrollImage, scrollImage2, offScreen; <br> <br> public void init() { <br> appletWidth = getSize().width; <br> appletHeight = getSize().height; <br> <br> //取得卷动画面影像 <br> MediaTracker mediaTracker = new MediaTracker(this); <br> scrollImage = <br> getImage(getDocumentBase(),"scroll.gif"); <br> mediaTracker.addImage(scrollImage,0); <br> <br> try { <br> mediaTracker.waitForAll(); <br> } <br> catch(InterruptedException e){} <br> <br> //复制卷动画面影像 <br> scrollImage2 = createImage(scrollImage.getSource()); <br> offScreen = createImage(appletWidth, appletHeight); <br> <br> imageWidth = scrollImage.getWidth(this); <br> <br> x1 = 0; <br> x2 = -imageWidth;<br> } <br> <br> public void start() { <br> (new Thread(this)).start(); <br> } <br> <br> public void paint(Graphics g) { <br> g.drawImage(offScreen, 0, 0, this); <br> } <br> <br> public void update(Graphics g) { <br> paint(g); <br> } <br> <br> public void run() { <br> Graphics gOffScreen = offScreen.getGraphics();<br> <br> while(true) {<br> gOffScreen.drawImage(scrollImage, x1, 0, this); <br> gOffScreen.drawImage(scrollImage2, x2, 0, this);<br> <br> repaint(); <br> <br> try { <br> Thread.sleep(33); <br> } <br> catch(InterruptedException e){ } <br> <br> //更新影像位置(产生卷动效果) <br> if(x1 == appletWidth) <br> x1 = -imageWidth; <br> else <br> x1++; <br> <br> if(x2 == appletWidth) <br> x2 = -imageWidth; <br> else <br> x2++; <br> } <br> } <br>}<br></pre>
<br>
<br>
<br>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -