Cocos Creator 2 + Colyseus 新手教程

虽然 Cocos Creator 3 的更新速度那叫一个快,但是还是有不少用户为了安全稳定考量决定暂时停留在 Cocos Creator 2.x 的版本。
那么 Cocos Creator 2.x 与 Colyseus 是如何整合的呢?官方文档里没写,所以这篇文章补充了这一点。

  • cocos creator 2.x 与 Colyseus 整合步骤
  1. 下载 Colyseus 最新版本的 JS客户端 (不让发链接,GitHub上自己搜吧);

  1. 新建 Cocos Creator 2.x 项目,然后解压 Colyseus JS 客户端文件到项目的资源文件夹;

  1. 回到 Cocos Creator 2.x 编辑器,这是编辑器会提示是否将 colyseus.js 作为插件导入?这里选择 “是”。

  2. 确保 colyseus.js 插件属性勾选了“导入为插件”、“允许 Web 平台加载” 和 “允许 Native 平台加载”;

  1. 编写代码连接服务器。

const {ccclass, property} = cc._decorator;

@ccclass
export default class NetworkManager extends cc.Component {

    start () {

        // @ts-ignore
        var client = new Colyseus.Client('ws://localhost:2567');
        client.joinOrCreate("room_name").then(room => {
            console.log(room.sessionId, "joined", room.name);
        }).catch(e => {
            console.log("JOIN ERROR", e);
        });
    }

    // update (dt) {}
}

因为 colyseus.js 已经被作为插件导入,所以代码里不需要任何的 import 和 require() 等导入操作。
// @ts-ignore 的作用是让编辑器检查机制忽略这种没有导入就使用的方式。因为这在 Cocos Creator 2.x 里是合理的。
而且 colyseus.js 客户端也提供了 .d.ts 描述文件,可以很好地支持代码提示功能,这样用户使用起来就更加得心应手。

1赞

晚点试下看行不,然后再回复

先插一个眼。。

demo 运行不了 , 还有就是如果只下载客户端对接非colyseus的是不是就不行?

@Mark 来一个 nginx + pm2 + cocos-creater2.x + colyseus 的配置教程吧

Arena 为什么注册不了

为啥要用colyseus对接非colyseus服务器啊??colyseus.js是针对colyseus服务器制作的啊。

是吗?提示什么?
console.colyseus.io撇register

请参考这个教程
docs. colyseus .io 撇 zh_cn 撇 colyseus 撇 deployment 撇 #nginx

我这边用js改如何实现?

战略插眼!

看一眼ts编译后的js不就明白了 :grinning:

捂脸,瞬间感觉智商掉地

今天重新试了一下,还是不能注册,点击 signup 按钮没有任何反应,信息都填了并且没有提示有错误的情况,使用的Chrome浏览器

F12 一下 看看控制台报啥?

点击按钮以后,控制没有打印任何日志出来,感觉点击按钮后没有触发提交数据操作

插眼 插眼

请使用https进入控制台。

更新非插件用法:
cocos creator 2.4.X
只要将colyseus.js colyseus.d.ts 解压到项目目录即可,无需将js引用插件
引用方式
import * as Colyseus from "你的colyseus路径"

注册界面用了第三方的人机验证,没有使用科学上网,是加载不出来的,导致不能注册