HTML5+lufylegend实现游戏中的卷轴


Posted in HTML / CSS onFebruary 29, 2016

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或者横版格斗的同学应该知道,人物走到屏幕中央后,由于地图过大,地图会进行移动,人物则相对静止不动。这个就是传说中的卷轴。例如下图是我的游戏“三国战线”里的卷轴:

HTML5+lufylegend实现游戏中的卷轴


有了以上的简介,大家应该明白了什么是卷轴。说白了就是镜头跟随主角的效果。接下来,我们就利用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. }    
运行结果:

HTML5+lufylegend实现游戏中的卷轴


大家可以到这里查看在线演示。点击屏幕左半边控制小鸟向左移动,点击右半边屏幕,控制小鸟向右移动。小鸟到达屏幕中央后,开始卷轴。
HTML / CSS 相关文章推荐
你应该知道的30个css选择器
Mar 19 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
突破canvas语法限制 让他支持链式语法
Dec 24 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 #HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 #HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 #HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 #HTML / CSS
推荐10个HTML5响应式框架
Feb 25 #HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 #HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 #HTML / CSS
You might like
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
PHP 基本语法格式
2009/12/15 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
php之可变变量的实例详解
2017/09/12 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
python备份文件的脚本
2008/08/11 Python
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
Python连接Redis的基本配置方法
2018/09/13 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
西部世纪.net笔试题面试题
2014/04/03 面试题
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
银行会计财务工作个人的自我评价
2013/10/29 职场文书
社区党员先进事迹
2014/01/22 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python