本次春節活動,使用到了字節內的主要前端、跨端、互動技術產品。主要涉及:
SAR Creator
等渲染引擎的運行環境。活動中,主要支持了 5 個互動玩法:“招財神龍”、“神龍探寶”、“搖福簽”、“保衛現金”和“紅包雨”,如下所示。
包含四個主題的「尋寶場景」,每次尋寶會隨機一個主題,如下,從左到右分別是山川、雪鄉、丹霞和江南。
整個「家場景」是由 3D 和 2D 元素混合構建的。3D 部分包括小女孩、龍、地面和雪堆。2D 元素主要有炮仗、房子以及神龍回家后小女孩頭上的提示氣泡,是用圖片實現的。還有一些 2D 動畫元素,比如房子后面一直循環播放的紅包動畫、龍沉睡時嘴角的“zzz”呼吸效果。
設計同學使用 SAR Creator 編輯器搭建「家場景」,包括 3D 模型/2D 精靈的擺放、燈光和相機參數的設置等。SAR Creator 編輯器提供了圖形化界面,可以方便地調整場景元素的層級關系、位置、朝向、縮放比例以及材質參數等?!讣覉鼍啊沟?3D 模型使用透視相機渲染,而 2D 精靈等使用正交相機渲染。最終,SAR Creator 渲染出的場景畫面還原了設計稿的效果。
SAR Creator 場景中所有元素,包括相機、燈光等,都以 entity(實體)的形式存在,entity 之間存在父子關系,形成一棵節點樹,如下圖左上角“層級”標簽頁下的內容。父節點 entity 的 Transform3D 組件的位置、旋轉和縮放屬性,會影響子節點的相同屬性。Enity 上可以掛載自定義腳本,影響 enity 的行為邏輯。SAR Creator 提供了大量操縱 entity 的引擎能力。
對于研發同學,可以基于graph進行邏輯條件的配置。
如上圖所示,例如進入游戲后,用戶可能是在“龍沉睡”或者“龍待機”的狀態,我們通過在Graph的變量區建立代碼運行的邏輯條件(支持Number和Boolean兩種類型),可以自定義一個case
變量,當case = 1,播放“龍沉睡”、當case = 2,播放“龍待機”。
在代碼中,我們可以通過使用AnimationController.setValue(variableName,value)
來觸發動畫執行。
const animationController = this.entity.getScript(AnimationController);if(showAwake) { // 需要播沉睡 animationController.setValue("case", 1)}else if(showIdle){ //需要播放idle animationController.setValue("case", 2)}
再比如,在某一個時間,用戶點擊了“去尋寶”按鈕,這時候通過設置animationController.setValue("showGoOut",true)
即可觸發龍去尋寶的動畫。
我們還為動畫播放提供了鉤子函數,在動畫播放的特定時間,觸發自定義的邏輯回調。
| 在進入狀態時觸發 |
| 在完全退出狀態時觸發 |
| 在狀態更新時觸發 |
// 獲取動畫控制器組件const animationController = this.entity.getScript(AnimationController);animationController.on('onStateEnter',(controller:AnimationController,state:AnimationState)=>{ //在此處實現業務邏輯});
在實現一些特殊效果時,為了保障效果的高度還原,我們使用了坐標同步。例如小女孩頭上的提示氣泡和龍嘴角的“zzz”呼吸特效,接下來以氣泡為例介紹一下這一部分的實現。
若用常規的模式在 3D 場景中擺放一個 2D 的片,會導致小女孩動的時候,渲染出來的氣泡會穿幫或者 z-fighting。
3D-2D 坐標同步的做法是將 Bubble 節點放在 UICanvas(SAR Creator 處理 2D 元素的節點)中,每一幀將小女孩模型里的骨骼變換節點在 3D 空間中的位置轉化成 UICanvas 坐標系的坐標,再實時設置 Bubble 的位置屬性。
坐標同步代碼如下
本文鏈接:http://www.www897cc.com/showinfo-26-82764-0.html2024 抖音歡笑中國年之招財神龍互動技術揭秘
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com