HTML5+lufylegend实现游戏中的卷轴

lufylegend是一个html5开源引擎,它实现了利用仿actionscript3.0的语法进行html5的开发， 包含了lsprite，lbitmapdata，lbitmap，lloader，lurlloader，ltextfield，levent等多个as开发人员熟悉的类， 支持google chrome，firefox，opera，ie9，ios，android等多种热门环境。 利用lufylegend可以轻松的使用面向对象编程，并且可以配合box2dweb制作物理游戏， 另外它还内置了ltweenlite缓动类等非常实用的功能, 现在开始使用它吧，它可以让你更快的进入html5的世界！
什么是卷轴
玩过rpg或者横版格斗的同学应该知道，人物走到屏幕*后，由于地图过大，地图会进行移动，人物则相对静止不动。这个就是传说中的卷轴。例如下图是我的游戏“三国战线”里的卷轴：

有了以上的简介，大家应该明白了什么是卷轴。说白了就是镜头跟随主角的效果。接下来，我们就利用lufylegend.js游戏引擎来实现这个效果。
原理介绍
其实实现这个效果的关键在于如何使人物静止，何时移动地图，以及如何移动地图。在探究这个两个问题之前，我们先创建一个结构良好的舞台层（及一个lsprite对象），以便以后的操作。舞台结构如下：
+- 舞台层
|
+- 地图层
|
+- 人物层
可见舞台层就是地图层和人物层的父元素，并且人物层在地图层上方，毕竟人物是站在地图上的。我们知道，子对象的坐标是相对于父对象的，所以移动父对象，子对象会跟着移动。这点要先弄明白。
如何使人物静止呢？何时移动地图呢？如何移动地图呢？也许你会想，首先用if(xxx){...}来判断人物的坐标是否达到屏幕*，如果是，则移动地图对象，如果不是则移动人物对象。这么做的话就麻烦了。其实有更简单的方法：
卷轴/不卷轴时，我们的人物都是在移动，但是如果人物达到屏幕*时，要开始卷轴了，我们的舞台层就进行与人物速度方向相反、大小相同的移动，那么人物的相对于canvas画布的位移就抵消了，看上去就是静止的，而地图就跟着父类向反方向移动。这个类似于拍古装电影，拍两个人一边骑马一边谈话。如果人和马在前进，摄像机以相同的速度跟拍，那么得到的画面就是人物并没有移动，而人物背后风景是在移动的。
接下来看实现代码。
实现代码
以下是含有详细注释的代码：

xml/html code复制内容到剪贴板

1. linit(30, 'mydemo', 700, 480, main);    
2. // 移动方向，null代表没移动    
3. var direction = null;    
4. // 小鸟，舞台层，背景对象    
5. var bird, stagelayer, bg;    
6. // 每次移动的长度    
7. var step = 5;    
8. function main () {    
9. // 资源列表    
10. var loadlist = [    
11. {name : 'bird', path : './bird.png'},    
12. {name : 'bg', path : './bg.jpg'}    
13. ];    
14. // 加载资源    
15. lloadmanage.load(loadlist, null, demoinit);    
16. }    
17. function demoinit (result) {    
18. // 初始化舞台层    
19. stagelayer = new lsprite();    
20. addchild(stagelayer);    
21. // 加入背景    
22. bg = new lbitmap(new lbitmapdata(result['bg']));    
23. bg.y = -100;    
24. stagelayer.addchild(bg);    
25. // 加入小鸟    
26. bird = new lbitmap(new lbitmapdata(result['bird']));    
27. bird.x = 100;    
28. bird.y = 150;    
29. stagelayer.addchild(bird);    
30. // 添加鼠标按下事件    
31. stagelayer.addeventlistener(lmouseevent.mouse_down, ondown);    
32. // 添加鼠标弹起事件    
33. stagelayer.addeventlistener(lmouseevent.mouse_up, onup);    
34. // 添加时间轴事件    
35. stagelayer.addeventlistener(levent.enter_frame, onframe);    
36. }    
37. function ondown (e) {    
38. /** 根据点击位置设置移动方向 */    
39. if (e.offsetx > lglobal.width / 2) {    
40. direction = 'right';    
41. } else {    
42. direction = 'left';    
43. }    
44. }    
45. function onup () {    
46. // 设置方向为无方向，代表不移动    
47. direction = null;    
48. }    
49. function onframe () {    
50. var _step, minx, maxx;    
51. /** 移动小鸟 */    
52. if (direction == 'right') {    
53. _step = step;    
54. } else if (direction == 'left') {    
55. _step = -step;    
56. } else {    
57. return;    
58. }    
59. bird.x += _step;    
60. /** 控制小鸟移动范围 */    
61. minx = 0,    
62. maxx = bg.getwidth() - bird.getwidth();    
63. if (bird.x < minx) {    
64. bird.x = minx;    
65. }else if (bird.x > maxx) {    
66. bird.x = maxx;    
67. }    
68. /** 移动舞台 */    
69. stagelayer.x = lglobal.width / 2 - bird.x;    
70. /** 控制舞台移动范围 */    
71. minx = lglobal.width - stagelayer.getwidth(),    
72. maxx = 0;    
73. if (stagelayer.x < minx) {    
74. stagelayer.x = minx;    
75. }else if (stagelayer.x > maxx) {    
76. stagelayer.x = maxx;    
77. }    
78. }    

运行结果：

大家可以到这里查看在线演示。点击屏幕左半边控制小鸟向左移动，点击右半边屏幕，控制小鸟向右移动。小鸟到达屏幕*后，开始卷轴。