<meta name="keywords" content="华夏棋牌,lufylegend,html卷轴" />
华夏棋牌 > web前端 > H5教程 > 注释

HTML5+lufylegend完成游戏中的卷轴 _html5教程手艺

原创 2016-05-16 15:45:57 0 198
赞助会员专享特权
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. }
运转效果:


年夜家可以到这里检查在线演示。点击屏幕左半边控制小鸟向左移动,点击右半边屏幕,控制小鸟向右移动。小鸟到达屏幕中央后,泉源卷轴。 php中文网最新课程二维码
  • 相关标签:lufylegend html卷轴
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 若何应用input事宜来监听移动端的输入_html5教程手艺
  • 深刻剖析HTML5 Canvas控制图形矩阵变换的措施_html5教程手艺
  • 实例解说应用SVG制造loading加载动画的措施_html5教程手艺
  • 实例解说应用HTML5 Canvas API操作图形改变的措施_html5教程手艺
  • HTML5+lufylegend完成游戏中的卷轴 _html5教程手艺
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173562)

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(169689)

    独孤九贱(1)_HTML5视频教程

    华夏棋牌《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137133)

    ThinkPHP5实战之[教授修养治理系统]

    华夏棋牌本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130426)

    PHP入门视频教程之一周学会PHP

    华夏棋牌一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(129782)

    作者信息

    php中文网

    认证0级讲师

    比来文章

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节