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

·  阅读 1724

前言

其实vue与cocos有很多相似的地方,这里主要说一下如何将cocos嵌入到vue-cli使用。适用于有web基础的人看。

版本

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

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

大致效果

image.png

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

基本思路

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

  1. 内嵌iframe。
  2. web内集成cocos。

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

目录结构

image.png

其实整个工程就是一个标准的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入口文件内:

先看一下引入了哪些文件 image.png 放入入口文件简单:

image.png

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

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

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

image.png

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

image.png

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

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

通信

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

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

地址

github

工程打开方式

vueTem文件夹下执行

    cnpm i
    npm run dev
复制代码

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

写在最后

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

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

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

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改