【初探】web框架与cocos的结合使用

前言

其实vue与cocos有很多相似的地方,这里主要说一下如何将cocos打包完的文件嵌入到vue-cli使用。

版本

vue2+cocos2.3.4,理论上vue3也能用。

注意:由于2.4.x及以上有分包,不适用于2.4.x以上的cocos引擎。不过原理明白了之后目测也能改一改去支持。

大致效果

  1. 能实现在vue-cli脚手架内展示cocos内的东西。
  2. cocos与web如何交互。
  3. web与cocos如何交互。
  4. 其实能实现一些类似于编辑器的效果,但是网页端的保存需要另一套技术方案,如electron或者服务端存储等等。

基本思路

第一步也是最难的一步,如何将cocos嵌入到web页面呢?其实有两个方案可以选择

  1. 内嵌iframe。
  2. web内集成cocos。
    第一种方式有很多弊端,主要体现在没有cocos的完全控制能力,而且iframe给人的体验也不太好。
    所以着重说一下第二个方案。

目录结构

其实整个工程就是一个标准的vue2的项目工程。

原理

原理其实很简单,我们可以把cocos想象成一个基于canvas的插件,也就是将问题变为:应该怎么引入一个没有npm包管理的第三方库?

在解决上面那个问题之前先看一下cocos打包完的工程文件的目录:

image.png
其中较为重要的文件:

  1. index.html:入口文件。
  2. cocos2d-js-min.js:引擎文件。
  3. main.js:设置几乎所有的文件路径。(重要)
  4. project.js:游戏逻辑文件。
  5. setting.js:配置文件。

因为我们要在vue-cli内嵌入cocos,所以放弃原本的index.html,然后将需要引入的文件全部放到vue-cli入口文件内:

先看一下引入了哪些文件


放入入口文件简单:

在vue的入口文件内引入三个文件,原本project.js是在main.js内引入的,我为了方便将这个文件直接引入在入口文件,如果你的工程是dev模式或者加了md5,文件名字可能不一样。我没用到physcis.js所以没写。

这时其实还有一个文件我没有引入,就是main.js,这个文件的作用是设置各种文件的路径,以及启动项目。有兴趣的可以去看一下main.js的内容,文件内容很多我就不截图了。

既然是在web内使用,那么应该做到在任意时机都能启动项目,所以我把main.js改了,对应到我的目录里是creator-load.js,改这个文件的路径有那么一点点痛苦,不过幸好我已经改完了,后面会放地址。

这时已经可以完全使用cocos了,那么接下来就是弄一个canvas容器去盛cocos。

在合适的时候调用creator-load.js去初始化就可以了,其实main.js还可以继续拆分,可以把启动项目和配置路径的代码拆开,那样看着更简洁一些。

上面是如何嵌入cocos,那么cocos怎么和vue通信呢?

通信

其实这个简直不要太简单,最简单的就是用全局变量存储变量,用事件系统通知双方事件的触发,我的项目里写了一个简单的事件文件可以简单用一用。。

不过为了好维护,还是要对这些做一层封装。具体如何封装就看自己的习惯了。

地址

github

在线预览(渣渣服务器,打开会比较慢)

工程打开方式

vueTem文件夹下执行

    cnpm i
    npm run dev

如果更改了cocosTem内的文件打包路径需要指定到 vueTem/static/cocos-build下。

交互在场景2中可以用,场景1中没有与vue的交互。

写在最后

讲道理,如果cocos和vue能够进行通讯,那么在网页端去编辑游戏也是有一个不错的方向,譬如教育行业的课件编辑工具等。我在electron里写过一套这个东西,不过是demo级别的,web端的弊端是文件的IO很难有替代品。

还有一个问题就是现在用的是打包完的文件,如果用于编辑,会出现很多无用的资源,如何剔除这些资源,也是一个关键(又或许不用剔除?)

demo的工程是我在某个工程里改的,去除了敏感信息,不过可能看上去有些代码没有用而显得代码有些多,而且由于写demo可能很多地方不太符合工程规范,见谅。不过应该不影响看.

这方面可参考的东西比较少,可能有些大神有更好的方式去实现,欢迎评论。

鸣谢

@插件小王子

21赞

给大佬打call~

image

MARK.

膜拜大佬~

6666 牛

过于优秀!

good job!

牛逼6666

有点东西,继续研究。。

大佬牛逼!

mark一下

卧槽,牛逼啊,大佬牛逼,必须mark

只要cocos支持web打包 就可以做成vue啊

我之前用uniapp开发vue,然后webview加载cocos

用vue搞一个预览模板,然后在预览模板里搞事情。

战略mark,给楼主点赞

这是不是意味着,这种方案可以实现cocos做的东西可以上架小程序了?

大佬有试过VUE3可行吗?

不支持发布android,ios吧?啥时候能支持下? :smile: