什么是卷轴
玩过RPG 或者 横版格斗的 同学 应该 知道 ， 人物 走到屏幕中央后，由于地图过大，地图会进行移动，人物则相对静止不动。这个就是传说中的卷轴。例如下图是我的游戏[三国战线]里的卷轴：
有了以上的简介，大家应该明白了什么是卷轴。说白了就是镜头跟随主角的效果。接下来，我们就 利用 lufylegend.js游戏引擎来实现这个效果。
原理介绍
其实实现这个效果的关键在于如何使人物静止，何时移动地图，以及如何移动地图。在探究这个两个问题之前，我们先创建一个结构良好的舞台层（及一个 L sprite 对象），以便以后的操作。舞台结构如下：
+- 舞台层 | +- 地 图层 | +- 人物层
可见舞台层就是地图层和人物层的父元素，并且人物层在地图层上方，毕竟人物是站在地图上的。我们知道，子对象的坐标是相对于父对象的，所以移动父对象，子对象会跟着移动。这点要先弄明白。
如何使人物静止呢？何时移动地图呢？如何移动地图呢？也许你会想，首先用 if(xxx){ .. .} 来判断人物的坐标 是否 达到屏幕中央，如果是，则移动地图对象，如果不是则移动人物对象。这么做的话就麻烦了。其实有更 简单 的方法：
卷轴/不卷轴时，我们的人物都是在移动，但是如果人物达到屏幕中央时，要 开始 卷轴了，我们的舞台层就进行与人物速度 方向 相反、大小相同的移动，那么人物的相对于 canvas 画布 的位移就抵消了，看上去就是静止的，而地图就跟着父类向反方向移动。这个类似于拍古装 电影 ，拍两个人一边骑马一边谈话。如果人和马在前进，摄像机以相同的速度跟拍，那么得到的画面就是人物并没有移动，而人物背后风景是在移动的。
接下来看实现代码。
实现代码
以下是含有详细注释的代码：
LIn IT (30, " ;m ydemo", 700, 480, m ai n); // 移动方向，null代表没移动 VAR direction = null; // 小鸟，舞台层，背景对象 var bird, stageLayer, bg; // 每次移动的长度 var step = 5; function main () { // 资 源 列表 var loadList = [ {n am e : "bird", path : "./bird.png"}, {name : "bg", path : "./bg. jpg "} ]; // 加载资源 LLoadManage.load(loadList, null, demoInit); } function demoInit (result) { // 初始化舞台层 stageLayer = new LS PR ite(); addChild(stageLayer); // 加入背景 bg = new LBitmap(new LBitmapData(result["bg"])); bg.y = -100; stageLayer.addChild(bg); // 加入小鸟 bird = new LBitmap(new LBitmapData(result["bird"])); bird.x = 100; bird.y = 150; stageLayer.addChild(bird); // 添加鼠标按下事件 stageLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onDown); // 添加鼠标弹起事件 stageLayer.addEventListener(LMouseEvent.MOUSE_UP, onUp); // 添加时间轴事件 stageLayer.addEventListener(LEvent.ENTER_FRAME, onFrame); } function onDown (e) { /** 根据点击位置设置移动方向 */ if (e.offsetX > LGlobal.width / 2) { direction = "right"; } else { direction = "left"; } } function onUp () { // 设置方向为无方向，代表不移动 direction = null; } function onFrame () { var _step, minX, maxX; /** 移动小鸟 */ if (direction == "right") { _step = ste p; } else if (direction == "left") { _step = -s tep; } else { return; } bird.x += _step; /** 控制小鸟移动范围 */ minX = 0, maxX = bg.getWidth() - bird.getWidth(); if (bird.x < minX) { bird.x = minX; }else if (bird.x > maxX) { bird.x = maxX; } /** 移动舞台 */ stageLayer.x = LGlobal.width / 2 - bird.x; /** 控制舞台移动范围 */ minX = LGlobal.width - stageLayer.getWidth(), maxX = 0; if (stageLayer.x < minX) { stageLayer.x = minX; }else if (stageLayer.x > maxX) { stageLayer.x = maxX; } } 运行结果：
大家可以到这里查看在线演示。点击屏幕左 半 边控制小鸟向左移动，点击右半边屏幕，控制小鸟向右移动。小鸟到达屏幕中央后，开始卷轴。
什么是卷轴
玩过RPG或者横版格斗的同学应该知道，人物走到屏幕中央后，由于地图过大，地图会进行移动，人物则相对静止不动。这个就是传说中的卷轴。例如下图是我的游戏[三国战线]里的卷轴：
有了以上的简介，大家应该明白了什么是卷轴。说白了就是镜头跟随主角的效果。接下来，我们就利用lufylegend.js游戏引擎来实现这个效果。
原理介绍
其实实现这个效果的关键在于如何使人物静止，何时移动地图，以及如何移动地图。在探究这个两个问题之前，我们先创建一个结构良好的舞台层（及一个 LSprite 对象），以便以后的操作。舞台结构如下：
+- 舞台层 | +- 地图层 | +- 人物层
可见舞台层就是地图层和人物层的父元素，并且人物层在地图层上方，毕竟人物是站在地图上的。我们知道，子对象的坐标是相对于父对象的，所以移动父对象，子对象会跟着移动。这点要先弄明白。
如何使人物静止呢？何时移动地图呢？如何移动地图呢？也许你会想，首先用 if(xxx){...} 来判断人物的坐标是否达到屏幕中央，如果是，则移动地图对象，如果不是则移动人物对象。这么做的话就麻烦了。其实有更简单的方法：
卷轴/不卷轴时，我们的人物都是在移动，但是如果人物达到屏幕中央时，要开始卷轴了，我们的舞台层就进行与人物速度方向相反、大小相同的移动，那么人物的相对于 canvas 画布的位移就抵消了，看上去就是静止的，而地图就跟着父类向反方向移动。这个类似于拍古装 电 影，拍两个人一边骑马一边谈话。如果人和马在前进，摄像机以相同的速度跟拍，那么得到的画面就是人物并没有移动，而人物背后风景是在移动的。
接下来看实现代码。
实现代码
以下是含有详细注释的代码：
LInit(30, "mydemo", 700, 480, main); // 移动方向，null代表没移动 var direction = null; // 小鸟，舞台层，背景对象 var bird, stageLayer, bg; // 每次移动的长度 var step = 5; function main () { // 资源列表 var loadList = [ {name : "bird", path : "./bird.png"}, {name : "bg", path : "./bg.jpg"} ]; // 加载资源 LLoadManage.load(loadList, null, demoInit); } function demoInit (result) { // 初始化舞台层 stageLayer = new LSprite(); addChild(stageLayer); // 加入背景 bg = new LBitmap(new LBitmapData(result["bg"])); bg.y = -100; stageLayer.addChild(bg); // 加入小鸟 bird = new LBitmap(new LBitmapData(result["bird"])); bird.x = 100; bird.y = 150; stageLayer.addChild(bird); // 添加鼠标按下事件 stageLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onDown); // 添加鼠标弹起事件 stageLayer.addEventListener(LMouseEvent.MOUSE_UP, onUp); // 添加时间轴事件 stageLayer.addEventListener(LEvent.ENTER_FRAME, onFrame); } function onDown (e) { /** 根据点击位置设置移动方向 */ if (e.offsetX > LGlobal.width / 2) { direction = "right"; } else { direction = "left"; } } function onUp () { // 设置方向为无方向，代表不移动 direction = null; } function onFrame () { var _step, minX, maxX; /** 移动小鸟 */ if (direction == "right") { _step = step; } else if (direction == "left") { _step = -step; } else { return; } bird.x += _step; /** 控制小鸟移动范围 */ minX = 0, maxX = bg.getWidth() - bird.getWidth(); if (bird.x < minX) { bird.x = minX; }else if (bird.x > maxX) { bird.x = maxX; } /** 移动舞台 */ stageLayer.x = LGlobal.width / 2 - bird.x; /** 控制舞台移动范围 */ minX = LGlobal.width - stageLayer.getWidth(), maxX = 0; if (stageLayer.x < minX) { stageLayer.x = minX; }else if (stageLayer.x > maxX) { stageLayer.x = maxX; } } 运行结果：
大家可以到这里查看在线演示。点击屏幕左半边控制小鸟向左移动，点击右半边屏幕，控制小鸟向右移动。小鸟到达屏幕中央后，开始卷轴。
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-【HTML5】利用lufylegend实现游戏中的卷轴 全部内容，希望文章能够帮你解决 html5教程-【HTML5】利用lufylegend实现游戏中的卷轴 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-【HTML5】利用lufylegend实现游戏中的卷轴的详细内容...