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('password错误');

                    }

                    });

     }

});


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 执行的效果





昵    称:
验证码:

相关文档:

  • Html5 Geolocation 地理定位
    HTML5 Geolocation(地理定位)用于定位用户的位置。HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。...
  • html5生成玫瑰
    <!DOCTYPEhtml> <html> <head> <title>Rose</title> <metacharset="utf-8"/> </head> <body> <canvasid=...
  • 大熊君学习html5系列之------Online && Offline(在线状态检测)
    一,开篇分析 Hi,大家好,给大家拜个晚年!大熊君又和大家见面了,(*^__^*)嘻嘻……,这系列文章主要是学习Html5相关的知识点...
  • HTML5的JavaScript选择器介绍
    在HTML5出现之前使用JavaScript查找DOM元素,有以下三种原生的方法: getElementById:根据指定元素的id属性返回元素 getElementsByName:返回所有...
  • 封装Html5 Fullscreen API
    复制前言: 使用新的全屏API,可以将用户的注意力导向特定元素,同时隐藏背景或转移对其他应用的注意力。因为W3C全屏规范还未达到...
  • 大熊君学习html5系列之------History API(SPA单页应用的必备)
    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*)嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点...
  • html5 localStorage and sessionStorage
    <!doctypehtml> <html> <head> <metacharset="utf-8"/> <scripttype="text/javascript"src="http://localhost/jquery/jquery.js"&g...
  • 4款基于html5 canvas充满想象力的重力特效
    今天给大家分享4个物理和重力实验,用来展示htmlcanvas的强大。几年前,所有这些实验都必须使用Java或Flash才能做。在下面这些惊人的例...
  • [html5/css3]html5的新增主体结构元素
    <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>html5的新增主体结构元素</title> </head> <body> <!...
  • HTML5之图形变换
    -Transformations scale(0.5,0.5)缩放rotate(0.175) 旋转translate(100,50) 位移 -代码结构 context.scale(x,y) context.rotate(angle) context.translate(x,y) context...
  • Html5新表单属性详解
    HTML5新增加了表单属性,本章讲解涉及
    元素的新属性。新的 form 属性:autocomplet,novalidate...
  • HTML5(。。。。不完整)
    <!DOCTYPEhtml>不区分大小写 <header>、<nav>、<article>、<section>、<sidebar>、<footer> <datalist> <inputlist="...
  • html5判断用户摇晃了手机(转)
    先来看下html5的这几个特性: 1.deviceOrientation:方向传感器数据的事件,通过监听该事件可以获取手机静态状态下的方向数据; 2.deviceMoti...
  • (转)Phonegap VS AppCan
    简介 Phonegap PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone,Android,...
  • Html5 reset表 2015年1月7日15:02:14
    /* HTML5Reset::style.css ---------------------------------------------------------- Wehavelearnedmuchfrom/beeninspiredby/takencodewhereofferedfrom:...
  • HTML5之缓存
    -----缓存文件 -使用UTF-8编码-以CacheManifest开头-三个基本部分 CACHEMANIFESTmenu.htmlmenu.js#loginrequiresnetworkconnectionNETWORK:login.phpFALLBACK://menu.htmlCACH...
  • 【html 及 HTML5所有标签汇总】★★★
    /****************************************************************************/【HTML5所有标签汇总】★★★/*******************************************************...
  • [html5/css3] html5 Web Socket
    一个WebSocket的简单Echo例子:例子代码来自:http://www.websocket.org/echo.html 使用一个文本编辑器,把下面代码复制保存在一个websocket.html文件...
  • html5 学习 关于数据库的学习---言简意赅 jquery、html、css、web
    http://www.w3school.com.cn/jquerymobile/index.asp...
  • html5匹配不同分辨率样式
    .abc{height:300px;border:1pxsolid#000;margin:0auto} @mediascreenand(min-width:1201px){ .abc{width:1200px} } /*设置了浏览器宽度不小于1201px时abc显示1200px宽度*/ @med...