Creator填色遊戲的一種實現方案

2022-02-02 13:32:54 字數 1672 閱讀 9442

先上一張圖

這是一張我在《繪圖遊戲調色盤取色方法》的文章中展示的一張圖,左側的色盤是原始圖,右側是使用相機截圖獲得的資料更新後的圖。當時是為了驗證截圖的正確性而做的。這次正好用來做填色遊戲。

製作原理

實際上更改的就是右側這張圖使用的資料。左側的圖接收觸控事件,通過觸控點的位置,更新顏色資料。所以只要將兩張重疊,用右邊的蓋住左邊的,然後使用處理過的顏色資料更新右邊的這張圖,效果也就出來了。這裡需要說一嘴,為什麼要用兩張圖,就是相機截圖獲得的資料初始化出來的紋理,正好是y反轉的,所以右側的圖的scaley我給了-1.否則就是倒著的。

接收事件的處理

接收事件,獲得點選座標位置,這個沒什麼可多說的。

更新資料

更新資料的時候我是從點選的點向四周擴散,因為顏色的點太多,所以不能用遞迴操作,因此做了每幀更新多少個點的方式,目前我給的是5000,oppo a9真機實測不卡。使用乙個陣列記錄更新過的點,避免重複更新消耗時間。

坑與新玩法

我沒有做在更新資料時不可以更換顏色操作,所以在更新資料時如果點選了左側的色盤,那麼右側的顏色會跟著更新,這個也可以說是坑,也可以說是玩法。

色盤也是通過相機截圖獲得的資料獲取的,但是這種獲取有缺陷,就是點選的色盤上的點不能有陰影,但是我使用的色盤剛好有,所以有的時候獲取的顏色會是黑色或者灰色。

import texturerenderutils from "../texturerenderutils";

const = cc._decorator;

@ccclass

export default class fillcolorv1 extends cc.component

gettextureinfo()

getdataurl()

changecolor(color: cc.color)

init() }}

update(dt: number)

if (flag)

}paintpoint(x: number, y: number, width: number, r: number, g: number, b: number) ', data[startx + 0], data[startx + 1], data[startx + 2])

if (data[startx + 0] > 100 || data[startx + 1] > 100 || data[startx + 2] > 50) }}

//用於列印點選的位置,無關緊要

showpointcolor(x: number, y: number, width: number)

touchstart(e: cc.touch)

}

以上是我做的一種填色方案,並沒有涉及到很大的圖案,也沒有涉及到放大縮小。我沒有說我的方案是最好的,我相信方案有很多種,很多方案都有它的侷限性,有它的適用範圍;只要沒有bug,就有參考價值;但是不要拿來主義,要根據你自己的情況,酌情考慮。

以後更新的速度可能會慢很多,一周兩篇,或者一篇或者沒有,還請大家見諒。畢竟不能靠這個養活自己,而且還相當耗費時間。

一種緣於積木遊戲的思維

下面四個所給的選項中,哪一選項的盒子能由左邊給定的圖形做成?如上題目我能不借助數字驗算,輕鬆地從圖形動態拼合的角度解出答案是a。在看到左邊圖形的第一眼,我直接迅速地搭建其該圖形的拼合動畫,然後在動畫的最後乙個階段,旋轉不同的角度與右圖的各個四方體匹配。這個過程進行得如此流暢,以至於經常性的,當我的小...

遊戲是一種社會力量

遊戲是一種社會力量 如果說,一年一度的奧斯卡頒獎典禮是全球影迷的節日,那麼四年一度的世界盃就是球迷的盛宴,但是和 魔獸世界 的玩家 粉絲們比起來,影迷和球迷的熱情就不算什麼了。摘自 電視台某節目旁白 很難想象在這個多姿多彩的時代,每天會有世界各地幾百萬乃至上千萬素不相識的人在同一時間登入同乙個客戶端...

遊戲是一種社會力量

遊戲是一種社會力量 如果說,一年一度的奧斯卡頒獎典禮是全球影迷的節日,那麼四年一度的世界盃就是球迷的盛宴,但是和 魔獸世界 的玩家 粉絲們比起來,影迷和球迷的熱情就不算什麼了。摘自 電視台某節目旁白 很難想象在這個多姿多彩的時代,每天會有世界各地幾百萬乃至上千萬素不相識的人在同一時間登入同乙個客戶端...