精华内容
下载资源
问答
  • CocosCreator

    千次阅读 2017-11-16 22:09:03
    由于cocos舍弃了cocostudio,需要关注官方推荐的creator了...2 CocosCreator + 从零开始(15楼) - CocoaChi… http://www.cocoachina.com/bbs/3g/read.php?tid=460272 新编辑器Cocos Creator发布:对不起我来晚了!

    由于cocos舍弃了cocostudio,需要关注官方推荐的creator了。
    1 creator实现了:脚本化(jS开发), 组件化, 数据驱动器。
    2 CocosCreator + 从零开始(15楼) - CocoaChi…
    http://www.cocoachina.com/bbs/3g/read.php?tid=460272
    新编辑器Cocos Creator发布:对不起我来晚了!–
    学无止境的专栏 博客-- http://blog.csdn.net/dingxiaowei2013/article/details/50551900
    cocos creator第一个星星游戏 – http://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html
    Cocos Creator跨平台的调用方法 –http://blog.csdn.net/potato47/article/details/68954272 js与Java和OC互调用
    -----------------------注:转载
    1 但是脚本化并不是意味着整个引擎都用脚本来写。Cocos Creator的框架核心仍然是大家熟悉的整个Cocos 2d-x C++引擎,引擎的主循环和绝大多数计算工作都在C++层面完成。只是利用JavaScript bindings绑定出Cocos Creator的JavaScript API。所以大家无需担心性能问题。

    2 为什么在脚本里面选择JavaScript而不是Lua

    1. 无数的大公司,包括Microsoft, Google, Apple, Facebook, Intel等都在大力投入JavaScript的研发上面,但Lua则没有这个生态。JavaScript领域,有node.js,有npm,这些Lua都没有;有Intel的nw.js(node-webkit),有Facebook的React,有Apple和Google鼎力支持的HTML5和WebGL,有Mozilla的asm.js,在桌面跨平台领域有Github的Electron和Atom,有Adobe的Brackets,而我们没有见到上述哪家大公司投入资源大把资源在Lua上,这-是-事-实。请各位老板深思为什么巨头们都做出这样的选择,或者你们觉得自己比这些大公司的决策者更聪明也无妨。

    2. JavaScript可以让游戏跨Native, Runtime, 纯HTML5三种模式,也就是我上文所说的「广义跨平台」,而Lua只能发布前两种。今天腾讯QQ浏览器、QQ空间、QQ游戏大厅已经都开放手机页游接入了,腾讯工作室的《欢乐斗地主》已经发布了基于Cocos Play加速器的手机页游版本。如果哪一天微信或手机QQ开放了 HTML5游戏领域,那时候再来Lua转JavaScript就已经来不及了,各位老板只能面壁哭去了。

    3. Cocos Creator底层选择了Github公司开发的开源项目Electron。而Eletron是Github官方的代码编辑器Atom,以及微软开源项目VS Code所用的底层基础。其实我们很有幸和国际巨头公司做出了同样的架构选择。如我前文所说,当然也不排除未来和VS Code合作、快速提高Creator开发体验的各种可能。

    引用我一个好友对Cocos Creator的评论:「有了这玩意儿我还管什么Lua啊,游戏公司要的就是降低开发成本,管它是什么编程语言」

    3 C++和Lua的死忠粉,希望学一门语言吃一辈子的程序员 —— 不适合。为了Cocos Creator的纯粹,我选择了JavaScript作为引擎、编辑器、游戏逻辑的核心语言。
    4 Cocos Creator开源吗?
    在Cocos Creator里面,得益于高度可扩展的架构设计,对于不涉及核心技术门槛的编辑器组件,我们全部开源奉献给行业。完全开源的部分包括:
    这里写图片描述
    3Label:新增overFlow
    换图片:拖入Sprite sFame
    widget实现屏幕适配
    LayOut实现子节点自动对齐
    4
    组件执行顺序
    遇到问题: 12.1日
    1 mask:是限制Node显示区域的。是组件不是Size属性. ==Studio中Layout裁剪属性
    2 scroView 不显示内容。因为content中没有添加Layout组件/代码中没有设置位置
    4 如何修改Canvas组件设计屏幕尺寸?
    12.2日
    Cocos Creator中获取和加载资源(官方文档摘录)
    Cocos Creator 模块化脚本(摘自官方文档)
    Cocos creator】文件数据读写,用户数据存储
    Cocos creator中出现Uncaught TypeError: Cannot read property ‘node’ of undefined
    1 vsCode修改代码后,依旧执行旧代码。 办法:ctrl+s 刷新编辑器
    2 如何动态从图集中修改图片
    3 函数嵌套报错误: XXX not undefined; 办法:定义一个var self =this; 因为在嵌套this会产生歧义
    https://blog.csdn.net/lipei1220/article/details/39339557
    4 GameLogic类编译报错:声明类用cc.Class使用时要先new。 而var XXX = {}这种不用new直接用
    5 数组[] 从0开始 http://www.jb51.net/article/94050.htm

    1: 2种格式区别
    A var cfg = {
    moveSpeed: 10,
    version: “0.15”,
    showTutorial: true,

    load: function () {
        // …
    }
    

    };
    B var Rotate = cc.Class({。。。}。。
    C function PokerSprite(nValeu, nFlower)
    {
    this.value = nValeu;
    this.flower = nFlower,
    this.add = function(a, b){ return nValeu + nFlower ; //a+b;}
    }
    PokerSprite.prototype.onSum =function(a, b){
    return a+b;
    }
    PokerSprite.onSub = function(a, b){
    return a-b;
    }
    module.exports = PokerSprite;
    (前者A是obj 后者B C是类) 类在使用前要先new
    这里写图片描述这里写图片描述
    这里写图片描述scroview遇到的大坑这里写图片描述这里写图片描述
    这里写图片描述这里写图片描述
    每一个单独的脚本文件就构成一个模块。所有用户代码最终会由 Cocos Creator 编译为原生的 JavaScript,
    var Rotate = require(“Rotate”); require 返回的就是被模块导出的对象,通常我们都会将结果立即存到一个变量(var Rotate),传入 require 的字符串就是文件名,不包含路径也不包含后缀,而且大小写敏感
    ---------------------------不会— 百度 goole 翻API
    12.13. 菊花弹框 手动绑定事件/post发射事件/开始按钮
    1 _pBtn.active = false;为啥不会隐藏?用btn组件调用node”组件”的函数。。。 children[I]方法 /AlterLayer回调实现null
    2 闭包一般是传到其他的类中执行,或者其他线程. / 非阻塞=-1,设为阻塞模式 就啥都没卡主

    12.9
    1 一般将需要渲染Node都挂在Canvars下-适配 /WebGL(web图形库):是一种JavaScript API;与openGl一样
    2 只有在属性声明时规定type为引用类型时,才能将资源或节点拖拽到该属性检查器上。
    3 update:我们一般把需要经常计算或及时更新的逻辑内容放在这里
    4 事件处理是在节点(cc.Node)中完成的。对于组件,可以通过访问节点 this.node /
    一个节点上只能添加一个渲染组件sp,label 粒子 /Canvas下面Z值大 组件脚本执行顺:上面先执行
    5 创建(cc.instantiate)和销毁(X.destroy)非常耗费性;如大量敌人或子弹.cc.NodePool put/get/szie
    6 bug:node.node./this.getComponent(“”) 脚本组件是绑定在节点上的,先获取到节点-再用该节点获取脚本.
    8 unity用directX(左手Z指向屏幕里) cocos用OpenGL(右手so Z值越大越在前)
    7 if你尝试访问null值,将会在陨石跑出TypeError错误 / js [push/pop/length/下标0] 与 {s.a==s[“a”]}的区别 /(function(){})();如何理解? / 二维数组
    8 使用:预加载All/ this.emptyAtlas.getSpriteFrame(“Res-Face-5“)-是/ /statics 静态方法变量-单列 /(“btn”+j+1)得出“btn01/btn02…” 运算符从左至右的,成了字符串相加 /[]常用函数sort 清空length=0 删除.splice
    .emit/on无需同一node-冒泡派送(子到父不能反) bug:node在隐藏时收不到infor / target节点类型 detail自定义数据 / ProgressBar slider的坑 / command+p @类文件+方法
    9 cc.class()调用cc对象中的class方法 / cc引擎中所有的类,函数,属性和常量都在这个命名空间中定义 / 你匿名函数or{}常常做函数参数 ()=>{}与前者等价. / debug:F9/5/11/10 Log

    切换纹理setTexture和setSpriteFrame;不会goole和查源码
    pushScene(栈/保留状态/占内存/init不走Enter走)
    

    https://zhidao.baidu.com/question/288052936.html
    https://zhidao.baidu.com/question/156291805.html

    12.6
    1 框架支持系统事件包含鼠标、触摸、键盘、重力传感四种;
    鼠标和触摸事件是被直接触发在相关节点上的,被称为节点系统事件。键盘和重力传感事件被称为全局系统事件(与节点树不相关)
    既可以使用枚举类型也可以直接使用事件名来注册. on/off
    2 RPG:
    vt=v0+a 加速度a=*v/*t
    匀变速直线运动:匀加速 匀减速
    竖直上抛运动: 上升过程是匀减速直线运动,下落过程是匀加速直线运动.全过程:是初速度为VO,加速度为g的
    物体做加速(减速)运动的条件是加速度方向与初速度方向相同(相反)
    牛顿第二定律:a=F/m
    位移是表示质点位置的变化的物理量 /路程是指质点所通过的实际轨迹的长度 是标量 /速度:表示质点的运动快慢和方向,是矢量
    3 快速上手:制作第一个游戏 http://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html

    12.1日
    canvas Widget. Layout mask组件。属性size。。
    12.2日
    【Cocos creator】文件数据读写,用户数据存储
    Cocos creator中出现Uncaught TypeError: Cannot read property ‘node’ of undefined
    1 vsCode修改代码后,依旧执行旧代码。 办法:ctrl+s 刷新编辑器
    2 如何动态从图集中修改图片
    3 函数嵌套报错误: XXX not undefined; 办法:定义一个var self =this; 因为在嵌套this会产生歧义


    *文档的缺失,是现在 CCC 最大的问题,但是这也是没有办法的,毕竟这是个时间精力的问题,把有限的精力,放在最重要的工作上,才是正确的选择
    *其实对于一个好的程序员来说,学会看源码是极其基础的能力,你想要的大部分功能,在 CCC自带的源码中,其实已
    经都有,只是你需要自己去寻找
    *现在的 CCC 社区还是十分活跃的,大部分的问题,在这里基本上都能找到答案,毕竟有 cocos 引擎这么多年的用户积累

    展开全文
  • Xamarin.CocosCreator 配套 最新的 平台/功能 包裹名字 稳定 Cocos Creator版本 CocosCreator CocosCreator -- 2.2.0-2.2.2 CocosCreator CocosCreator -- 2.3.0 CocosCreator CocosCreator -- 2.3.3 ...
  • CocosCreator 基础合集

    2018-05-10 15:01:46
    CocosCreator 基础合集 CocosCreator 基础合集CocosCreator 基础合集CocosCreator 基础合集CocosCreator 基础合集CocosCreator 基础合集CocosCreator 基础合集CocosCreator 基础合集CocosCreator 基础合集
  • cocoscreator 翻牌效果

    2018-04-12 11:22:53
    cocoscreator 翻牌效果cocoscreator 翻牌效果cocoscreator 翻牌效果
  • Cocos Creator 官方文档https://www.cocos.com/docs安装配置原生开发环境...

    Cocos Creator 官方文档

    https://www.cocos.com/docs

    安装配置原生开发环境

    https://docs.cocos.com/creator/manual/zh/publish/setup-native-development.html

    JAVA

    https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

    Android Studio

    http://www.android-studio.org/

    NDK

    http://tools.android-studio.org/index.php/sdk/

    SDK

    http://tools.android-studio.org/index.php/sdk/

    ANT

    https://ant.apache.org/bindownload.cgi

    Python 2.7.5+,下载页

    https://www.python.org/downloads/

    点击运行之后如果连接了android手机

    Compile native project successfully.

    Start to run project

    Start to run project. Please wait...

    The log file path [ C:\Users\billy\.CocosCreator\logs\native.log ]

    等一段时间,弹出安装界面,然后就自动运行了

    项目路径\build\jsb-binary[或jsb-default]\frameworks\runtime-src\proj.android\bin内也可以找到apk文件

    展开全文
  • 原标题已改,自觉论据不足支持,有私人埋怨的成分,原文:个人直觉,不一定靠谱,cocos creator 不适合大项目,适合小游戏。性能:既然用 creator,那么考虑到进度,大量逻辑必然用 js ,游戏后期会卡。开发大项目...

    原标题已改,自觉论据不足支持,有私人埋怨的成分,

    原文:

    个人直觉,不一定靠谱,cocos creator 不适合大项目,适合小游戏。

    性能:

    既然用 creator,那么考虑到进度,大量逻辑必然用 js ,游戏后期会卡。

    开发

    大项目需要多人合作,如果出现坑,js 比较难排解。

    看过js的都知道,代码一多,就很无力了。

    风险

    cocos creator 没有足够信心,大项目一旦用了,会有风险,不如 u3d或ue4

    现状

    有些项目,比如棋牌,到后期加班加点,就是因为creator带来了性能问题,但同时难以排解。

    arpg项目,基本还是用 cocos2d-x lua 框架。

    展开全文
  • 编者按本文来自于“Cocos 荣耀讲师”征稿活动第1期,最先发表于 Cocos 中文社区,作者,宝爷。宝爷是光子工作室的开发工程师,谦称...在 Cocos Creator 中发起一个 http 请求是比较简单的,但很多游戏希望能够和服...

    编者按

    本文来自于“Cocos 荣耀讲师”征稿活动第1期,最先发表于 Cocos 中文社区,作者,宝爷。宝爷是光子工作室的开发工程师,谦称自己为一枚码农,是一个热爱游戏、热爱开发、热爱学习并坚持沉淀知识的开发者,曾写过《精通 Cocos2d-x 游戏开发》基础卷与进阶卷,感谢宝爷为社区所做的贡献!

    在 Cocos Creator 中发起一个 http 请求是比较简单的,但很多游戏希望能够和服务器之间保持长连接,以便服务端能够主动向客户端推送消息,而非总是由客户端发起请求,对于实时性要求较高的游戏更是如此。这里我们会设计一个通用的网络框架,可以方便地应用于我们的项目中。

        项目源码

    https://github.com/wyb10a10/cocos_creator_framework本项目在不断完善中,包含 bug修改和代码更新,下文所展示的代码请以源码为准。

       使用websocket

    在实现这个网络框架之前,我们先了解一下 websocket。websocket 是一种基于 tcp 的全双工网络协议,可以让网页创建持久性的连接,进行双向的通讯。在 Cocos Creator 中使用 websocket 既可以用于 H5 网页游戏上,同样支持原生平台 Android 和 iOS。

    构造 websocket 对象

    在使用 websocket 时,第一步应该创建一个 websocket 对象。websocket 对象的构造函数可以传入2个参数,第一个是 url 字符串,第二个是协议字符串或字符串数组,指定了可接受的子协议,服务端需要选择其中的一个返回,才会建立连接,但我们一般用不到。

    url 参数非常重要,主要分为4部分:协议、地址、端口、资源。

    比如 ws://echo.websocket.org:

    • 协议:必选项,默认是 ws 协议,如果需要安全加密则使用 wss。

    • 地址:必选项,可以是 ip 或域名,当然建议使用域名。

    • 端口:可选项,在不指定的情况下,ws 的默认端口为 80,wss 的默认端口为 443。

    • 资源:可选性,一般是跟在域名后某资源路径,我们基本不需要它。

    websocket 的状态

    websocket 有4个状态,可以通过 readyState 属性查询:

    • 0 CONNECTING 尚未建立连接。

    • 1 OPEN WebSocket连接已建立,可以进行通信。

    • 2 CLOSING 连接正在进行关闭握手,或者该close()方法已被调用。

    • 3 CLOSED 连接已关闭。

    websocket 的 API

    websocket 只有2个 API,void send( data ) 发送数据和 void close( code, reason ) 关闭连接。

    send 方法只接收一个参数——即要发送的数据,类型可以是以下4个类型的任意一种:string | ArrayBufferLike | Blob | ArrayBufferView。

    如果要发送的数据是二进制,我们可以通过 websocket 对象的 binaryType 属性来指定二进制的类型,binaryType 只可以被设置为“blob”或“arraybuffer”,默认为“blob”。如果我们要传输的是文件这样较为固定的、用于写入到磁盘的数据,使用 blob。而你希望传输的对象在内存中进行处理则使用较为灵活的 arraybuffer。如果要从其他非 blob 对象和数据构造一个 blob,需要使用 blob 的构造函数。

    在发送数据时,官方有2个建议:

    • 检测 websocket 对象的 readyState 是否为 OPEN,是才进行 send。

    • 检测 websocket 对象的 bufferedAmount 是否为0,是才进行 send(为了避免消息堆积,该属性表示调用 send 后堆积在 websocket 缓冲区的还未真正发送出去的数据长度)。

    close 方法接收2个可选的参数,code 表示错误码,我们应该传入 1000 或 3000~4999 之间的整数,reason 可以用于表示关闭的原因,长度不可超过 123 字节。

    websocket 的回调

    websocket 提供了4个回调函数供我们绑定:

    • onopen:连接成功后调用。

    • onmessage:有消息过来时调用:传入的对象有 data 属性,可能是字符串、blob 或 arraybuffer。

    • onerror:出现网络错误时调用:传入的对象有 data 属性,通常是错误描述的字符串。

    • onclose:连接关闭时调用:传入的对象有 code、reason、wasClean 等属性。

    注意:当网络出错时,会先调用 onerror 再调用 onclose,无论何种原因的连接关闭,onclose 都会被调用。

    Echo 实例

    下面 websocket 官网的 echo demo 的代码,可以将其写入一个 html 文件中并用浏览器打开,打开后会自动创建 websocket 连接,在连接上时主动发送了一条消息“WebSocket rocks”,服务器会将该消息返回,触发 onMessage,将信息打印到屏幕上,然后关闭连接。具体可以参考:http://www.websocket.org/echo.html17 

    默认的 url 前缀是wss,由于 wss 抽风,使用 ws 才可以连接上,如果 ws 也抽风,可以试试连这个地址ws://121.40.165.18:8800,这是国内的一个免费测试 websocket 的网址。

    参考链接

    • https://www.w3.org/TR/websockets/9

    • https://developer.mozilla.org/en-US/docs/Web/API/Blob6

    • http://www.websocket.org/echo.html17

    • http://www.websocket-test.com/2

       设计框架

    一个通用的网络框架,在通用的前提下还需要能够支持各种项目的差异需求,根据经验,常见的需求差异如下:

    • 用户协议差异游戏可能传输 json、protobuf、flatbuffer 或者自定义的二进制协议。

    • 底层协议差异,我们可能使用 websocket、或者微信小游戏的 wx.websocket、甚至在原生平台我们希望使用 tcp/udp/kcp 等协议。

    • 登陆认证流程,在使用长连接之前我们理应进行登陆认证,而不同游戏登陆认证的方式不同。

    • 网络异常处理,比如超时时间是多久,超时后的表现是怎样的,请求时是否应该屏蔽 UI 等待服务器响应,网络断开后表现如何,自动重连还是由玩家点击重连按钮进行重连,重连之后是否重发断网期间的消息?等等这些。

    • 多连接的处理某些游戏可能需要支持多个不同的连接,一般不会超过2个,比如一个主连接负责处理大厅等业务消息,一个战斗连接直接连战斗服务器,或者连接聊天服务器。

    根据上面的这些需求,我们对功能模块进行拆分,尽量保证模块的高内聚,低耦合。

    599f59d59dc38854b2bee48f674390f0.png

    ProtocolHelper 协议处理模块——当我们拿到一块 buffer时,我们可能需要知道这个 buffer 对应的协议或者 id 是多少,比如我们在请求的时候就传入了响应的处理回调,那么常用的做法可能会用一个自增的 id 来区别每一个请求,或者是用协议号来区分不同的请求,这些是开发者需要实现的。我们还需要从 buffer 中获取包的长度是多少?包长的合理范围是多少?心跳包长什么样子等等。

    Socket 模块——实现最基础的通讯功能,首先定义 Socket 的接口类 ISocket,定义如连接、关闭、数据接收与发送等接口,然后子类继承并实现这些接口。

    NetworkTips 网络显示模块——实现如连接中、重连中、加载中、网络断开等状态的显示,以及 UI 的屏蔽。

    NetNode 网络节点——所谓网络节点,其实主要的职责是将上面的功能串联起来,为用户提供一个易用的接口。

    NetManager 管理网络节点的单例——我们可能有多个网络节点(多条连接),所以这里使用单例来进行管理,使用单例来操作网络节点也会更加方便。

       ProtocolHelper

    在这里定义了一个 IProtocolHelper 的简单接口,如下所示:

    export type NetData = (string | ArrayBufferLike | Blob | ArrayBufferView);// 协议辅助接口export interface IProtocolHelper {    getHeadlen(): number;                   // 返回包头长度    getHearbeat(): NetData;                 // 返回一个心跳包    getPackageLen(msg: NetData): number;    // 返回整个包的长度    checkPackage(msg: NetData): boolean;    // 检查包数据是否合法    getPackageId(msg: NetData): number;     // 返回包的id或协议类型}

       Socket

    在这里定义了一个 ISocket 的简单接口,如下所示:

    // Socket接口export interface ISocket {    onConnected: (event) => void;           // 连接回调    onMessage: (msg: NetData) => void;      // 消息回调    onError: (event) => void;               // 错误回调    onClosed: (event) => void;              // 关闭回调    connect(ip: string, port: number);      // 连接接口    send(buffer: NetData);                  // 数据发送接口    close(code?: number, reason?: string);  // 关闭接口}

    接下来我们实现一个 WebSock,继承于 ISocket,我们只需要实现 connect、send 和 close 接口即可。send 和 close 都是对 websocket 对简单封装,connect 则需要根据传入的 ip、端口等参数构造一个 url 来创建 websocket,并绑定 websocket 的回调。

    export class WebSock implements ISocket {    private _ws: WebSocket = null;              // websocket对象    onConnected: (event) => void = null;    onMessage: (msg) => void = null;    onError: (event) => void = null;    onClosed: (event) => void = null;    connect(options: any) {        if (this._ws) {            if (this._ws.readyState === WebSocket.CONNECTING) {                console.log("websocket connecting, wait for a moment...")                return false;            }        }        let url = null;        if(options.url) {            url = options.url;        } else {            let ip = options.ip;            let port = options.port;            let protocol = options.protocol;            url = `${protocol}://${ip}:${port}`;            }        this._ws = new WebSocket(url);        this._ws.binaryType = options.binaryType ? options.binaryType : "arraybuffer";        this._ws.onmessage = (event) => {            this.onMessage(event.data);        };        this._ws.onopen = this.onConnected;        this._ws.onerror = this.onError;        this._ws.onclose = this.onClosed;        return true;    }    send(buffer: NetData) {        if (this._ws.readyState == WebSocket.OPEN)        {            this._ws.send(buffer);            return true;        }        return false;    }    close(code?: number, reason?: string) {        this._ws.close();    }}

       NetworkTips

    INetworkTips 提供了非常的接口,重连和请求的开关,框架会在合适的时机调用它们,我们可以继承 INetworkTips 并定制我们的网络相关提示信息,需要注意的是这些接口可能会被**多次调用**。

    // 网络提示接口export interface INetworkTips {    connectTips(isShow: boolean): void;    reconnectTips(isShow: boolean): void;    requestTips(isShow: boolean): void;}

       NetNode

    NetNode 是整个网络框架中最为关键的部分,一个 NetNode 实例表示一个完整的连接对象,基于 NetNode 我们可以方便地进行扩展,它的主要职责有:

    连接维护

    • 连接的建立与鉴权(是否鉴权、如何鉴权由用户的回调决定)

    • 断线重连后的数据重发处理

    • 心跳机制确保连接有效(心跳包间隔由配置,心跳包的内容由ProtocolHelper定义)

    • 连接的关闭

    数据发送

    • 支持断线重传,超时重传

    • 支持唯一发送(避免同一时间重复发送)

    数据接收

    • 支持持续监听

    • 支持request-respone模式

    界面展示

    • 可自定义网络延迟、短线重连等状态的表现

    首先我们定义了 NetTipsType、NetNodeState 两个枚举,以及 NetConnectOptions 结构供 NetNode 使用。

    接下来是 NetNode 的成员变量,NetNode 的变量可以分为以下几类:

    • NetNode 自身的状态变量,如 ISocket 对象、当前状态、连接参数等等。

    • 各种回调,包括连接、断开连接、协议处理、网络提示等回调。

    • 各种定时器,如心跳、重连相关的定时器。

    • 请求列表与监听列表,都是用于接收到的消息处理。

    接下来介绍网络相关的成员函数,首先看初始化与:

    • init 方法用于初始化 NetNode,主要是指定 Socket 与协议等处理对象。

    • connect 方法用于连接服务器。

    • initSocket 方法用于绑定 Socket 的回调到 NetNode 中。

    • updateNetTips 方法用于刷新网络提示。


    onConnected 方法在网络连接成功后调用,自动进入鉴权流程(如果设置了_connectedCallback),在鉴权完成后需要调用 onChecked 方法使 NetNode 进入可通讯的状态,在未鉴权的情况,我们不应该发送任何业务请求,但登录验证这类请求应该发送给服务器,这类请求可以通过带force参数强制发送给服务器。

    接收到任何消息都会触发 onMessage,首先会对数据包进行校验,校验的规则可以在自己的 ProtocolHelper 中实现,如果是一个合法的数据包,我们会将心跳和超时计时器进行更新——重新计时,最后在 _requests 和 _listener 中找到该消息的处理函数,这里是通过 rspCmd 进行查找的,rspCmd 是从 ProtocolHelper 的 getPackageId 取出的,我们可以将协议的命令或者序号返回,由我们自己来决定请求和响应如何对应。

    onError 和 onClosed 是网络出错和关闭时调用的,无论是否出错,最终都会调用 onClosed,在这里我们执行断线回调,以及做自动重连的处理。当然也可以调用 close来关闭套接字。close 与 closeSocket 的区别在于 closeSocket 只是关闭套接字——我仍然要使用当前的 NetNode,可能通过下一次 connect 恢复网络。而 close则是清除所有的状态。

    发起网络请求有3种方式:

    send 方法纯粹地发送数据,如果当前断网或者验证中会进入 _request 队列。

    request 方法在请求的时候即以闭包的方式传入回调,在该请求的响应回到时会执行回调,如果同时有多个相同的请求,那么这 N 个请求的响应会依次回到客户端,响应回调也会依次执行(每次只会执行一个回调)。

    requestUnique 方法,如果我们不希望有多个相同的请求,可以使用 requestUnique 来确保每一种请求同时只会有一个。

    这里确保没有重复之所以使用的是遍历 _requests,是因为我们不会积压大量的请求到 _requests中,超时或异常重发也不会导致 _requests 的积压,因为重发的逻辑是由 NetNode 控制的,而且在网络断开的情况下,我们理应屏蔽用户发起请求,此时一般会有一个全屏遮罩——网络出现波动之类的提示。

    我们有2种回调,一种是前面的 request 回调,这种回调是临时性的,一般随着请求-响应-执行而立即清理,_listener 回调则是常驻的,需要我们手动管理的,比如打开某界面时监听、离开是关闭,或者在游戏一开始就进行监听。适合处理服务器的主动推送消息。

    最后是心跳与超时相关的定时器,我们每隔 _heartTime 会发送一个心跳包,每隔 _receiveTime 检测如果没有收到服务器返回的包,则判断网络断开。

    完整代码,大家可以进入源码查看!

       NetManager

    NetManager 用于管理 NetNode,这是由于我们可能需要支持多个不同的连接对象,所以需要一个 NetManager 专门来管理 NetNode,同时,NetManager 作为一个单例,也可以方便我们调用网络。

    export class NetManager {    private static _instance: NetManager = null;    protected _channels: { [key: number]: NetNode } = {};    public static getInstance(): NetManager {        if (this._instance == null) {            this._instance = new NetManager();        }        return this._instance;    }    // 添加Node,返回ChannelID    public setNetNode(newNode: NetNode, channelId: number = 0) {        this._channels[channelId] = newNode;    }    // 移除Node    public removeNetNode(channelId: number) {        delete this._channels[channelId];    }    // 调用Node连接    public connect(options: NetConnectOptions, channelId: number = 0): boolean {        if (this._channels[channelId]) {            return this._channels[channelId].connect(options);        }        return false;    }    // 调用Node发送    public send(buf: NetData, force: boolean = false, channelId: number = 0): boolean {        let node = this._channels[channelId];        if(node) {            return node.send(buf, force);        }        return false;    }    // 发起请求,并在在结果返回时调用指定好的回调函数    public request(buf: NetData, rspCmd: number, rspObject: CallbackObject, showTips: boolean = true, force: boolean = false, channelId: number = 0) {        let node = this._channels[channelId];        if(node) {            node.request(buf, rspCmd, rspObject, showTips, force);        }    }    // 同request,但在request之前会先判断队列中是否已有rspCmd,如有重复的则直接返回    public requestUnique(buf: NetData, rspCmd: number, rspObject: CallbackObject, showTips: boolean = true, force: boolean = false, channelId: number = 0): boolean {        let node = this._channels[channelId];        if(node) {            return node.requestUnique(buf, rspCmd, rspObject, showTips, force);        }        return false;    }    // 调用Node关闭    public close(code?: number, reason?: string, channelId: number = 0) {        if (this._channels[channelId]) {            return this._channels[channelId].closeSocket(code, reason);        }    }

       测试例子

    接下来我们用一个简单的例子来演示一下网络框架的基本使用,首先我们需要拼一个简单的界面用于展示,3个按钮(连接、发送、关闭),2个输入框(输入 url、输入要发送的内容),一个文本框(显示从服务器接收到的数据),如下图所示。

    该例子连接的是 websocket 官方的 echo.websocket.org 地址,这个服务器会将我们发送给它的所有消息都原样返回给我们。

    8a1f33d790384aac4227369d97c648c1.png

    接下来,实现一个简单的 Component,这里新建了一个 NetExample.ts 文件,做的事情非常简单,在初始化的时候创建 NetNode、绑定默认接收回调,在接收回调中将服务器返回的文本显示到 msgLabel中。接着是连接、发送和关闭几个接口的实现:

    // 不关键的代码省略@ccclassexport default class NetExample extends cc.Component {    @property(cc.Label)    textLabel: cc.Label = null;    @property(cc.Label)    urlLabel: cc.Label = null;    @property(cc.RichText)    msgLabel: cc.RichText = null;    private lineCount: number = 0;    onLoad() {        let Node = new NetNode();        Node.init(new WebSock(), new DefStringProtocol());        Node.setResponeHandler(0, (cmd: number, data: NetData) => {            if (this.lineCount > 5) {                let idx = this.msgLabel.string.search("\n");                this.msgLabel.string = this.msgLabel.string.substr(idx + 1);            }            this.msgLabel.string += `${data}\n`;            ++this.lineCount;        });        NetManager.getInstance().setNetNode(Node);    }    onConnectClick() {        NetManager.getInstance().connect({ url: this.urlLabel.string });    }    onSendClick() {        NetManager.getInstance().send(this.textLabel.string);    }    onDisconnectClick() {        NetManager.getInstance().close();    }}

    代码完成后,将其挂载到场景的 Canvas 节点下(其他节点也可以),然后将场景中的 Label 和 RichText 拖拽到我们的 NetExample 的属性面板中:

    71d03fdb477329237cece2b3e538c271.png

    运行效果如下所示:

    5c0c5bf76e7a22863056da134c591e54.png

       小结

    可以看到,Websocket 的使用很简单,我们在开发的过程中会碰到各种各样的需求和问题,要实现一个好的设计,快速地解决问题。

    我们一方面需要对我们使用的技术本身有深入的理解,websocket 的底层协议传输是如何实现的?与 tcp、http 的区别在哪里?基于 websocket 能否使用 udp 进行传输呢?使用 websocket 发送数据是否需要自己对数据流进行分包(websocket 协议保证了包的完整)?数据的发送是否出现了发送缓存的堆积(查看 bufferedAmount)?

    另外需要对我们的使用场景及需求本身的理解,对需求的理解越透彻,越能做出好的设计。哪些需求是项目相关的,哪些需求是通用的?通用的需求是必须的还是可选的?不同的变化我们应该封装成类或接口,使用多态的方式来实现呢?还是提供配置?回调绑定?事件通知?

    我们需要设计出一个好的框架,来适用于下一个项目,并且在一个一个的项目中优化迭代,这样才能建立深厚的沉淀、提高效率。

    接下来的一段时间,我会将之前的一些经验整理为一个开源易用的 Cocos Creator 框架。源码链接:https://github.com/wyb10a10/cocos_creator_framework

    ———— / END / ————

    再次向作者宝爷的分享致以谢意!欢迎大家点击文末【

    Cocos 第1期征稿活动已结束,详细获奖名单详见今日推送第2条,获奖文章将陆续在 Cocos 公众号上进行转载/发布,内容原创版权归原作者所有,转载请联系原作者!

    6460a84357c2549e6e0123e08a3b2757.png

    Cocos Creator v2.2 正式发布

    Cocos Creator 3D v1.0 正式发布

    Cocos Creator 3D 物理模块介绍

    Cocos Creator v2.2 自定义渲染组件及材质介绍

    小姐姐,你的发丝高光怎么用 Creator 3D 实现?

    极限开发《TheCode》和《Shoot the F》创作笔记

    独立游戏 5000 万下载百万 DAU 竟不花一分钱?

    Cocos 与腾讯云宣布战略合作,把游戏开发门槛降到极致

    我就知道你“在看”▼

    展开全文
  • cocosCreator笔记

    2018-07-18 16:43:30
    cocos creator 笔记,非常不错,对我开发游戏起到了很大的帮助,不要错过
  • cocos creator 官方文档

    2017-09-23 01:39:33
    cocos creator 1.6最新版用户手册 欢迎使用 Cocos Creator 用户手册!本手册包括详尽的使用说明、面向不同职能用户的工作流程和 step by step 的新手教程。能够帮您快速掌握使用 Cocos Creator 开发跨平台游戏的...
  • 模仿Unity卸了一个Dropdown的组件: 使用方法可以见工程,链接见底下: https://github.com/ETRick/CocosCreator-Dropdown/tree/master/Dropdown
  • CocosCreator如何制作微信小游戏

    万次阅读 2018-01-29 18:05:13
    CocosCreator在1.8版本开始,就支持一键发布微信小程序,下面是详细的发布步骤: 1、在微信公众平台下载微信开发者工具; 地址:https://mp.weixin.qq.com/debug/wxagame/dev/devtools/download.html?t=2018115,...
  • 我的客户端和服务器都是在本机Windows8上搭建的,软件环境为:MySQL:5.7Node.js:6.11.0CocosCreator:1.6.2步骤如下:一、服务器环境搭建1、安装MySql数据库(百度)2、登录MySql: mysql –u用户名 –p密码 (登录...
  • cocos creator 2.1.0中可以通过cc.director.getScheduler().setTimeScale(value)来设置timeScale,但是这仅仅影响了回调函数的timeScale,并不作用于component的update,非常不方便,官方也迟迟不修改,现在想要像...
  • Cocos Creator微信小游戏开发

    千人学习 2019-10-08 15:11:58
    如今,H5游戏、微信小游戏、抖音小游戏、头条小游戏、快手小游戏、百度小游戏、QQ轻游戏等小程序游戏都特别火,而这些小游戏中80%都是用Cocos Creator开发的,Cocos Creator可以做到一次开发,多平台部署。...
  • cocoscreator超级玛丽源码分享 cocoscreator超级玛丽源码分享 cocoscreator超级玛丽源码分享
  • Cocos Creator 版本

    2020-04-26 19:39:22
    Cocos Creator 版本 从 v2.3.0 开始,Cocos Creator 新增了对3D 物理与碰撞系统、3D 粒子的支持,同时材质系统也升级到了正式版。 从 v2.3.0 开始,Cocos Creator 支持发布到趣头条小游戏。 Spine 换装指南。 ...
  • cocosCreator日历插件

    2019-01-14 11:06:39
    cocosCreator日历插件,。。
  • CocosCreator简易UI小demo.zip;CocosCreator CocosCreator
  • CocosCreator教程demo集合

    2020-07-01 01:10:32
    CocosCreator教程demo集合
  • Cocos Creator 入门学习

    2019-12-28 12:14:50
    下载地址:https://www.cocos.com/products#CocosCreator 下载最新版本的Cocos Creator版本,记得不要和Cocos Creator 3D混淆了,这两个是不一样的。 如果对3D刚兴趣的话可以下载Cocos Creator 3D Cocos Creator...
  • cocos creator 1.6最新版用户手册 使用 Cocos Creator 用户手册!本手册包括详尽的使用说明、面向不同职能用户的工作流程和 step by step 的新手教程。能够帮您快速掌握使用 Cocos Creator 开发跨平台游戏的方法。
  • CocosCreator消灭病毒源码,
  • cocos creator 1.6最新版用户手册 欢迎使用 Cocos Creator 用户手册!本手册包括详尽的使用说明、面向不同职能用户的工作流程和 step by step 的新手教程。能够帮您快速掌握使用 Cocos Creator 开发跨平台游戏的...
  • Cocos Creator 资源

    2019-11-15 11:17:36
    cocos-creator-tutorial 地址 [Cocos Creator 2.0 官方教程] (https://docs.cocos.com/creator/manual/zh/) Cocos Creator插件视频教程 https://forum.cocos.com/t/cocos-creator/69105 组件 摇杆 ...
  • CocosCreator 消灭星星

    2018-03-08 10:42:13
    Cocos Creator 版消灭星星,方便学习Creator 的同学参考
  • Cocos creator中有一个动态合图的功能,也就是在运行时将内存中的任意纹理组合成一张虚拟的图集,从而合并绘制,减少drawcall。那么,Cocos Creator是如何实现这个功能的呢。 核心思想是数据结构中常说的空间换时间...
  • Cocos Creator 打包成微信小游戏源代码,Cocos Creator 打包成微信小游戏源代码,Cocos Creator 打包成微信小游戏源代码,Cocos Creator 打包成微信小游戏源代码,Cocos Creator 打包成微信小游戏源代码,Cocos ...
  • cocoscreator 合成游戏

    2019-02-15 16:02:30
    直接导入到cocoscreator里面就能用,新手,代码写的有点糙,担待点
  • cocoscreator使用puremvc

    2019-02-13 11:12:10
    cocoscreator使用puremvc
  • CocosCreator入门

    千次阅读 2019-04-18 22:28:03
    1.关于Cocos Creator Cocos Creator 是什么? 它是一个完整的游戏开发解决方案,包括了 cocos2d-x 引擎的 JavaScript 实现,以及能让你更快速开发游戏所需要的各种图形界面工具,在 Cocos2d-x 基础上实现了彻底脚本...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,020
精华内容 4,808
热门标签
关键字:

cocoscreator