chapter3.mdown

游戏主菜单界面

分析main.js，做了哪些初始化，然后cocos2dApp加载了第一个scene：HelloWorldScene

cc.Application.extend 扩展出一个Cocos2d-Html5的App

打开myApp.js

cc.Layer.extend 扩展一个HelloLayer。

解析下ctor:function ()，作用类似构造函数，必须调用this._super();

    ctor:function () {
        this._super();
        this.init();
    },

解析下init:function ()，也需要调用this._super();

    init:function () {
        this._super();

        director = cc.Director.getInstance();//获取导演
        winSize = director.getWinSize();//获取设计分辨率
        var centerPos = cc.p(winSize.width / 2, winSize.height / 2);

        var spriteBG = cc.Sprite.create(s_HelloBG);//创建一个精灵，作为背景图
        spriteBG.setPosition(centerPos);//位置设置为设计分辨率中心点
        this.addChild(spriteBG);

        cc.MenuItemFont.setFontSize(60);//设置菜单字体
        //创建一个精灵菜单项
        var menuItemPlay = cc.MenuItemSprite.create(
            cc.Sprite.create(s_start_n),//normal状态图片
            cc.Sprite.create(s_start_s),//select状态图片
            this.onPlay, this);//回调方法以及对应的对象
        var menu = cc.Menu.create(menuItemPlay);//创建彩蛋
        menu.setPosition(centerPos);
        this.addChild(menu);//添加到layer
    }

再看下回调函数，在这一章我们只打印一个cc.log(),具体的处理后面章节来实现。 这里可解析下cc.log()。

    // on play button clicked
    onPlay:function (sender) {//sender是发送者实例
        cc.log("==onPlay clicked");
    }

cc.Scene.extend 扩展一个scene

var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloLayer();
        layer.init();
        this.addChild(layer);
    }
});

onEnter函数是什么？引擎的状态回调。可引入介绍其他状态回调函数。在scene类重写这个方法，记得this._super();

在这里我们和之前扩展的HelloLayer实例化并添加到HelloWorldScene，这样我们就完成了一个主菜单scene。