原創 馭劍 淘系技術 4月22日
▐ 總覽
本文将圍繞如下三點展開分享：
1、介紹淘金币業務和業務的發展曆程，以及更新到最新版的背景。
2、介紹在這次更新過程中我們碰到的一些技術挑戰
3、針對這些挑戰的相關技術上的實作分享。
業務介紹
▐ 什麼是淘金币
我想很多小夥伴一定聽說過淘金币吧，但是不一定知道我們的淘金币業務，如果還不了解我們的業務，那你可以在手機淘寶首頁上方的衆多icon中找到“領淘金币”這個icon，點選進入後就能看到我們的淘金币産品了。
▐ 淘金币曆程
淘金币寶箱版當時的是在抓住使用者薅羊毛的心态以及金币抵錢心智的背景下産生的，頁面功能上就隻有一個簽到按鈕，使用者每天過來簽到下，簽到後就走了，逗留時間相對比較短，這種簽到就走的行為對頻道帶來的金币價值相對也有限。是以我們開始為考慮怎麼打造一種新的互動體驗，在不改變使用者金币抵錢的心智上，可以讓使用者能更長時間的在我們的頻道内逗留，并提升活躍度。
莊園1.0是淘金币走出遊戲化探索的第一步，當時的背景就是在存量使用者博弈下，如何增加使用者黏性和使用時長成為了一個嚴峻的問題，而遊戲是天然具有高使用者黏性、高使用時長的特性，我們将遊戲化和電商結合後産生了莊園，那當時上線後我們發現使用者接受度和資料表現都很好。
有了莊園1.0的成功後，那我們對遊戲化就更加有信心了，莊園2.0的時候我們加大了遊戲區域來增加遊戲場景感，并且增加了水滴任務來拓展使用者擷取金币的管道。
更新成小鎮的背景是在莊園的種植玩法在經曆了兩年多後，使用者從熟悉期慢慢轉化到疲勞期，我們需要給到使用者更多的新鮮感；産品方面：在曆次改版中積累了很多的經驗和方法論可以得以實踐驗證。技術方面：我們自研互動遊戲引擎日趨成熟，同時基礎營運平台能力也越來越完善，我們有強大的任務系統和彈窗系統來滿足使用者營運的能力。
▐ 更新了哪些
淘金币業務營運過程中，産品積累了一些遊戲化産品的經驗，在産品業務形态和界面中得以應用，為了給使用者更好的體驗和新鮮感，産品增加了故事線和等級、稱号、排名這些遊戲化元素，并且增加助力、合力這些互動行為來增加使用者體感，同時營運同學也提出了要增強營運能力以及更靈活的使用者觸達功能。
那這次更新在界面和功能上和莊園發生了巨大的變化，這些更新也在技術上對前端提出了一些挑戰？
技術實作
▐ 技術上的難點
- 産品希望增強營運能力，多管道的承接和分發，營運活動透出等更快使用者觸達的手段
- 素材資源數量衆多，20倍于莊園，同時也給設計師和開發協同效率提出了更高的要求
- 相比莊園一顆植物場景複雜度高了很多，建築上也承載更多的互動行為
- 業務使用者覆寫度廣，使用者機器性能也良莠不齊，對穩定性和相容性提出了很高的要求
相比莊園就一顆植物來說，小鎮場景複雜了好多。場景中的建築和裝飾物都是可以更新的，這樣導緻素材資源數量是莊園的近20倍，給設計師和開發系統效率提出了更高的要求，淘金币使用者的覆寫度很廣，好多使用者的機型性能不是非常好，這時候對我們業務的穩定性和相容提出了很高的要求。最後就是營運同學還希望能實作多管道的承接和分發，并且能更靈活的将一些資訊快速觸達給使用者。
那針對以上的這幾個難點我們采用哪些方式來解決這些問題呢？接下來我會簡單介紹下：
▐ 合理的分層架構
- 混合開發模式（DOM+CSS和Canvas）
為了滿足營運和視覺上的效果，我們設計了如下的分層架構，在保證層次分明的同時，我們也需要考慮到未來業務的靈活可擴充，在開發過程中我們采用的混合開發模式，就是DOM和Canvas混合開發，利用傳統DOM和CSS的排版優勢，更能跟上業務的疊代節奏。
分層上從下而上依次分為：
• 背景層：背景層是随着遊戲章節不同也變化，各章節有着不一樣的背景氛圍，同時也能滿足在各種節日可以透出目前節日氛圍的效果• 遊戲層：那遊戲層就是渲染遊戲建築和裝飾物的canvas層• 業務層：承載了遊戲簽到主玩法以及使用者的合力和助力等互動行為• 消息層：剛剛我們提到的營運同學想要的營運能力和消息觸達能力将在這一層實作，我們設計了一個高度定制化的彈窗模型，配合上後端能力，能實作彈窗界面編輯和DSL配置下發，這樣我們在不需要釋出版本的情況下就可以幫助營運同學将重要活資訊透出給使用者。
采取了上面的分層後，遊戲層和業務層、消息層之間我們采用了最普遍的事件通信機制來互相通信。
▐ 遊戲層實作
剛才我們說了前端的分層，上面的分層中除了遊戲層其他的我們都可以采用DOM+CSS來開發，那傳統的DOM+CSS的實作我就不多說了，接下來我會通過遊戲場景搭建流程、動畫實作、穩定性和性能優化、無障礙支援這個方面重點介紹下遊戲層的實作細節。
遊戲場景搭建流程
▐ 約定視覺傳遞規範
為了提升視覺和開發協同的效率，我們一開始就和設計同學約定了視覺傳遞規範，這樣就能保證視覺傳遞的素材可以順利渲染到場景中。
不知道小夥伴有沒有發現我們的遊戲場景中的建築使用的是2.5D的方式來繪制的。舉個2.5D風格例子，如果玩過紀念碑谷的小夥伴應該會非常有體感，這種風格的遊戲就是我們經常說的2.5D遊戲。2.5D風格的設計一般使用右側的類似的是右側下方展示的網格畫布作為參考線，感興趣的小夥伴可以自行了解下一個2.5D風格素材産出的過程。
▐ 視覺産出流程
上面我們聊了我們約定了視覺生産的素材要符合2.5D風格，這裡我簡單介紹下我們的視覺産生流程，相比傳統的産生流程，我們的流程還是有些許不同的，這些流程上的差異也幫助我們實作更加細膩真實的場景。
上半部分是傳統的2.5D風格生産的過程，設計師在PS中基于設定的網格畫布來繪制一個個部件，然後将部件拼成模型。
而我們的流程如下方，我們是通過設定了建築線稿和原畫效果後采用了C4D模組化的方式的方式，最終模組化的模型渲染後傳遞。
▐ 三渲二
看到這裡有沒有小夥伴覺得疑惑，不是說好了2.5D是2D的方式嗎，為什麼引入了3D模組化的方式？
其實我們這種流程一般被稱為三渲二，三渲二是先建立三維場景等資源，然後以某個角度來渲染目前場景形成二維圖檔，那三渲二的優點有更真實的立體感，後期建築會有動畫，有了3D模型後制作就更簡單，這在我之後的動畫實作會講到。同時三渲二更容易标準化和量産，因為傳統的二維動畫的每一幀都需要畫師一筆一筆勾勒出來，很難标準化的大規模量産。
右側我展示了兩個使用三渲二的精彩案例，他們制作出來的動畫畫面精美，下方我放了個刺客伍六七劇組放出的花絮位址，它其中就使用到了部分三渲二技術，這個視訊例子僅做參考，讓大家對三渲二有個體感，具體伍六七中使用到了多少三渲二就不得而知了。
▐ 建築排列
建築的模型我們可以規範設計和流程化渲染傳遞了，那拿到這些建築素材後我們應該如何渲染到場景下，同時又能符合設計師整個場景的效果呢？
大家一定注意到了，我們反複提到了格子畫布，格子畫布是我們素材設計時的容器和參考，我們在模型制作第一步，場景線稿時就是在格子畫布上設計場景的，那一個個的格子其實就是我們建築模型的定位點。那我們使用的就是TileMap（瓦片地圖）。
在2.5D中這個格子畫布就成為TileMap（瓦片地圖），我們的建築可以通過一個個格子的坐标來換算成螢幕上的坐标的，換算成螢幕上坐标後我們要做的就是把對應的建築放到那個坐标上。然後一個個建築按照坐标放入後即可，其實這裡面還隐藏着一個各個建築深度的換算，感興趣的小夥伴可以去了解下TIleMap。
▐ 編輯器提效
為了幫助我們快速還原場景，我們開發了一個簡單的編輯器來幫助我們提效，編輯器不僅僅幫我們将建築放置好，他還有一個非常重要的功能就是幫助我們打通素材從産生、上傳、引用這個鍊路。
視覺制作完素材後，上傳到我們的資源平台，資源平台會對素材進行校驗優化最終生成符合标注的素材，那編輯通過打通資源平台，可以直接使用資源平台的素材來編輯場景，編輯完後的場景可以通過導出DSL後使用我們開發的插件就可以渲染完成場景還原了。
動畫實作
▐ 引子
上面我們簡單介紹了我們場景的還原過程，我們也提到了使用插件來渲染場景，上面這些基礎前提都來自于我們具有完善的互動遊戲開發的鍊路，包括于我接下來要講的我們團隊開發的遊戲引擎Evajs。
▐ 遊戲引擎
在講動畫實作前我們先聊下遊戲引擎，我們做遊戲前還是繞不開需要和遊戲引擎打交道，而我們這次渲染的動畫能力都是有我們Evajs來支援的，Evajs的底層架構還是基于ECS， 關于ECS我簡單的用右側的這張圖檔來介紹下，比如我給一個 遊戲對象 添加了ImgComponent元件屬性，那它就能通過渲染成一個圖檔對象，同理我給它增加了一個TranslationComponent元件，那它就有了過渡動畫的能力。每一個對應的系統管理對應的多個元件，元件的增删改就會通過系統作用到對應的遊戲對象上。
回歸到我們的遊戲引擎，它所擁有的支援渲染和動畫能力的特性能幫助我們實作場景中衆多素材類型渲染的問題，我們要做的就是通過判斷不同的動畫類型來設定不同的動畫元件即可，那接下來我将介紹下我們使用的動畫類型：
▐ 不同的動畫類型
- 骨骼動畫
小鎮場景中建築很多是帶有動效的，有些是可以通過簡單的形變、位移、旋轉就能搞定的動效，這類動畫我們采用的骨骼動畫，骨骼動畫通過操作骨骼的朝向和位置來達到模型動畫的效果，我們的骨骼動畫是龍骨動畫，龍骨動畫由一張圖檔和兩個描述檔案組成，整體資源大小合适。
- 幀動畫
那有些複雜的動效效果，比如一些帶3D效果的旋轉透視和陰影不能通過2D平台的動效實作，那我們這時候會采用幀動畫的方式來實作，采用幀動畫能保證使用者看到最佳的視覺效果，當然我使用了壓圖、抽幀、優化拼接算法來達到效果和圖檔大小、占用記憶體之間的平衡。
▐ 穩定性和性能優化
淘金币産品的使用者覆寫廣，伴随着這次場景提升帶來了資源近20倍的增長，這時候考慮到記憶體和可能存在的crash風險，我們采用了如上的一整套降級方案，底層的降級平台提供裝置評分管理、降級政策配置、降級開關等功能，降級平台同時也支援降級某款指定機型，這樣就能應對大促期間比如某些機型crash量增大時做降級。
頁面級别我們有降級SDK擷取目前裝置的評分後根據降級平台的政策我來确定機型的評級，拿到了裝置的端評級後，我們就可以執行我們的降級政策，針對高中端機型我們采用龍骨、幀動畫這種效果優異的動畫，在低端機我們就會降級成靜态圖檔，同樣的低端機在css動畫、js動畫上會被降級來穩定cpu幀率。
無障礙支援
▐ 背景
- 手淘APP的使用者群體，就視障人士一直以來是有一定的量
- 近一兩年大促互動活動中我們看到更多的視障人士也積極參與進來
- 從産品本身體驗方面來說視障人士也是我們不應該忽略的使用者
其實一直有視障人士在通過手機淘寶購物，手淘從2011年開始就在做無障礙方面的優化，随着近幾年手機的普及率越來越高，越來越多的視障人士也享受到了網絡購物所帶來的便利。我們也驚奇的發現每年大促期間，是不是就會有報道說越來越多的視障人士參與到活動中。從淘金币本身出發，我們的使用者群體覆寫也是非常廣的，這部分的使用者我們也是不應該忽略的，是以我們在開發過程中就盡量考慮到了無障礙的支援。
當我們提到手機端的無障礙時，由于障礙的劃分非常多，比如聾啞、色盲、聽力受損、閱讀障礙和了解障礙等等，有些障礙類型在現階段的情況下我們還沒有好的辦法來解決可通路性，我們今天讨論的主要圍繞視障人士。那接下來讓我們看下視障人士是如何來通路頁面的：
▐ 視障人士如何使用手機
我們看到視障人士在開啟了讀屏功能後，通過手指在螢幕上滑動來切換頁面中的元素焦點，然後聽到相對應的焦點元素的資訊來擷取頁面資訊的。是以為了讓視障人士能了解我們的産品和業務功能，我們需要在可獲得焦點的元素上添加我們的資訊。
▐ WAI-ARIA規範
WAI-ARIA是W3c的Web無障礙推薦推進組織釋出的可通路網際網路應用的實作指南，它主要包含兩個部分，role和aria屬性，role屬性辨別了這個Dom元素是做什麼的，aria屬性描述了與之有關的特征以其什麼樣的狀态。
左下角我們給了一個示例，由于button預設樣式等原因，在富應用下我們往往會用div來實作，在缺少語義的div上我們增加了role和aria屬性就可以實作對無障礙人士友好的焦點元素，這時候開啟了讀屏軟體後将我們的“簽到擷取金币”的資訊讀給使用者。
WAI-ARIA規定的可遠遠不止這些，它是一份非常詳盡的能指引我們建構對障礙人士友好頁面的技術規範，它給出了各種富應用元件的最佳實踐，如slider、checkbox、progressbar等。感興趣的小夥伴可以去研究下。
▐ 具體實踐中如何做
規範本身很複雜，也面面俱到，看到這些估計大部分會望而卻步，其實我們至少能做到如上圖這些點，我個人認為那你的頁面在無障礙化方面絕對可以戰勝網絡80%-90%左右的頁面了。
那我們剛剛講的都是在Dom層你可以通過ARIA标準來實作無障礙化的方法，然而互動遊戲産品很多都是Canvas區域，那我們怎麼做無障礙呢？
▐ 遊戲中如何實作
遊戲中的Canvas層沒有像Dom那樣的可以被讀屏軟體讀取到的元素，那我們應該怎麼做呢？我們可以通過将遊戲中可互動的對象，比如我們淘金币場景中的建築物，我們計算建築物的坐标、寬高等資訊映射到Dom層，通過生成對應的Dom層，并且設定對應的ARIA資訊我們就可以實作讀屏軟體讀取了
▐ 最終效果
那我們做了無障礙要如何來驗證呢？最簡單的方式是我們在手機上打開讀屏軟體，然後嘗試閉着眼睛去使用，當你認為你開發的頁面在你沒有看的情況下能順利使用下來就可以認為合格了。
當然國内也有權威的機構來對你的産品來進行評定，深圳資訊無障礙研究會就是其中之一，你可以通過送出你的測試産品給到它們，相比我們開發者他們這些使用者是真實的視障使用者，同時他們在不了解産品功能設定的前提下使用，他們能提出很多建議和優化點非常有價值的。右側展示了我們産品無障礙化做的效果，大家可以感受下。
當然我們能做的無障礙化的功能可能也很有限，要做好無障礙需要很大的耐心和更多的對于視障人士的同理心，這裡隻是個簡單的示範，感興趣的小夥伴可以嘗試在閉眼的情況下感受下自己開發的産品。
總結