七 CocosEditor基础教程第二季 之TiledMap

前言：

这一节我们将使用tiledmap来编辑地图，cocoseditor的地图编辑器做的不完善，以后会改善，这里我们使用第三方工具来***，然后代码调用；

功能：小怪物可以通过栅栏躲避，可以获取金币和时间；

效果图



代码下载

https://github.com/makeapp/cocoseditor-samples （snow-tilemap）

代码分析



1 首先使用第三方地图编辑器tiledmap创建一张snow地图，这是一张720*1280的地图，表格个数是10*10，新建了三个实体对象，分别是时间实体，金币实体，栅栏实体；








2 cocoseditor的地图编辑器不是很完善，但可以基本预览和查看数组；








3 代码里获取地图很简单,只要TMXTileMap.create就行








4 判断某个单元格（i,j）是否在一个实体里面

MainLayer.prototype.isInclude = function (objects, i, j) {
    if (objects == null) {
        return false;
    }
    var dict;
    for (var k = 0, len = objects.length; k < len; k++) {
        dict = objects[k];
        if (!dict)
            break;

        var x = dict["x"];
        var y = dict["y"];
        var width = dict["width"];
        var height = dict["height"];
        var dictArea = [Number(x), (Number(x) + Number(width)), Number(y), (Number(y) + Number(height))];
        var ijArea = [i * 72, (i + 1) * 72,
                j * 128, (j + 1) * 128];
        if (dictArea[0] <= ijArea[0] && dictArea[1] >= ijArea[1]
            && dictArea[2] <= ijArea[2] && dictArea[3] >= ijArea[3]) {
            return true;
        }
    }
    return false;
};

5 不同的实体里面创建不同的精灵，并存入数组

MainLayer.prototype.createTMX = function () {
    var map = cc.TMXTiledMap.create("res/tmxs/snow.tmx");
    map.setPosition(cc.p(0, 0));
    this.rootNode.addChild(map);

    this.maxColumns = map.getMapSize().width;
    this.maxRows = map.getMapSize().height;
    this.tileWidth = map.getTileSize().width;
    this.tileHeight = map.getTileSize().height;

    //map objects
    var snowObjects1 = this.getSpriteObject(map, "fence");
    var snowObjects2 = this.getSpriteObject(map, "gold");
    var snowObjects3 = this.getSpriteObject(map, "time");

    //map fill
    this.spriteList = [];
    for (var i = 0; i < this.maxColumns; i++) {
        for (var j = 0; j < this.maxRows; j++) {

            var pos = cc.p(this.tileWidth / 2 + i * this.tileWidth, this.tileHeight / 2 + j * this.tileHeight)
            if (this.isInclude(snowObjects1, i, j)) {
                var fence = cc.MySprite.create(this.rootNode, "m_icon_fence.png", pos, 100);
                var delay = 5 + getRandom(10);
                fence.runAction(
                    cc.RepeatForever.create(cc.Sequence.create(
                        cc.DelayTime.create(delay), cc.ScaleTo.create(1, 0), cc.DelayTime.create(delay), cc.ScaleTo.create(1, 1)
                    ))
                );
                fence.tag = 1;
                this.spriteList.push(fence);
            }
            //
            if (this.isInclude(snowObjects2, i, j)) {
                var gold = cc.MySprite.create(this.rootNode, "m_icon_gold_big.png", pos, 100);
                gold.tag = 2;
                this.spriteList.push(gold);
            }
            //
            if (this.isInclude(snowObjects3, i, j)) {
                var time = cc.MySprite.create(this.rootNode, "m_icon_time.png", pos, 100);
                gold.tag = 3;
                this.spriteList.push(time);
            }
        }
    }
}

6 怪物获取道具以及碰撞检测，前面我们已经分析了如何碰撞，这里我们直接用；

//怪物获取金币和时间道具
    for (var j = 0; j < this.spriteList.length; j++) {
        if (this.spriteList[j].tag == 1) {
            continue;
        }
        if (cc.rectIntersectsRect(this.spriteList[j].getBoundingBox(), this.monster.getBoundingBox())) {
            this.spriteList[j].removeFromParent(true);
            this.spriteList.splice(j, 1);
        }
    }

    //子弹碰撞
    for (var i = 0; i < this.rootNode.getChildrenCount(); i++) {
        var child = this.rootNode.getChildren()[i];
        if (child.getTag() == -100) {
            //  cc.log("ball");
            var monsterX = this.monster.getPosition().x;
            var monsterY = this.monster.getPosition().y;
            var childX = child.getPositionX();
            var childY = child.getPositionY();

            /*var followX = childX + (this.currentTime - child.newTime) * (monsterX - childX) / 5;
             var followY = childY + (this.currentTime - child.newTime) * (monsterY - childY) / 5;*/

            var followX = childX + (this.currentTime - child.newTime) * child.speedX;
            var followY = childY + (this.currentTime - child.newTime) * child.speedY;

            child.setPosition(cc.p(followX, followY));
            if (child && child.getPositionY() > 1500) { //屏幕外回收
                child.removeFromParent(true);
                continue;
            }

            var isContinue = false;
            for (var j = 0; j < this.spriteList.length; j++) { //如果碰到栅栏，受保护
                if (this.spriteList[j].getScale() < 0.1) {
                    continue;
                }

                if (this.spriteList[j].tag != 1) {
                    continue;
                }
                if (cc.rectIntersectsRect(this.spriteList[j].getBoundingBox(), child.getBoundingBox())) {
                    child.removeFromParent(true);
                    isContinue = true;
                    break;
                }
            }
            if (isContinue == true) {
                continue;
            }

            //碰撞一 普通
            /*if (cc.rectIntersectsRect(child.getBoundingBox(), this.monster.getBoundingBox())) {
             this.createParticle("around", monsterX, monsterY);
             cc.AudioEngine.getInstance().playEffect("res/sounds/bomb.mp3", false);
             child.removeFromParent(true);
             }*/

            //碰撞二 缩小矩形范围  更精准；
            /*if (cc.rectIntersectsRect(cc.rectCreate(child.getPosition(), [10, 10]), cc.rectCreate(this.monster.getPosition(), [20, 20]))) {
             this.createParticle("around", monsterX, monsterY);
             cc.AudioEngine.getInstance().playEffect("res/sounds/bomb.mp3", false);
             child.removeFromParent(true);
             }*/

            //碰撞三 扩大碰撞区域 200dp就发生了碰撞
            /*if (cc.rectIntersectsRect(cc.rectCreate(child.getPosition(), [10, 10]), cc.rectCreate(this.monster.getPosition(), [200, 200]))) {
             this.createParticle("around", monsterX, monsterY);
             cc.AudioEngine.getInstance().playEffect("res/sounds/bomb.mp3", false);
             child.removeFromParent(true);
             }*/

            //碰撞四 两个精灵中心距离小于40时
            var distance = cc.pDistance(child.getPosition(), this.monster.getPosition());
            if (distance < 40) {
                this.createParticle("around", monsterX, monsterY);
                cc.AudioEngine.getInstance().playEffect("res/sounds/bomb.mp3", false);
                child.removeFromParent(true);

                this.shotCount += 1;
                this.shotLabel.setString("射中" + this.shotCount + "次");
                if (this.shotCount > 2) {
                    // this.gameOver();
                }
            }
        }
    }

over；