寫(xiě)在前面
全文解析圓形Image組件的實(shí)現(xiàn)原理，取關(guān)鍵代碼介紹算法細(xì)節(jié)，源碼已經(jīng)上傳Github下載地址，歡迎下載試用。
一、Unity原生Image組件實(shí)現(xiàn)圓形圖片的缺陷
Mask渲染消耗
許多游戲項(xiàng)目里免不了有很多圖片是以圓形形式展示的，如頭像，技能Icon等，一般做法是使用Image組件，再加上一個(gè)圓形的Mask。實(shí)現(xiàn)非常簡(jiǎn)單，但因?yàn)橛绊懶?，許多關(guān)于ui方面的Unity效率優(yōu)化文章，都會(huì)建議開(kāi)發(fā)者少用Mask。
使用Mask會(huì)額外消耗多一個(gè)Drawcall來(lái)創(chuàng)建Mask，做像素剔除。
Mask不利于層級(jí)合并。原本同一圖集里的ui可以合并層級(jí)，僅需一個(gè)Drawcall渲染，如果加入Mask，就會(huì)將一個(gè)ui整體分割成了Mask下的子ui與其他ui，兩者只能各自進(jìn)行層級(jí)合并，至少要兩個(gè)Drawcall。Mask用得多了，一個(gè)ui整體會(huì)被分割得四分五裂，就會(huì)嚴(yán)重影響層次合并的效率了。
無(wú)法精確點(diǎn)擊
Image+Mask的實(shí)現(xiàn)的圓形，點(diǎn)擊判斷不精確，點(diǎn)擊到圓形外的四個(gè)邊角仍會(huì)觸發(fā)點(diǎn)擊，雖然可以通過(guò)另外設(shè)置eventAlphaThreshold實(shí)現(xiàn)像素級(jí)判斷，但這個(gè)方法有天生缺陷，并不是好的選擇。
二、應(yīng)運(yùn)而生的CircleImage組件
了解了原有做法的缺陷后，我們希望自制圓形Image組件，解決這些問(wèn)題，并且盡量簡(jiǎn)單易用。
