原创

麒麟子Cocos Creator实用技巧六:游戏背景拖拽实现

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://qilinzi.blog.csdn.net/article/details/89633957

 

 

麒麟子做了一个DEMO给大家,这个DEMO很简单,大家可以按下鼠标,或者在手机上按住不放。 拖拽背景,背景会根据拖拽移动。 同时会保证背景边缘不会越过父节点的上下左右边界

在线演示:https://qilinzi.ukylin.net?lesson=06


策略类游戏背景,或者一些游戏的大地图,小地图,通常会用一张很大的图来表示。

毕竟一张小图放不下嘛,切成小块又不肯,只能是大图咯。

玩家只能看到局部内容,这就需要提供一个拖拽操作,让玩家自由选择看不见的内容。

实现这个效果非常容易,只需要做到以下两个点。

  1. 手指或者鼠标按下且移动时,背景需要跟随移动
  2. 地图的大小有限,需要处理好拖拽边界问题

一、我们新建一个节点,命名为zone, 就是它的宽高就是我们的拖拽区域,为它添加一个MASK。(注:如果你的zone的宽高和Canvas一样大,建议去掉Mask)

二、为zone新建一个子节点,取名为bigmap,用于显示图片。 也可以直接把图片拖到zone下面,取名为bigmap

三、挂上脚本,脚本有两个属性,zone和targetMap。 我们把脚本挂到Canvas上,然后把zone和targetMap拖到属性窗口上。

场景就创建完了。

代码比较简单,主要就是监听targetMap节点的cc.Node.EventType.TOUCH_MOVE事件,然后根据事件处理好移动操作就行。代码如下:


// Learn TypeScript:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/typescript.html
//  - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Node)
    zone: cc.Node = null;

    @property(cc.Node)
    targetMap: cc.Node = null;

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    private _moveStart:cc.Vec2 = null;

    start () {
        let self = this;
        this.targetMap.on(cc.Node.EventType.TOUCH_MOVE,function(event:cc.Event.EventTouch){
            let pre = event.getPreviousLocation();
            let cur = event.getLocation();
            var dir = cur.sub(pre);
            self.targetMap.x += dir.x;
            self.targetMap.y += dir.y;
            //判断左边距离
            var zoneLeft = self.zone.x - self.zone.width / 2;
            var zoneRight = self.zone.x + self.zone.width / 2;
            var zoneTop = self.zone.y + self.zone.height / 2;
            var zoneBottom = self.zone.y - self.zone.height / 2;

            var halfMapWidth = self.targetMap.width / 2;
            var halfMapHeight = self.targetMap.height / 2;

            //左边
            if(self.targetMap.x - halfMapWidth > zoneLeft){
                self.targetMap.x = zoneLeft + halfMapWidth;
            }
            //右边
            if(self.targetMap.x + halfMapWidth < zoneRight){
                self.targetMap.x = zoneRight - halfMapWidth;
            }
            //上边
            if(self.targetMap.y + halfMapHeight < zoneTop){
                self.targetMap.y = zoneTop - halfMapHeight;
            }
            //下边
            if(self.targetMap.y - halfMapHeight > zoneBottom){
                self.targetMap.y = zoneBottom + halfMapHeight;
            }
        });
    }

    // update (dt) {}
}

本教程的DEMO地址 https://gitee.com/qilinzi/qlz_ccc_tips  目录 base/assets/06_big_map

在线演示:https://qilinzi.ukylin.net?lesson=06

如有疑问,好的建议,均可在本博客下面留言。 

文章最后发布于: 2019-04-28 11:20:46
展开阅读全文
0 个人打赏
私信求帮助

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: Age of Ai 设计师: meimeiellie

分享到微信朋友圈

×

扫一扫,手机浏览