Hilo は、アリババが独自に開発したインタラクティブ ゲーム エンジンであり、オープンソースです_html/css_WEB-ITnose

Hilo、HTML5 クロスターミナル インタラクティブ ゲーム ソリューションのセット。ヒロは、タオバオや天猫カーニバルなど、複数のダブルイレブンの大規模かつ日常的なマーケティング活動をサポートしてきました。カーネルは最小限であり、DOM、Canvas、Flash、WebGL などを含む複数のレンダリング ソリューションを提供して、すべての端末要件とパフォーマンス要件を満たします。複数のモジュール パラダイムのパッケージ バージョンと、簡単にアクセスして拡張できるオープンな拡張メソッドをサポートします。 2D 物理学、骨格アニメーションの組み込みおよび拡張サポートを提供します。さらに、Hilo は豊富な周辺ツールや開発事例を提供します。

現在、Hilo はオープンソース化され、Hilo チームに統合されています。オープンソース アドレス https://github.com/hiloteam/Hilo (スター歓迎)

Hilo の特徴:

• ミニマリスト コア: Hilo コア モジュールは非常に合理化されており、2D ゲームを保持しています。エンジンの最も必要なモジュールもモジュール管理を採用しています。
• 完璧なアクセスと拡張: Hilo は、AMD、CMD、スタンドアロン アクセスなど、複数のモジュール パラダイムのパッケージ バージョンを複数の方法でサポートします。さらに、必要なモジュールとタイプを追加および拡張できます。
• 複数のレンダリング方法: DOM、Canvas、Flash、WebGL およびその他のレンダリング ソリューションを提供し、すべての端末での高いパフォーマンスの要件を満たすことができます。
• 完全な周辺ツール: アニメーション エディター、Yeoman スキャフォールディング、および典型的なケースの出力用の補助開発ツールを提供します。
• 豊富なケース: 天猫、モバイル淘宝網、ダブルイレブン、年末セールなど、多くの大規模かつ日常的なアクティビティをサポートします。代表作はカーニバルシティなど。

ミニマリスト コア、完全なアクセスと拡張

Hilo はミニマリスト コアを使用します。以下の図に示すように、コア モジュールには、基本的なクラス ツール (Class)、イベント システム (EventMixin)、レンダリング (Render)、およびビジュアル オブジェクト (View) が含まれています。

まず、Hilo への接続方法を見てみましょう。

Hilo はモジュール型アーキテクチャであり、各モジュールは依存関係をまったく持たないか、最小限に抑えようとします。 Hilo のソース コードでは、一般的なモジュール定義パラダイムは表示されません:

define(function(require, exports, module){        var a = require('a'),            b = require('b');        //something code here        return someModule;    });

代わりに、Hilo の各モジュールには次のようなアノテーション定義があります:

/** * @module hilo/view/Sprite * @requires hilo/core/Hilo * @requires hilo/core/Class * @requires hilo/view/View * @requires hilo/view/Drawable */

アノテーションを使用します。 @module タグを使用してモジュール名をマークし、@required を使用してモジュールの依存関係をマークします。

コンパイル段階では、これらのタグに基づいてモジュール関連の情報を取得し、さまざまなモジュール パラダイム定義に準拠するコードをコンパイルして生成します。例:

define(function(require, exports, module){    var Hilo = require('hilo/core/Hilo');    var Class = require('hilo/core/Class');    var View = require('hilo/view/View');    var Drawable = require('hilo/view/Drawable');    //some code here    return Sprite;};

依存関係のない独立したバージョンを提供することに加えて、AMD、CommonJS、CMD、CommonJS、Kissy およびその他のモジュール パラダイムのバージョンも提供します。開発者は、Hilo のさまざまなパラダイム バージョンをダウンロードして、自分の習慣に応じて使用できます。

hilo/└── build/    ├── standalone/    ├── amd/    ├── commonjs/    ├── kissy/    └── cmd/

次に、Hilo がどのようにスケールするかを見てみましょう。

Class.create は、次のような Hilo でクラスを作成するための主なメソッドです。

var SomeClass = Class.create({    Extends: ParentClass,    Mixes: SomeMixin,    Statics: SomeStatics,    constructor: Constructor,    propertyName: propertyValue,    methodName: methodValue });

その中には次のものがあります:

• 拡張 - 親クラスを指定します。
• ミックス - ミックス オブジェクトを指定します。オブジェクトまたは配列を指定できます。
• 静的 - 静的プロパティを指定します。
• コンストラクター - クラスを作成するコンストラクター。

さらに、Hilo は Class.mix(target, [mixinObject]) を使用して、プロパティとメソッドをターゲットに混合します。

コード例:

var EventMixin = {    on: function(type, handler){ },    off: function(type, handler){ },    fire: function(type, detail){ }}Class.mix(object, EventMixin);

Hilo のビジュアル オブジェクトを拡張する基本クラス View を例に挙げてみましょう。ビューは四角形で表され、画像とテキストの両方を最小の四角形で囲むことができます。通常のアニメーションのほとんどは、これらのビジュアルオブジェクトに対して平行移動、回転、拡大縮小、透明化処理などの操作を行うことで実現できます。

上の図に示すように、View はビジュアル オブジェクトの表示に関する基本的な問題を解決します。

クラスの作成とクラスの拡張に Hilo が提供するメソッドを使用すると、ビジュアル オブジェクトによって管理される Container クラスを拡張できます。

• ビジュアル オブジェクトの追加と削除
• ビジュアルオブジェクトのソート
• 位置の入れ替え、ビジュアルオブジェクトの帰属・包含判定
• 座標系の位置からビジュアルオブジェクトを取得
• 位置、インデックス、IDに応じて追加ビジュアル オブジェクトの削除

同様に、Hilo は、さまざまなビューの他の表示特性に基づいて、ステージ、ビットマップ、グラフィック、スプライトなどのタイプを拡張します。

複数のレンダリング方法

私たちは、Loop ループ内で入力を受け入れ、すべてのビジュアル オブジェクトのゲーム属性の更新を完了してからレンダリングする、ゲーム実行の中心的なプロセスを理解しています。以下は、単一のビジュアル オブジェクトの循環プロセスです。

ビジュアル オブジェクトとして、図に示すように、位置、サイズ、スケーリング、回転などの自然な情報が含まれています。次の図:

Update は計算プロセスです。レースの場合では、Update を通じて特殊効果を作成する方法について説明します。その前に、まずレンダリング、つまり自然情報に基づいて視覚オブジェクトを「描画」する方法について見てみましょう。では、View のレンダリング機能を実装するにはどうすればよいでしょうか?上の図に示すように、render 関数では 2 つの主な問題が解決されています。

• 位置，尺寸，旋转等变换（transform）
• 渲染（背景样式，图片，颜色，透明度等）

    render: function(renderer, delta){        //不同的View renderer方式可以多样，相同的View也可以根据renderer的类型不同而呈现差异化        ...    }

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 插件就可以导出如下的动画数据格式：

{    //图层数据，按层级从上到下排列    "layers":[        {            "name":"head",            //关键帧数据            "frames":[                {                    "tween": true, //是否缓动                    "duration": 10, //持续帧数                    "image":"img1",//对应texture中的键值                    "elem": {                        "scaleX": 1,                        "scaleY": 1,                        "rotation": 30,                        "originX": 46.5,                        "originY": 76.5,                        "x": 108.5,                        "y": 507.5,                        "alpha": 100 //透明度，范围0~100，0完全透明，100完全不透明                    }                }            ]        }    ],    //素材数据    "texture":{        "img1":{            "x":20, //在大图中的位置x            "y":50, //在大图中的位置y            "w":100,            "h":200        }    },    //舞台数据    "stage":{        "width":550, //动画容器宽        "height":400, //动画容器高        "fps":24 //帧频    },    //动作数据    "actions":{        "anim_die":12 //{动作名：帧数}    }}

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分解成多个块，分解方式如下图：

これらのブロックは、最初にロードされたときと、コンテンツが変更されたとき (比較的低頻度) にのみレンダリングされ、これらのキャッシュ リストに保存されます。このリストも、更新されるたびに、メモリにキャッシュされたリストに対して 1 回だけレンダリングする必要があるため、何百もの個別のビューがレンダリングされるという問題が回避され、描画時間が大幅に短縮されます。 。

さらに、上図のダーティ四角形の更新に示すように、これらのブロックでコンテンツの更新がある場合、ビュー 2 は特定のフレームでコンテンツの更新を行い、まずビューと交差するすべてのビューを見つけます。 2 に続き、これらのビューは Z 軸の遠いものから近いものの順に更新され、その交点のみが更新されます。このようにして、レンダリングする必要がある部分のみを可能な限りレンダリングすることができます。

簡単に言うと、まず構造的な観点から性能を確保し、それを大きく階層化して「動いている」ものと「あまり動いて​​いない」ものを抽出しました。次に、ビューをブロックに分割し、複数のビュー更新レンダリングを 512*512 サイズのビュー レンダリングに変換し、キャッシュ リストを形成して、キャッシュ リストに出力する必要があるオブジェクトを携帯電話の現実世界にレンダリングしました。インタラクション範囲内。同時に、キャッシュ リストを更新するときに、キャッシュ リスト内のビュー オブジェクトのすべての更新を回避するために、変更の原因となった最小の長方形ブロックを更新しようとしました。

物理

パフォーマンスとライブラリの簡素化を考慮して、Hilo はデフォルトの 2D 物理エンジンとして Chipmunk を選択しました。

私たちは、物理世界が非常に豊かであり、物理エンジンを通して物理世界全体を表示することは不可能であることを知っています。材質、剛体または非剛体、液体または布が異なると、物理的パフォーマンスに大きな違いがあります。 Hilo の基本クラス View がビジュアル オブジェクトの基本的な問題を解決するのと同じように、物理エンジンはいくつかの基本的な問題を解決するのに役立ちます。

ビジネスの場合、より物理的な効果を拡張できます。たとえば、2015 年の Tmall のレーシング プロジェクトの年央プロモーションでは、一連のレーシング ドリフト エフェクトを独自に実装しました。変更したのはビュー アップデートの計算方法でした。具体的な実装については、後続の紹介記事で紹介します。

上記の事例は、Hilo がアニメーション、パフォーマンス、物理学の 3 つの側面からより多くのことを実行できることを示しており、ビジネス サポートとテクノロジーの推進により、Hilo はより完璧になると信じています。インタラクションに興味のある学生が Hilo オープンソース チームに参加して、Hilo の機能を向上させ、Hilo の開発効率を向上させ、より満足のいく作品を生み出すことを強く望んでいます。

Hilo は、アリババ フロントエンド委員会の提案から開発完了まで多くの注目と支援を受けており、共有、アリババ コミュニケーションズ、モバイル タオバオ、天猫、シティ ライフもサポートしています。 、国際 UED、Alimama などの A BU。技術的な宣伝のため、ここではいちいちお礼を言いません。 2 人の主な著者の名前を残してください @正霖@毛川

参考

• Hilo Github オープンソース アドレス https://github.com/hiloteam
• ヒロ公式ウェブサイト: http://hiroteam.github.io/