離開了差不多兩年的Puzzle and Dragons,因最近時間比較多,再一次跳坑。

因本人是一個十分注重資安(所以不用Android,iPhone也不JB),但轉珠實在是太弱,所以只好利用轉珠計算工具。

上網找到 https://izenn.github.io/padopt/index.html, 但好像太舊,沒有支援新的毒珠和廢珠。Fork了過來,加入新寶珠後就一直用。

但因使用率太高,每次手動使用 Import, 把每粒珠輸入,實在太廢時。在Github找到了另外一個版本有讀取截圖後自動輸入的功能,但準確度十分低。經常有很多寶珠找不到,或是把行數給搞錯了。所以最後只好自己寫一個⋯⋯其實我Fork的版本也有相關source code, 但因沒有server side所以前人把它comment了。

從來沒有做過圖像處理的經驗。上網搜尋一下,發現一個叫OpenCV的圖像處理library。之前在 Hacker News Top 10 bookmark了的Image Processing 101也有介紹,但是它是用Python寫的。我希望在client side用JS完成所有事情,所以用不了OpenCV。但文章中的原理也十分有參考價值。

1. 載入截圖

Combo Tips的作法是把圖上載到伺服器,再把URL載入Canvas。這完全是多餘。加上我直接在Github上做hosting, 今本沒有server side. 其實只要直接用JS把圖片變成 data uri 就可以。

2. 找珠子版面位置

Combo Tips是利用手機全螢幕截圖去估計版面的位置,但現在手機的尺寸千變萬化,所以結果十分不理想。加上我的要求比較特別,截圖不一定是手機的全螢幕截圖, 可以是電腦的局部截圖。所以我必須找出珠子版面的位置。

根據Image Processing 101, 本應用find contours的方法找,但JS用不了OpenCV,我也不會那些高級的演算法,所以只能想想有沒有比較平民的作法。在PAD中文Wiki管理員的幫忙下,收集了一些不同手機、不同珠子的截圖,發現在HP下方,和版面的左右,必有黑色線。但經過截圖很,那條線不一定是純黑。為了能準確判斷,先把圖片進行threshold處理,測試不同數值後,找到最理想的效果,剛好把中間的部份幾乎清空,但黑邊還在。在圖片左右正中,高度3/4的位置開始,向左右搜尋,直到發現黑色,之後改往上,看看是不是連續都是黑色,還是中間的殘餘物。找到左右邊後,利用同一個原理,在左邊1/4位置向上,再向左找上邊。不在正中間開始的原因是因為HP下方有機會出現數字(回血時),會變成不是黑色。有了上左右邊,加上珠字的數目(6x7,用戶在表格預先選擇),就能按比例計算下邊的位置。結果令人滿意。

3. 識別珠子的種類

珠子的種類可以直接透過顏色來分辨,但珠子本身不同部份顏色也有深淺變化,還有如果珠子右下方有+號時,珠子會閃動、左上方有時候又會有一個黃色的鎖。雖然我知道珠子的位置,但沒可能百份百在不同截圖每次都是一點。諮詢了一下朋友的意見,他在這方面有豐富經驗。它建議先把截圖進行高斯模糊處理,再利用HSV去判斷珠子的顏色。 大部份珠子可直接透過H值來判定,但一些比較相近的顏色,特別在珠子閃動的情況下,利用V值加以判斷。準確率達百分百!

回頭看一下Combo Tips的source code, 它使用RGB來分辨顏色,正是很多時候找不到正確珠子的原因。

後續

原來的版面設計在手機上看真的很可怕,要重新設計一個手機版UI,還有珠子半透明時的處理,真的還有很多東西要做。看我何時有動力再寫下去。最少現在我在電腦上不再需要每次輸入,十分爽就是!