大家好，我是麥芽的香氣，一個喜歡解決產品來解決需求的開發者。4年Cocos Creator小遊戲、教育App開發，今天給大家分享一些我在工作中積累的小經驗Demo。
-
如何獲取一個圖片的 RGBA 數據，改變這個數據會發生什麼？ -
畫線和橡皮檫，通過像素畫線來解決該痛點（橡皮檫功能，且背景不是純白底圖） -
給一張圖片進行填色，兒童小遊戲
本案例Demo 代碼已經分享到 Cocos Store 感謝大家的支持！
一、變色原理
在求職面試過程中，大家有沒有在被問到這樣一個問題：你知道一張1024 * 1024 大小的圖佔多大內存嗎？
再如果不想去，請先移步打開A_Test_Demo，如圖：輸入X值 = （0-255透明度）將圖片部分區域設置其透明度。
不知道大家有沒有玩過官方案例裏面的截圖，如果沒有。參考官方案例 demo，有這麼一段：
/**
* 轉化圖片RGBA數據
* @param data
* @param width
* @param height
* @returns
*/
private filpYImage(data, width, height): any {
let picData = new Uint8Array(width * height * 4);
let rowBytes = width * 4;
for (let row = 0; row < height; row++) {
let srow = height - 1 - row;
let start = srow * width * 4;
let reStart = row * width * 4;
for (let i = 0; i < rowBytes; i++) {
picData[reStart + i] = data[start + i];
}
}
return picData;
}
我們從該方法得知，我們返回的 picData 就是一個一維數組，內容如下：
[R,G,B,A,R,G,B,A,R,G,B,A,..............]
數組的長度爲 width * height * 4，也就是一張圖片的數據。該數據就可以重新設置一張新圖片，代碼如下：
createCanvas(picData) {
let texture = new cc.Texture2D();
texture.initWithData(picData, 32, 1663, 768);
let spriteFrame = new cc.SpriteFrame();
spriteFrame.setTexture(texture);
let sprite = this.target.getComponent(cc.Sprite)
sprite.spriteFrame = spriteFrame;
}
二、魔術橡皮擦
注意：如果沒看懂 A_Test_Demo 這個 Demo，請不要打開該項目！
該項目鉛筆和橡皮檫都是通過 touchMove 的距離大於 5（項目調優值、畫線據此值）來獲取兩個點。
this.startPoint 和 this.endPoint，注意記得轉換世界座標後進行以左上角爲起始點來轉換。再回到 width * height * 4 再回到我們的 width * height * 4（由上圖的test_demo）數組，我們將座標系換成爲左上角來計算。如下圖
我們動態獲取兩點後，在獲取 this.startPoint 和 this.endPoint 兩點的直線上的點（橫線，豎直直線，斜線）下圖在講述斜線兩種情況：
OK，當我們獲取到相應的點後，在對鉛筆線條粗細比如10（動態設置）進行點的疊加。
-
橫線：獲取該橫線點上下加 10 / 2 = 5個點進去 -
豎線：獲取該直線每個點的左右加 10 / 2 = 5個進去 -
斜線：上圖線條1，每個點上下加減；上圖線條2，每個點左右加減 10 / 2 = 5個點，如下圖方法：
當獲取這些點轉換爲[R,G,B,A,R,G,B,A,R,G,B,A..............]的索引鉛筆，就改變 RGB 值，橡皮檫就改變 A 的值，那麼就實現出了我們的像素畫線和橡皮檫功能。
該demo只是學習demo，裏面很多值我都固定寫死了，同學們想運用到實際demo裏面還需要自己好好完善，以及鋸齒需要去調優上述getPixel方法，該方法只是啓蒙。
三、填色原理
接下來我們移步 tianSe 填色demo，並打開其場景。如果沒看懂 A_Test_Demo，和RubberAndDraw 請不要打開該項目。
http://gameview.creator-star.cn/maiyadexiangqi/tianse/index.html
如圖： 我們的場景中有大大小小的不標準的圖形，我們獲取起觸摸點。
從該點開始遍歷，上左下三個點，上左下，上左下，上右下，上右下等遍歷到 RGB 值爲橢圓或者正方形等周圍的值停止，獲取到該座標值，進行上面 demo1、demo2 再停止。
再次提醒：如果沒看懂上述 demo1 和 demo2 請不要看該 demo！請在 Cocos Store 搜索：填色、像素畫筆
歡迎加我微信，一起學習成長！
本文分享自微信公衆號 - Creator星球遊戲開發社區（creator-star）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。