如何用Java实现图片的无缝连接循环滚动

一、前言

刚好这周是学校的软件实训周，要做一个类似飞机大战的游戏，可是要实现更好效果的飞机大战游戏，难免会遇到一个问题，如何实现游戏背景图片的循环滚动和无缝连接呢？思考之后，便有了以下的方法，通过两张一样的图片实现图片的无缝连接循环滚动。

二、实现思路

假设有一张图片AB，图片AB如果想要实现无缝连接的循环滚动，那么每当图片AB向下滚动一段位移move,要想办法将向下移动move的末端图片(B)连接到图片的顶端(A)，就如下图所示。

三、实现方法

用两张相同的图片，一张图片从图片顶端往下移动，另一张图片从图片底端往上移动，只要两张图片移动的速度一致，就能实现图片的无缝连接。

1.从图片顶端往下移动

2.从图片底端往上移动

四、实现效果

五、参考代码

注意g为Graphics对象，即画布。

 private ImageIcon img=new ImageIcon("img/Background/1.png");
 private int moveY=0; //从图片顶端向下滚动
 private int moveYY=800;//从图片底端向上滚动，大小等于图片的长度

//如果移动超过图片的长度，则回到初始位置
moveY=(moveY>=800)?0:moveY;
moveYY=(moveYY<=0)?800:moveYY;
  
 //图片从底端向上滚动
 g.drawImage(img.getImage(), 
 getX(), getY(),  //屏幕左上角坐标
 getX()+300, getY()+400,  //屏幕右下角坐标（“+”后面为窗体的大小）
 0,moveYY,             //图片左上角坐标 
 600,800+moveYY,          //图片右下角坐标
 null);
 
 //图片从顶端向下滚动
 g.drawImage(img.getImage(), 
 getX(), getY(),  //屏幕左上角坐标
 getX()+300, getY()+400,  //屏幕右下角坐标
 0,-moveY,             //图片左上角坐标 
 600,800-moveY,          //图片右下角坐标
 null); 
 
 //移动位移!
 moveY+=5;
 moveYY-=5;  

六、图片要求

为保证最佳的显示效果，最好选择上下或左右能衔接上的图片。

若图片衔接不上，可利用Photoshop等工具水平或垂直翻转后将两张图片拼接在一块即可。

七、总结

看似很简单的思路，想起来却并不容易。直接用一张图片也可以实现图片的循环滚动，但是好像无法实现图片的无缝连接，可能会出现以下三种情况：
1.屏幕的右下角坐标大于窗口的大小时，显示图片的一部分，图片移动一段时间后复位导致出现闪烁现象。

2.屏幕的右下角坐标等于窗口的大小时，显示整张图片，只要稍微移动就会出现空白的区域。

3.屏幕的右下角坐标小于窗口的大小时，显示整张图片，但图片小于窗口大小，周边出现大片空白区域。