首页 > 代码库 > cocos2d-js-v3.0-rc0 下 pomelo-cocos2d-jsb native web 配置
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=http://www.mamicode.com/"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=http://www.mamicode.com/"frameworks/cocos2d-html5/CCBoot.js"></script>
<script src=http://www.mamicode.com/"src/pomelo-cocos2d-jsb/build/build.js"></script>
<script type="text/javascript">
require(‘boot‘);
</script>
<script src=http://www.mamicode.com/"main.js"></script>
</body>
注意： script的调用顺序非常重要，不能变动，因为有之间的调用顺序关系
3.3 运行的效果
