[{"data":1,"prerenderedAt":111},["ShallowReactive",2],{"\u002F2013-02-24-librocket%E5%9C%A8cocos2d-x%E4%B8%AD%E4%BD%BF%E7%94%A8":3},{"id":4,"title":5,"body":6,"date":88,"description":12,"extension":89,"meta":90,"navigation":93,"path":105,"seo":106,"stem":107,"tags":108,"__hash__":110},"blogs\u002F_legacy\u002F2013\u002F2013-02-24-librocket%e5%9c%a8cocos2d-x%e4%b8%ad%e4%bd%bf%e7%94%a8.md","libRocket在cocos2d-x中使用",{"type":7,"value":8,"toc":84},"minimark",[9,13,16,19,22,29,32,35,38,49,60,63,66,72,75,81],[10,11,12],"p",{},"libRocket是一个MIT协议开源的UI库，它最主要的理念是以css和html的形式来设计界面，可以极大的降低开发界面的成本。",[10,14,15],{},"之所以会接触到这个库是因为cocos2d-x的ui库可以说是正在建设中的状态，用起来多少有些不顺手。这个ui库用起来确实不错，只是最后和我的有所相差，经过考虑之后还是放弃了。不过这里还是把一些经验上的东西分享出来，希望能够对用的童鞋有所帮助。",[10,17,18],{},"libRocket本身是与显示层独立的，也就是说只要实现了相关接口，理论上它可以在所有的设备上运行。",[10,20,21],{},"首先是关于librocket自身的编译，这个库比较新，可以正常的在vs2010下编译通过。在编译过程中可能会需要freetype，如果想要正常的使用自带的例子程序，还需要zlib和libpng库，总之根据提示添加相应的配置项即可。没有什么特别需要注意的。一切完成之后，编译运行RocketInvader项目，将会看到下面的简易小游戏：",[10,23,24],{},[25,26],"img",{"alt":27,"src":28},"rocket_invaders","\u002Fwp-content\u002Fuploads\u002F2013\u002F02\u002Frocket_invaders-300x206.jpg",[10,30,31],{},"可以看到作为一个游戏需要的基本的ui组件都已经实现了，而且居然还可以用来实现一个简单的游戏逻辑，不过说实话这个游戏不是一般的变态……点开help可以看到的是整个库最让人满意的地方，就是富文本支持，而且完全是按照htlm标准来写的，用起来十分方便。",[10,33,34],{},"到了这一步librocket库基本就搞定了，现在就剩下将它与cocos2d-x相结合了。其实库中本来是提供了opengl的渲染接口的，但是只是简单的对其进行修改会发现完全无法显示，最后查了一下，发现要在es上渲染必须借助shader才行。总而言之直接上代码，虽然想要这么说。还是先解释一下要实现的接口吧。",[10,36,37],{},"我们要实现的接口除了消息传递之外总共有两个，分别是systeminterace和renderinterface，作用从字面即可理解。systeminterface的作用是提供基本的时间标定，就是说为librocket提供游戏已经运行的时间。但是cocos2d-x貌似没有提供这个功能，于是自己实现了个，代码如下",[39,40,45],"pre",{"className":41,"code":43,"language":44},[42],"language-text","class CocoSystemInterface : public Rocket::Core::SystemInterface\n{\nprivate:\n    struct cocos2d::cc_timeval begin;\npublic:\n    virtual float GetElapsedTime(){\n        struct cocos2d::cc_timeval now;\n        cocos2d::CCTime::gettimeofdayCocos2d(&now,NULL);\n        return cocos2d::CCTime::timersubCocos2d(&begin,&now)\u002F1000;\n    }\n\n    void init(){\n        cocos2d::CCTime::gettimeofdayCocos2d(&begin,NULL); \n    }\n\n};\n","text",[46,47,43],"code",{"__ignoreMap":48},"",[10,50,51,52,59],{},"第二个需要实现的是渲染接口renderinterface，其间遇到了个问题，就是shader模式下回默认打开深度测试，所以必须把它关掉。否则在同样使用了深度测试的map等层上就会出现奇怪的显示bug。而且不关闭深度测试时，所有ui绘制将会处在最顶层，这和大多数设计都是冲突的。代码部分请看刚刚建立的",[53,54,58],"a",{"href":55,"rel":56},"https:\u002F\u002Fgithub.com\u002Fsteinkrausls\u002Fllibrocket-cocos2d-x",[57],"nofollow","Git","。",[10,61,62],{},"关于git库中的代码，只要包含RocketSingle.h就可以将RocketLayer当做普通的layer来使用了，注意由于是shader绘制的，原本的矩阵偏移并没有计算入内，所以setposition和setanchorpoint这类函数是不会其作用的。另外，父类ccsprite没有什么意义，因为不打算继续用了所以没有做下去，因此额外的，事件传递也没有做了。不过显示部分已经完整了。",[10,64,65],{},"关于librocket使用中的问题，那就是对中文字符的支持。在对应的Css或者Style中添加下面的配置就可以了。",[39,67,70],{"className":68,"code":69,"language":44},[42],"font-charset: U+3300-9FFF,U+0020-007E;\n",[46,71,69],{"__ignoreMap":48},[10,73,74],{},"但是有一个问题，librocket在对字符编码进行支持时是先将所有的字符图形读入缓存中然后在TextElement中使用的，这是为了照顾在运行时的效率。看下面的调用堆栈就能明显的看出来：",[10,76,77],{},[25,78],{"alt":79,"src":80},"librocket","\u002Fwp-content\u002Fuploads\u002F2013\u002F02\u002Flibrocket-300x168.jpg",[10,82,83],{},"这样的直接结果就是初始化时的时间会变得特别长，因为中文字符的编码区间很大，所以会消耗大量的读入时间。虽然对于稍大型的游戏，只要加入loading界面也就是不到5s的时间。但是对于目前在做的小项目而言，这样长的载入时间对于用户而言是不可理喻的。所以最后便没有采用librocket，而是决定采用cocos2d-x原生的ui。只能下次做英文游戏或是更大型的东西的时候再考虑它了。",{"title":48,"searchDepth":85,"depth":86,"links":87},2,3,[],"2013-02-24","md",{"layout":91,"status":92,"published":93,"author":94,"author_login":95,"author_email":96,"author_url":97,"wordpress_id":98,"wordpress_url":99,"date_gmt":100,"excerpt":101},"post","publish",true,{"display_name":95,"login":95,"email":96,"url":97},"chaoshikari","chaoshikari@gmail.com","\u002F",569,"\u002F\u002F?p=569","2013-02-23 17:26:42 +0000",{"type":7,"value":102},[103],[10,104,12],{},"\u002F2013-02-24-librocket在cocos2d-x中使用",{"title":5,"description":12},"_legacy\u002F2013\u002F2013-02-24-librocket%e5%9c%a8cocos2d-x%e4%b8%ad%e4%bd%bf%e7%94%a8",[109],"cocos2d-x","oWse_pxR0rZsUdsw-rde-sW6iX7MkpnTyjN-0_yFrso",1788763183046]