您的位置：首页 > 其它

lufylegend教程：如何创建循环移动的背景

2016-02-04 10:21 429 查看

lufylegend教程：如何创建循环移动的背景

发布时间：2014-09-26 关键字：lufylegend教程

开发游戏的过程中，常常需要循环移动的背景。
类似下面这两种游戏，背景就是循环移动的：






接下来我们来看一下如何使用 lufylegend实现循环移动的背景效果吧。
首先准备一张图：



background.js文件的 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

//背景类
function Background(){
base(this,LSprite,[]);
var self = this;
self.bitmapData = new LBitmapData(imglist["back"]);
self.bitmap1 = new LBitmap(self.bitmapData);
self.addChild(self.bitmap1);
self.bitmap2 = new LBitmap(self.bitmapData);
self.bitmap2.y = self.bitmap1.getHeight();
self.addChild(self.bitmap2);
self.bitmap3 = new LBitmap(self.bitmapData);
self.bitmap3.y = self.bitmap1.getHeight()*2;
self.addChild(self.bitmap3);
}
Background.prototype.run = function(){
var self = this;
self.bitmap1.y -= STAGE_STEP;
self.bitmap2.y -= STAGE_STEP;
self.bitmap3.y -= STAGE_STEP;
if(self.bitmap1.y < -self.bitmap1.getHeight()){
self.bitmap1.y = self.bitmap2.y;
self.bitmap2.y = self.bitmap1.y + self.bitmap1.getHeight();
self.bitmap3.y = self.bitmap1.y + self.bitmap1.getHeight()*2;
}
}

index.html文件的 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2526
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>循环移动的背景</title>
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no,target-densitydpi=device-dpi"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="true"/>
<meta name="screen-orientation" content="portrait"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/>
<style>
*{margin:0;padding:0}
</style>
</head>
<body>
<div id="mylegend">loading...</div>
<script src="lufylegend-1.7.6.min.js" language="javascript" type="text/javascript" ></script>
<script src="background.js" language="javascript" type="text/javascript"></script>
<script>
init(30,"mylegend",320,480,main);
var loadingLayer,backLayer,background;
var MOVE_STEP = 2, STAGE_STEP = 2;
var loadData = [
{name:"back",path:"images/back.jpg"}
];
function main(){
loadingLayer = new LoadingSample1();
addChild(loadingLayer);
LLoadManage.load(
loadData,
function(progress){
loadingLayer.setProgress(progress);
},
gameInit
);
}
function gameInit(result){
imglist = result;

removeChild(loadingLayer);
loadingLayer=null;

backLayer = new LSprite();
addChild(backLayer);

//实例化Background类
background = new Background();
backLayer.addChild(background);

//绑定循环事件
backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
}
function onframe(){
//执行背景移动
background.run();
}
</script>
</body>
</html>

用这个案例前，请确认两点：
1、lufylegend.js文件被正确引入；
2、作为背景的图片路径是正确的。
确认这两点后直接运行上述代码，就可以看到背景自下而上不断地移动了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航