Git Product home page Git Product logo

uiloader's Introduction

sz.UILoader

This is a cocos2d-js ui load tool.

快速使用

var GameLayer = cc.Layer.extend({
    ctor: function() {
		this._super();

		//"res/DemoLogin.ExportJson" 为cocostudio UI编辑器输出的UI配置文件,
		sz.uiloader.widgetFromJsonFile(this, "res/DemoLogin.ExportJson");

		//"_loginButton"是在UI编辑时设置的某个控件名字, 必须以下划线("_")开始.
		cc.assert(this._loginButton.getName() === "_loginButton");
	},

    //以"_on+<控件名首字母大写>+<事件名>"定义事件响应函数
	_onLoginButtonTouchBegan: function(sender) {
	    cc.log(sender.getNode());
	}
});

##默认命名约定 事件命名默认按照cocos2d-js源码风格,成员变量、私有函数是在驼峰命名法前加“_”例如:

_button _nameLabel _onLogin onCloseButtonTouchEnded

控件事件名由:前缀 + 控件名(去下划线) + 事件名 构成

##自定义前缀

函数sz.uiloader.widgetFromJsonFile(target, jsonFile, options) 第三个参数options, 有两个属性memeberPrefix、eventPrefix分别用于配置成员前缀与事件函数前缀。

sz.uiloader.widgetFromJsonFile(this, "res/DemoLogin.ExportJson", {eventPerfix:"on", memberPrefix:"m_"} );

此时控件成员变量名为m_loginButton, 事件为onloginButtonTouchEnded。

##前缀+控件名+Event

有控件名为:_loginButton但不想将该控件的TouchBegan、TouchMoved、TouchEnded分成三个函。 你可以按定义ccui事件回调函数的默认签名方式_onLoginButtonEvent(sender, type)事件来统一处理, 通过参数type来判断事件类型。 函数名则需要遵循 前缀+控件名+Event方式。

_onLoginButtonEvent: function(sender, type) {
    switch (type) {
		case 0:
			cc.log("_onLoginButtonEvent: began");
			break;
		case 1:
			cc.log("_onLoginButtonEvent: move");
			break;
		case 2:
			cc.log("_onLoginButtonEvent: end");
			break;
		}
	},

注意如你还定义有前缀 + 控件名 + 事件名 格式的函数如**_loginButtonTouchBegan** 它们将不会被执行。

##rootNode

使用UILoader成功加载UI文件后,默认会将由jsonFile创建出来的Widget对象保存到target.rootNode变量上,使你可以方便对其操作比如:

this.rootNode.setVisible(false);
this.rootNode.setPosition(this.widget * 0.5, this.height * 0.5);

注意:uiloader默认会将rootNode设置到target的中心位置显示,但不会修改rootNode的锚点。

##TouchLong事件

新增TouchLong事件的支持,事件格式为前缀 + 控件名 + TouchLong 如:

_onLoginButtonTouchLong: function() {
}

##绑定手动创建的ccui控件

ctor: function () {
    var button = new ccui.ImageView("res/Heiti10.png", ccui.Widget.LOCAL_TEXTURE);
    button.setName("_button");   //必须设置名字
    this.addChild(button);       //必须addChild
    sz.uiloader.widgetFromJsonFile(this); //可以不加载json文件,同样可以绑定你手动创建的ccui控件
    cc.asset(this._button.name === "_button");
    ...
}

##为cc.Node类型节点注册触摸事件

使用sz.uiloader.registerTouchEvent函数为cc.Node类型的节点注册触摸事件,函数原型如下:

/**                                                                                 
* cc.node触摸事件注册函数                                                                  
* @param node                                                               
* @param target                                                                    
* @param touchEvent                                                                
* @param swallowTouches                                                            
* @returns {*}                                                                     
*/
sz.uiloader.registerTouchEvent = function(node, target, touchEvent, swallowTouches) {
}

node为必须参数,默认事件响应对象也为node

sz.uiloader.registerTouchEvent(button);
button._onTouchBegan = function(sender, touch, event) {
...
}

设定node触摸事件响应对象, 事件命名规则与widget类型控件相同

ctor: function() {
    ...
    sz.uiloader.registerTouchEvent(button, this);
    button.setName('_button');
},
_onButtonTouchBegan = function(sender, touch, event) {
    ...
    return true;
}

需要注意cc.Node类型的TouchBegan事件返回true时,才能正确响应之后的TouchMoved、TouchEnded事件。 cc.Node类型的长按键事件暂未实现。

##支持cocostudio2.1

sz.UILoader可以同时支持cocostudio(1.x/2.1)导出的UI文件, 但在加载新版本cocostudio导出的配置文件时你需要保证使用了正确的cocos2d-js引擎版本。 支持cocostudio2.1嵌套UI的事件响应。需要注意的是嵌套UI节点为cc.Node类型。

uiloader's People

Contributors

shawnzhang2015 avatar zxh1982 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.