美文网首页游戏人游戏设计&游戏开发程序员
当creator遇上protobufjs—pbkiller插件

当creator遇上protobufjs—pbkiller插件

作者: 张晓衡 | 来源:发表于2017-09-02 09:00 被阅读693次

    机缘

    自从开始写protobufjs的分享教程,就开始坚持不懈的在CocosCreator论坛上自吹自擂,无意见被CocosCreator制作人南塔斯大神看到了。一不小心收到南大神的论坛私信,询问我可否将protobuf的使用制作成Creator的插件,并邀我将插件入驻Creator付费商店。

    收到消息的第一时间,我异常兴奋。第一是我的经验分享竟能受到Creator官方大神的关注;其次是居然还可以入驻付费商店,对于程序员来说莫大的欣慰就是可以将代码变换现实中的价值。

    pb杀手

    通过一段时间的Creator插件学习与protobufjs源码的理解,再结合Creator项目经验,终于完成了第一版插件。在制作插件的过程中,插件的命名是最让我纠结的,因为我在曾经的项目中大量使用xxxHelper,编写了不少辅助工具。这次为了让我的第一个Creator插件看起来很牛逼一点点的感觉,我脑子冒出killer的字样,随后我就叫他:pbkiller

    不会美术的程序做的logo

    我先让pbkiller做个自我介绍:

    pbkiller: 我是一位专业的争对protobuf问题训练有素的杀手,我可以为你轻松搞定protobuf在CocosCreaotr开发中的诸多问题,并且可以让你随意折磨曾经折磨过你的protbuf问题。

    一、臣服

    让所有Proto都臣服在主人脚下

    我pbkiller最厉害的技能是可以快速逮捕proto文件,让他们臣服在主人脚下,不论是在浏览器、手机、桌面环境上。

    1. 呼唤

    只需要低声轻吟我的名字我就会出现在你的身边,对于我的主人我是非常温柔的。

    let pbkiller = require('pbkiller');
    

    2. 让proto文件跪在主人面前

    对于proto文件我是残忍的,但请主人预先将所有proto文件放在assets/resources/pb目录,输入loadAll()指令,我会将proto文件一网打尽,让它们全部跪在你的面前。

    let pb = pbkiller.loadAll(); //所有proto对象都集中在返回的pb对象上
    

    3. 让json格式同样下跪

    如果主人喜欢json格式的proto文件,目前需要麻烦主人先使用protobufjs附带的pbjs工具将proto文件转换成json格式存放在assets/resources/pb目录,同样跪下。

    let pb = pbkiller.loadAll('json'); //所有proto对象都集中在返回的pb对象上
    

    4. 逮捕指定文件名中的的proto文件


    如果主人只需逮捕某一个或多个proto文件,可以使用loadFromFile。

    let pb = pbkiller.loadFromFile('xxx.proto'); 
    let pb = pbkiller.loadFromFile(['xxx.proto', 'yyy.proto']); 
    let pb = pbkiller.loadFromFile(['xxx.json', 'yyy.json']);
    

    5. 逮捕不同地域的proto文件

    主人,我默认的逮捕路径是assets/resources/pb,可以通过下面属性修改路径。

    //使用root属性修改路径
    pbkiller.root = 'my-pb-path';
    //此时逮捕路径为:assets/resources/my-pb-path 
    pbkiller.loadAll(); 
    

    二、折磨

    虽然我们名字中带有killer,但是最高兴不是一下子把敌人杀掉,而是折磨它,因为他曾经可能折磨过我的主人,所以不能让它死的太简单了,哈哈哈。

    1. 揪出一个proto给主人扭打(实例化)

    主人,我把proto给你抓来了,你可以使用new关键字,随意扭打proto了。

    //逮捕所有proto文件,并指定编译grace.proto.msg包路径下的所有对象
    let pb = pbkiller.loadAll('proto', 'grace.proto.msg');
    let player = new pb.Player();    //扭打Player
    player.name = 'ShawnZhang';      //再踹一脚
    

    2.挨一轮巴掌与低声哭(序列化与反序列化)

    主人,让proto挨一轮巴掌使用toArrayBuffer,如果你觉得有点累可以使用toBuffer他们的效果完全是一样的。

    let player = new pb.Player();  //先扭打
    let data = player.toBuffer();  //再来一巴掌
    

    上面我们把player打成了data,现在把它打回来,让他哭一下就好了,但是只是小声的哭,请下答decode指令。

    let player = pb.Player.decode(data); //主人允许你小声哭,回来吧
    

    三、内讧

    我:“pbkiller没想到你的话这么多,让你自己我介绍一下下,讲这么大一堆。对待proto这么残忍,又主人主人的,特别肉麻,好恶心”

    pbkiller:“这年头,你以为杀手是那么容易当的么,杀手也要学会自我营销,注重用户体验,你以前那种介绍方式out了”。

    我:“你居然敢说我out了,小心我把你给kill了”。

    pbkiller:“你是老大,你说了算,我看有多少人喜欢你说话的方式” pbkiller一脸鄙夷的神情。

    四、正式说明

    pbkiller插件是为了在CocosCreator中简化protobufjs库的使用,并且可以让protobuffer工作在浏览器和jsb环境上。

    1.安装

    pbkiller插件有两种安装模式:

    • install-src:源码模式,此模式会将protobufjs原码导入项目中,不依赖任何外部文件。对npm不熟悉的用户推荐使用此模式安装。
    • install-lite:简化模式,此模式需要提前安装protobufjs npm模块,安装命令:npm install protobufjs@5

    安装完成后,会导入如下文件:

    1. protobufjs源码(简化模式无此目录)
    2. pbkiller源码、及fs/path伪装模块
    3. 简单的测试场景和代码
    4. 测试proto文件

    下面是导入文件和目录结构:

    pbkiller                    
    ├── protobuf                protobufjs源码
    │   ├── bytebuffer.js
    │   ├── long.js
    │   └── protobufjs.js
    ├── src                     pbkiller源码
    │   ├── fs.js               fs伪装
    │   ├── path.js             path伪装
    │   └── pbkiller.js         pbkillers核心代码
    └── test
        ├── test-pbkiller.fire  测试场景
        └── test-pbkiller.js    测试组件代码
    resources                   resource/pb是默认的proto文件存放的根目录        
    └── pb                      以下文件为测试用proto文件,可以自行删除
        ├── ActionCode.proto    
        ├── ChatMsg.proto        
        ├── Player.json
        └── Player.proto
    

    2. 快速使用

    导入模块

    let pbkiller = require('pbkiller');
    

    加载resources/pb目录下所有proto文件

    //加载所有proto文件
    let pb = pbkiller.loadAll(); 
    //实例化proto中的Player对象
    let player = new pb.grace.proto.msg.Player();
    

    指定文件格式:[proto|json] 默认为proto

    //注意json文件是由protobufjs提供的pbjs工个生成
    let pb = pbkiller.loadAll('json');
    

    指定编译的对象路径

    let pb = pbkiller.loadAll('proto', 'grace.proto.msg');
    cc.log(new pb.Player());
    

    3. 特别注意

    在加载proto时可以使用扩�展名为.proto.json�的文件,pbkiller支持两�种混用,但�需要特别注意的如果有proto之间有依赖关系,请保证��依赖文件之间是相同的文件格式。

    五、期待

    目前pbkiller在Cocos商店已经上架,不过官方为了严格测试整个付费商店的上传、审核、支付等流程,可能还需要等待一段时间才能下载,敬请期待。

    我很想知道,你们是喜欢pbkiller的介绍方式,还是我写的介绍方式?期待你的留言。

    相关文章

      网友评论

      • 9fb9d153d53a:可以在安卓和苹果手机上运行么?
        张晓衡:@Jack_3aa5 pbkiller就是解决protobufjs在jsb、浏览器上的兼容问题,当然可以在苹果和android上运行
      • a952c8d0cb8c:大佬好!可否更新一下对微信小程序的支持呢?编辑器1.8版的,浏览器和native可以,在微信小程序里会报错啊
        a952c8d0cb8c:@张晓衡 是啊
        张晓衡:@永恒的眸光 你购买了pbkiller吗?
      • f8d42d6e5fea:cocoscreator1.6可以正常使用这个插件吗?
        张晓衡:@Luckme_3ac3 可以,支持1.5.2以上
        张晓衡:@Luckme_3ac3 可以的!:blush:
      • 624cddf97b26:Error: EISDIR: illegal operation on a directory, open 'C:\Users\Administrator\.CocosCreator\download\.temp\2120991b7a0140e510376bd212fd3202\pbkiller\node_modules\.bin'
        Error: 文件解压失败
      • 624cddf97b26:买了安装失败啊
        624cddf97b26:@张晓衡 解决了 多谢老板
        张晓衡:非常抱歉,我做了一个视频请参考,如果有问题请联系
        https://mparticle.uc.cn/video.html?uc_param_str=frdnsnpfvecpntnwprdssskt&wm_id=678fe6c78007496588d1c0f386ccd389&wm_aid=5bd96561a2f549d7b089808d5d548d09

      本文标题:当creator遇上protobufjs—pbkiller插件

      本文链接:https://www.haomeiwen.com/subject/buaqdxtx.html