前言

本次春節(jié)活動，使用到了字節(jié)內(nèi)的主要前端、跨端、互動技術(shù)產(chǎn)品。主要涉及：BNs28資訊網(wǎng)——每日最新資訊28at.com

• 跨端框架 提供了首屏直出的方案使其具有較短的首屏?xí)r間，能夠大大提升業(yè)務(wù)加載成功率。跨端框架也提供了 Canvas 作為 SAR Creator 等渲染引擎的運(yùn)行環(huán)境。
• SAR Creator 是抖音前端架構(gòu)自研的一款基于 TypeScript 的高性能互動解決方案。SAR Creator 提供面向設(shè)計和研發(fā)同學(xué)的工作流，內(nèi)置常見 2D / 3D 渲染能力、動效、粒子、物理等效果支持。

活動中，主要支持了 5 個互動玩法：“招財神龍”、“神龍?zhí)綄殹薄ⅰ皳u福簽”、“保衛(wèi)現(xiàn)金”和“紅包雨”，如下所示。BNs28資訊網(wǎng)——每日最新資訊28at.com

BNs28資訊網(wǎng)——每日最新資訊28at.com

包含四個主題的「尋寶場景」，每次尋寶會隨機(jī)一個主題，如下，從左到右分別是山川、雪鄉(xiāng)、丹霞和江南。BNs28資訊網(wǎng)——每日最新資訊28at.com

BNs28資訊網(wǎng)——每日最新資訊28at.com

整個「家場景」是由 3D 和 2D 元素混合構(gòu)建的。3D 部分包括小女孩、龍、地面和雪堆。2D 元素主要有炮仗、房子以及神龍回家后小女孩頭上的提示氣泡，是用圖片實現(xiàn)的。還有一些 2D 動畫元素，比如房子后面一直循環(huán)播放的紅包動畫、龍沉睡時嘴角的“zzz”呼吸效果。BNs28資訊網(wǎng)——每日最新資訊28at.com

場景搭建

設(shè)計同學(xué)使用 SAR Creator 編輯器搭建「家場景」，包括 3D 模型/2D 精靈的擺放、燈光和相機(jī)參數(shù)的設(shè)置等。SAR Creator 編輯器提供了圖形化界面，可以方便地調(diào)整場景元素的層級關(guān)系、位置、朝向、縮放比例以及材質(zhì)參數(shù)等。「家場景」的 3D 模型使用透視相機(jī)渲染，而 2D 精靈等使用正交相機(jī)渲染。最終，SAR Creator 渲染出的場景畫面還原了設(shè)計稿的效果。BNs28資訊網(wǎng)——每日最新資訊28at.com

SAR Creator 場景中所有元素，包括相機(jī)、燈光等，都以 entity（實體）的形式存在，entity 之間存在父子關(guān)系，形成一棵節(jié)點樹，如下圖左上角“層級”標(biāo)簽頁下的內(nèi)容。父節(jié)點 entity 的 Transform3D 組件的位置、旋轉(zhuǎn)和縮放屬性，會影響子節(jié)點的相同屬性。Enity 上可以掛載自定義腳本，影響 enity 的行為邏輯。SAR Creator 提供了大量操縱 entity 的引擎能力。BNs28資訊網(wǎng)——每日最新資訊28at.com

BNs28資訊網(wǎng)——每日最新資訊28at.com

對于研發(fā)同學(xué)，可以基于graph進(jìn)行邏輯條件的配置。BNs28資訊網(wǎng)——每日最新資訊28at.com

BNs28資訊網(wǎng)——每日最新資訊28at.com

如上圖所示，例如進(jìn)入游戲后，用戶可能是在“龍沉睡”或者“龍待機(jī)”的狀態(tài)，我們通過在Graph的變量區(qū)建立代碼運(yùn)行的邏輯條件（支持Number和Boolean兩種類型），可以自定義一個case變量，當(dāng)case = 1，播放“龍沉睡”、當(dāng)case = 2，播放“龍待機(jī)”。BNs28資訊網(wǎng)——每日最新資訊28at.com

在代碼中，我們可以通過使用AnimationController.setValue(variableName,value)來觸發(fā)動畫執(zhí)行。BNs28資訊網(wǎng)——每日最新資訊28at.com

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ā)龍去尋寶的動畫。BNs28資訊網(wǎng)——每日最新資訊28at.com

我們還為動畫播放提供了鉤子函數(shù)，在動畫播放的特定時間，觸發(fā)自定義的邏輯回調(diào)。BNs28資訊網(wǎng)——每日最新資訊28at.com

// 獲取動畫控制器組件const animationController = this.entity.getScript(AnimationController);animationController.on('onStateEnter',(controller:AnimationController,state:AnimationState)=>{    //在此處實現(xiàn)業(yè)務(wù)邏輯});

坐標(biāo)同步

在實現(xiàn)一些特殊效果時，為了保障效果的高度還原，我們使用了坐標(biāo)同步。例如小女孩頭上的提示氣泡和龍嘴角的“zzz”呼吸特效，接下來以氣泡為例介紹一下這一部分的實現(xiàn)。BNs28資訊網(wǎng)——每日最新資訊28at.com

BNs28資訊網(wǎng)——每日最新資訊28at.com

若用常規(guī)的模式在 3D 場景中擺放一個 2D 的片，會導(dǎo)致小女孩動的時候，渲染出來的氣泡會穿幫或者 z-fighting。BNs28資訊網(wǎng)——每日最新資訊28at.com

BNs28資訊網(wǎng)——每日最新資訊28at.com

3D-2D 坐標(biāo)同步的做法是將 Bubble 節(jié)點放在 UICanvas（SAR Creator 處理 2D 元素的節(jié)點）中，每一幀將小女孩模型里的骨骼變換節(jié)點在 3D 空間中的位置轉(zhuǎn)化成 UICanvas 坐標(biāo)系的坐標(biāo)，再實時設(shè)置 Bubble 的位置屬性。BNs28資訊網(wǎng)——每日最新資訊28at.com

BNs28資訊網(wǎng)——每日最新資訊28at.com

BNs28資訊網(wǎng)——每日最新資訊28at.com

坐標(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ù)航