cocos2d-js 3.0 beta + cocos code ide + pomelo手游框架搭建

Cocos2d-x JavaScript
#1

在文章的开始，需要说明一下，有些东西写得不会很细，需要你摸索一下

1.准备工作

cocos2d-js 3.0 beta 下载地址 http://www.cocos2d-x.org/filedown/cocos2d-js-v3.0-beta.zip
cocos code ide 下载地址 https://github.com/chukong/cocos-docs/blob/master/manual/studio/cocos-code-ide/getting-started/zh.md(这是入门指南，里面有下载地址)
virtualbox 下载地址 https://www.virtualbox.org/wiki/Downloads (根据自己的系统下对应的版本)

2.配置cocos code ide使用cocos2d-js 3.0 beta
https://github.com/chukong/cocos-docs/blob/master/manual/studio/cocos-code-ide/debug-js/zh.md

3.在virtualbox安装centos6.5

这个步骤要写的话很长，只能靠百度和google了
最后配置一下centos的ip为 192.168.1.112 (这个IP看你想配哪个，不需要和我相同)

4.下载pomelo的聊天项目

下载地址 https://github.com/bearcatnode/chatofpomelo-websocket

本文路径是 /home/pomelo
1.打开网页,点击download zip后会下载一个master.zip文件，解压出来
进入解压出来的chatofpomelo-websocket-master目录，执行sh npm-install.sh

2.执行脚本会下载一些node.js包回来，由于***原因，大家懂的，有时会下不了国外的包，这个需要使用node.js镜像

    3.编辑game-server/config/servers.json这个配置文件，把里面的127.0.0.1全部改为centos虚拟机的ip     192.168.1.112


   4.cd /home/pomelo/chatofpomelo-websocket-master/game-server 之后 再执行 pomelo start即可启动服务端

5.配置cocos2d-js 3.0 使用 pomelo-cocos2d-jsb

下载地址 https://github.com/NetEase/pomelo-cocos2d-jsb

下载回来后，解压出来放到工程的src目录下

由于想使用cocos-js的热更新，所以我改了一下pomelo-cocos2d-jsb的路径

QQ截图20140617155141.png721×172

如上图，pomelo-cocos2d-jsb目录下的index.js文件没有src/开头的，我加了src开头，这样才能找到对应的文件

 <img title = 'QQ截图20140617161048.png' src='http://cdn.cocimg.com/bbs/attachment/Fid_59/59_290529_12cf3a7025d8ecc.png' >

之后在project.json里面的jslist加上"src/pomelo-cocos2d-jsb/index.js"

6.生成cocos code ide工程的win32 build runtime

在工程名上右键，cocos tools,build runtime, next , build win32 runtime 这个过程会有点久，可能要10分钟，耐心等待吧

QQ截图20140617161828.png800×640

之后需要配置一下run configurations,弹出上图后，点win32的浏览，有个prebuiltRuntimeJs.exe,不要选这个，选你生成的那个exe

7.连接pomelo服务端

按照pomelo的例子，在src/app.js最前面加上下面一段代码

var pomelo = window.pomelo;

var route = 'gate.gateHandler.queryEntry';
var uid = "uid";
var rid = "rid";
var username = "username";

pomelo.init({
    host: "192.168.1.112",
    port: 3014,
    log: true
}, function() {
    pomelo.request(route, {
        uid: uid
    }, function(data) {
        pomelo.disconnect();
        pomelo.init({
            host: data.host,
            port: data.port,
            log: true
        }, function() {
            var route = "connector.entryHandler.enter";
            pomelo.request(route, {
                username: username,
                rid: rid
            }, function(data) {
                cc.log(JSON.stringify(data));
                chatSend();
            });
        });
    });
});

function chatSend() {
    var route = "chat.chatHandler.send";
    var target = "*";
    var msg = "msg"
        pomelo.request(route, {
            rid: rid,
            content: msg,
            from: username,
            target: target
        }, function(data) {
            cc.log(JSON.stringify(data));
        });
}

只需要改一下那个host : "192.168.1.112"就可以运行了

为了看到效果，cd /home/pomelo/chatofpomelo-websocket-master/web-server 之后node app.js打开网页客户端

在浏览器中打开http://192.168.1.112:3001/ 用户名可以随便填，channel这个地方要填rid(为了看效果)

这里运行一下工程，如果在网页中看到username says to all: msg 说明连接pomelo成功

8.cocos2d-js 3.0 beta客户端热更新

1.先下一个web服务器软件，下载地址 http://zyan.cc/post/373/ ,下载回来启动web服务器

2.解压ass.rar里面的配置出来放在web服务器的www/htdocs目录下，这样就能通过网页访问到要更新的配置文件

3.在工程的src目录创建一个version目录，然后把project.manifest文件放进去，这个文件我的ip是192.168.1.250,改为你机器的ip

4.app.js的更新代码也在压缩包里面，覆盖你的app.js即可运行

5.在你的工程目录下runtime/win32/hotupload如果看到热更新回来的文件，说明ok了

6.需要注意的地方，现在还不支持压缩文件热更新（不过听说快了),还有一点，记得把你的js代码文件加密，使用的命令是cocos jscompile 加密js文件

7.想热更新哪个文件或图版时，把更新的文件图片放在web服务器上，改一下project.manifest的version值，和对应文件图片的md5的值，和之前不相同即可更新

9.pomelo的代码热更新

http://nodejs.netease.com/topic/538d94eebf23dba73491b286 这个就不细说了，按文档尝试就行

当你想搞一个手游，如果你用lua,后端好像没有lua对应的服务端框架，你需要开发服务端，前后不统一，成本和时间都会很高，

如果你前端用cocos2d-js,后端pomelo，你都可以用js一个人搞定，还可以热更新代码，，，，，赶快尝试吧

#2

顶楼主，我们也在用pomelo

#3

顶楼主，太赞了

#4

通报下热更新的进展：已经全部进入收尾了，有提供压缩文件格式支持，支持按照文件总大小显示进度，支持文件级别和文件内部的断点续传。

会同时提供使用文档和测试例。当然，我觉得测试例没有楼主你的来的震撼、给力。

#5

确实不错 非常感谢楼主

#6

正发愁怎么加入pomelo,谢谢

#7

src/pomelo-cocos2d-jsb/lib/pomelo-jsclient-websocket/lib/pomelo-client.js:200:ReferenceError: WebSocket is not defined

#8

cocos2d-js 3.0 beta默认已经开了websocket,你可能是用了之前的版本，之前那些都没开websocket,也有可能是cocos code ide没有选中新的build runtime的那个exe

#9

连接到game_server了。原来版本是用的cocos2d-js-v3.0-alpha2 现在用beta

JS: connect to ws://192.168.1.123:3014
JS: socket close:
JS: disconnect
JS: connect to ws://192.168.1.123:3052
JS: {“users”:“username”]}
JS: {}

#10

太赞了楼主，你让我困扰两天的问题一下就找到了头绪。太感谢了！！
还有两个问题：
1.app.js的更新代码也在压缩包里面，覆盖你的app.js即可运行. 在ass.rar里面没找到app.js…重新发一下好么。多谢
2.记得把你的js代码文件加密，使用的命令是cocos jscompile 加密js文件.可以介绍下如何加密吗？我尝试 cocos jscompile -s ./ -d ./src_jsc 失败了…

#11

lin sir 打包加密压缩等功能能不能集成到 cocos ide里面去？ 这样就爽歪歪了

#12

pomelo-cocos2d-jsb中的index.js 修改如下

var window = window || {};
var module = module || {};
module.exports = {};

var console = cc;
console.error = cc.log;

var setTimeout = function(fn, interval) {
var instance = cc.Director.getInstance();
var scene = instance.getRunningScene();

instance.getScheduler().
    scheduleCallbackForTarget(scene, fn, interval, 1, 0, false);
return scene;

}

var clearTimeout = function(target) {
var instance = cc.Director.getInstance();
instance.getScheduler().unscheduleAllCallbacksForTarget(target);
}

window.setTimeout = setTimeout;
window.clearTimeout = clearTimeout;

require(‘src/pomelo-cocos2d-jsb/lib/emitter/index.js’);

window.EventEmitter = Emitter;

require(‘src/pomelo-cocos2d-jsb/lib/pomelo-protocol/lib/protocol.js’);

require(‘src/pomelo-cocos2d-jsb/lib/pomelo-protobuf/lib/client/protobuf.js’);

require(‘src/pomelo-cocos2d-jsb/lib/pomelo-jsclient-websocket/lib/pomelo-client.js’);

=======================================================

一直提示
app.js:6:TypeError: pomelo is undefined

#13

1.之前重新弄了一下那个压缩包，可能没发现少了app.js，现在重发了，不好意思，呵呵

2.加密js文件，先把所有js文件放在一个目录，例如我现在把所有js文件放在c盘的jsfile目录，打一条下面命令即可加密所有的js文件
cocos jscompile -s c:/jsfile -d c:/jsfile

#14

可能你把pomelo的客户端放错位置，放在src目录，再修改一下index.js即可

#15

mark！楼主威武

#16

hi,感谢楼主分享。我遇到一点问题！
我使用地是cocos2d-js 3.0 rc0 + chatofpomelo-websocket，就没有使用virtualbox这些了。直接在本机上。
我按照你的配置一直没成功过。
用webstorm调试发现如下错误。

Uncaught ReferenceError: require is not defined
(anonymous function) index.js:25
Uncaught TypeError: Cannot read property ‘init’ of undefined
(anonymous function) app.js:8
Uncaught RangeError: Maximum call stack size exceeded

#17

混个熟练，每天坚持学习

#18

这个需要学习哦

#19

楼主，按照你的步骤，出现
JS: connect to ws://127.0.0.1:3014
_host: 127.0.0.1, _port: 3014, _path: /
JS: socket error:
JS: socket close:

错误。这个原因在哪啊？求救

#20

连到127.0.0.1了，修改一下连接的ip即可

http://nodejs.netease.com/topic/53cdffb3898634292cedb312 这篇文章是pomelo出的最新文档，可以对照看看