背景
相信做前端的朋友對(duì)Vuejs的雙向綁定與組件化開發(fā)絕對(duì)印象深刻，筆者也為Vue的諸多特性頗為贊嘆，它為前端的生態(tài)真的注入了太多力量，它的成功除了得益于Vue自身的健壯性之外，基于它的拓展性也滿足了各個(gè)不同項(xiàng)目組特定的定制化的需求年碘，也誕生了類似于針對(duì)微信小程序開發(fā)的mpvue妓羊，基于網(wǎng)頁端開發(fā)的UI架構(gòu)ElementUI等優(yōu)秀項(xiàng)目绊起。有些人可能會(huì)問腔彰，這些鋪墊有什么用處芍阎，還不是想襯托目前還沒有一個(gè)項(xiàng)目可以基于Vuejs開發(fā)微信小游戲的么世曾？是的，所有的鋪墊必然是有目的的谴咸，我覺得有必要介紹下這個(gè)項(xiàng)目誕生的原因轮听。
首先，筆者從畢業(yè)后一直從事的是游戲與3D渲染方面的工作寿冕，對(duì)前端可以說是不同的領(lǐng)域蕊程，直到前兩年接觸了Webgl后，就慢慢的往Web渲染這塊技術(shù)靠攏驼唱，用到Webgl的過程中也必然會(huì)跟前端的主流技術(shù)打交道藻茂，像jquery，jquery，jquery辨赐！有人會(huì)很驚嘆优俘，什么？這兩年還有人用jquery做前端開發(fā)的么掀序？很遺憾帆焕，當(dāng)時(shí)轉(zhuǎn)Webgl的我確實(shí)跟jquery打交道了大半年，主要原因也許是因?yàn)殇秩緦佑玫絛om的機(jī)會(huì)不太多不恭，也許是因?yàn)楫?dāng)時(shí)確實(shí)不太關(guān)注前端的新技術(shù)叶雹。好吧，主要原因還是因?yàn)槲覀€(gè)人是個(gè)懷舊主義者换吧，這么解釋希望讀者能接受折晦。直到有一天我接觸到了Vue，那一刻我發(fā)覺沾瓦，糟了满着，大半年的jquery白用了，因?yàn)槲乙恢庇X得我在jquery領(lǐng)域真的是有見地贯莺，所以在此我還是把我這個(gè)教訓(xùn)與各位分享风喇，技術(shù)千萬不要閉門造車，也不要有懷舊的心態(tài)缕探，擁抱新技術(shù)是技術(shù)人時(shí)刻應(yīng)該關(guān)注的動(dòng)向魂莫。還是說回接觸到Vue后我的一些感觸，我發(fā)現(xiàn)Vue真的是一個(gè)好東西撕蔼，原本需要操作源數(shù)據(jù)才能改變的視圖豁鲤，只需要用對(duì)象進(jìn)行管理，一旦數(shù)據(jù)改變鲸沮，視圖立馬改變琳骡，通過這種方式很多功能需要繁雜的代碼，現(xiàn)在只需要專注于數(shù)據(jù)層讼溺，而后我們的渲染規(guī)范就變成了經(jīng)常與Vue打交道的過程楣号，有些人可能會(huì)有疑問，用Vue開發(fā)的游戲怒坯，性能會(huì)有問題么炫狱？這個(gè)問題往往讓人很難回答，開發(fā)效率的提升似乎總會(huì)帶來性能的下降剔猿，理論上性能主要在Vue初始化過程會(huì)有影響视译，這取決于場(chǎng)景數(shù)據(jù)與復(fù)雜度，所以大型游戲不建議使用該方案归敬，因?yàn)榇笮陀螒蛞M織的數(shù)據(jù)過多酷含，并且場(chǎng)景物體也過于復(fù)雜鄙早，但是實(shí)際開發(fā)中又會(huì)有些小驚喜，這里我們先不討論這個(gè)話題椅亚，后面有機(jī)會(huì)我會(huì)專門對(duì)優(yōu)化的問題開辟新的章節(jié)進(jìn)行討論限番。回到正題呀舔，開發(fā)后的游戲必然涉及到平臺(tái)的問題弥虐，首先小游戲平臺(tái)必須要首先考慮，于是就有了這個(gè)項(xiàng)目媚赖。
介紹
Gengine 是一個(gè)基于 Vue.js 核心開發(fā)的前端框架霜瘪，與Vue采用Typescript不同，Geg采用的是Es6開發(fā),并修改了 Vue.js 的底層實(shí)現(xiàn)省古，包括了compile與platforms粥庄，并新增gxml部分〔蚣耍框架通過xml組織視圖層級(jí)，所以它與底層視圖渲染的方式,如dom的渲染等并沒有直接關(guān)系布讹，也因?yàn)檫@個(gè)特點(diǎn)琳拭，雖然Gengine開發(fā)之初是為了使用Vue兼容微信小游戲而設(shè)計(jì)，但是理論上可以使用Geg.js開發(fā)任意特定平臺(tái)的視圖項(xiàng)目描验。
我們可以通過以下關(guān)系來描述Geg.js與MVVM的關(guān)系白嘁。
VIEW MODEL
┌----------┐ ┌---------------┐ ┌----------┐
| | ---------------| XMLNodeListen ├------------------------> | |
| | | | | |
| View | | | | Model |
| | | | | |
| | <------------- | Data Bindings ├<------------------------ | |
└----------┘ └---------------┘ └----------┘
|
|
| ┌--------------------------┐
└---->| Geg.js Implementation |
└--------------------------┘
上面的關(guān)系圖表明View視圖的渲染邏輯需要用Geg.js針對(duì)特定平臺(tái)實(shí)現(xiàn)
安裝
# 克隆項(xiàng)目
git clone https://github.com/GengineJS/geg.git
# 進(jìn)入項(xiàng)目目錄
cd geg
# 安裝依賴
yarn
# 本地開發(fā) 啟動(dòng)項(xiàng)目
yarn min
目錄結(jié)構(gòu)
本項(xiàng)目已經(jīng)為你生成了一個(gè)完整的開發(fā)框架，提供了Geg.js開發(fā)過程中的源碼結(jié)構(gòu)膘流，下面是整個(gè)項(xiàng)目的目錄層級(jí)絮缅。
├── dist # rollup源碼構(gòu)建輸出
├── src # 源代碼
│ ├── compiler # 編譯相關(guān)
│ ├── core # 源碼核心
│ ├── platforms # 平臺(tái)相關(guān)
│ ├── sfc # parser相關(guān)
│ └── index.js # 源碼入口
├── .babelrc # babel-loader 配置
├── config.js # rollup配置
├── index.html # 測(cè)試入口html
├── package.json # package.json
├── test.xml # 測(cè)試xml模版相關(guān)
├── yarn-error.log # 構(gòu)建錯(cuò)誤log
└── yarn.lock # 構(gòu)建依賴相關(guān)
初始化
Geg.js是以微信小游戲平臺(tái)為開發(fā)初衷，那么我們以微信小游戲平臺(tái)Geg-Babylonjs為例,可分為三種初始化方式
1. 加載xml文件呼股。
由于Gengine不對(duì)dom進(jìn)行直接操作,所以這里的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進(jìn)行定義耕魄，說明其內(nèi)部元素為解析模版
<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對(duì)象內(nèi)部定義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()
官網(wǎng)地址
其他語法
想了解更多語法指南吸奴，可參考Vuejs
生態(tài)圈
除了Vuejs對(duì)應(yīng)插件外,還可以通過以下插件進(jìn)行Gengine開發(fā)
Geg-Babylonjs 通過Gengine實(shí)現(xiàn)對(duì)Babylonjs 3D引擎的操作。
Geg-Threejs 通過Gengine實(shí)現(xiàn)對(duì)Threejs 3D引擎的操作缠局。
