首先作為一個(gè)開源框架/AssetStore 插件的作者深知晋被，維護(hù)插件兑徘、框架的使用文檔是一件很麻煩的事情。

大部分主流的文檔方案羡洛，基本都是用 markdown 編寫挂脑。

不管是用 markdown 編寫 還是用 word 還是其他的方式寫文檔，都涉及一個(gè)文件管理的問題欲侮。

這些文件要么部署在網(wǎng)站上崭闲，要么部署在 github 上，要么會(huì)隨著代碼包含在插件里威蕉。

文件維護(hù)起來會(huì)很麻煩镀脂，而每次修改文檔，也需要找到對(duì)應(yīng)的文件。

對(duì)于文檔維護(hù)船逮，有了第一個(gè)痛點(diǎn)粥谬，就是文檔管理的痛點(diǎn)脓魏。

第二個(gè)痛點(diǎn)瘪阁，就是閱讀的痛點(diǎn)最筒，每次自己買完插件或者下載好別人的框架晦鞋，都需要跳轉(zhuǎn)到網(wǎng)頁去看文檔谋币，或者如果插件中已經(jīng)包含了文檔暑竟，那么我需要下載一個(gè)對(duì)應(yīng)的軟件把文檔打開斋射，有時(shí)是 pdf、有是能打開 .md 格式的軟件但荤，有時(shí)需要是 Word罗岖，總之多多少少需要在多個(gè)軟件之間來回切換，IDE腹躁、Unity桑包、文檔閱讀器（瀏覽器、World纺非、Typora 等等）哑了，總之對(duì)于只用一個(gè)屏幕的童鞋來說，非常不方便烧颖。

這就是第二個(gè)痛點(diǎn)弱左，閱讀的痛點(diǎn)。

然后就是第三個(gè)痛點(diǎn)炕淮，語言的痛點(diǎn)拆火，很多插件的文檔都是英文的，所以很多好用的插件涂圆，在國(guó)內(nèi)的使用率差了一大截榜掌，原因就是沒有對(duì)中文支持。

image

所以關(guān)于文檔這塊乘综，有三個(gè)痛點(diǎn)憎账，總結(jié)如下：

• 文檔管理的痛點(diǎn)：需要維護(hù)文件、需要部署卡辰。
• 閱讀的痛點(diǎn)：需要對(duì)應(yīng)軟件打開胞皱、需要多個(gè)軟件之間切換。
• 語言的痛點(diǎn)：中文不支持九妈。

而 QF Pro 給出的方案反砌，就是 DocKit。

首先關(guān)于第一個(gè)痛點(diǎn)萌朱，文檔管理的痛點(diǎn)宴树，DocKit 是這樣做的。

首先在項(xiàng)目中任意位置晶疼，即可創(chuàng)建文檔文件酒贬，操作如下：

image.png

創(chuàng)建好了之后又憨，目錄如下：

image.png

首先文檔文件的 Inspector ，有一個(gè) EN 的選項(xiàng)框锭吨，按下之后蠢莺，變成如下：

image.png

這里全部都變成了英文，也就是說 QFramework Pro零如，都會(huì)支持中英文躏将。

（畢竟，QF Pro 上架 AssetStore考蕾，需要去賺老外的錢祸憋。。肖卧。）

OK蚯窥，我們切換回來，如下：

image.png

我們點(diǎn)擊打開窗口喜命，或者我們也可以直接雙擊文檔文件，之后可以看到如下圖所示的窗口河劝。

image.png

現(xiàn)在卵都沒有壁榕。

我們先創(chuàng)建第一個(gè)節(jié)點(diǎn)，文本節(jié)點(diǎn)赎瞎，鼠標(biāo)右鍵選擇 Create Node牌里，如下：

image.png

然后選擇 DocKit/TextNode 文本節(jié)點(diǎn)，如下：

image.png

這樣就創(chuàng)建好了一個(gè)文檔節(jié)點(diǎn)务甥，如下：

image.png

以上就是文本節(jié)點(diǎn)的創(chuàng)建流程牡辽。

下面我們給他支持英文文檔，如下:

image.png

只要只要勾選右上方的 EN 選框就能支持中英文切換敞临。

接著态辛，我們來進(jìn)行簡(jiǎn)單的導(dǎo)出功能，如下：

image.png

點(diǎn)擊生成 Markdown 文件挺尿，

之后會(huì)在目錄看到如下:

image.png

我們用支持 Markdown 格式的軟件打開奏黑，如下所示：

image.png

OK，以上就是 DocKit 的基本使用流程编矾。

流程如下：

• 創(chuàng)建文檔文件
• 創(chuàng)建文本節(jié)點(diǎn)
• 編寫文檔
• 導(dǎo)出為 Markdown

那么這樣的流程熟史，如何解決了三個(gè)痛點(diǎn)呢？

• 對(duì)于文檔管理來說窄俏，只需要將文檔文件和插件一起放在目錄里即可蹂匹，這樣即方便修改維護(hù)，也適合直接發(fā)布凹蜈，也省去了用戶需要額外打開網(wǎng)頁或者下載閱讀軟件的麻煩限寞。最重要的是忍啸，支持離線閱讀，不用有網(wǎng)絡(luò)環(huán)境昆烁。
• 對(duì)于文檔閱讀來說吊骤，文檔的表現(xiàn)形式是圖的形式，圖的形式天生比文字文檔更直觀更容易閱讀静尼，而且用戶無需安裝其他軟件白粉，僅僅是在 Unity 內(nèi)部即可閱讀文檔，既然 Unity 支持了這么方便好用的編輯器鼠渺，當(dāng)然文檔的方式也要用 Unity 的方式解決了鸭巴，這很酷，不是么拦盹。
• 對(duì)于語言問題來說鹃祖，QF Pro 肯定是要支持中文文檔的，畢竟是現(xiàn)在國(guó)內(nèi)發(fā)展起來的框架普舆，其次恬口，也要支持英文，畢竟也要上 AssetStore 去賺美刀沼侣，也是一個(gè)國(guó)際化的必經(jīng)之路祖能，QF 的 DocKit 支持了一鍵切換中英文，任何位置都支持切換的選項(xiàng)框蛾洛。

所以以上的三個(gè)痛點(diǎn)都算解決了养铸。

在這個(gè)基礎(chǔ)之上，還支持了 Markdown 導(dǎo)出的功能轧膘。

為什么要支持 Markdown 導(dǎo)出呢钞螟？

因?yàn)槲覀儾⒉皇?24 小時(shí)都待在電腦旁的，有的時(shí)候谎碍，我們閱讀文檔是在手機(jī)或者 ipad 上看的鳞滨，這個(gè)時(shí)候如果 DocKit 寫的文檔只在 Unity 內(nèi)觀看的話，就有點(diǎn)太雞肋了蟆淀，所以就支持了 markdown 格式的導(dǎo)出太援。

markdown 格式幾乎支持轉(zhuǎn)成任何文檔格式：word、pdf扳碍、textbundle提岔、html 等等，所以只要支持個(gè) markdown 格式也就解決了這個(gè)問題笋敞。

其實(shí)自己研究過一套 pdf 導(dǎo)出方案碱蒙，無奈，為了實(shí)現(xiàn)這個(gè)功能依賴了十幾兆的其他庫(kù)，不值當(dāng)赛惩，所以就舍棄掉這個(gè)功能了哀墓。

這就是 DocKit 的一個(gè)基本介紹了。

DocKit 除了支持文檔節(jié)點(diǎn)喷兼，還是支持圖像節(jié)點(diǎn)篮绰，如下所示。

image.png

圖像創(chuàng)建流程與文本節(jié)點(diǎn)一樣季惯，不再贅述吠各。

從外部導(dǎo)入圖片的方式如下，點(diǎn)擊 ... 按鈕勉抓，會(huì)打開桌面文件夾贾漏，如下所示：

image.png

這里筆者選擇一張圖片，然后打開藕筋，結(jié)果如下：

image.png

這樣圖像節(jié)點(diǎn)就導(dǎo)入進(jìn)來了纵散。

導(dǎo)入存放的目錄，默認(rèn)在同名目錄的 Editor 目錄下隐圾，如下：

image.png

如果重復(fù)導(dǎo)入同名文件伍掀，則會(huì)自動(dòng)用 ID 改名，如下：

image.png

如果重復(fù)資源或者圖片修改了比較多暇藏，會(huì)產(chǎn)生很多無用資源蜜笤，這里只需按下文檔文件的清空不用的圖片資源按鈕即可，如下：

image.png

不過目前叨咖，這兩個(gè)封面 和 封面1 這兩個(gè)圖片都有被引用瘩例，因?yàn)樵诘谝淮卧O(shè)置貼圖資源的時(shí)候啊胶，如果 中文圖片 和 英文圖片都沒有進(jìn)行設(shè)置過甸各，那么會(huì)把設(shè)置的圖片同時(shí)設(shè)置給 中文圖片 和 英文圖片。

因?yàn)楹芏鄷r(shí)候中英文圖片引用的是同一張焰坪。

然后剛才的操作中趣倾，又導(dǎo)入了一張圖片，此時(shí)只會(huì)講當(dāng)前語言的圖片替換某饰，也就是說現(xiàn)在 中文圖片是封面1 英文圖片是封面2儒恋。

所以還需要再導(dǎo)入一次圖片，然后點(diǎn)擊清空不用的圖片資源黔漂，結(jié)果如下：

image.png

OK诫尽，這是圖片節(jié)點(diǎn)的導(dǎo)入功能。

為什么要從桌面開始導(dǎo)入呢炬守？

因?yàn)楹芏嘟貓D軟件（比如 Mac 自帶的截圖軟件）都是截圖之后會(huì)自動(dòng)保存到桌面牧嫉，為了配合這個(gè)特性，所以圖片節(jié)點(diǎn)的導(dǎo)入就默認(rèn)打開桌面文件夾了，這樣會(huì)形成一個(gè)流程上的閉環(huán)酣藻，如果習(xí)慣了寫文檔的效率會(huì)非常高曹洽。

不過，其實(shí)更高的方式是截圖完直接從剪切板中獲取圖片辽剧，然后直接粘貼到文檔中送淆，但是這個(gè)功能，要實(shí)現(xiàn)需要依賴 Mono2.0 的 System.Windows.Form.dll 和 System.Drawing.dll 這兩個(gè)文件怕轿，所以同樣棄用了偷崩，QF Pro 要盡可能少的依賴，不然很容易和其他插件其沖突撤卢，后期維護(hù)起來會(huì)很麻煩环凿。

OK，圖像節(jié)點(diǎn)創(chuàng)建好了放吩，當(dāng)然也支持導(dǎo)出為 Markdown 功能了智听，我們導(dǎo)出一次 Markdown，結(jié)果如下：

image.png

完美渡紫。

好了到推，介紹好了 文本節(jié)點(diǎn)和圖像節(jié)點(diǎn)，其實(shí)還要支持很多其他節(jié)點(diǎn)惕澎，比如表格節(jié)點(diǎn)莉测、一些動(dòng)作節(jié)點(diǎn)支持簡(jiǎn)單的編程，還有代碼展示節(jié)點(diǎn)唧喉，大標(biāo)題小標(biāo)題節(jié)點(diǎn)捣卤、GIF 動(dòng)畫節(jié)點(diǎn)等等，而剩下就是擴(kuò)展節(jié)點(diǎn)的工作量了八孝，這部分慢慢做就可以董朝，可以將重心轉(zhuǎn)到下一個(gè)模塊的開發(fā)了。

除了實(shí)現(xiàn)以上功能外干跛，還對(duì) GraphView 做了很多調(diào)教工作子姜，比如雙擊文檔區(qū)可以支持全屏/窗口切換，如下：

窗口：

image.png

全屏：

image.png

還有其他的小功能楼入，DocKit 的整體進(jìn)度如下：

image.png

• DocKit - 使用可視化編程編寫項(xiàng)目文檔（正在進(jìn)行）

  • 節(jié)點(diǎn)

    • 文本（已完成）
    • 圖像（正在進(jìn)行）
    • GIF 動(dòng)畫（接下來）
    • 表格節(jié)點(diǎn)
    • 動(dòng)作列表節(jié)點(diǎn)（可以執(zhí)行）

  • 導(dǎo)出

    • Makrdown（已完成）
    • PDF（已完成哥捕，由于會(huì)依賴幾十兆的 dll，所以功能取消）

  • 導(dǎo)入

    • 圖片節(jié)點(diǎn) 快速?gòu)捻?xiàng)目外部導(dǎo)入圖片（已完成）
    • 圖片導(dǎo)入時(shí)重名自動(dòng)增加計(jì)數(shù) ID 為后綴（已完成）

  • 多語言

    • 中英文切換已完成）
    • 生成的 Makrdown 文件嘉熊，支持中英文版本作為后綴（已完成）
    • 圖像節(jié)點(diǎn)支持中英文同時(shí)引用同一張圖片功能（已完成）

  • 中英文切換（已完成）

  • 手勢(shì)

    • 雙擊全屏/窗口切換(已完成)
    • 快速創(chuàng)建接節(jié)點(diǎn)(Ctrl/CMD + 鼠標(biāo)左鍵）（已完成）
    • 雙擊圖像文件自動(dòng)打開窗口（已完成）

所有的 UI 庫(kù)遥赚，不管是 NGUI 和 UGUI、還是 UIElement 等阐肤，最先實(shí)現(xiàn)的基礎(chǔ)控件基本都是 文本控件 和 圖片控件凫佛，因?yàn)槿魏纹渌目臻g都可以用文本控件和圖片控件組合而成。

所以，DocKit 支持了 文本節(jié)點(diǎn) 和 圖片節(jié)點(diǎn)御蒲，就能滿足大部分的需求了衣赶，因?yàn)椴还苁谴a還是表格都能用圖片的形式來展示。

之所以先做 DocKit厚满，是因?yàn)楦椋龊靡粋€(gè)插件和方案，文檔是非常重要的部分碘箍，文檔做好了遵馆，可以節(jié)省大量的時(shí)間、精力和團(tuán)隊(duì)間的溝通成本丰榴。

而不管是獨(dú)立游戲货邓、還是公司的項(xiàng)目、或者是開發(fā)插件和框架四濒、本質(zhì)上都是軟件工程换况，軟件工程中文檔是非常重要的。

而 QFramework Pro 版本會(huì)有大量的文檔編寫需求盗蟆。

但是這里筆者有一個(gè)小的觀點(diǎn)戈二，產(chǎn)品的設(shè)計(jì)，盡可能讓用戶開箱即用喳资，就是最好做到不用看說明書就能上手使用觉吭，比如蘋果手機(jī)等。

所以筆者會(huì)選擇直接給個(gè)選項(xiàng)框仆邓，來切換中英文鲜滩，如下：

image.png

而不是寫個(gè)文檔，告訴用戶节值，中英文如何切換 blablabla徙硅。

產(chǎn)品設(shè)計(jì)和關(guān)卡設(shè)計(jì)是有點(diǎn)通的，關(guān)卡設(shè)計(jì)中使用金幣來引導(dǎo)玩家來做出設(shè)計(jì)師想讓玩家做的操作是一個(gè)很常見的套路察署。

就是一個(gè)東西最好是一看就能明白闷游，這個(gè)就是一個(gè)小小的理念吧峻汉，一是使用體驗(yàn)會(huì)好一點(diǎn)贴汪，二是能減少大量的文檔編寫工作量（逃。休吠。扳埂。。）

OK瘤礁，關(guān)于 DocKit 就說道這里阳懂，DocKit 只是 QF Pro 眾多功能規(guī)劃中的一個(gè)小功能，后續(xù)還會(huì)有很多。

還有一件事情岩调，由于 AssetStore 審核需要 3 個(gè)工作日巷燥，所以 QF Pro 將會(huì)分為兩個(gè)版本發(fā)布。

一個(gè)版本是 AssetStore 版号枕，即穩(wěn)定版缰揪，由于審核需要 3 個(gè)工作日，當(dāng) QF Pro 的用戶遇到緊急問題時(shí)無法盡快修復(fù)葱淳。

所以钝腺，再開一個(gè)快速迭代版本，這個(gè)版本就放在自己平臺(tái)發(fā)布了赞厕。

AssetStore 版和 快速迭代版艳狐，不支持互相轉(zhuǎn)換，建議只買一個(gè)版本皿桑，AssetStore 版更穩(wěn)定毫目，快速迭代版功能更快體驗(yàn)到問題也能及時(shí)修復(fù)，但是相對(duì)會(huì)不穩(wěn)定一些诲侮，很有可能有 API 的變更蒜茴。

當(dāng)然如果你想多多支持 QF Pro 讓他更好，也可以兩份都購(gòu)買作為支持和鼓勵(lì)浆西。

目前此文所述的功能粉私，已在快速迭代版中支持，而 AssetStore 只要當(dāng)前版本審核通過了近零，會(huì)立即提交快速迭代版當(dāng)時(shí)的相對(duì)穩(wěn)定的版本诺核。

快速迭代版，會(huì)優(yōu)先編寫中文文檔久信，每當(dāng)可以發(fā)布 AssetStore 版本時(shí)窖杀，會(huì)進(jìn)行文檔的翻譯工作。

QF Pro 目前暫不兼容 QFramework 的開源版本（ToolKits 版）裙士，但是會(huì)隨著 QF Pro 的迭代入客，慢慢將 API 兼容到 QFramework 的開源版本，所以目前不要直接升級(jí) QF 開源版到 Pro 版本腿椎，建議在新工程中體驗(yàn) QF Pro 的功能桌硫。

任何 QFramework Pro 的更新信息，會(huì)優(yōu)先發(fā)布在此系列的專欄啃炸、視頻中铆隘，所以對(duì) QF Pro 感興趣的童鞋多多關(guān)注筆者，以方便獲取更新南用。

OK 就說道這里膀钠。

各種地址

• DocKit 所參考的可視化編輯方案

  • XNode（參考一部分功能） 地址：https://github.com/Siccity/xNode

    • https://github.com/Siccity/xNode

  • BlueGraph（參考一部分功能和樣式掏湾，顏值最高，但是 bug 也最多）

    • https://github.com/McManning/BlueGraph

  • NodeGraphProcessor（主要是這個(gè)肿嘲，DocKit 再次基礎(chǔ)上魔改融击，最新版適配了 2019.3）

    • 地址：https://github.com/alelievr/NodeGraphProcessor

  • 感謝煙雨大佬的關(guān)于 NodeGraphProcessor 的一篇文章，其中的架構(gòu)圖讓我很快弄清楚了 NodeGraphProcessor 的結(jié)構(gòu)

    • 地址：https://zhuanlan.zhihu.com/p/362259030

• QFramework Pro AssetStore 主頁：http://u3d.as/SJ9

• 快速迭代版（眾籌地址）：https://www.gamepixedu.com/course/72

• QFramework QQ 群：623597263

• 此文首發(fā)于 http://doc.qframework.cn 或 https://qframework.cn

• 轉(zhuǎn)載請(qǐng)注明地址：https://liangxiegame.com 在這個(gè)地址可以看到我全部的作品鏈接