本次春節(jié)活動,使用到了字節(jié)內(nèi)的主要前端、跨端、互動技術(shù)產(chǎn)品。主要涉及:
SAR Creator 等渲染引擎的運(yùn)行環(huán)境。活動中,主要支持了 5 個互動玩法:“招財神龍”、“神龍?zhí)綄殹薄ⅰ皳u福簽”、“保衛(wèi)現(xiàn)金”和“紅包雨”,如下所示。

包含四個主題的「尋寶場景」,每次尋寶會隨機(jī)一個主題,如下,從左到右分別是山川、雪鄉(xiāng)、丹霞和江南。

整個「家場景」是由 3D 和 2D 元素混合構(gòu)建的。3D 部分包括小女孩、龍、地面和雪堆。2D 元素主要有炮仗、房子以及神龍回家后小女孩頭上的提示氣泡,是用圖片實現(xiàn)的。還有一些 2D 動畫元素,比如房子后面一直循環(huán)播放的紅包動畫、龍沉睡時嘴角的“zzz”呼吸效果。
設(shè)計同學(xué)使用 SAR Creator 編輯器搭建「家場景」,包括 3D 模型/2D 精靈的擺放、燈光和相機(jī)參數(shù)的設(shè)置等。SAR Creator 編輯器提供了圖形化界面,可以方便地調(diào)整場景元素的層級關(guān)系、位置、朝向、縮放比例以及材質(zhì)參數(shù)等。「家場景」的 3D 模型使用透視相機(jī)渲染,而 2D 精靈等使用正交相機(jī)渲染。最終,SAR Creator 渲染出的場景畫面還原了設(shè)計稿的效果。
SAR Creator 場景中所有元素,包括相機(jī)、燈光等,都以 entity(實體)的形式存在,entity 之間存在父子關(guān)系,形成一棵節(jié)點樹,如下圖左上角“層級”標(biāo)簽頁下的內(nèi)容。父節(jié)點 entity 的 Transform3D 組件的位置、旋轉(zhuǎn)和縮放屬性,會影響子節(jié)點的相同屬性。Enity 上可以掛載自定義腳本,影響 enity 的行為邏輯。SAR Creator 提供了大量操縱 entity 的引擎能力。

對于研發(fā)同學(xué),可以基于graph進(jìn)行邏輯條件的配置。

如上圖所示,例如進(jìn)入游戲后,用戶可能是在“龍沉睡”或者“龍待機(jī)”的狀態(tài),我們通過在Graph的變量區(qū)建立代碼運(yùn)行的邏輯條件(支持Number和Boolean兩種類型),可以自定義一個case變量,當(dāng)case = 1,播放“龍沉睡”、當(dāng)case = 2,播放“龍待機(jī)”。
在代碼中,我們可以通過使用AnimationController.setValue(variableName,value)來觸發(fā)動畫執(zhí)行。
const animationController = this.entity.getScript(AnimationController);if(showAwake) { // 需要播沉睡 animationController.setValue("case", 1)}else if(showIdle){ //需要播放idle animationController.setValue("case", 2)}再比如,在某一個時間,用戶點擊了“去尋寶”按鈕,這時候通過設(shè)置animationController.setValue("showGoOut",true)即可觸發(fā)龍去尋寶的動畫。
我們還為動畫播放提供了鉤子函數(shù),在動畫播放的特定時間,觸發(fā)自定義的邏輯回調(diào)。
| 在進(jìn)入狀態(tài)時觸發(fā) |
| 在完全退出狀態(tài)時觸發(fā) |
| 在狀態(tài)更新時觸發(fā) |
// 獲取動畫控制器組件const animationController = this.entity.getScript(AnimationController);animationController.on('onStateEnter',(controller:AnimationController,state:AnimationState)=>{ //在此處實現(xiàn)業(yè)務(wù)邏輯});在實現(xiàn)一些特殊效果時,為了保障效果的高度還原,我們使用了坐標(biāo)同步。例如小女孩頭上的提示氣泡和龍嘴角的“zzz”呼吸特效,接下來以氣泡為例介紹一下這一部分的實現(xiàn)。

若用常規(guī)的模式在 3D 場景中擺放一個 2D 的片,會導(dǎo)致小女孩動的時候,渲染出來的氣泡會穿幫或者 z-fighting。

3D-2D 坐標(biāo)同步的做法是將 Bubble 節(jié)點放在 UICanvas(SAR Creator 處理 2D 元素的節(jié)點)中,每一幀將小女孩模型里的骨骼變換節(jié)點在 3D 空間中的位置轉(zhuǎn)化成 UICanvas 坐標(biāo)系的坐標(biāo),再實時設(shè)置 Bubble 的位置屬性。


坐標(biāo)同步代碼如下
本文鏈接:http://m.www897cc.com/showinfo-26-82764-0.html2024 抖音歡笑中國年之招財神龍互動技術(shù)揭秘
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: 2024 抖音歡笑中國年之AnnieX互動容器創(chuàng)新玩法解析
下一篇: 華為 FreeLace Pro 2 獨創(chuàng) USB-C 直連快充,整機(jī)更帶來 25 小時超長續(xù)航