基于Vue的微信小游戏框架Gegjs
背景
相信做前端的朋友对Vuejs的双向绑定与组件化开发绝对印象深刻，笔者也为Vue的诸多特性颇为赞叹，它为前端的生态真的注入了太多力量，它的成功除了得益于Vue自身的健壮性之外，基于它的拓展性也满足了各个不同项目组特定的定制化的需求，也诞生了类似于针对微信小程序开发的mpvue，基于网页端开发的UI架构ElementUI等优秀项目。有些人可能会问，这些铺垫有什么用处，还不是想衬托目前还没有一个项目可以基于Vuejs开发微信小游戏的么？是的，所有的铺垫必然是有目的的，我觉得有必要介绍下这个项目诞生的原因。
首先，笔者从毕业后一直从事的是游戏与3D渲染方面的工作，对前端可以说是不同的领域，直到前两年接触了Webgl后，就慢慢的往Web渲染这块技术靠拢，用到Webgl的过程中也必然会跟前端的主流技术打交道，像jquery，jquery，jquery！有人会很惊叹，什么？这两年还有人用jquery做前端开发的么？很遗憾，当时转Webgl的我确实跟jquery打交道了大半年，主要原因也许是因为渲染层用到dom的机会不太多，也许是因为当时确实不太关注前端的新技术。好吧，主要原因还是因为我个人是个怀旧主义者，这么解释希望读者能接受。直到有一天我接触到了Vue，那一刻我发觉，糟了，大半年的jquery白用了，因为我一直觉得我在jquery领域真的是有见地，所以在此我还是把我这个教训与各位分享，技术千万不要闭门造车，也不要有怀旧的心态，拥抱新技术是技术人时刻应该关注的动向。还是说回接触到Vue后我的一些感触，我发现Vue真的是一个好东西，原本需要操作源数据才能改变的视图，只需要用对象进行管理，一旦数据改变，视图立马改变，通过这种方式很多功能需要繁杂的代码，现在只需要专注于数据层，而后我们的渲染规范就变成了经常与Vue打交道的过程，有些人可能会有疑问，用Vue开发的游戏，性能会有问题么？这个问题往往让人很难回答，开发效率的提升似乎总会带来性能的下降，理论上性能主要在Vue初始化过程会有影响，这取决于场景数据与复杂度，所以大型游戏不建议使用该方案，因为大型游戏要组织的数据过多，并且场景物体也过于复杂，但是实际开发中又会有些小惊喜，这里我们先不讨论这个话题，后面有机会我会专门对优化的问题开辟新的章节进行讨论。回到正题，开发后的游戏必然涉及到平台的问题，首先小游戏平台必须要首先考虑，于是就有了这个项目。
介绍
Gengine 是一个基于 Vue.js 核心开发的前端框架，与Vue采用Typescript不同，Geg采用的是Es6开发,并修改了 Vue.js 的底层实现，包括了compile与platforms，并新增gxml部分。框架通过xml组织视图层级，所以它与底层视图渲染的方式,如dom的渲染等并没有直接关系，也因为这个特点，虽然Gengine开发之初是为了使用Vue兼容微信小游戏而设计，但是理论上可以使用Geg.js开发任意特定平台的视图项目。
我们可以通过以下关系来描述Geg.js与MVVM的关系。
VIEW MODEL
┌----------┐ ┌---------------┐ ┌----------┐
| | ---------------| XMLNodeListen ├------------------------> | |
| | | | | |
| View | | | | Model |
| | | | | |
| | <------------- | Data Bindings ├<------------------------ | |
└----------┘ └---------------┘ └----------┘
|
|
| ┌--------------------------┐
└---->| Geg.js Implementation |
└--------------------------┘
上面的关系图表明View视图的渲染逻辑需要用Geg.js针对特定平台实现
安装
# 克隆项目
git clone https://github.com/GengineJS/geg.git
# 进入项目目录
cd geg
# 安装依赖
yarn
# 本地开发 启动项目
yarn min
目录结构
本项目已经为你生成了一个完整的开发框架，提供了Geg.js开发过程中的源码结构，下面是整个项目的目录层级。
├── dist # rollup源码构建输出
├── src # 源代码
│ ├── compiler # 编译相关
│ ├── core # 源码核心
│ ├── platforms # 平台相关
│ ├── sfc # parser相关
│ └── index.js # 源码入口
├── .babelrc # babel-loader 配置
├── config.js # rollup配置
├── index.html # 测试入口html
├── package.json # package.json
├── test.xml # 测试xml模版相关
├── yarn-error.log # 构建错误log
└── yarn.lock # 构建依赖相关
初始化
Geg.js是以微信小游戏平台为开发初衷，那么我们以微信小游戏平台Geg-Babylonjs为例,可分为三种初始化方式
1. 加载xml文件。
由于Gengine不对dom进行直接操作,所以这里的el传递的是xml路径
import GegBabylon from './gegbabylon/index.js'
import Geg from './libs/geg.js'
Geg.use(GegBabylon)
let geg = new Geg({
el: 'src/template.xml'
})
xml格式如下,外层必须通过template进行定义，说明其内部元素为解析模版
<template>
<engine>
<scene>
<camera type="ArcRotateCamera"></camera>
<light></light>
<skybox></skybox>
<mesh type="Sphere" :position="sPosition">
<physics :mass="10"></physics>
</mesh>
</scene>
</engine>
</template>
2. Geg对象内部定义template字符串。
import GegBabylon from './gegbabylon/index.js'
import Geg from './libs/geg.js'
Geg.use(GegBabylon)
let geg = new Geg({
el: 'src/template.xml',
template: "<engine><scene><camera type='ArcRotateCamera'></camera></scene></engine>"
})
3. 通过render与$mount方式。
import GegBabylon from './gegbabylon/index.js'
import Geg from './libs/geg.js'
Geg.use(GegBabylon)
let geg = new Geg({
components: { App },
render: (h) => h('App')
}).$mount()
官网地址
其他语法
想了解更多语法指南，可参考Vuejs
生态圈
除了Vuejs对应插件外,还可以通过以下插件进行Gengine开发
-
Geg-Babylonjs 通过Gengine实现对Babylonjs 3D引擎的操作。
-
Geg-Threejs 通过Gengine实现对Threejs 3D引擎的操作。
