【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;
    }
}

运行结果:

卷轴示例 截图之一

卷轴示例 截图之二

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

源代码下载

点击下载

欢迎大家继续关注我的博客

转载请注明出处:Yorhom’s Game Box

http://blog.csdn.net/yorhomwang

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法