cocos2d-js-v3.0-rc0 下 pomelo-cocos2d-jsb native web 配置

一。基本步骤

注意：pomelo-cocos2d-jsb 没有用 https://github.com/NetEase/pomelo-cocos2d-jsb，原因这个不是最新版，另外，component根文件没有
pomelo-cocos2d-jsb 用的是 https://github.com/NetEase/chatofpomelo-websocket/tree/master/web-server/public/js/lib
这个是最新版，另外可以更新

具体步骤：

1.1下载zip文件

wget https://github.com/NetEase/chatofpomelo-websocket/archive/master.zip
1.2 拷贝lib目录下所有文件及目录到src/pomelo-cocos2d-jsb目录下

1.3 更新文件

component install -f && component build -v

1.4 建立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/components/component-emitter/index.js');

window.EventEmitter = Emitter;

require('src/pomelo-cocos2d-jsb/components/netease-pomelo-protocol/lib/protocol.js');

require('src/pomelo-cocos2d-jsb/components/pomelonode-pomelo-protobuf/lib/client/protobuf.js');

require('src/pomelo-cocos2d-jsb/components/pomelonode-pomelo-jsclient-websocket/lib/pomelo-client.js');

看一下具体的目录结构



二。native 平台 相关配置：

2.1 修改project.json文件，增加"src/pomelo-cocos2d-jsb/index.js"

注意，这个文件的调用顺序也很重要，app.js是要用到“src/pomelo-cocos2d-jsb/index.js”的



2.2 看看app.js里面怎么调用的

var pomelo = window.pomelo;

var HelloWorldLayer = cc.Layer.extend({
sprite:null,
ctor:function () {
//////////////////////////////
// 1. super init first
this._super();

this.connect2svr();
/////////////////////////////
// 2. add a menu item with "X" image, which is clicked to quit the program
// you may modify it.
// ask director the window size
var size = cc.director.getWinSize();

// add a "close" icon to exit the progress. it's an autorelease object
var closeItem = cc.MenuItemImage.create(
res.CloseNormal_png,
res.CloseSelected_png,
function () {
cc.log("Menu is clicked!");
}, this);
closeItem.attr({
x: size.width - 20,
y: 20,
anchorX: 0.5,
anchorY: 0.5
});

var menu = cc.Menu.create(closeItem);
menu.x = 0;
menu.y = 0;
this.addChild(menu,
1);

/////////////////////////////
// 3. add your codes below...
// add a label shows "Hello World"
// create and initialize a label
var helloLabel = cc.LabelTTF.create("Hello World","Arial",38);
// position the label on the center of the screen
helloLabel.x = size.width / 2;
helloLabel.y = 0;
// add the label as a child to this layer
this.addChild(helloLabel,
5);

// add "HelloWorld" splash screen"
this.sprite = cc.Sprite.create(res.HelloWorld_png);
//this.sprite = cc.Sprite.create(grassPNG);

this.sprite.attr({
x: size.width / 2,
y: size.height / 2,
scale: 0.5,
rotation: 180
});
this.addChild(this.sprite,0);

var rotateToA = cc.RotateTo.create(2,0);
var scaleToA = cc.ScaleTo.create(2,1,1);

this.sprite.runAction(cc.Sequence.create(rotateToA, scaleToA));
helloLabel.runAction(cc.Spawn.create(cc.MoveBy.create(2.5, cc.p(0, size.height -40)),cc.TintTo.create(2.5,255,125,0)));
return true;
},
connect2svr: function() {
pomelo.init({
host: '127.0.0.1',
port: 3014,
log: true
}, function() {
var route ='gate.gateHandler.queryEntry';
pomelo.request(route, {}, function(data) {
pomelo.disconnect();
pomelo.init({
host: data.host,
port: data.port,
log: true
}, function() {});
});
});
},

loginSvr: function() {
var self = this;
var gPlayerName = 'name';
var password = 'pass';
password = md5(password);

//self.mTips.setString('');

route = "connector.entryHandler.loginSvr";
pomelo.request(route, {
playerName: gPlayerName,
password: password
}, function(data) {
if(data.ret) {
//gPlayerId = data.playerId;
//var nextScene = cc.Scene.create();
//gGameLobbyLayer = new GameLobbyLayer();
//nextScene.addChild(gGameLobbyLayer);
//cc.Director.getInstance().replaceScene(cc.TransitionSlideInR.create(1, nextScene));
} else {
//self.mTips.setString('密码错误');
}
});
}
});

var HelloWorldScene = cc.Scene.extend({
onEnter:function () {
this._super();
var layer = new HelloWorldLayer();
this.addChild(layer);
}
});
2.3 看看运行的日志





三。web的配置

3.1 修改project.json文件，去掉 "src/pomelo-cocos2d-jsb/index.js" 这行



3.2 修改根目录下的index.html 文件

改为

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Cocos2d-html5 Hello World test</title>

<link rel="icon" type="image/GIF" href="res/favicon.ico"/>

<meta name="apple-mobile-web-app-capable" content="yes"/>

<meta name="full-screen" content="yes"/>

<meta name="screen-orientation" content="portrait"/>

<meta name="x5-fullscreen" content="true"/>

<meta name="360-fullscreen" content="true"/>

<style>

body, canvas, div {

-moz-user-select: none;

-webkit-user-select: none;

-ms-user-select: none;

-khtml-user-select: none;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

</style>

</head>

<body style="padding:0; margin: 0; background: #000;">

<canvas id="gameCanvas" width="800" height="450"></canvas>

<script src="frameworks/cocos2d-html5/CCBoot.js"></script>

<script src="src/pomelo-cocos2d-jsb/build/build.js"></script>

<script type="text/javascript">

require('boot');

</script>

<script src="main.js"></script>

</body>

注意： script的调用顺序非常重要，不能变动，因为有之间的调用顺序关系

3.3 运行的效果