【Cocos2d-Js基础教学(7)界面UI更新方法(会用到第三方类库)】

我们游戏中会遇到很多UI更新的时候,大部分时候我们会remove该节点,再重新绘制的方法来进行UI更新。

但是这种更新效率并不高,这里我推荐大家一个第三方的库,来通过注册更新的方式来对UI进行更新管理;

它的大名其实很响亮,就是“js-signals”。官方地址:http://www.bootcdn.cn/js-signals/

官方的定义是:Custom Event/Messaging system for JavaScript.(JavaScript自定义事件的消息传递系统。)

有兴趣的同学可以继续更深入的研究!

下面我们来使用这个第三方库:

1,首先我们得下载这个最新的第三方库(js-signals.js)然后拷贝到我们上节课的工程中的 BaseUtil文件夹中;

2,然后我们需要在创建一个UI刷新处理类,叫UpDataUIManager.js。

UpDataUIManager.js:

/**
 * Created by yangshengjiepro on 15/4/23.
 */
//全局事件名称
var EVENT_UI_MAINTOP="maintop";

var EVENT_UI_MAIN_LISTVIEW="listview";

var UpdateUIManager=cc.Class.extend({
    _pageManagers:null,
    init:function(){
        this._pageManagers={};
    },
    /**
     * 添加事件监听
     * @param pageStr 标识在哪个page上(自定义的,不同page的pageStr不同)
     * @param func
     */
    addPageUpdateListeners :function(pageStr,func,targetObj, multiple){
        multiple = multiple || 0;
        if(!this._pageManagers[pageStr]){
            this._pageManagers[pageStr]=new signals.Signal();
        }

        if(!multiple){
            this._pageManagers[pageStr].removeAll();
        }
        this._pageManagers[pageStr].add(func,targetObj);
    },
    removeListeners:function(pageStr){
        if(this._pageManagers&&this._pageManagers[pageStr])
            this._pageManagers[pageStr].removeAll();
    },
    /**
     * 根据pageStr分发pageStr指定的页面的事件
     * @param pageStr
     * @param params type json
     */
    dispatch:function(pageStr,params){
        if(this._pageManagers[pageStr]){
            this._pageManagers[pageStr].dispatch(params);
        }
    }
});
UpdateUIManager.s_SharedPageManager = null;
UpdateUIManager.getInstance = function () {
    if (!UpdateUIManager.s_SharedPageManager) {
        UpdateUIManager.s_SharedPageManager = new UpdateUIManager();
        UpdateUIManager.s_SharedPageManager.init();
    }
    return UpdateUIManager.s_SharedPageManager;
};

/////例子
// var TestLayer=cc.Layer.extend({
//     init:function(){
//         return true;
//     },
//     refreshUI:function(data){

//     },
//     onEnter:function(){
//         this._super();
//         UpdateUIManager.getInstance().addPageUpdateListeners(EVENT_PAGE_MAINTOP,this.refreshUI,this);//绑定事件方法
//     },
//     onExit:function(){
//         this._super();
//         UpdateUIManager.getInstance().removeListeners(EVENT_PAGE_MAINTOP);//删除事件方法
//     }
// });

// var TestLayer2=cc.Layer.extend({
//     init:function(){
//         var data;
//         UpdatePageManager.getInstance().dispatch(EVENT_PAGE_MAINTOP,data);//触发事件方法
//         return true;
//     }
// });

分析一下我们这个类里面的4个方法:

1,addPageUpdateListeners :function(pageStr,func,targetObj, multiple)

这个是我们注册监听的方法,需要填写我们的、刷新UI标识、具体刷新方法、一个Obj对象

2,removeListeners:function(pageStr)

直接可以移除该事件

3,dispatch:function(pageStr,params)

调用该事件,传入标识,和需要传递使用的参数

在我们上节课中的MainLayer.js类里面继续添加如下方法:

updataUI:function(public_mun){

        if(this.lv_100!=null)
        {
            this.lv_100.setString("等级:"+public_mun);
        }

        if(this.lv_200!=null)
        {
            this.lv_200.setString("lv:999");
        }
    },

    onEnter:function(){
        this._super();
        UpdateUIManager.getInstance().addPageUpdateListeners(UPDATA_UI_BG,this.updataUI,this);//绑定事件方法
    },
    onExit:function(){
        this._super();
        UpdateUIManager.getInstance().removeListeners(UPDATA_UI_BG);//删除事件方法
    },

在onEnter,和onExit回调函数中分别去处理,注册事件,和退出是移除事件的方法

我们通过按钮事件,来触发调用dispatch方法,来执行我们的UpDataUI刷新方法,并且传递

一个public_num变量整数;

touchEvent_MainButton:function(sender,type){
        switch (type){

            case ccui.Widget.TOUCH_ENDED:
                var tagnum = sender.getTag();
                Mlog.c("touchEvent_MainButton tagnum >"+tagnum);
                UpdateUIManager.getInstance().dispatch(UPDATA_UI_BG,public_mun);//触发事件方法
                break;
            default :
                break;
        }
    }

代码写完之后,我们还需要在project.json里面添加我们的两个类UpDataUIManager.js和signals.js;

OK,我们整个刷新的业务逻辑已经书写完毕了;Run起来看一下效果:

点击音乐按钮后

我们的等级变为,传进来的2,Lv:变成了999,那么证明我们的UI异步刷新调用执行成功了!

OK本节知识点就到这里;

本节课源码下载:

下载地址(百度云盘)

源码使用方法:

自己创建新工程,解压下载的文件,将所有文件拷贝到你新工程的目录下全部覆盖既可以运行!

时间: 2024-11-14 12:03:18

【Cocos2d-Js基础教学(7)界面UI更新方法(会用到第三方类库)】的相关文章

JS基础知识再整理..........不断更新中

1.JS的五种基本数据类型:字符串.数值.布尔.null.underfined. 2.在JS中,字符串.数值.布尔三种数据类型,有其属性和方法: 3.字符串的三种常用方法[.indexof()..substring()..split()]和一种常用属性[.length]; 例子如下: /*提取字符串中列表的每一项*/ var aa="This is a list:red,blue,white,black."; var start=aa.indexOf(":"); /

cocos2d JS 基础语法运算符

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC" } 简单且逼格高的运算符 var a = 12; console.log(-a); //输出 -12 - -> 取反 var b = a++; console.log(b); //输出 12 - -> 先赋值b,a再++ b = ++a; console.log(b); //输出 14 - -> ++a赋值b,a先++后赋值 var a

cocos2d JS 基础语法间的函数方法相互调用

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC" } 1.函数嵌套函数 1 function calcuate(opr, a, b) { // 定义函数,opr - -> 符号,a,b - -> 数值 2 3 //定义 + 函数 4 function add(a, b){ 5 return a + b; 6 } 7 8 //定义 - 函数 9 function sub(a, b){ 10 r

适合零基础小白学习的ui设计方法及课程大纲分享

ui界面设计教程学什么?首先想要学习ui设计,你得了解ui界面设计是什么?只有了解清楚了你才能更好的去开展学习. 对于很多从零基础开始学习ui设计的人来说,不知道ui要学会哪些内容才能更好的工作,所以今天就把ui界面设计课程大纲分享给大家.不管是有基础还是没有基础的同学都可以根据这份课程大纲来学习.有条理的学习才能更好的了解和掌握阶段性的学习课程,也能了解自己学到了哪个部分,掌握了哪些技能. 1.PS技术 如果现在还有不会用PS的同学,请先去搜索免费的基础课程来学习,至少要用透左边的工具栏,还有

【Cocos2d-Js基础教学 入门目录】

从接触Cocos2dx-Js以来,它的绽放的绚丽让我无法不对它喜欢.我觉得Js在不断带给我们惊喜:在开发过程中,会大大提升我们对原型开发的利用率,使用Js语言做游戏开发,使游戏可测试性更加强大,但很多人觉得Cocos2d-Js引擎是一门很沉重的语言,里面的API非常深,这其实是错误的理解,Js对自身语言的扩展,对其他语言的通讯支持,都是非常强大的.目前官方对API的整合分为了Cocos2dx-Js和Cocos2dx-Js-Lite版本: Cocos2dx-Js官方的介绍是这样的: Cocos2d

更新UI常见方法

UI更新方法一:Handler+View.invalidate+Thread+Runnable UI更新方法二:View.postInvalidate+Thread+Runnable UI更新方法三:Handler+Worker Thread UI更新方法四:在Worker Thread中runOnUiThread直接刷新UI UI更新方法五:利用AsyncTask更新UI

基础篇-在非UI线程中更新UI元素

个人原创,转载请注明出处: http://blog.csdn.net/supluo/article/details/ 先了解两个概念 1.UI:User Interface的缩写,用户界面的意思.你可以不恰当的理解为我们能够看到的,操作的东西:在Android中什么才称为UI呢,可以简单的理解为View及其子类等元素.这是一个不够正确的概念,只是对新手做一个简单的抛砖引玉. 2.ANR:Application Not Responding,意思是程序没有响应. 在如下情况下,Android会报出

【Cocos2d-Js基础教学(5)资源打包工具的使用及资源的异步加载处理】

[转载]http://www.cnblogs.com/zisou/p/cocos2dx-js5.html   TexturePacker是纹理资源打包工具,支持Cocos2dx的游戏资源打包. 如果用过的同学可以直接看下面的资源的异步加载处理 首先为什么用TexturePacker? 1,节省图片资源实际大小 2,减少我们游戏中大量资源带来的内存负荷 3,方便游戏对纹理资源的内存管理 游戏开发到后期,我们或许都会遇到的瓶颈就是需要对游戏包进行"瘦身"和内存优化.那么使用TextureP

js基础知识总结(2016.11.1)

js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避免全局变量和方法(命名空间,闭包,面向对象),模块化(seaJs,requireJs) 常用内部类:Data Array Math String HTML属性,CSS属性HTML:属性.HTML属性="值":CSS:对象.style.CSS属性="值"; class和f