【籠中窺夢(mèng)】國(guó)產(chǎn)獨(dú)立游戲佳作技術(shù)解析
前言
本文要帶大家分析的是TapTap評(píng)分8.8的國(guó)產(chǎn)獨(dú)立游戲佳作《籠中窺夢(mèng)》
這款游戲是2021年年底上線(xiàn)的國(guó)產(chǎn)獨(dú)立游戲，當(dāng)時(shí)游戲的評(píng)分和熱度也很高，很多小伙伴可能也玩過(guò)，今天就帶著大家去拆解復(fù)現(xiàn)這款游戲中的核心技術(shù)實(shí)現(xiàn)
版權(quán)聲明
本文為“優(yōu)夢(mèng)創(chuàng)客”原創(chuàng)文章，您可以自由轉(zhuǎn)載，但必須加入完整的版權(quán)聲明
更多學(xué)習(xí)資源請(qǐng)加QQ：1517069595或WX：alice17173獲?。ㄆ髽I(yè)級(jí)性能優(yōu)化/熱更新/Shader特效/服務(wù)器/商業(yè)項(xiàng)目實(shí)戰(zhàn)/每周直播/一對(duì)一指導(dǎo)）
點(diǎn)贊、關(guān)注、分享可免費(fèi)獲得配套學(xué)習(xí)資源
《籠中窺夢(mèng)》玩法解析
?《籠中窺夢(mèng)》的玩法就是在這樣一個(gè)六邊形的盒子里拼接左右一樣的圖形，這個(gè)六邊形盒子的每一個(gè)面中的場(chǎng)景畫(huà)面都是不一樣的
當(dāng)左邊場(chǎng)景和右邊場(chǎng)景出現(xiàn)一樣的景物時(shí)，這個(gè)物件就拼接成功了，可以進(jìn)行場(chǎng)景交互，同樣的道理，這個(gè)起重機(jī)完成拼接后，也可以進(jìn)行交互
所以《籠中窺夢(mèng)》這款游戲的開(kāi)發(fā)難點(diǎn)在于如何使一個(gè)立方體盒子的每一個(gè)面上出現(xiàn)不同的場(chǎng)景，并且能夠進(jìn)行拼接，這是本篇文章的主要目標(biāo)
《籠中窺夢(mèng)》技術(shù)演示
這里是一個(gè)Demo場(chǎng)景，這個(gè)場(chǎng)景里的立方體的每一個(gè)面都會(huì)顯示不同的場(chǎng)景圖像，要實(shí)現(xiàn)這樣的效果需要利用模板緩沖區(qū)技術(shù)
上圖中被選中的四邊形面片就是模板區(qū)域，在渲染圖像時(shí)會(huì)把圖像繪制在模版區(qū)域上
把模板去掉后，這個(gè)面上的圖像就消失了（如上圖），這也是模版的作用，也就是顯示場(chǎng)景圖像
要在Unity中添加一個(gè)模板需要使用Shader腳本，這也是Unity游戲開(kāi)發(fā)崗位中的技術(shù)美術(shù)同學(xué)必須要掌握的一個(gè)技能，所謂的技術(shù)美術(shù)，就是用技術(shù)的方式來(lái)實(shí)現(xiàn)今天這樣的美術(shù)效果
《籠中窺夢(mèng)》技術(shù)解析
Unity中的模版是基于每一個(gè)像素來(lái)設(shè)置模板值，這個(gè)模板值在初始時(shí)都是0（如上圖），它是基于每一個(gè)像素的，所以每一個(gè)像素的模板值都是零
通過(guò)Shader腳本可以將左邊面片區(qū)域中的每一個(gè)像素設(shè)置為1，并且只會(huì)在模板值設(shè)置為1的像素區(qū)域上來(lái)進(jìn)行左邊場(chǎng)景的圖像繪制工作
代碼實(shí)現(xiàn)
效果實(shí)現(xiàn)
在寫(xiě)完代碼后還要進(jìn)行一些設(shè)置來(lái)讓Shader生效
先定義兩個(gè)模板層（這個(gè)層可以理解為分類(lèi)），分別叫做StencilLayer1和StencilLayer2（如下圖）
這兩個(gè)分類(lèi)分別對(duì)應(yīng)了這個(gè)立方體左右兩邊區(qū)域（如下圖）
將兩個(gè)模板面片的層設(shè)置為StencilLayer1和StencilLayer2，分配好以后就可以設(shè)置在渲染左邊面片場(chǎng)景時(shí)采用特殊的渲染方式，渲染右邊面片場(chǎng)景也采用特殊的渲染方式，其余部分采用普通渲染方式來(lái)進(jìn)行渲染（如下圖）
激活StencilMask1和StencilMask2（模板遮罩1和模板制遮罩2），也就是下圖場(chǎng)景中被橘色框框住的模板遮罩
分別設(shè)置它們的渲染方式，使用剛才實(shí)現(xiàn)的Shader代碼（如下圖）
實(shí)現(xiàn)出的結(jié)果就是左邊模板區(qū)域的模板值全部都是1，右邊模板區(qū)域的模板值全都是2（如下圖）
為了讓Unity的渲染管線(xiàn)對(duì)于左邊模板區(qū)域和右邊模板區(qū)域采用特殊渲染方式，需要對(duì)URP渲染管線(xiàn)進(jìn)行定制，那應(yīng)該怎樣定制呢？
需要設(shè)置正常的渲染管線(xiàn)，讓它取消StencilLayer1以及StencilLayer2的渲染（如上圖），讓這兩層不要走正常的渲染路徑
透明物體和不透明物體也要設(shè)置（如上圖）
添加StencilLayer1的渲染特性，設(shè)置StencilLayer1的渲染時(shí)機(jī)（如上圖），讓它在場(chǎng)景中所有的不透明物體渲染完后才開(kāi)始渲染
將這個(gè)渲染特性所要渲染的層設(shè)置為StencilLayer1（如上圖）
勾選這個(gè)渲染特性中的Stencil，并將Value的值設(shè)置為1，將ComPare Function設(shè)置為Equal
下面這張圖是最后實(shí)現(xiàn)出的效果
要使右邊的面片也能夠渲染場(chǎng)景，需要再添加一個(gè)渲染特性，步驟與上面一樣，只是在設(shè)置渲染層時(shí)要設(shè)置為StencilLayer2，Stencil的Value值需要設(shè)置為2（如下圖）
因?yàn)閳?chǎng)景中還有一些半透明物體，所以還需要再設(shè)置一個(gè)渲染特性（如下圖）
基本設(shè)置都是一樣，只是將Event設(shè)置為AfterRenderingTransparents，將Queue設(shè)置為T(mén)ransparent
最終效果演示
寫(xiě)在最后
更多學(xué)習(xí)資源請(qǐng)加QQ：1517069595或WX：alice17173獲取（企業(yè)級(jí)性能優(yōu)化/熱更新/Shader特效/服務(wù)器/商業(yè)項(xiàng)目實(shí)戰(zhàn)/每周直播/一對(duì)一指導(dǎo)）
點(diǎn)贊、關(guān)注、分享可免費(fèi)獲得配套學(xué)習(xí)資源
