【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本节知识点就到这里;
本节课源码下载:
源码使用方法:
自己创建新工程,解压下载的文件,将所有文件拷贝到你新工程的目录下全部覆盖既可以运行!
【Cocos2d-Js基础教学(7)界面UI更新方法(会用到第三方类库)】的更多相关文章
- Vue.js的列表数据的同步更新方法
这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...
- js基础查漏补缺(更新)
js基础查漏补缺: 1. NaN != NaN: 复制数组可以用slice: 数组的sort.reverse等方法都会改变自身: Map是一组键值对的结构,Set是key的集合: Array.Map. ...
- 前端面试题目汇总摘录(JS 基础篇 —— 2018.11.02更新)
温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...
- JS基础知识再整理..........不断更新中
1.JS的五种基本数据类型:字符串.数值.布尔.null.underfined. 2.在JS中,字符串.数值.布尔三种数据类型,有其属性和方法: 3.字符串的三种常用方法[.indexof()..su ...
- JS基础语法---String对象下的方法(字符串的方法)
实例方法---->必须要通过new的方式创建的对象(实例对象)来调用的方法 静态方法---->直接通过大写的构造函数的名字调用的方法(直接通过大写的对象名字调用的) 字符串的常用属性: . ...
- 【Cocos2d-Js基础教学 入门目录】
本教程视地址频在: 九秒课堂 完全免费 从接触Cocos2dx-Js以来,它的绽放的绚丽让我无法不对它喜欢.我觉得Js在不断带给我们惊喜:在开发过程中,会大大提升我们对原型开发的利用率,使用Js语言做 ...
- Qt UI界面改了,但UI界面不更新
/**************************************************************************** * Qt UI界面改了,但UI界面不更新 * ...
- 前端工程师面试问题归纳(一、问答类html/css/js基础)
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- 【Cocos2d-Js基础教学(5)资源打包工具的使用及资源的异步加载处理】
TexturePacker是纹理资源打包工具,支持Cocos2dx的游戏资源打包. 如果用过的同学可以直接看下面的资源的异步加载处理 首先为什么用TexturePacker? 1,节省图片资源实际大小 ...
随机推荐
- WinRAR安装、破解与去除弹窗广告
本教程教大家怎么破解WinRAR压缩软件和去除广告(教程属于总结类,总结网上给出的方法,并且亲测有效,非本人原创)WinRAR5.40 2016.10.06 首先下载WinRAR软件,去它的官方英文网 ...
- Razor视图引擎输出没有编码的 Html 字符串
优先选择: @Html.Raw(mystring) 在MVC 3中,你可以这样: ViewBag.Stuff = "<li>Menu</li>" 在视图中也 ...
- elixir 高可用系列(四) Task
概述 之前学习的 Agent,GenSever以及GenEvent,都是用来管理状态或者处理消息的. 但是在很多时候,我们需要的是执行某个任务,这时如果使用 GenSever 或者 GenEvent, ...
- centos7 安装 notejs
1.安装集成工具 yum -y install gcc make gcc-c++ 2.安装notejs 自行选择版本:https://nodejs.org/dist/ wget https://nod ...
- Javascript中new Date的坑
在一段判断是否过期的js代码中是这么写的: if (new Date() < new Date(2014, 9, 25)) { //... } 后来发现过了9月25日竟然不过期,console. ...
- HTML5 Canvas实现黑客帝国文字掉落效果
效果: 原理: 用canvas逐行输出文字,然后让背景颜色逐渐加深,再随机中断某些列. 代码: HTML: <canvas id="c"></canvas> ...
- [C#] 编程控制笔记本蓝牙与外部蓝牙设备通信
一.蓝牙模块XLBT232‐D01介绍(外部设备蓝牙) 1.1.蓝牙模块简介 XLBT232-D0101蓝牙模块采用CSR BlueCore 芯片,配置6-8Mbit 的软件存储空间, 支持AT 指令 ...
- Spring基本概念
spring优点: 1降低组件间耦合度,实现软件各层之间的解耦. 2可以使用容器提供的各种服务.如,事务管理服务,消息服务等等. 当我们使用容器管理事务时,开发人员就不再需要手工控制事务,也不需处理复 ...
- Nagios学习笔记二:Nagios概述
1.简介 Nagios是插件式的结构,它本身没有任何监控功能,所有的监控都是通过插件进行的,因此其是高度模块化和富于弹性的.Nagios监控的对象可分为两类:主机和服务.主机通常指的是物理主机,如服务 ...
- GCD使用dispatch_semaphore_t创建多线程网络同步请求
一.简介: dispatch_semaphore_t:表示信号,生成信号的方法是 dispatch_semaphore_t semaphore= dispatch_semaphore_create(0 ...