creator研究随记1

一些官方有的文档我就不重复了,只是简单记录下自己的研究。暂时版本1.2.2

1、creator的默认编辑器使用的引擎路径
cocos2d-x引擎路径在 creator安装文件夹\resources\cocos2d-x下,这个是构建发布原生平台版本的时候才用到,非link模式下,复制一份该引擎源码到发布路径下。默认已经编译好模拟器exe在该路径\simulator\win3下,每次运行预览也是在这个路径下刷新资源。
JavaScript 引擎(也就是Creator-JS引擎)在creator安装文件夹\resources\engine下,这个是creator主要作用的代码,大部分UI组件代码都是在这里写的,发布的时候会默认打包所有js文件成一个jsb_polyfill.js,默认会有一份编译好的在该路径\bin下,每次代码更新都会在这里复制一份到模拟器路径下。

2、分辨率适配
creator的canvas分辨率适配是没有EXACT_FIT即拉伸铺满屏幕,有需要的话得自己改,话说搞不懂别的模式都搞了,这个模式为什么不来个字段适配下,可以自己修改Creator-JS引擎下的CCCanvas.js文件里面的处理来实现,具体修改applySettings函数,相信大部分人都能看懂改哪,我是将NO_BORDER修改成EXACT_FIT。值得注意的是,默认编辑器你需要直接修改jsb_polyfill.js里面的那段函数才可以,因为他不会重新编译一次Creator-JS引擎(或许有什么条件下会,但我不清楚)

3、事件管理
节点的事件管理是个坑,他是冒泡传递的,也就是只能从孩子节点传给父节点,而无法从父节点传到孩子节点,限制很大,而eventManager只能监听无法发送消息,所以需要自己重新写一套来实现功能,这里写个全局事件管理器来处理,可以参考节点的事件管理,写一个EventMgr.js,简单写了个,具体如下

(function () {
    var list ={};
	var __EventMgr = {
        //注册消息
         on:function(key,func,node) {
            if(list[key] == null){
                list[key] =[];
            }
            var d = {};
            d.func =func;
            d.node = node;
            list[key].push(d);
        },
        //移除一个消息
         remove:function(key,func,node) {
            if(list[key]){
                for(var i=0; i<data.length;i++){
                    if(data[i].node == node && data[i].func == func)
                    {
                         data.splice(i,1);
                         --i;
                    }
                }
            }
            list[key].push(func);
        },
        //移除node所有消息
        removeByNode:function(node) {
            for ( var p in list ){ 
                var data = list[p];
                for(var i=0; i<data.length;i++){
                    if(data[i].node == node)
                    {
                         data.splice(i,1);
                         --i;
                    }
                }
            } 
        },
        //移除key注册的所以消息
        removeByKey:function(key) {
            delete  list[key];
        },
        //遍历通知消息
         emit:function (key,arg) {
            if(list[key]){
                var funcs = list[key].concat();
                for(var i=0;i<funcs.length;i++){
                    if((funcs[i].node instanceof cc.Component))
                    {
                        if( cc.isValid (funcs[i].node) ){
                            funcs[i].func(arg,funcs[i].node);
                        }
                    }
                    else{
                        funcs[i].func(arg,funcs[i].node);
                    }
                }
            }
        }
    };
    window.EventMgr = __EventMgr; 
})();

因为引擎开始加载js脚本的时候,会执行一遍js代码,所以默认就会把EventMgr加到全局变量里,这里只是一个全局分发消息的处理,可以自己扩展改进需要的功能,一般简单的事件分发用它也够了。

3赞

虽然看不懂,但是收藏了以后再看

跟你同样的目的

非常感谢楼主的分享,有一些问题我咨询一下

这个适配方式比较少见,所以我们当时并没有实现。如果有需要的话其实可以在脚本里动态调用 cc.view.setDesignResolution…

修改完引擎后麻烦在 engine 目录执行 gulp build 命令

应该可以啊,监听事件时最后一个参数是 useCapture,传入 true 就会从父节点到子节点

1、关于适配模式,我觉得这种模式是最常见吧,原生平台的很多小游戏都不会考虑适配很多屏幕,最简单就是拉伸了,脚本动态设置是可以的,但是没必要每个canvas都拉个脚本吧,而且canvas底层会监听尺寸改变事件进行刷新修改,你也得适配
2、监听事件的,传true之后只能遍历从父节点到子节点?如果不能全部通知到,那还是个坑。。总不能每次都监听2次吧~~~

传 true 后会从父节点到子节点,如果事件本身还设置了 bubbles = true,则能同时从子节点冒泡到父节点。

EXACT_FIT 模式并不少见,H5游戏最常见的问题是发行拿到版本就会问,为啥上下有黑边儿?白鹭可以通过改成EXACT_FIT瞬间解决这个问题,咱creator就不行,非常困扰

那样会有拉伸吧?圆形变椭圆什么的

哎,基本都是要求EXACT_FIT吧?反正我到的公司都是这个适配,是不会留黑边的,裁剪就更不可能咯