腦洞神器Creator手寫識別組件，三分鐘上手！

這兩天有兩位夥伴，通過微店購買了Shawn的數字大冒險，在此感謝大家的支持！

抱歉的是該工程沒有文檔，不少朋友是看中了其中的手寫數字識別功能，在此我錄製了一段小視頻，可以幫助你快速上手手寫數字識別組件的用法。

Shawn這個數字識別其實並不是真的識別的數字，而是匹配的事先錄入的座標軌跡，看那一個張的像。

除了做數字識別，我們還可以用來做比如寫字母、畫符、攻擊、發大招...，這讓我想起一個非常牛逼的遊戲NDS版的《忍者龍劍傳》，請看下面視頻：

這裏大家可以開下腦洞，使用手勢識別可以開發出怎麼樣的好玩的遊戲呢？歡迎在文章下面留言！

1

數字識別手寫板

上面視頻我們用不到一分鐘時間，就可以將數字手寫識別使用起來，下面介紹一下主要使用到的文件：

1. NumberRecognizerBoard.js 主要是對同名預製體的管理，注意這裏使用 uikiller 庫中的Thor 組件做基類，因此可以直接訪問預製體中的節點；

2. 通過監聽 NumberRecognizerBoard 發出的 recognizer 事件你可以獲得具體識別結果；

3. NumberGestureData.js 是數字軌跡的配置數據，它是一個JSON配置，數據結構如下：

module.exports = [{
     //軌跡的名字，也就是你的數字
    'name': '1',
    //軌跡類型，當初想初了數字還可以有字母，暫時沒有用
    'type': 'number',
    //數字軌跡數組，一組座標點
    'strokes': [{
        'x': 205,
        'y': 274,
        'ID': 0    //筆畫ID
    }, {
        'x': 205,
        'y': 265,
        'ID': 0
    },
    ...
}];

這裏需要說明一下 strokes 中的 ID 的意思，比如數字4和5，我們需要寫兩筆畫，第一筆畫就是ID:0，第二筆畫就是 ID:1，其它的數字都是 ID:0，因爲它們只需要一筆寫成。

2

繪圖與識別

NumberRecognizerBoard 預製體只是對手寫識別的封裝，具體的繪圖與識別是在其中的_recognize 的節點上掛載的了兩個關鍵腳本，請看下圖：

1. TouchGraphics.js 是對cc.Graphics的繼承封裝，增加了觸摸事件，拖到一個節點上就可以在上面繪圖，通過組件屬性可以修改畫筆的顏色；

2. NumberRecognizer 是數字識別的關鍵腳本，其中的GestureJsonAsset屬性，你可以拖入一個JSON軌跡配置；

3. NumberRecognizer組件上的 Threshold 是一個閥值開關，每識別出一個數字內部會有一個得分，表示近似程度，分值越小近似程度越高。當超過 Threshold 內部會有一個超時檢查，讓玩家有清除了重寫的機會。

這裏對識別的 result 參數結果說明一下，工程中當你寫完一個數字時，你能看到如下日誌輸出：

它對應源碼中這樣一行代碼：

  cc.log('識別結果:', result.Name, result.Time, result.Score, this._strokes.length);

result對象字段含義如下：

• Name：識別到的數字，其實它就是你的數字軌跡配置中的name；

• Time：識別花費的時間，單位是毫秒，速度還是很快的；

• Score：識別的近似得分，這裏小於Threshold數字就會直接提交，反之需要等一秒才提交。

最後一個數字 this._strokes.length 表示，這數字有幾筆畫，截圖中可以看到，4和5你寫一筆兩筆都可以別識別出來，但是這裏爲了模擬正常書寫數字，4和5還仍然是需要寫兩筆纔會被提交。

3

三方庫的使用

其中軌跡識別的算法也不是 Shawn 寫的，這裏使用的一個三方庫名爲 pdoallarplus.js 感覺這是一個數學家寫的代碼，我對源碼中的一些地方做了簡單修改，語義上保持不變。這裏是官方鏈接：http://depts.washington.edu/acelab/proj/dollar/pdollar.html。

其次還用到了 lodash.js 它是一個JavaScript 的工具庫，封裝了很多實用的算法工具，lodash庫是放在項目根目錄中的node_moudels下，它是使用NPM安裝的。這裏是官方文檔：https://www.lodashjs.com/docs/latest。

最後是 Shawn 自己編寫的 uikiller 爲了方便獲取UI節點和組件，監聽觸摸事件，詳細內容可以看這裏： https://mp.weixin.qq.com/s/vBWndqkLfLjpd5R5jJ3ENQ

4

結語

Shawn 從今年7月開始自由職業，探索如何通過技術掙得一份副業收入。我在微店上將自己的一些小遊戲源碼低價出售，還有插件小王的兩款熱門 Cocos Creator 插件和其他夥伴的小遊戲源碼。如果你也有小遊戲源碼，有助於大家工作或學習，也歡迎來我的微店，價格由你來定！

• ，附送最新源碼！

點擊圖片可以體驗哦