【HTML5】利用lufylegend实现游戏中的卷轴

发布时间:2020-09-16 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了【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

总结

以上是编程之家为你收集整理的【HTML5】利用lufylegend实现游戏中的卷轴全部内容,希望文章能够帮你解决【HTML5】利用lufylegend实现游戏中的卷轴所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478