近期准备出安卓版本，在安卓上的性能表现不佳。经过一周多的优化，在性能上取得了较大的提升。游戏采用&Cocos2d-x 3.2 + Lua&进行开发，以下将在渲染效率，CPU效率，包大小等方面进行总结。
纹理格式 & 运行效率 内存 包大小
所有的图片都通过一个python脚本（调用TexturePacker的命令行工具）自动转换为RGBA4444编码的格式。然后判断当前平台为安卓时，将默认纹理格式转换为RGBA4444。
--安卓启用4444纹理
if&targetPlatform&==&cc.PLATFORM_OS_ANDROID&then
&&&&cc.Texture2D:setDefaultAlphaPixelFormat(cc.TEXTURE2_D_PIXEL_FORMAT_RGB_A4444)
以上的过程会发现一种比较&反常&的现象，就是转成RGBA4444的图片要比原来的图片要大。所以在脚本中不能单纯的转换，需要对比转换前后的大小，只转换变得更小的图片。
还需要注意性能和表现的平衡。有些图片转成RGBA4444后看起来太糙，严重的影响了游戏的视觉体验。对此需要小心的针对处理。处理方法为，在这些纹理使用前将默认纹理格式设置为RGBA8888，然后当纹理使用后再将设置为之前的默认纹理格式。
左图是没有做处理的游戏截图，可见相当不平滑的光线和背景。 右图是只针对背景和光晕的纹理设为RGBA8888处理，视觉体验一下子就回归了。
压缩成RGBA4444格式的PNG图片，还可以用工具进一步压缩，而视觉体验肉眼感受几乎没有变化。这样可以进一步的减少包的大小。
RGBA4444的纹理内存使用量要比默认的RGBA8888小一半，所以可以很大的减轻游戏的内存压力。而且和PVR ETC等压缩纹理想比，可以一套代码，完全兼容iOS和Android两大移动平台。所以我认为性价比还是很高的。
纹理剪裁 & 内存 包大小
游戏采用CocoStudio来制作骨骼动画。CocoStudio导出的骨骼动画导出的图片默认是POT(power of two)大小的。其实会造成很多空白像素的浪费，这些空白像素不仅会让图片变大，还会增加纹理的内存。
具体办法是：将导出的POT图片，经过美术或工具的剪裁掉多余的空白像素，使之变成NPOT(non power of two)，然后修改一下plist文件中&texture&中的width和height值。对实际的使用是没有任何影响的。
通过把所有POT格式的图片裁剪为NPOT，不仅可以缩减图片的体积，还能减少纹理的内存占用。
DrawCall OverDraw
在同事对整个包进行DrawCall和OverDraw分析后发现，消除场景内还保留着天空背景。而这层背景实际是玩家看不到，因为它完全被消除场景挡住了。但是它会带来全屏的绘制造成了全屏范围的OverDraw，而且带来了很多额外不必要的DrawCall。将其隐藏后，FPS在低端机上提升明显。
需要把这些看不到的东西全部隐藏或移除掉，否则它们会造成OverDraw和不必要的DrawCall，增加了GPU的负担。
隐藏的办法，有些童鞋喜欢将其透明度设为0，但是这样是不会降低DrawCall的。最好的方法是将其visble设为false。
还有就是场景内有很多细碎的东西，如果它们都是一张张散图储存的话，会使DrawCall居高不下，从而可能导致FPS下降。?
解决办法就是尽可能的将经常一起出现在屏幕上的小图合并成一张大图。
避免在循环内做重复的运算。因为如果计算值在整个循环内都不会变的话，那么每次循环都去计算就是浪费CPU周期，应该将计算结果缓存在循环外部。
想办法避免开销大的函数（如：开方函数，三角函数），寻找简单运算的替代方案。如：距离的比较可以不用开方先求出距离，而是直接用平方运算进行比较即可。
尽可能的避免同时多个的cc.RepeatForever。在低端机上发现在对较多对象调用cc.RepeatForever时，FPS下降显著。原因可能是每帧带来的计算，和因此频繁触发的Lua GC。GC是很一个十分耗费CPU的操作。
优化算法，剪枝，去除冗余的计算。在游戏内的碰撞系统是这么进行优化的：原来对每一个球，会遍历整个空间的碰撞体和墙壁进行碰撞检测；优化后的算法是取球当前的坐标，转换为格子坐标，然后取格子周边6个格子内的碰撞体和墙壁进行碰撞检测。效率提高了很多倍。
避免频繁的开辟内存，对象最好实现复用。开辟内存也是一项很耗费CPU的操作，尤其是在移动设备上内存紧张时。对象能重用尽量重用（建立对象池）。Lua内的表能初始化大小，尽量先初始化大小，否则rehash的操作很费时。？
用效率更高的库来替换，比如用cJson来替换Lua json，用pugixml来替代tinyxml2。或者将效率低的模块尝试用更低级的语言进行重写。
出包时，关掉所有的print语句和cclog语句。你们都知道输出到缓冲区的log有多卡。
预测即将用到的纹理和资源，将其进行异步加载。这样能在用到时，减少掉纹理加载的时间，感觉上会更流畅一些。
移除不用的库
由于引擎使用的是Cocos2d-x 3.2版本，所以没有3.3带来的模块精简的功能。但是我们也可以自己去小心翼翼的移除掉游戏根本不会用到的模块。比如：物理引擎，3d模块，CocosBuilder spine等等。
具体的方法是：通过adt的打包日志，分析有哪些库被编译进最终的so文件中，然后去项目内一个一个搜索这些库的名称。找到其对应的Android.mk文件，然后尝试移除掉无用库文件，然后尝试编译，确保游戏能正确运行。
阅读(...) 评论()利用JS高效开发原生游戏 Cocos 2d-JS中文版API文档正式上线
发表于 17:17|
来源腾讯游戏|
作者腾讯游戏
摘要：近日，经过众多开发者的翻译工作，Cocos 2d-JS中文版API文档正式上线。该API文档基于Cocos 2d-JS 3.2rc0版本，开发者可在文档中浏览Cocos 2d-JS的所有类、函数以及使用方法，快速检索学习及开发过程中所需要的方法。
近日，Cocos 2d-JS中文版API文档正式上线。为满足广大国内开发者的阅读习惯，便于大家能更好地了解引擎架构，学习关键技术点，Cocos 2d-JS力邀了众多开发者参与了此次翻译工作。Cocos 2d-JS中文版API文档：据悉，该API文档基于Cocos 2d-JS 3.2rc0版本，开发者可以在文档中浏览Cocos 2d-JS的所有类、函数以及使用方法，快速检索学习及开发过程中所需要的方法。HTML5技术是近两年来移动开发世界里的新贵。原来应用的开发者可能需要花费非常大的力气才能达到HTML5游戏开发的效率，需要不断地重复编码、调试、运行；然而HTML5手机应用的最大优势就是可以在网页上直接调试和修改，同时，当下市面上的主流手机浏览器都具备支持HTML5的能力让基于HTML5的移动轻游戏迅速蹿红，即点即玩又能迅速传播正在成为行业标杆。Cocos 2d-JS是Cocos 2d-x的JavaScript版本，融合了HTML5技术和Cocos 2d-x JavaScript Binding(JSB)，支持Cocos 2d-x的所有核心特性并提供更简单易用的JavaScript风格API，能帮助开发者方便地使用JavaScript语言进行游戏开发，快速构建原型进行验证，并能让游戏跑在所有支持HTML5规范的浏览器上。HTML5游戏越来越流行，在移动游戏行业中的比重也是越来越大，市场上已经有相当多的休闲、社交类游戏基于HTML5规范开发。Cocos 2d-JS带来了易学易用的Cocos 2d API到HTML5游戏开发领域，在保证高效开发的前提下，也秉承了HTML5游戏实时更新、即点即玩的特性，能给产品带来更高的用户转换率，更强的市场竞争力。同时，Cocos 2d-JS是跨全平台的游戏引擎，完美支持“一套代码，全平台运行”，所以开发者也可以采用JavaScript语言逐鹿原生游戏市场。该技术方案天然支持在线资源、脚本热更新，高性能、高效率，能完美支持各种复杂炫酷的游戏效果。目前已有多款如《变形金刚：崛起》、《三国杀 (微博)传奇》等基于Cocos 2d-JS开发的产品成功跻身千万级明星游戏之列。内容来源：
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章自学cocos2d js游戏开发应该按什么步骤进行
转载自百度知道:
　　两年前的一天，决定要做制作人。选定引擎cocos2d，开始学习objective-c语言；（如果你打算只在iOS平台开发可以学obj-c配合cocos2d或者sprite kit；如果打算跨平台就要用和c++了；当然unity什么的也不错但是我还没尝试过，一直很向往）
　　我跳过了iOS程序开发（似懂非懂看完了那一系列的教学视频），结合当时情况直接选择了cocos2d引擎，这时开始接触 @吴一刀 推荐的博客；我主要看的是子龙山人&子龙山人 - 博客园&、Ray Wenderlich&Ray Wenderlich&、Himi&黑米GameDev街区&这些博客里最基本的例子，知易那个以我当时的水平还看不懂。
　　尝试开始设计自己的简单游戏，我做！当然比教学例子里的复杂多了
　　这个过程中发现自己懂的实在是不够，所以又开啃这本书：Learn cocos2d 2 by Steffen Itterheim & Andreas Low
　　慢慢的发现需要一些趁手的工具和编辑器，并发展出一套自己构建于cocos2d之上的游戏设计架构。我目前的情况是这样：
　　关卡编辑我使用plist文件配合自己写的类；
　　sprite sheet使用TexturePacker&TexturePacker&；
　　动画/UI编辑最初自己手写太累，后来选择了cocosbuilder，请注意现在这个软件已经停止维护，转而引导用户使用SpriteBuilder&SpriteBuilder&（域名都做了自动跳转；SpriteBuilder我木有研究过，建议你研究一下）。
　　粒子编辑我自己还没实际用到，如果真正需要我感觉cocosbuilder的够我用的。//更新：后来用到了ParticleDesigner和cocosbuilder两个软件的粒子编辑混搭
　　我当时遇到的一个大麻烦是如何让cocosbuilder、cocos2d版本互相兼容且cocosbuilder无问题。大概情况是这样：cocosbuilder2.1和cocos2d-iphone2.0及2.1版本都不协调怎么办？；What version of Cocosbuilder and Cocos2d-iphone should I choose?
　　目前我使用的cocosbuilder 2.1版本（渐变层有bug、并且很可惜动画播放完没有触发消息的机制，我只好把每个动画时长都手动记录一下自己处理）
　　======3月12日更新======
　　在 @GarfieldKwong 指点下发现这个版本动画播放完是可以触发的，更高级版本3.x支持的效果应该是在动画中就加入callback的关键帧
　　新技能get√
　　具体代码可见下面学习案例的第一个例子里Explosion部分
　　=====================
　　cocosbuider的学习可以看两个例子Creating a Game with CocosBuilder；Introduction to CocosBuilder；然后就是多用多尝试。
　　整个学习过程要学会查资料、学会寻求帮助，我主要用的stackoverflow（话说刚刚发现stackoverflow的reputation喜过15，终于可以投票了:）
　　在学习过程中得到了子龙山人（我认为本尊是这位 @屈光辉 ）、LearnCocos2d作者Steffen、 @kubisoft 以及众多网上朋友的帮助，再次表示感谢。
　　硬件及开发者资格：看完c++开始看obj-c，这个过程一直是使用的vmware虚拟机安装的mac系统写程序；然后入手一个最便宜的mac pro、以及iPhone，尝试玩各种游戏；从看c++开始大约过了1年半（已经有非常简陋的游戏demo）才真正购入iOS开发者资格并开始真机测试。
　　尝试过的一些其他工具、各种弯路和坑、以及发散内容：
　　可以拖拽方式写代码的stencyl &Stencyl: Make iPhone, iPad, Android & Flash Games without code&；
　　最初学的不是ojc-c而是老师的c++程序设计（虽然有人不喜谭老师，但那书是中文的让我对面对对象程序设计有一些初步的概念，再看英文的obj-c不至于太摸不着头脑，反正手头正好有这么一本买了6年没看的c++。。。）；
　　尝试过&Tiled Map Editor&但自己目前的坑没有用到；
　　尝试过一点物理引擎和粒子，但自己目前的坑没有用到；现在粒子用到了，做了火焰等效果，也挺美的；但是一定要注意CPU占用优化，内存方面我最低支持4S没遇到大问题
　　学习音乐制作，这个我小时候学琴一直也喜欢音乐所以有一点点底子，如果没有基础可能上手有门槛；开始用的软件LMMS，但是音源插件在64位系统的问题我一直没解决掉时间精力也不多，所以是暂时停滞了；最近发现Garage Band可能也可以写歌；另外还试过一个很有历史的微软的音乐自动编辑器，很好玩，用来做背景音乐也不错。
　　入手手绘板学画画（这中间纠结了好久才决定用位图不用矢量图），如果你能找到热爱游戏的美术同学一起搞那最好不过。但是我一直对画画心痒难搔。。。所以入了这个深坑，晒一晒：
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！11:18:19 UTC
一夜之间，微信上一款叫《围住神经猫》的小游戏火了。它的玩法很简单，用最少的步数把一只神经兮兮的猫围死。 7月22号上线以来，3天、500万用户和1亿访问，想必各位程序猿都按耐不住了，想实现自己的神经猫游戏。在这篇教程里，我会教大家如何用Cocos2d-JS来实现一个神经猫这样的游戏。 让我们先看下游戏最后完成了的效果图:
你可能注意到了，神经猫换成了可爱的小羊驼：）在线游戏地址：http://app9.download.anzhuoshangdian.com/xyt/
三个界面基本上就是整个游戏的全部内容：
左边的是主界面，展示游戏名称以及主角，让玩家对游戏的整体画风有个大概的印象。中间的是游戏界面，点击空格防止橙色六边形砖块来围堵小羊驼。右边的是游戏成功或失败的界面。整个游戏的主逻辑都在游戏界面中完成。
玩法是这样：
游戏初始化开始，小羊驼始终是站在地图中间，在地图的其他区域随机生产一些位置随机的砖块。玩家点击一个空白区域，放置一个砖块来围堵羊驼。羊驼AI寻路移动一步。循环2和3，直到羊驼被围堵在一个圈里面（游戏成功），或羊驼到达地图边界（游戏失败）整个游戏的思路理清楚了，接下来我们开始进入编码阶段。
开发环境与新建项目
本教程开发基于当前最新的Download v3.0RC1.
下载引擎并解压到磁盘的某个目录。
开打控制台，输入下面的命令来新建项目。
$cd cocos2d-js-v3.0-rc1/tools/cocos2d-console/bin$./cocos new -l js --no-native$cd MyJSGame/$../cocos run -p web
环境搭建并不是这篇文章的重点，更详细的信息可以参考：《搭建 Cocos2d-JS 开发环境》
主界面实现
游戏的入口代码在main.js中，用编辑器打开并修改为下面的代码。
&pre class="brush: toolbar: auto-links:"&
cc.game.onStart = function(){
cc.view.adjustViewPort(true);
if (cc.sys.isMobile)
cc.view.setDesignResolutionSize(320,500,cc.ResolutionPolicy.FIXED_WIDTH);
else cc.view.setDesignResolutionSize(320,480,cc.ResolutionPolicy.SHOW_ALL);
cc.view.resizeWithBrowserSize(true);
cc.LoaderScene.preload(resources, function () {
gameScene = new GameScene();
cc.director.runScene(gameScene);
cc.game.run();
关键点解析如下：
设置浏览器meta来适配屏幕，引擎内部会根据屏幕大小来设置meta的viewport值，会达到更好的屏幕适配效果。针对手机浏览器和PC浏览器启用不同的分辨率适配策略。预加载图片声音等资源。 cc.LoaderScene.preload会生成一个“加载中 x％”的界面，等待资源加载结束后，调用第二个参数传入的匿名函数。 对于基于html的游戏，页面是放在服务器端供浏览器下载的，为了获得流畅的用户体验，cc.LoaderScene.preload让浏览器先把远程服务器的资源缓存到本地。需要预加载的资源定义在src/Resources.js文件中。启动游戏的第一个场景。主界面的由两个层实现，
GameLayer层，游戏主逻辑层，在未初始化地图矩阵时，它只显示背景地图。StartUI层，显示logo图片和开始游戏按钮。GameScene的初始化代码如下：var GameScene = cc.Scene.extend({
onEnter : function () {
this._super();
var bg = new cc.Sprite(res.bg);
anchorX : 0.5,
anchorY : 0.5,
x : cc.winSize.width/2,
y : cc.winSize.height/2
this.addChild(bg);
layers.game = new GameLayer();
this.addChild(layers.game);
layers.startUI = new StartUI();
this.addChild(layers.startUI);
layers.winUI = new ResultUI(true);
layers.loseUI = new ResultUI(false);
layers.shareUI = new ShareUI();
由引擎提供的cc.Scene.extend方法，让js能实现高级面向对象语言的继承特性。 onEnter方法是场景初始化完成即将展示的消息回调，在onEnter中必须调用this._super();来确保Scene被正确的初始化。
整个游戏的设计只有一个scene，界面之间的切换由layer来实现，这可能不是一个最优的设计，但也提供另一种思路。 为了用layer来实现切换，全局变量layers存储了各层的一个实例。
GameLayer我们在下一章节中详细讲解。
StartUI的实现如下：
&pre class="brush: toolbar: auto-links:"&
var StartUI = cc.Layer.extend({
ctor : function () {
this._super();
var start = new cc.Sprite(res.start);
start.x = cc.winSize.width/2;
start.y = cc.winSize.height/2 + 20;
this.addChild(start);
onEnter : function () {
this._super();
cc.eventManager.addListener({
event: cc.EventListener.TOUCH_ALL_AT_ONCE,
onTouchesEnded: function (touches, event) {
var touch =
var pos = touch.getLocation();
if (pos.y & cc.winSize.height/3) {
layers.game.initGame();
layers.startUI.removeFromParent();
cc.Layer.extend作用同cc.Scene.extend一样，只不过是一个扩展Scene，一个扩展Layer。ctor是Cocos2d-JS中的构造函数，在ctor中必须调用this._super();以确保正确的初始化。
在onEnter中，我们为StartUI层绑定事件监听，判断触摸点的位置坐标来触发scene切换。
细心的读者可能要问，为什么不用Menu控件？ 当前的Cocos2d-JS版本已实现模块化，可以选择只加载游戏中用到的模块，已减少最终打包size。 为了不加入Menu模块，这里使用了最简单的触摸点坐标判断来实现通用的事情。
游戏界面的实现
橙色块的初始化
游戏地图区域是由9*9的六边形方块组成的，首先用InActive的图片初始化一边矩阵。相关代码如下：
var ox = x = y = 0, odd = false, block, tex = this.batch.
for (var r = 0; r & ROW; r++) {
y = BLOCK_YREGION *
ox = odd * OFFSET_ODD;
for (var c = 0; c & COL; c++) {
x = ox + BLOCK_XREGION *
block = new cc.Sprite(tex, BLOCK2_RECT);
block.attr({
anchorX : 0,
anchorY : 0,
width : BLOCK_W,
height : BLOCK_H
this.batch.addChild(block);
每次循环odd改变，已实现上下错位的排布。 attr是Node基类的新方法，可以方便的一次性设置多个属性。
橙色方块的初始化是由initGame函数来完成。 先来看initGame的实现：
&pre class="brush: toolbar: auto-links:"&
initGame : function() {
if (this.inited)
this.player_c = this.player_r = 4;
this.step = 0;
for (var i = 0, l = this.active_nodes. i & i++) {
this.active_nodes.removeFromParent();
this.active_nodes = ];
for (var r = 0; r & ROW; r++) {
for (var c = 0; c & COL; c++) {
this.active_blocks =
this.randomBlocks();
this.player.attr({
anchorX : 0.5,
anchorY : 0,
x : OFFSET_X + BLOCK_XREGION * this.player_c + BLOCK_W/2,
y : OFFSET_Y + BLOCK_YREGION * this.player_r - 5
this.player.stopAllActions();
this.player.runAction(this.moving_action);
this.inited =
要点解析如下：
为了方便逻辑处理，这里用了active_nodes和active_blocks来记录被激活的方块。在初始化矩阵前，需要清理上一次游戏已生成的橙色方块。active_nodes存储精灵实例，active_blocks记录精灵的矩阵坐标。randomBlocks函数生成随机橙色砖块。 首先产生一个7-20的随机数，也就是确定橙色块的数量。然后循环确定每一个块的位置坐标，当然位置坐标也是随机确定的。复位小羊驼的位置以及动画。
响应触摸事件
按照我们之前的分析，游戏界面初始化完成后，需要等待用户指令才能进行下一步的游戏。
相关代码如下：
cc.eventManager.addListener({
event: cc.EventListener.TOUCH_ALL_AT_ONCE,
onTouchesBegan: function (touches, event) {
var touch =
var pos = touch.getLocation();
var target = event.getCurrentTarget();
if (!target.inited)
pos.y -= OFFSET_Y;
var r = Math.floor(pos.y / BLOCK_YREGION);
pos.x -= OFFSET_X + (r%2==1) * OFFSET_ODD;
var c = Math.floor(pos.x / BLOCK_XREGION);
if (c &= 0 && r &= 0 && c & COL && r & ROW) {
if (target.activateBlock(r, c)) {
target.step ++;
target.movePlayer();
cc.eventManager.addListener加入新的事件监听。
设置事件监听模式为TOUCH_ALL_AT_ONCE。
重写onTouchesBegan方法，判断触摸点的坐标，确定是哪个块被点击，并做响应的处理。 activateBlock方法在对应的矩阵位置加入橙色块，并更新状态数组。然后调用movePlayer移动小羊驼。
羊驼的移动
整个逻辑的关键是AI.js中的getDistance函数，
getDistance有6个参数：
羊驼所在行号
羊驼所在列号
前进方向，l_choices、r_choices、t_choices或b_choices
激活块的记录数组
辅助记录表，记录在寻路算法中某个节点是不是已经被访问过。
返回值有三种情况：
羊驼到达地图边界，返回羊驼坐标和最短路径0
羊驼还在地图中，返回羊驼的下一个坐标值和最短路径cost
-1表示羊驼被圈住了，但可能可以移动。
getDistance的代码实现如下：
&pre class="brush: toolbar: auto-links:"&
var getDistance = function (r, c, dir_choices, activate_blocs, passed, cost) {
if (r &= 0 || r &= ROW_MINUS_1 || c &= 0 || c &= COL_MINUS_1) {
var odd = (r % 2 == 1) ? 1 : 0;
var choices = dir_
var nextr, nextc,
for (var i = 0, l = choices. i & i++) {
nextr = r +
nextc = c +
if (!activate_blocs && !passed) {
result = getDistance(nextr, nextc, dir_choices, activate_blocs, passed, cost);
if (result != -1) {
return -1;
在羊驼移动函数movePlayer中，首先通过getDistance来判断上下左右4个方向，来寻找最佳移动方向。根据getDistance的返回结果做相应的逻辑处理。
游戏结束界面
游戏结束的两种情况，玩家胜利或失败。
在ResultUI的构造函数中，加入参数win，用来标识是否胜利。而胜利和失败仅仅是显示文字的区别，下方的两个按钮均一样。
在ctor中，根据是否胜利加载不同的图片来显示：
ctor : function (win) {
this._super();
this.win =
if (win) {
this.winPanel = new cc.Sprite(res.succeed);
this.winPanel.x = cc.winSize.width/2;
this.winPanel.anchorY = 0.2;
this.winPanel.y = cc.winSize.height/2;
this.addChild(this.winPanel);
this.losePanel = new cc.Sprite(res.failed);
this.losePanel.x = cc.winSize.width/2;
this.losePanel.anchorY = 0.2;
this.losePanel.y = cc.winSize.height/2;
this.addChild(this.losePanel);
在onEnter中，根据是否胜利加载不同的文字描述：
&pre class="brush: toolbar: auto-links:"&
if (this.win) {
this.winPanel.removeAllChildren();
var w = this.winPanel.width, h = this.winPanel.
var label = new cc.LabelTTF("继续刷屏！\n"+step+"步推倒我的小羊驼\n打败"+percent+"%朋友圈的人！\n你能超过我吗？", "宋体", 20);
label.x = w/2;
label.y = h/4;
label.textAlign = cc.LabelTTF.TEXT_ALIGNMENT_CENTER;
//label.boundingWidth =
label.width =
label.color = cc.color(0, 0, 0);
this.winPanel.addChild(label);
this.losePanel.removeAllChildren();
var w = this.losePanel.width, h = this.losePanel.
label = new cc.LabelTTF("我滴小羊驼呀它又跑掉了\nT_T 快帮我抓回来！", "宋体", 20);
label.x = w/2;
label.y = h/4+5;
label.textAlign = cc.LabelTTF.TEXT_ALIGNMENT_CENTER;
//label.boundingWidth =
label.width =
label.color = cc.color(0, 0, 0);
this.losePanel.addChild(label, 10);
"通知好友"按钮加载shareUI层，这个层其实是一个帮助指导界面，指示用户点击微信右上角的分享按钮进行分享。gameScene.addChild(layers.shareUI, 100);target.win ? share(1, step, percent) : share(2);
"再来一次"实现很简单，调用initGame重新初始化矩阵，并移除ResultUI层。
&pre class="brush: toolbar: auto-links:"&
layers.game.initGame();
target.win ? layers.winUI.removeFromParent() : layers.loseUI.removeFromParent();
分享指导界面
在游戏结束界面我们加入了分享按钮。现在我们就来实现分享界面。
分享界面由分享图标和分享说明组成。这和前面的layer创建一样。很简单，唯一的区别是，分享界面是cc.LayerColor(cc.LayerColor支持设置层的颜色)的子类。下面是实现代码：
ctor: function () {
this._super(cc.color(0, 0, 0, 188), cc.winSize.width, cc.winSize.height);
var arrow = new cc.Sprite(res.arrow);
arrow.anchorX = 1;
arrow.anchorY = 1;
arrow.x = cc.winSize.width - 15;
arrow.y = cc.winSize.height - 5;
this.addChild(arrow);
var label = new cc.LabelTTF("请点击右上角的菜单按钮\n再点\"分享到朋友圈\"\n让好友们挑战你的分数！", "宋体", 20, cc.size(cc.winSize.width*0.7, 250), cc.TEXT_ALIGNMENT_CENTER);
label.x = cc.winSize.width/2;
label.y = cc.winSize.height - 100;
label.anchorY = 1;
this.addChild(label);
加入touch事件用于移除分享界面：
&pre class="brush: toolbar: auto-links:"&
onEnter: function () {
this._super();
cc.eventManager.addListener({
event: cc.EventListener.TOUCH_ONE_BY_ONE,
onTouchBegan: function (touch, event) {
layers.shareUI.removeFromParent();
我们需要的功能：
分享到微信朋友圈
分享给微信好友
分享到腾讯微博
关注指定用户实现方式
本功能已经有大神提供了完整的库，地址是：https://github.com/zxlie/WeixinApi ，以下我们做一个简单的使用分析。
注：除特殊说明外，本小节实现均在文件 WeixinApi.js中。现在我们实现的分享有，发给指定朋友，分享到朋友圈，分享到腾讯微博。对于不同的分享方式，实现方式大同小异，我们主要以分享到朋友圈为例。
我们分享的时候需要的数据有：appid，图片，链接，标题，文字内容，例如：
对应在代码中就需要以下数据："appid":theData.appId ? theData.appId : '',"img_url":theData.imgUrl,"link":theData.link,"desc":theData.desc,"title":theData.title, // 注意这里要分享出去的内容是desc
为了得到数据，我们需要在GameScene.js中实现ResultUI的时候，将以上数据生成出来。 比如胜利时，我们需要显示：
var label = new cc.LabelTTF("继续刷屏！\n"+step+"步推倒我的小羊驼\n打败"+percent+"%朋友圈的人！\n你能超过我吗？", "宋体", 20);
完成数据后，我们需要判断胜利或失败，并传回ui中显示：
&pre class="brush: toolbar: auto-links:"&
target.win ? share(1, step, percent) : share(2);
为了监测分享的状态，无论分享成功与否我们回调都会上报状态，以便程序处理，我们需要的状态有：
用户取消分享分享失败分享成功 所以我们需要以下实现：function (resp) {
switch (resp.err_msg) {
// share_timeline:cancel 用户取消
case 'share_timeline:cancel':
callbacks.cancel && callbacks.cancel(resp);
// share_timeline:fail 发送失败
case 'share_timeline:fail':
callbacks.fail && callbacks.fail(resp);
// share_timeline:confirm 发送成功
case 'share_timeline:confirm':
case 'share_timeline:ok':
callbacks.confirm && callbacks.confirm(resp);
// 无论成功失败都会执行的回调
callbacks.all && callbacks.all(resp);}WeixinJSBridge
在微信上，通过公众平台推送给用户的文章，是在微信内部直接打开的，用的无外乎就是一个UIWebView控件（IOS上，Android上也差不多）。但特殊的是，微信官方在这里面加了一个默认的Js API--WeixinJSBridge，通过它，能直接在该页面上做分享操作。 以下代码，拿去玩吧：
&pre class="brush: toolbar: auto-links:"&
WeixinJSBridge.on('menu:share:timeline', function (argv) {
if (callbacks.async && callbacks.ready) {
window"_wx_loadedCb_"] = callbacks.dataLoaded || new Function();
if(window"_wx_loadedCb_"].toString().indexOf("_wx_loadedCb_") & 0) {
window"_wx_loadedCb_"] = new Function();
callbacks.dataLoaded = function (newData) {
window"_wx_loadedCb_"](newData);
shareTimeline(newData);
// 然后就绪
callbacks.ready && callbacks.ready(argv);
// 就绪状态
callbacks.ready && callbacks.ready(argv);
shareTimeline(data);
最后，赶紧写点诱惑的东东，让用户分享出去吧，这是微信病毒传播的乐趣！
你可以在这里获取本教程的https://github.com/chukong/cocos-docs/blob/master/tutorial/framework/html5/how-to-make-a-cat-game/res/yangtuo.zip全部源码
11:53:26 UTC
12:05:53 UTC
微信浏览器调用的是系统的webkit内核，在cpu弱、系统版本不高的情况（尤其是android）帧率不高，但类似这种少动作的游戏体验很不错。
egret引擎跑复杂一点的游戏，低配手机微信浏览器基本也没法跑。
12:15:29 UTC
这个如何盈利呢？
03:10:28 UTC
算法有问题，形成下面这种情况时，也算是被围住，其实是可以绕出来的
07:26:08 UTC
14:57:52 UTC
如何和支付宝对接支付呢？
03:44:46 UTC
厉害啊，学习一下
08:28:17 UTC
想问下， v3.0RC1 这个版本怎么下载...官网只有rc0。。。
10:51:32 UTC
8月8日左右会发布RC2版本，修改大量的bug，加入facebook sdk支持，升级cocos studio的版本支持，现在还在做稳定性测试。
如果中文站找不到，可以到英文站找下载资源：http://www.cocos2d-x.org/download
01:48:12 UTC
为什么源码下载不了啊。。。
09:47:43 UTC
运行出现报错: GameScene.js:116:TypeError: this.blocks.bake is not a function
楼主好像不是用code ide开发的吧, 我是把下载的源码添加到 cocos-code-ide-win32-1.0.0-rc1 建立的新项目中的.
有谁用code ide运行成功的吗?
04:01:24 UTC
楼主你好，为什么你GameScene.js代码中的share(1， step, percent)能直接使用，我用了之后提示没有定义，但是我在html里面已经写，我看你在js里面也没其他地方调用这个方法，难道js能直接找到html里面的内容吗，可是为什么我的不行。。。
09:47:57 UTC
可以自己做个小游戏的放到别人的平台上打百度联盟的广告就可以盈利了 我以前就做了放到vyougame这个微信公众号上他们说还可以提供服务器
你可以问问
14:13:56 UTC
我也遇到这样的问题，请问你是怎么解决的？
14:15:02 UTC
楼主你好，为什么你GameScene.js代码中的share(1， step, percent)能直接使用，我用了之后提示没有定义，但是我在html里面已经写，我看你在js里面也没其他地方调用这个方法，难道js能直接找到html里面的内容吗，可是为什么我的不行。。。
15:18:02 UTC
太好了，看了您的教程，对cocos2d-js有了进一步的了解！
03:17:26 UTC
我也遇到了share没定义这种情况，请版主详细说一下吧！谢谢！
02:01:29 UTC