揭祕!價值百萬的像素填色解決方案,想開發繪本應用的有福了!

魔術橡皮擦

大家好,我是麥芽的香氣,一個喜歡解決產品來解決需求的開發者。4年Cocos Creator小遊戲、教育App開發,今天給大家分享一些我在工作中積累的小經驗Demo。

  1. 如何獲取一個圖片的 RGBA 數據,改變這個數據會發生什麼?
  2. 畫線和橡皮檫,通過像素畫線來解決該痛點(橡皮檫功能,且背景不是純白底圖)
  3. 給一張圖片進行填色,兒童小遊戲


本案例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, 321663768);

    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 個點,如下圖方法:
img

當獲取這些點轉換爲[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 搜索:填色、像素畫筆

鏈接:http://store.cocos.com/app/detail/2731
我是麥芽,帶香氣的麥芽!
歡迎加我微信,一起學習成長!


本文分享自微信公衆號 - Creator星球遊戲開發社區(creator-star)。
如有侵權,請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章