Creator填色遊戲的一種實現方案
阿新 • • 發佈：2020-08-02
# 前言
先上一個辛苦弄出來的gif效果。寫公眾號時間不長，很多技巧還在慢慢跟小夥伴學習。可關注公眾號，回覆“繪圖”或者“填色”都可獲得demo的git地址。請使用Creator2.4.0執行
填色遊戲種類也挺多的，我今天要說的是一種相對簡單的填色。
對於填色遊戲的做法，我在論壇裡搜到不少帖子，尤其是這個帖子的留言比較多：[油漆桶填色效果怎麼實現啊，找了兩天都找不到資源](https://forum.cocos.org/t/topic/79952/100)
其中有一條留言跟我的想法不謀而合，
尤其是做了之前的取色，繪圖等功能後，對webgl的readPixels()函式返回的資料處理起來越來越順手。所以就用了替換資料的方式。
還有一種填色遊戲採用的純Graphics的方式，各種貝塞爾曲線，矩形，直線和moveTo，實現幾個區塊填指定顏色的填色遊戲，我感覺那種應該是藉助工具的，因為生成的檔案相當大。如果有知道的同學可以在下方留言，一起交流。
# 製作方式
1. 先上一張圖
這是一張我在《繪圖遊戲調色盤取色方法》的文章中展示的一張圖，圖片左側的色盤是原始圖，右側是使用相機截圖獲得的資料更新後的圖。當時是為了驗證截圖的正確性而做的。這次正好用來做填色遊戲。
2. 製作原理
實際上更改的就是右側這張圖使用的資料。左側的圖接收觸控事件，通過觸控點的位置，更新顏色資料。所以只要將兩張圖片重疊，用右邊的圖片蓋住左邊的圖片，然後使用處理過的顏色資料更新右邊的這張圖，效果也就出來了。這裡需要說一嘴，為什麼要用兩張圖，就是相機截圖獲得的資料初始化出來的紋理，正好是y反轉的，所以右側的圖的scaleY我給了-1.否則就是倒著的。
3. 接收事件的處理
接收事件，獲得點選座標位置，這個沒什麼可多說的。
4. 更新資料
更新資料的時候我是從點選的點向四周擴散，因為顏色的點太多，所以不能用遞迴操作，因此做了每幀更新多少個點的方式，目前我給的是5000，OPPO A9真機實測不卡。使用一個數組記錄更新過的點，避免重複更新消耗時間。
5. 坑與新玩法
我沒有做在更新資料時不可以更換顏色操作，所以在更新資料時如果點選了左側的色盤，那麼右側的顏色會跟著更新，這個也可以說是坑，也可以說是玩法。
色盤也是通過相機截圖獲得的資料獲取的，但是這種獲取有缺陷，就是點選的色盤上的點不能有陰影，但是我使用的色盤剛好有，所以有的時候獲取的顏色會是黑色或者灰色。
# 程式碼
```
import TextureRenderUtils from "../TextureRenderUtils";
const { ccclass, property } = cc._decorator;
@ccclass
export default class FillColorV1 extends cc.Component {
@property([cc.Component.EventHandler])
callback: cc.Component.EventHandler[] = [];
@property(cc.Camera)
camera: cc.Camera = null;
@property(cc.Sprite)
target: cc.Sprite = null;
@property(cc.Node)
renderNode: cc.Node = null;
private pointList: number[] = []
private r: number;
private g: number;
private b: number;
protected textureHelper: TextureRenderUtils = new TextureRenderUtils()
private grid: number[] = []
private imgData: ArrayBufferView = null;
start() {
this.node.on(cc.Node.EventType.TOUCH_START, this.touchStart, this)
this.init();
}
getTextureInfo() {
return this.textureHelper.getTextureInfo();
}
getDataUrl() {
return this.textureHelper.getDataUrl()
}
changeColor(color: cc.Color) {
this.r = color.r;
this.g = color.g;
this.b = color.b;
}
init() {
this.textureHelper.init(this.camera, this.renderNode)
this.textureHelper.render()
let data = this.textureHelper.getData()
if (data.length > 0) {
this.imgData = data;
cc.log('FillColorV1 width ', this.renderNode.width, ' height ', this.renderNode.height)
cc.log(' 實際上有多少個點 == ', data.length / 4)
let count = this.renderNode.width * this.renderNode.height;
cc.log(" 應該有多少個點的顏色 ", count)
if (this.target) {
let tTexture = this.target.spriteFrame.getTexture()
tTexture.setFlipY(false)
this.target.node.scaleY = -1
tTexture.initWithData(data, tTexture.getPixelFormat(), this.renderNode.width, this.renderNode.height)
}
}
}
update(dt: number) {
let flag = false;
let count = 0;
let width = this.textureHelper.width;
let r = this.r;
let g = this.g;
let b = this.b;
//當發現有點選座標的時候開始執行。這個5000
while (this.pointList.length >= 2 && count++ <= 5000) {
flag = true;
let x = this.pointList.shift();
let y = this.pointList.shift();
this.paintPoint(x, y, width, r, g, b)
}
if (flag) {
let texture = this.target.spriteFrame.getTexture();
texture.initWithData(this.imgData, texture.getPixelFormat(), texture.width, texture.height)
}
}
paintPoint(x: number, y: number, width: number, r: number, g: number, b: number) {
let data = this.imgData;
let rowW = Math.floor(width) * 4//一行的長度
x = Math.floor(x)
let srow = Math.floor(y);//行開始位置
let startX = srow * rowW + x * 4;//列開始位置
if (!this.grid[startX]) {
this.grid[startX] = 1
// cc.log('r g b%{} ', data[startX + 0], data[startX + 1], data[startX + 2])
if (data[startX + 0] > 100 || data[startX + 1] > 100 || data[startX + 2] > 50) {
data[startX + 0] = r;
data[startX + 1] = g;
data[startX + 2] = b;
this.pointList.push(x - 1)
this.pointList.push(y);
this.pointList.push(x + 1)
this.pointList.push(y);
this.pointList.push(x)
this.pointList.push(y - 1)
this.pointList.push(x)
this.pointList.push(y + 1)
}
}
}
//用於列印點選的位置，無關緊要
showPointColor(x: number, y: number, width: number) {
let data = this.imgData;
let rowW = Math.floor(width) * 4//一行的長度
x = Math.floor(x)
let srow = Math.floor(y);//行開始位置
let startX = srow * rowW + x * 4;//列開始位置
cc.log('r g b', data[startX + 0], data[startX + 1], data[startX + 2])
}
touchStart(e: cc.Touch) {
let pos = e.getLocation();
pos = this.node.convertToNodeSpaceAR(pos)
cc.log('touchStart x ', pos.x, ' y = ', pos.y)
this.pointList.length = 0;
this.grid.length = 0;
this.pointList.push(pos.x)
this.pointList.push(pos.y)
this.showPointColor(pos.x, pos.y, this.textureHelper.width)
}
}
```
# 結語
以上是我做的一種填色方案，並沒有涉及到很大的圖案，也沒有涉及到放大縮小。我沒有說我的方案是最好的，我相信方案有很多種，很多方案都有它的侷限性，有它的適用範圍；只要沒有bug，就有參考價值；但是不要拿來主義，要根據你自己的情況，酌情考慮。
前幾天公眾號好不容易湊夠了500人，開了廣告。但是感覺僅憑廣告的收入，不說了，都是眼淚。
以後更新的速度可能會慢很多，一週兩篇，或者一篇或者沒有，還請大家見諒。畢竟不能靠這個養活自己，而且還相當耗費時間。
# 歡迎掃碼關注公眾號《微笑遊戲》，瀏覽更多內容。如果您覺得文章還可以，點贊、在看、分享、贊助、點下廣告都是對我最大的鼓勵，在下將感激不盡。
歡迎掃碼關注公眾號《微笑遊戲》，瀏覽更多