cocos2d-html5对话界面设计

"use strict"

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

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, 1);

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

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

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

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


            _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 % 2 == 0) {
                    _dialogMsgTop.setString(_dialogConfig.msg[_dialogMsgId]);
                }
                else {
                    _dialogMsgBottom.setString(_dialogConfig.msg[_dialogMsgId]);
                }
            }
        }
    },
    showFirstMsg:function() {


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

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

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

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