hilo，一套html5跨終端的互動遊戲解決方案。hilo支援了多屆淘寶&天貓狂歡城等雙十一大型和日常營銷活動。核心極簡，提供包括dom，canvas，flash，webgl等多種渲染方案，滿足全終端和性能要求。支援多種子產品範式的包裝版本以及開放的擴充方式，友善接入和擴充。提供對2d實體，骨骼動畫的内建和擴充支援。另外，hilo提供豐富的周邊工具及開發案例。下文來自一位雲栖社群新的朋友，天貓事業部-産品技術部江成的分享。
目前，hilo已經開源，并入到hilo team中。開源位址 https://github.com/hiloteam/hilo （歡迎star）
hilo的特點：
極簡核心： hilo核心子產品極精簡，保留了2d遊戲引擎最必要的子產品，同時采用子產品化管理。
完善接入&擴充： hilo 支援多種子產品範式的包裝版本，包括amd，cmd，standalone多種方式接入。另外，你可以新增和擴充需要的子產品和類型。
多種渲染方式：提供dom，canvas，flash，webgl等多種渲染方案，可以做到跨全端，高性能的要求。
完善的周邊工具：提供動畫編輯器 ，yeoman腳手架及典型案例産出的輔助開發工具。
案例豐富： 支援天貓，手淘多次大型和日常活動，如雙十一，年中大促等。代表産品如狂歡城。
hilo采用極簡的核心。核心子產品包括基礎類工具（class），事件系統（eventmixin），渲染（render）和可視對象（view），如下圖所示。
首先，我們來看看如何接入hilo。
hilo是子產品化的架構，且每個子產品盡量保持無依賴或最小依賴。在hilo的源碼中，你看不到一般的子產品定義的範式：
取而代之的是，hilo的每個子產品都會有這樣的注釋定義：
我們使用注釋标簽<code>@module</code>來标記子產品名稱，用<code>@requires</code>标記子產品的依賴。
在編譯階段，我們會根據這些标記擷取子產品的相關資訊，然後編譯生成符合不同的子產品範式定義的代碼。比如：
我們除開提供一個獨立無依賴的版本外，還提供amd、commonjs、cmd、commonjs、kissy等多種子產品範式的版本。開發者可以根據自己的習慣，下載下傳hilo的不同範式版本使用。
接下來，我們來看看hilo如何做擴充。
<code>class.create</code> 是hilo裡建立類的主要方法，如下：
其中：
<code>extends</code> - 指定一個父類。
<code>mixes</code> - 指定混入對象。可以是一個object或array。
<code>statics</code> - 指定靜态屬性。
<code>constructor</code> - 建立類的構造函數。
此外 hilo 使用 <code>class.mix(target, [mixinobject])</code>，可以為target混入屬性和方法。
代碼示例：
再以擴充hilo的可視對象的基礎類view為例。view在表現上就是一個個矩形，無論圖檔還是文字都可以使用一個最小的矩形包裹。在這些可視對象上做平移，旋轉，縮放，透明處理等操作就可以實作普通動畫的絕大部分。
如上圖所示，view解決了可視對象展示的基本問題。
利用hilo提供建立類和擴充類的方法，我們可以擴充出可視對象所屬管理的container類：
添加和删除可視對象
可視對象排序
位置對換，可視對象的所屬包含判斷
由坐标系的位置擷取可視對象
根據位置、索引、id來添加和删除可視對象
類似地，根據不同view的其他展示特性，hilo擴充出舞台stage，位圖bitmap，畫圖graphic，精靈動畫sprite等類型。
我們知道一個遊戲運作的核心流程——在一個loop循環内，接受輸入并完成對所有可視對象的遊戲屬性更新，然後渲染。下面是單個可視對象的一個循環過程：
作為一個可視對象，包含了位置，大小，縮放，旋轉等自然資訊，如下圖所示：
update是個計算過程，後面賽車案例會講通過update我們可以做一些特殊的效果出來。在這之前，我們先看看渲染，即如何根據可視對象的自然資訊來把他們 “畫”出來。那麼如何實作view的render函數呢？如上圖所示，在render函數中主要解決兩個問題：
位置，尺寸，旋轉等變換（transform）
渲染（背景樣式，圖檔，顔色，透明度等）
hilo首次提出了特别的渲染方案——即提供dom 、canvas、 flash或者webgl 四種渲染的方式來實作render，目前該方案已經申請專利。這四種渲染方式是和view獨立分開的，view在做自身屬性更新時完全不需要考慮怎麼被“畫”出來，同樣，拿到view後我們可以使用不同的“畫筆”把它描繪出來。如果你有更好的繪制方式，也可以擴充出更多的渲染方案。如下圖所示：
view可以粗略分為普通類的view，文字類view（text）和畫圖類view（graphic）幾種類型。不同類型的view“長相”不盡相同，在做update和render時也要針對處理。
普通類的view，如bitmap，container，button，sprite，在渲染層面主要處理圖檔的展示問題。單從圖檔展示的技術實作上講，dom渲染可以通過設定元素的background樣式實作，canvas也有繪圖方法drawimage，webgl則可以通過shader做紋理綁定。
特别地，在flash的渲染模式下，hilo首先将view所有和繪圖相關的方法通過jsbridge的方式交由擴充卡flashadapter，flashadapter來翻譯成對應flash工程實作繪制的方法，如下圖所示：
由于flash在pc浏覽器上的廣泛支援，特别是ie的支援，使用flash渲染額外好處就是跨終端，這個終端包括所有主流pc浏覽器（包括ie 6，7，8）在内。
另外，在一些低端的手機浏覽器上，可以選擇dom渲染模式來代替其他的渲染方式。在canvas支援不好的機器上或者互動遊戲場景本身比較耗性能情況下，dom渲染模式可以很好地勝任渲染的工作。2015年天貓年中大促的賽車互動，我們就在android機器上使用dom渲染的方案。
除了多種渲染模式，hilo還提供給一些其他衍生能力。這些衍生能力或者來自每次項目的技術改進，或者來自對其他優秀引擎的能力的吸收。例如hilo支援主流骨骼動畫和自建骨骼動畫系統（tahiti），狂歡城多圖檔下高性能優化，主流實體引擎無縫支援和一些特殊實體效果實作。
相比較精靈動畫（sprite animation），骨骼動畫（skeletal animation）使用一套資源就可以完成千萬種動作變化。
目前做骨骼動畫比較成熟的産品有spine和dragonbones 。兩者在功能上已經接近，考慮dragonbones免費，可自由使用，hilo實作了對dragonbones的支援。
hilo也實作了自己的動畫編輯器（目前僅内部使用）——tahiti。tahiti通過flash插件的方式實作，目前可以支援css3 animation，dom，canvas，hilo動畫導出。
骨骼動畫将可視對象進行分解，得到一個個可視元件。很顯然，這些一個個可視元件本身就是一個個view，隻要調整相應的時間片内調整這些view的transform屬性，把他們組合起來就是一套完整的動作。
tahiti将分離出的可視對象扁平化管理，各個部件處于同一層級。借助我們自己實作flash 插件就可以導出如下的動畫資料格式：
tahiti實作了對導出資料的解析，再借助hilo的渲染，就可以把設定的動畫運作起來了。特别地，tahiti不僅對接了hilo的渲染，還可以對接了css3 animation，獨立js模式（canvas）的渲染。
hilo 骨骼動畫 demo 點這裡
一年一度的雙十一狂歡城是檢驗性能的大考。以2015年雙十一狂歡城為例，在性能方面主要面臨的挑戰：
多圖：100多商家，每個商家都有品牌logo
動畫：大部分商家需要動态展示logo，至少3幀精靈動畫
單屏：所有的動畫需要在一個頁面裡分屏展示（iphone 6 plus 下為8屏）
狂歡城預估圖檔總數為200張 （ 252*296），為了優化性能，我們首先對整體畫面做了三個分層：
地圖部分：此層的資源絕大數為靜止畫面，内容更新機率低。
logo展示部分：商家品牌的動态展示區域，一般為3幀的精靈動畫。
ui 層：導航，操作ui等。
下面主要看看地圖部分的優化。
地圖部分多為靜止畫面，為tiledmap的拼塊。由于canvas大小有限制，同時為了性能考慮，我們把8屏狂歡城界面按512*512分解成多個塊，分解方式如下圖：
把這些分塊獨立成一個個canvas，他們隻在首次加載時和内容更改時（比較低的頻率）進行渲染，渲染結果儲存在這些cache list中。這個list同時被圖示地圖container管理，每次更新時隻需要對這些緩存在記憶體中的list做一次整體渲染即可，這樣就避免了成百個view單獨渲染的問題，大大的降低了draw的次數。
此外，這些分塊在有内容更新時，如上圖的髒矩形更新所示，view 2在某一幀有内容更新，那麼先找出和view 2 所有相交的view，然後把這些view按照z軸次序從遠及近更新，且隻更新其相交部分。這樣，便可以最大限度的隻渲染需要渲染的部分。
概括地說，我們首先從結構上保證性能，大的方面上做了分層，抽出那些“動”和“不太動”的。其次，我們把view做了分塊，把多個的view 更新渲染變成了一個512*512 大小的view 渲染，組成cache list，然後在互動範圍内把cache list裡需要輸出的對象渲染到手機真實實體屏。與此同時，在更新cache list時，為了避免cache list 内 view對象的全部更新，我們嘗試了更新引起變化的最小矩形塊。
考慮到性能和庫的精簡，hilo選擇chipmunk 作為自己的預設2d實體引擎。
我們知道實體世界非常豐富，不可能通過一個實體引擎就把實體世界全部展現的。不同材質，剛體或非剛體，流體或者布料這些在實體表現上差别巨大。實體引擎幫助我們解決一些基本問題，就像hilo裡的基礎類view解決可視對象的基礎問題。
面向業務，我們可以擴充出更多的實體效果。如2015年天貓年中大促的賽車項目，我們自己實作了一套賽車漂移的效果，改寫的就是view update計算方式。具體實作在後續介紹文章中推出。
以上，從動畫，性能，實體三個方面案例闡述了hilo可以做更多的事情，相信在業務支援和技術推動下，hilo可以更加完善，非常希望對互動感興趣的同學加入到hilo開源隊伍中，完善hilo能力，提高hilo開發效率，同時産出更多令人欣喜的作品。
hilo 從阿裡前端委員會建議立項到開發完成，得到許多關注和幫助，也同時支援到共享、阿裡通信、手淘、天貓、城市生活、國際ued、阿裡媽媽多個bu。因技術推廣這裡就不一一感謝。 留下兩位主要作者的花名 @正霖 @墨川
hilo github 開源位址 https://github.com/hiloteam
hilo 官網： http://hiloteam.github.io/
特别開設了微網誌：阿裡hilo（歡迎感興趣的朋友聯系）