十四 手遊開發神器 cocos2d-x editor 之串聯遊戲流程

一般遊戲都包括幾個流程，加載界面，開始界面，選關界面，主界面，暫停界面等等；這節我將這些流程都串聯起來；

代碼下載：http://share.weiyun.com/c3f24a752d5e6f26ca3e1e97855807f6（snow-flow）

loading界面；

LoadingLayer.ccbx

<?xml version="1.0" encoding="UTF-8"?>

<Document
        jsControlled="true"
        jsController=""
        resolution="default"
        >

    <Resolutions>
        <Resolution centeredOrigin="false" ext="iphone" height="1280" width="720" name="default" scale="1"/>
        <Resolution centeredOrigin="false" ext="iphone" height="720" width="1280" name="default1" scale="1"/>
    </Resolutions>

    <Animations>
        <Animation autoPlay="true"
                   id="0"
                   name="Default Timeline"
                   length="10"
                   chainedId="0"
                   offset="0.0"
                   position="0.0"
                   resolution="30"
                   scale="128">
            <CallbackChannel>
            </CallbackChannel>
            <SoundChannel>
            </SoundChannel>
        </Animation>

    </Animations>

    <Layer
            positionX="0" positionY="0"
            width="100" height="100" sizeType="Percent"
            anchorPointX="0.5" anchorPointY="0.5" ignoreAnchorPoint="true"
            scaleX="1" scaleY="1"
            touchEnabled="true" positionType="LeftBottom" target="Owner">
        <LayerColor positionType="LeftBottom" width="720" height="1280" positionX="0" positionY="0" anchorPointX="0"
                    anchorPointY="0" color="#ffff40b8" target="Doc"/>
        <Sprite positionType="LeftBottom" width="245.0" height="72.0" positionX="381.0" positionY="661.0" anchorPointX="0.5"
                                         anchorPointY="0.5" src="Resources/snow_packer.plist/sa_loading_0001.png"
                                         target="Owner"/>
    </Layer>


</Document>

開始界面；

StartLayer.ccbx

<?xml version="1.0" encoding="UTF-8"?>

<Document
        jsControlled="true"
        jsController="StartLayer"
        resolution="default"
        >

    <Resolutions>
        <Resolution centeredOrigin="false" ext="iphone" height="1280" width="720" name="default" scale="1"/>
        <Resolution centeredOrigin="false" ext="iphone" height="720" width="1280" name="default1" scale="1"/>
    </Resolutions>

    <Animations>
        <Animation autoPlay="true"
                   id="0"
                   name="Default Timeline"
                   length="10"
                   chainedId="0"
                   offset="0.0"
                   position="0.0"
                   resolution="30"
                   scale="128">
            <CallbackChannel>
            </CallbackChannel>
            <SoundChannel>
            </SoundChannel>
        </Animation>

    </Animations>

    <Layer
            positionX="0" positionY="0"
            width="100" height="100" sizeType="Percent"
            anchorPointX="0.5" anchorPointY="0.5" ignoreAnchorPoint="true"
            scaleX="1" scaleY="1"
            touchEnabled="true" positionType="LeftBottom" visible="true">
        <LayerColor positionType="LeftBottom" width="720" height="1280" positionX="0" positionY="0" anchorPointX="0"
                    anchorPointY="0" color="#ff10ff9e"/>
        <Menu positionType="LeftBottom" width="40" height="40" positionX="354.0" positionY="712.0" anchorPointX="0.5"
              anchorPointY="0.5">
            <MenuItem positionType="LeftBottom" width="203" height="129" positionX="0" positionY="0" anchorPointX="0.5"
                      anchorPointY="0.5" onClick="onPlayClicked" normalImage="Resources/snow_packer.plist/m_play.png"
                      target="Doc" selectedImage="Resources/snow_packer.plist/m_play.png"/>
        </Menu>
    </Layer>


</Document>

StartLayer.js

//
// CleanerScoreScene class
//
var StartLayer = function () {
    cc.log("StartLayer")
    this.LoadingLayer = this.LoadingLayer || {};
    this.passTime = 0;
    this.goStart = false;
};

StartLayer.prototype.onDidLoadFromCCB = function () {
//    this.rootNode.onUpdate = function (dt)
//    {
//        this.controller.onUpdate();
//    };
//    this.rootNode.schedule(this.rootNode.onUpdate);

    if (sys.platform == 'browser') {
        this.onEnter();
    }
    else {
        this.rootNode.onEnter = function () {
            this.controller.onEnter();
        };
    }

    this.rootNode.onExit = function () {
        this.controller.onExit();
    };

    this.rootNode.schedule(function (dt) {
        this.controller.onUpdate(dt);
    });
};

StartLayer.prototype.onEnter = function () {
    this.LoadingLayer = cc.BuilderReader.loadAsNodeFrom("", "LoadingLayer", this);
    this.LoadingLayer.setPosition(cc.p(0, 0));
    this.LoadingLayer.setZOrder(200);
    this.rootNode.addChild(this.LoadingLayer);
    //  cc.Director.getInstance().pause();
    /*this.LoadingLayer.scheduleOnce(this.removeLoading, 1);*/
    this.goStart = true;
    this.startTime = this.passTime;

}

StartLayer.prototype.removeLoading = function () {
    // if (this.LoadingLayer) {
    cc.log("removeLoading");
    // cc.Director.getInstance().resume();
    this.LoadingLayer.removeFromParent();
}

StartLayer.prototype.onUpdate = function (dt) {
    this.passTime += dt;
    if (this.passTime - this.startTime > 3 && this.goStart) {
        this.removeLoading();
        this.goStart = false;
    }
}

StartLayer.prototype.onPlayClicked = function () {
    cc.BuilderReader.runScene("", "GameSelectLayer");
}

StartLayer.prototype.onExit = function () {

}

選關界面

GameSelectLayer.ccbx

<?xml version="1.0" encoding="UTF-8"?>

<Document
        jsControlled="true"
        jsController="GameSelectLayer"
        resolution="default"
        >

  <Resolutions>
    <Resolution centeredOrigin="false" ext="iphone" height="1280" width="720" name="default" scale="1"/>
    <Resolution centeredOrigin="false" ext="iphone" height="720" width="1280" name="default1" scale="1"/>
  </Resolutions>

  <Animations>
    <Animation autoPlay="true"
               id="0"
               name="Default Timeline"
               length="10"
               chainedId="0"
               offset="0.0"
               position="0.0"
               resolution="30"
               scale="128">
      <CallbackChannel>
      </CallbackChannel>
      <SoundChannel>
      </SoundChannel>
    </Animation>

  </Animations>

  <Layer
          positionX="0" positionY="0"
          width="100" height="100" sizeType="Percent"
          anchorPointX="0.5" anchorPointY="0.5" ignoreAnchorPoint="true"
          scaleX="1" scaleY="1"
          touchEnabled="true" positionType="LeftBottom">

    <LayerColor positionType="LeftBottom" width="720" height="1280" positionX="0" positionY="0" anchorPointX="0"
                  anchorPointY="0" color="#ff20b4ff"/>
      <Sprite name="bg_g" var="b1" target="Doc" positionX="360" positionY="641"
            positionType="LeftBottom" anchorPointX="0.5" anchorPointY="0.5"
            scaleX="1" scaleY="1" scaleType="Absolute" ignoreAnchorPoint="false"
            src="Resources/s_bg_grade.png" visible="false" color="#ffffffff"/>
    <Sprite positionType="LeftBottom" width="587.0" height="834" positionX="361.0" positionY="689.0" anchorPointX="0.5"
            anchorPointY="0.5" src="Resources/s_bg_grade.png">
        <Node positionType="LeftBottom" width="40" height="100" positionX="42.0" positionY="42.0" anchorPointX="0"
            anchorPointY="0" target="Doc" var="listTop">
      <ScrollView name="levelScrollPanel"
                  var="levelScrollPanel" target="Doc" positionX="0" positionY="100"
                  positionType="LeftBottom" width="510" height="500"
                  sizeType="Absolute" anchorPointX="0" anchorPointY="0"
                  scaleX="1" scaleY="1"
                  clipsToBounds="true"
                  direction="Horizontal"
                  bounces="true"
                  ignoreAnchorPoint="true" visible="true" touchEnabled="true" mouseEnabled="true">
      </ScrollView></Node>
        <Node positionType="LeftBottom" width="40" height="40" positionX="268.0" positionY="73.0" anchorPointX="0.5"
              anchorPointY="0.5" var="dotNode" target="Doc"/>

    </Sprite>
  </Layer>


</Document>

GameSelectLayer.js

GAME_LEVEL = 0;
var GameSelectLayer = function () {
    cc.log("GameSelectLayer");
    this.levelScrollPanel = this.levelScrollPanel || {};
    this.pageIndex = 0;
    this.pageMax = 4;
    this.dotNode = this.dotNode || {};
    this.start = false;

};

GameSelectLayer.prototype.onDidLoadFromCCB = function () {
    if (sys.platform == 'browser') {
        this.onEnter();
    }
    else {
        this.rootNode.onEnter = function () {
            this.controller.onEnter();
        };
    }

    this.rootNode.onExit = function () {
        this.controller.onExit();
    };


    this.rootNode.onTouchesBegan = function (touches, event) {
        this.controller.onTouchesBegan(touches, event);
        return true;
    };

    this.rootNode.onTouchesMoved = function (touches, event) {
        this.controller.onTouchesMoved(touches, event);
        return true;
    };
    this.rootNode.onTouchesEnded = function (touches, event) {
        this.controller.onTouchesEnded(touches, event);
        return true;
    };
    this.rootNode.setTouchEnabled(true);
};

GameSelectLayer.prototype.onEnter = function () {
    this.maxColumns = 3;
    this.columnSize = 177;
    this.maxRows = 5;
    this.rowSize = 104;
    cc.log("GameSelectLayer");

    this.itemDatas = [];
    var itemName = "";
    var levelPan = cc.Layer.create();
    var currentLevel = sys.localStorage.getItem("pb_level");
    if (currentLevel == null) {
        currentLevel = 0;
    }

    sys.localStorage.setItem("pb_level_score_1", "S");
    currentLevel = 3;

    for (var i = 0; i < 50; i++) {
        var xIndex = Math.floor(i % 3) + Math.floor(i / 15) * 3;
        var yIndex = Math.floor(i / 3 % 5);
        var levelScore = "A"
        if (i < currentLevel) {
            levelScore = sys.localStorage.getItem("pb_level_score_" + i);
            if (levelScore == null || levelScore == '') {
                levelScore = "A";
            }
            if ("S" == levelScore) {
                itemName = "GameSelectItemScoreS";
            }
            else {
                itemName = "GameSelectItemScore";
            }
        }
        else if (i == currentLevel) {
            itemName = "GameSelectItemLevel";
        }
        else {
            itemName = "GameSelectItemLocked";
        }
        var itemData = {
            xIndex: xIndex,
            yIndex: yIndex,
            index: i,
            type: itemName,
            onItemAction: function () {
                cc.log("onItemAction");
                var action = cc.ScaleBy.create(0.5, 0.8);
                this.rootNode.runAction(cc.Sequence.create(
                    action, action.reverse(), cc.DelayTime.create(2)
                    //  cc.CallFunc.create(this.onItemClicked())
                ));
            },
            onItemClicked: function () {
                cc.log("onItemClicked");
                GAME_LEVEL = (this.index + 1);
                require("MainLayer.js");
                cc.BuilderReader.runScene("", "MainLayer");
            },
            onLockOpened: function () {
            }
        };
        var item = cc.BuilderReader.loadAsNodeFrom("", "GameSelectItemSprite", itemData);
        if (item == null) {
            continue;
        }
        item.setPosition(cc.p(this.columnSize * xIndex, this.rowSize * (4 - yIndex)));
        item.setZOrder(11);
        itemData.rootNode = item;
        itemData.controller = this;
        this.itemDatas.push(itemData);
        itemData.levelNum.setString("" + (i + 1));
        levelPan.addChild(item);
    }
    levelPan.setContentSize(cc.size(this.columnSize * 12, this.rowSize * 5));
    this.levelScrollPanel.setTouchEnabled(false);
    this.levelScrollPanel.setBounceable(true);
    this.levelScrollPanel.setContainer(levelPan);
    this.levelScrollPanel.setTouchPriority(-99999);

    this.pageDots(0);
}

GameSelectLayer.prototype.onUpdate = function () {

}

GameSelectLayer.prototype.onExit = function () {

}

GameSelectLayer.prototype.onTouchesBegan = function (touches, event) {
    cc.log("onTouchesBegan");
    this.beganPosition = touches[0].getLocation();
}

GameSelectLayer.prototype.onTouchesMoved = function (touches, event) {
    this.movePosition = touches[0].getLocation();
}

GameSelectLayer.prototype.onTouchesEnded = function (touches, event) {
    cc.log("onTouchesEnded");
    var loc = touches[0].getLocation();
    var distanceX = this.beganPosition.x - loc.x;

    var x = this.levelScrollPanel.getContentOffset().x;
    var y = this.levelScrollPanel.getContentOffset().y;
    this.levelScrollPanel.unscheduleAllCallbacks();

    if (distanceX > 50) {
        if (this.pageIndex < 4) {
            this.pageIndex += 1;
        }
        this.pageDots(this.pageIndex);
    }
    else if (distanceX < -50) {
        if (this.pageIndex > 0) {
            this.pageIndex -= 1;
        }
        this.pageDots(this.pageIndex);
    }
    else {
        this.onItemClicked(loc);
    }
    this.levelScrollPanel.setContentOffsetInDuration(cc.p(-this.columnSize * 3 * this.pageIndex, y), 0.5);
}

GameSelectLayer.prototype.onItemClicked = function (location) {
    var x = location.x;
    var y = location.y;

    if (!isInScroll(location)) {
        cc.log("out");
        return;
    }

    var scrollPanelRect = this.levelScrollPanel.getBoundingBox();
    var xIndex = Math.floor((x - 110) / this.columnSize) + this.pageIndex * 3;
    var yIndex = 4 - Math.floor((y - 385) / this.rowSize);
    cc.log("scrollX==" + scrollPanelRect.x + ",scrollY==" + scrollPanelRect.y);
    cc.log("xIndex==" + xIndex + ",yIndex==" + yIndex);

    for (var i = 0; i < this.itemDatas.length; i++) {
        if (this.itemDatas[i].xIndex == xIndex && this.itemDatas[i].yIndex == yIndex) {
            cc.log("click i=" + i);
            this.itemDatas[i].onItemClicked();
            break;
        }
    }
}

GameSelectLayer.prototype.pageDots = function (position) {
    this.dotNode.removeAllChildren();
    for (var i = 0; i < 4; i++) {
        var dots = ["s_point.png", "s_point_s.png"];
        var type = 0;
        if (position == i) {
            type = 1;
        }
        var dotSprite = cc.Sprite.createWithSpriteFrameName(dots[type]);
        dotSprite.setAnchorPoint(cc.p(0, 1));
        dotSprite.setPosition(cc.p(30 * i, 60));
        dotSprite.setZOrder(100);
        this.dotNode.addChild(dotSprite);
    }
}

function isInScroll(location) {
    var x = location.x;
    var y = location.y;
    if (x > 110 && x < (110 + 510) && y > 385 && y < (385 + 500)) {
        return true;
    }
    return false
}

GameSelectItemSprite.ccbx

<?xml version="1.0" encoding="UTF-8"?>

<Document
        jsControlled="true"
        jsController=""
        resolution="default"
        >

  <Resolutions>
    <Resolution centeredOrigin="false" ext="iphone" height="1280" width="720" name="default" scale="1"/>
    <Resolution centeredOrigin="false" ext="iphone" height="720" width="1280" name="default1" scale="1"/>
  </Resolutions>

  <Animations>
    <Animation autoPlay="true"
               id="0"
               name="Default Timeline"
               length="10"
               chainedId="0"
               offset="0.0"
               position="0.0"
               resolution="30"
               scale="128">
      <CallbackChannel>
      </CallbackChannel>
      <SoundChannel>
      </SoundChannel>
    </Animation>

  </Animations>
  <Sprite
          positionX="0" positionY="0"
          sizeType="Absolute"
          anchorPointX="0.5" anchorPointY="0.5" ignoreAnchorPoint="true"
          scaleX="1.0" scaleY="1.0"
          positionType="LeftBottom" src="Resources/snow_packer.plist/s_bun_red_normal.png" target="Owner" var="bgSprite" width="156" height="83"
          color="#ff15ffa0">
    <LayerColor positionType="LeftBottom" width="156" height="83" positionX="0" positionY="0" anchorPointX="0"
                  anchorPointY="0" color="#ff0cffa2" visible="true"/>
      <Sprite positionType="LeftBottom" width="77.0" height="77.0" positionX="113.0" positionY="40.0" anchorPointX="0.5"
                                         anchorPointY="0.5" src="Resources/snow_packer.plist/m_star_s.png"
                                         scaleX="0.6" scaleY="0.6"/>
    <LabelBMFont positionType="LeftBottom" width="40" height="40" positionX="39.0" positionY="56.0" anchorPointX="0.5"
                 anchorPointY="0.5" text="2" src="Resources/fonts/s_number_gold.fnt" var="levelNum" target="Owner" name="levelNum"
                 scaleX="1.5" scaleY="1.5"/>
      </Sprite>


</Document>

主遊戲場景；

MainLayer.ccbx

<?xml version="1.0" encoding="UTF-8"?>

<Document
        jsControlled="true"
        jsController="MainLayer"
        resolution="default"
        >

    <Resolutions>
        <Resolution centeredOrigin="false" ext="iphone" height="1280" width="720" name="default" scale="1"/>
        <Resolution centeredOrigin="false" ext="iphone" height="720" width="1280" name="default1" scale="1"/>
    </Resolutions>

    <Animations>
        <Animation autoPlay="true"
                   id="0"
                   name="Default Timeline"
                   length="10"
                   chainedId="0"
                   offset="0.0"
                   position="0.0"
                   resolution="30"
                   scale="128">
            <CallbackChannel>
            </CallbackChannel>
            <SoundChannel>
            </SoundChannel>
        </Animation>

    </Animations>
    <Layer
            positionX="0" positionY="0.0"
            sizeType="Percent"
            width="100" height="100"
            anchorPointX="0.5" anchorPointY="0.5" ignoreAnchorPoint="true"
            scaleX="1" scaleY="1"
            >

        <Sprite positionType="LeftBottom" width="720" height="1280" positionX="0" positionY="0"
                anchorPointX="0"
                anchorPointY="0" src="Resources/m_bg_main.jpg">
        <Sprite positionType="LeftBottom" width="182.0" height="238.0" positionX="117.0" positionY="1133.0" anchorPointX="0.5"
                                         anchorPointY="0.5" src="Resources/snow_packer.plist/m_indicator2.png"/>
            <LabelTTF positionType="LeftBottom" width="200" height="50" positionX="303.0" positionY="1177.0" anchorPointX="0.5"
                      anchorPointY="0.5" text="分數：" fontSize="30" vAlign="Center" hAlign="Top" color="#ffff3219"
                      visible="false"/>
            <LabelBMFont positionType="LeftBottom" width="40" height="40" positionX="241.0" positionY="1068.0" anchorPointX="0.5"
                         anchorPointY="0.5" src="Resources/fonts/score.fnt" text="123" scaleX="1" scaleY="1"
                         var="scoreLabel" target="Doc" visible="false"/>
            <Sprite positionType="LeftBottom" width="113.0" height="120.0" positionX="350.0" positionY="747.0" anchorPointX="0.5"
                                         anchorPointY="0.5" src="Resources/snow_packer.plist/m_monster_g_0001.png"
                                         var="monster" target="Doc"/>
            <Menu positionType="LeftBottom" width="100" height="100" positionX="608.0" positionY="1166.0" anchorPointX="0.5"
                  anchorPointY="0.5">
                <MenuItem positionType="LeftBottom" width="107" height="112" positionX="13.0" positionY="18.0"
                          anchorPointX="0.5"
                          anchorPointY="0.5" normalImage="Resources/snow_packer.plist/m_bun_pause_s.png"
                          onClick="onPauseClicked" target="Doc"/>
            </Menu>
        </Sprite>
        <Menu positionType="LeftBottom" width="40" height="40" positionX="371.0" positionY="299.0" anchorPointX="0.5"
              anchorPointY="0.5" scaleX="2.4" scaleY="1.725" visible="false">
            <MenuItem positionType="LeftBottom" width="40" height="40" positionX="0" positionY="0"
                      anchorPointX="0"
                      anchorPointY="0"
                      normalImage="Resources/CloseNormal.png"
                      selectedImage="Resources/CloseSelected.png" disabledImage="Resources/CloseSelected.png"
                      target="Doc" onClick="onExitClicked"/>
        </Menu>
    </Layer>


</Document>

MainLayer.js

//
// CleanerScoreScene class
//

var MainLayer = function () {
    cc.log("MainLayer")
    this.scoreLabel = this.scoreLabel || {};
    this.monster = this.monster || {};
    this.score = 123;
};

MainLayer.prototype.onDidLoadFromCCB = function () {
    if (sys.platform == 'browser') {
        this.onEnter();
    }
    else {
        this.rootNode.onEnter = function () {
            this.controller.onEnter();
        };
    }

    this.rootNode.schedule(function (dt) {
        this.controller.onUpdate(dt);
    });

    this.rootNode.onExit = function () {
        this.controller.onExit();
    };

    this.rootNode.onTouchesBegan = function (touches, event) {
        this.controller.onTouchesBegan(touches, event);
        return true;
    };

    this.rootNode.onTouchesMoved = function (touches, event) {
        this.controller.onTouchesMoved(touches, event);
        return true;
    };
    this.rootNode.onTouchesEnded = function (touches, event) {
        this.controller.onTouchesEnded(touches, event);
        return true;
    };
    this.rootNode.setTouchEnabled(true);
};

MainLayer.prototype.onEnter = function () {
    var flowerParticle = cc.ParticleSystem.create("Resources/particles/flower.plist");
    flowerParticle.setAnchorPoint(cc.p(0.5, 0.5));
    flowerParticle.setPosition(cc.p(60, 160));
    flowerParticle.setPositionType(1);
    this.monster.addChild(flowerParticle);

    cc.AudioEngine.getInstance().playMusic("Resources/sounds/bg_music.mp3", true);
}

MainLayer.prototype.monsterMove = function (x, y) {
    this.monster.stopAllActions();
    cc.AnimationCache.getInstance().addAnimations("Resources/snow_frame.plist");//添加幀動畫文件
    var action0 = cc.Sequence.create(cc.MoveTo.create(5, cc.p(x, y)));  //向前移動
    var actionFrame = cc.Animate.create(cc.AnimationCache.getInstance().getAnimation("monster"));   //獲取幀動畫
    var action1 = cc.Repeat.create(actionFrame, 90000);
    var action2 = cc.Spawn.create(action0, action1); //同步動畫
    this.monster.runAction(action2);
}

MainLayer.prototype.createParticle = function (name, x, y) {
    var particle = cc.ParticleSystem.create("Resources/particles/" + name + ".plist");
    particle.setAnchorPoint(cc.p(0.5, 0.5));
    particle.setPosition(cc.p(x, y));
    particle.setPositionType(1);
    particle.setDuration(3);
    this.rootNode.addChild(particle);
}


MainLayer.prototype.onUpdate = function (dt) {
    this.score += dt;
    this.scoreLabel.setString(Math.floor(this.score));
}

MainLayer.prototype.onExitClicked = function () {
    cc.log("onExitClicked");
}


MainLayer.prototype.onExit = function () {
    cc.log("onExit");
}

MainLayer.prototype.onRenewClicked = function () {  //返回到開始界面
    cc.Director.getInstance().resume();
    cc.log("onRenewClicked");
    cc.BuilderReader.runScene("", "StartLayer");
}

MainLayer.prototype.onSelectClicked = function () {  //選關
    cc.Director.getInstance().resume();
    cc.log("onListClicked");
    cc.BuilderReader.runScene("", "GameSelectLayer");
}

MainLayer.prototype.onReplayClicked = function () {  //新遊戲
    cc.Director.getInstance().resume();
    cc.log("onReplayClicked");
    cc.BuilderReader.runScene("", "MainLayer");
}

/*MainLayer.prototype.onReturnClicked = function () {  //返回遊戲
 cc.log("onReturnClicked");
 if (this.paused) {
 if (this.pausedLayer) {
 this.pausedLayer.removeFromParent();
 this.pausedLayer = null;
 }
 cc.Director.getInstance().resume();
 this.paused = false;
 }
 }*/

MainLayer.prototype.onPauseClicked = function () {   //點擊暫停遊戲
    this.pausedLayer = cc.BuilderReader.loadAsNodeFrom("", "PauseLayer", this);
    this.pausedLayer.setPosition(cc.p(0, 0));
    this.pausedLayer.setZOrder(200);
    this.rootNode.addChild(this.pausedLayer);
    this.paused = true;
    cc.AudioEngine.getInstance().stopMusic();
    cc.Director.getInstance().pause();
}

MainLayer.prototype.onTouchesBegan = function (touches, event) {
    var loc = touches[0].getLocation();
}

MainLayer.prototype.onTouchesMoved = function (touches, event) {
    cc.log("onTouchesMoved");
}

MainLayer.prototype.onTouchesEnded = function (touches, event) {
    cc.log("onTouchesEnded");
    var loc = touches[0].getLocation();
    cc.AudioEngine.getInstance().playEffect("Resources/sounds/bomb.mp3", false);
    this.monsterMove(loc.x, loc.y);
    this.createParticle("around", loc.x, loc.y);
}

暫停界面；

PauseLayer.ccbx

<?xml version="1.0" encoding="UTF-8"?>

<Document
        jsControlled="true"
        jsController=""
        resolution="default"
        >

    <Resolutions>
        <Resolution centeredOrigin="false" ext="iphone" height="1280" width="720" name="default" scale="1"/>
        <Resolution centeredOrigin="false" ext="iphone" height="720" width="1280" name="default1" scale="1"/>
    </Resolutions>

    <Animations>
        <Animation autoPlay="true"
                   id="0"
                   name="Default Timeline"
                   length="10"
                   chainedId="0"
                   offset="0.0"
                   position="0.0"
                   resolution="30"
                   scale="128">
            <CallbackChannel>
            </CallbackChannel>
            <SoundChannel>
            </SoundChannel>
        </Animation>

    </Animations>

    <Layer
            positionX="0" positionY="0"
            width="100" height="100" sizeType="Percent"
            anchorPointX="0.5" anchorPointY="0.5" ignoreAnchorPoint="true"
            scaleX="1" scaleY="1"
            touchEnabled="true" positionType="LeftBottom" target="Owner" mouseEnabled="true" keyboardEnabled="true">
        <LayerColor positionType="LeftBottom" width="720" height="1280" positionX="0" positionY="0" anchorPointX="0"
                    anchorPointY="0" color="#5757565a" touchEnabled="true" mouseEnabled="true" keyboardEnabled="true"/>
        <Sprite positionType="LeftBottom" width="587.0" height="834.0" positionX="362.0" positionY="645.0"
                anchorPointX="0.5"
                anchorPointY="0.5" src="Resources/s_bg_grade.png">
        <!--<LayerColor positionType="LeftBottom" width="600" height="800" positionX="66.0" positionY="234.0"
                    anchorPointX="0"
                    anchorPointY="0" color="#ffff55fd" touchEnabled="true" mouseEnabled="true" keyboardEnabled="true"
                    accelerometerEnabled="true">-->
            <Sprite positionType="LeftBottom" width="113.0" height="120.0" positionX="307.0" positionY="588.0"
                    anchorPointX="0.5"
                    anchorPointY="0.5" src="Resources/snow_packer.plist/m_monster_g_0002.png"
                    scaleX="2" scaleY="2"/>
            <Menu positionType="LeftBottom" width="40" height="40" positionX="281.0" positionY="259.0"
                  anchorPointX="0.5"
                  anchorPointY="0.5">
                <MenuItem positionType="LeftBottom" width="99" height="94" positionX="-136.0" positionY="-4.0"
                          anchorPointX="0.5" anchorPointY="0.5" normalImage="Resources/snow_packer.plist/m_bun_back.png"
                          target="Owner" onClick="onRenewClicked"
                          selectedImage="Resources/snow_packer.plist/m_bun_back.png"/>
                <MenuItem positionType="LeftBottom" width="99" height="94" positionX="30.0" positionY="-3.0"
                          anchorPointX="0.5"
                          anchorPointY="0.5" normalImage="Resources/snow_packer.plist/m_bun_again.png" target="Owner"
                          onClick="onReplayClicked" selectedImage="Resources/snow_packer.plist/m_bun_again.png"/>
                <MenuItem positionType="LeftBottom" width="99" height="94" positionX="201.0" positionY="-1.0"
                          anchorPointX="0.5" anchorPointY="0.5" normalImage="Resources/snow_packer.plist/m_bun_list.png"
                          target="Owner" onClick="onSelectClicked"
                          selectedImage="Resources/snow_packer.plist/m_bun_list.png"/>
            </Menu>
        <!--</LayerColor>-->
        </Sprite>

    </Layer>


</Document>

最後主函數Main,js,Main.xml;

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>name</key>
	<string>Game</string>
	<key>language</key>
	<string>Javascript</string>
	<key>main</key>
	<string>main.js</string>
	<key>designWidth</key>
	<string>720</string>
	<key>designHeight</key>
	<string>1280</string>
	<key>designPolicy</key>
	<string>NO_BORDER</string>
	<key>viewWidth</key>
	<string>360</string>
	<key>viewHeight</key>
	<string>640</string>
	<key>debug</key>
	<string>false</string>
</dict>
</plist>

if (sys.platform == 'browser') {
    var require = function (file) {
        var d = document;
        var s = d.createElement('script');
        s.src = file;
        d.body.appendChild(s);
    }
} else {
    require("jsb.js");
}

cc.debug = function (msg) {
    cc.log(msg);
}

cc.BuilderReader.replaceScene = function (path, ccbName) {
    var scene = cc.BuilderReader.loadAsSceneFrom(path, ccbName);
    cc.Director.getInstance().replaceScene(scene);
    return scene;
}

cc.BuilderReader.loadAsScene = function (file, owner, parentSize) {
    var node = cc.BuilderReader.load(file, owner, parentSize);
    var scene = cc.Scene.create();
    scene.addChild(node);
    return scene;
};

cc.BuilderReader.loadAsSceneFrom = function (path, ccbName) {
    cc.BuilderReader.setResourcePath(path + "/");
    return cc.BuilderReader.loadAsScene(path + "/" + ccbName);
}

cc.BuilderReader.loadAsNodeFrom = function (path, ccbName, owner) {
    cc.BuilderReader.setResourcePath(path + "/");
    return cc.BuilderReader.load(path + "/" + ccbName, owner);
}

cc.BuilderReader.runScene = function (module, name) {
    var director = cc.Director.getInstance();
    var scene = cc.BuilderReader.loadAsSceneFrom(module, name);
    var runningScene = director.getRunningScene();
    if (runningScene === null) {
        cc.log("runWithScene");
        director.runWithScene(scene);
    }
    else {
        cc.log("replaceScene");
        director.replaceScene(scene);
    }
}

var ccb_resources = [
    {type: 'image', src: "Resources/HelloWorld.png"},
    {type: 'image', src: "Resources/CloseNormal.png"},
    {type: 'image', src: "Resources/CloseSelected.png"}
];

require("MainLayer.js");
require("StartLayer.js");
require("GameSelectLayer.js");

if (sys.platform == 'browser') {

    var Cocos2dXApplication = cc.Application.extend({
        config: document['ccConfig'],
        ctor: function () {
            this._super();
            cc.COCOS2D_DEBUG = this.config['COCOS2D_DEBUG'];
            cc.initDebugSetting();
            cc.setup(this.config['tag']);
            cc.AppController.shareAppController().didFinishLaunchingWithOptions();
        },
        applicationDidFinishLaunching: function () {
            var director = cc.Director.getInstance();
            // director->enableRetinaDisplay(true);
            // director.setDisplayStats(this.config['showFPS']);
            // set FPS. the default value is 1.0/60 if you don't call this
            director.setAnimationInterval(1.0 / this.config['frameRate']);
            var glView = director.getOpenGLView();
            glView.setDesignResolutionSize(1280, 720, cc.RESOLUTION_POLICY.SHOW_ALL);
            cc.Loader.preload(ccb_resources, function () {
                cc.BuilderReader.runScene("", "StartLayer");
            }, this);
            return true;
        }
    });
    var myApp = new Cocos2dXApplication();
} else {
    cc.BuilderReader.runScene("", "StartLayer");
}

下一篇文章 我會介紹cocos2d-x  editor的其他特性    筆者（李元友）

資料來源：cocos2d-x  editor