微笑教你 Creator 2.x 實現簡單畫板

前言

在Creator2..x之前有一個比較全面的開源項目，實現了畫板的功能。大神的博客：https://www.jianshu.com/p/97bf36c9ec40怎奈Creator的1.x和2.x相差很大，RenderTexture的begin，end函數都沒有。底層渲染做了很大的改動。cc.DrawNode 也不復存在。在此情形下，我實現了自己的一個簡單的畫板，放出來供大家參考，如果有更好的方案，希望在下方留言，共同進步。

我的實現方式Graphics + RenderTexture結合使用。

1. 使用Graphics 繪製圖形。毫無疑問，繪製圖形還是用Graphics的比較多。根據touchMove的軌跡繪製貝塞爾曲線，如果觸摸點不夠繪製一個貝塞爾曲線，就繪製圓。這樣可以減少繪製次數。如果一個點就繪製一個圓，比較卡。

2. 一直繪製而不調用g.clear函數drawcall會不斷增加，也會變得很卡。

3. 如果touchMove觸摸到時間過長，產生的點數據太多，也會很卡。

如何改善呢？

1. 我是使用RenderTexture，在鬆開手的時候用RenderTexture讀取到的截屏數據更新當前的畫版。這樣相當於畫板變成了截圖，可以減少DrawCall過多的情況。

2. 如果不鬆手一直繪製也會增加DrawCall。這個時候會判斷當前觸摸點的個數，如果超過一定數量，就可以做一次鬆手時觸發的事件。也就是通過讀取的數據更新畫板。

如何做回退？

將每次更新畫板的時候使用的數據保存，可以有個長度限制，也就是可以回退的步數。點擊回退按鈕的時候使用保存的數據更新畫板紋理。

擦除

因爲背景顏色是白色的。使用白色畫筆繪製自然就擦除了。

結語

第一次做這種遊戲，還好需求比較簡單。這些方式操作下來足夠應付需求了。本片也只是提供一種實現思路，希望對有需求的人有所幫助，更希望有過經驗的人可以留言或者加我微信一起討論！