cocos2d-html5对话界面设计

"use strict"

var _dialogMsgBottom = null;
var _dialogMsgTop = null;
var _dialogMsgId = ;
var _dialogConfig = null;
var _dialogId = ;

var DialogLayer = cc.Layer.extend({

    init:function () {
        var bRet = false;
        if (this._super()) {

            // 底图
            var sp = cc.Sprite.createWithSpriteFrameName("bg01.jpg"); //cc.Sprite.create(s_loading);
            sp.setAnchorPoint(AnchorPointBottomLeft);
            this.addChild(sp, g_GameZOder.bg, );

            // 灰底，透明
            var dialogBg1 = cc.Sprite.createWithSpriteFrameName("dg1.png");
            dialogBg1.setAnchorPoint(AnchorPointBottomLeft);
            dialogBg1.setPosition(cc.p(,));
            this.addChild(dialogBg1, g_GameZOder.ui);

            // 下面的黑色背景
            var dialogBg2 = cc.Sprite.createWithSpriteFrameName("dg2.png");
            dialogBg2.setAnchorPoint(AnchorPointBottomLeft);
            dialogBg2.setPosition(cc.p(,));
            this.addChild(dialogBg2, g_GameZOder.ui);

            // 上面的黑色背景
            var dialogBg3 = cc.Sprite.createWithSpriteFrameName("dg2.png");
            dialogBg3.setAnchorPoint(AnchorPointTopLeft);
            dialogBg3.setPosition(cc.p(,winSize.height));
            this.addChild(dialogBg3, g_GameZOder.ui);

            // 菜单
            cc.MenuItemFont.setFontSize();
            cc.MenuItemFont.setFontName("Arial");
            var systemMenu = cc.MenuItemFont.create("NEXT", this.showNextMsg);
            var menu = cc.Menu.create(systemMenu);
            menu.setPosition(, );
            systemMenu.setAnchorPoint(cc.p(, ));
            systemMenu.setPosition(winSize.width-, );
            this.addChild(menu, g_GameZOder.ui, );

            _dialogConfig = DialogConfig[_dialogId];

            this.showFirstMsg();

            bRet = true;
        }

        return bRet;
    },
    showNextMsg:function (pSender) {
        _dialogMsgId++;

        if (_dialogMsgId >= _dialogConfig.msg.length) {
            // 显示完所有对话，跳转执行
            cc.Loader.preload(g_maingame, function () {
                var scene = cc.Scene.create();
                scene.addChild(GameLayer.create());
                // 游戏里面菜单
                // scene.addChild(GameControlMenu.create());
                cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.2, scene));
            }, this);
        }
        else {
            if (_dialogConfig.msg[_dialogMsgId]) {
                if (_dialogMsgId %  == ) {
                    _dialogMsgTop.setString(_dialogConfig.msg[_dialogMsgId]);
                }
                else {
                    _dialogMsgBottom.setString(_dialogConfig.msg[_dialogMsgId]);
                }
            }
        }
    },
    showFirstMsg:function() {

        var photoTop = cc.Sprite.createWithSpriteFrameName(_dialogConfig.textureNameTop);
        photoTop.setPosition(,winSize.height-);
        this.addChild(photoTop, g_GameZOder.ui);
        var xPos = photoTop.getContentSize().width;

        _dialogMsgTop = cc.LabelTTF.create(_dialogConfig.msg[_dialogMsgId],"华文黑体",);
        _dialogMsgTop.setAnchorPoint(AnchorPointBottomLeft);
        _dialogMsgTop.setPosition(cc.p(xPos, winSize.height-));
        this.addChild(_dialogMsgTop, g_GameZOder.ui);

        var photoBottom = cc.Sprite.createWithSpriteFrameName(_dialogConfig.textureNameBottom);
        photoBottom.setPosition(,);
        this.addChild(photoBottom, g_GameZOder.ui);
        _dialogMsgBottom = cc.LabelTTF.create("","华文黑体",);
        _dialogMsgBottom.setAnchorPoint(AnchorPointBottomLeft);
        _dialogMsgBottom.setPosition(cc.p(xPos, ));
        this.addChild(_dialogMsgBottom, g_GameZOder.ui, );
    }
});

DialogLayer.create = function () {
    var sg = new DialogLayer();
    if (sg && sg.init()) {
        return sg;
    }
    return null;
};