什么是卷轴
玩过RPG或者横版格斗的同学应该知道，人物走到屏幕中央后，由于地图过大，地图会进行移动，人物则相对静止不动。这个就是传说中的卷轴。例如下图是我的游戏[三国战线]里的卷轴：
有了以上的简介，大家应该明白了什么是卷轴。说白了就是镜头跟随主角的效果。接下来，我们就利用lufylegend.js游戏引擎来实现这个效果。
原理介绍
其实实现这个效果的关键在于如何使人物静止，何时移动地图，以及如何移动地图。在探究这个两个问题之前，我们先创建一个结构良好的舞台层（及一个LSprite对象），以便以后的操作。舞台结构如下：
+- 舞台层
|
+- 地图层
|
+- 人物层
可见舞台层就是地图层和人物层的父元素，并且人物层在地图层上方，毕竟人物是站在地图上的。我们知道，子对象的坐标是相对于父对象的，所以移动父对象，子对象会跟着移动。这点要先弄明白。
如何使人物静止呢？何时移动地图呢？如何移动地图呢？也许你会想，首先用if(xxx){...}来判断人物的坐标是否达到屏幕中央，如果是，则移动地图对象，如果不是则移动人物对象。这么做的话就麻烦了。其实有更简单的方法：
卷轴/不卷轴时，我们的人物都是在移动，但是如果人物达到屏幕中央时，要开始卷轴了，我们的舞台层就进行与人物速度方向相反、大小相同的移动，那么人物的相对于canvas画布的位移就抵消了，看上去就是静止的，而地图就跟着父类向反方向移动。这个类似于拍古装电影，拍两个人一边骑马一边谈话。如果人和马在前进，摄像机以相同的速度跟拍，那么得到的画面就是人物并没有移动，而人物背后风景是在移动的。
接下来看实现代码。
实现代码
以下是含有详细注释的代码：
XML/HTML Code 复制内容到剪贴板
查看更多关于HTML5+lufylegend实现游戏中的卷轴_html5教程技巧的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did70203