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

麒麟子做了一个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

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