如何使用HTML5的lufylegend库来创建游戏中的卷轴效果？

HTML5 lufylegend 是一个用于创建2D游戏的引擎，可以轻松实现游戏中的卷轴功能。

在HTML5游戏开发中，lufylegend引擎是一个强大的工具，它提供了与ActionScript 3.0类似的语法，使得熟悉AS的开发者能快速上手，该引擎支持LSprite、LBitmapData、LBitmap、LLoader、LURLLoader、LTextField、LEvent等多个核心类，覆盖了加载、渲染、事件处理等方面，同时还集成了如Box2dWeb的物理引擎和LTweenLite的缓动类，增强了游戏的可玩性和表现力。

HTML5 lufylegend实现游戏中的卷轴

什么是卷轴

玩过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;}}

运行结果：

点击屏幕左半边控制小鸟向左移动，点击右半边屏幕，控制小鸟向右移动，小鸟到达屏幕中央后，开始卷轴。

FAQs

1. 为什么使用lufylegend引擎实现卷轴效果？

答：lufylegend引擎提供了与ActionScript 3.0类似的语法，使得熟悉AS的开发者能快速上手，该引擎支持LSprite、LBitmapData、LBitmap、LLoader、LURLLoader、LTextField、LEvent等多个核心类，覆盖了加载、渲染、事件处理等方面，同时还集成了如Box2dWeb的物理引擎和LTweenLite的缓动类，增强了游戏的可玩性和表现力。

2. 如何使人物在卷轴效果中保持静止？

答：当人物达到屏幕中央时，让舞台层以与人物相同的速度和方向反向移动，这样，虽然人物在移动，但由于舞台层的同步反向移动，人物在画布上的位置看起来保持不变，从而实现卷轴效果。