Hilo, a set of HTML5 cross-terminal interactive game solution. Hilo has supported several large-scale and daily marketing activities of Singles’ Day, such as Taobao and Tmall Carnival City. The kernel is very simple, providing a variety of rendering schemes including DOM, Canvas, Flash, WebGL and so on, meeting the requirements of full terminal and performance. Support a variety of module paradigm packaged version and open expansion mode, easy access and expansion. Provides built-in and extended support for 2D physics and bone animation. In addition, Hilo provides a wealth of peripheral tools and development cases.

Hilo is now open source and incorporated into the Hilo Team. Open source github.com/hiloteam/Hi… (Welcome Star)

Hilo features:

  • Minimal kernel: The Hilo core module is extremely lean and retains the most essential modules for a 2D game engine, while adopting modular management.
  • Perfect Access & Extension: Hilo supports packaged versions of a variety of module paradices, including AMD, CMD, Standalone access in a variety of ways. In addition, you can add and extend modules and types as needed.
  • Various rendering methods: DOM, Canvas, Flash, WebGL and other rendering schemes are provided, which can meet the requirements of cross-end and high performance.
  • Complete peripheral tools: provides animation editors, Yeoman scaffolding and ancillary development tools for typical case production.
  • Abundant cases: supported Tmall and mobile shopping for many large-scale and daily activities, such as Singles’ Day, mid-year Promotion, etc. Represent products such as carnival city.

Minimal kernel, perfect access and extension

Hilo has a minimalist core. The core modules include basic Class tools, EventMixin, Render, and View, as shown in the figure below.

First, let’s look at how to access Hilo.

Hilo is a modular architecture with minimal or no dependencies for each module. In Hilo’s source code, you don’t see the usual paradigm for module definitions:

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

Instead, each Hilo module has a comment definition like this:

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

We use the annotation tag @module to mark the module name and @requires to mark the module’s dependencies.

At compile time, we get information about the module based on these tags, and then compile to generate code that conforms to the different module paradigm definitions. Such as:

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;
};
Copy the code

In addition to providing a standalone version, we also provide AMD, CommonJS, CMD, CommonJS, Kissy, and many other module paradigm versions. Developers can download different paradigm versions of Hilo to use according to their own habits.

Hilo / └ ─ ─ the build / ├ ─ ─ standalone / ├ ─ ─ amd / ├ ─ ─ commonjs / ├ ─ ─ kissy / └ ─ ─ CMD /Copy the code

Next, let’s take a look at how Hilo extends.

Class. Create is the main method for creating classes in Hilo, as follows:

var SomeClass = Class.create({
    Extends: ParentClass,
    Mixes: SomeMixin,
    Statics: SomeStatics,
    constructor: Constructor,

    propertyName: propertyValue,
    methodName: methodValue 
});

Among them:

  • Extends– Specify a parent class.
  • Mixes– Specifies a mixin object. It can be an Object or Array.
  • Statics– Specify static attributes.
  • constructor– Creates a constructor for the class.

In addition, Hilo uses class.mix (target, [mixinObject]), which can mix properties and methods for target.

Code examples:

var EventMixin = {
    on: function(type, handler){ },
    off: function(type, handler){ },
    fire: function(type, detail){ }
}

Class.mix(object, EventMixin);

Take another example, View, the base class that extends Hilo’s visual objects. A View is presented as a rectangle, no matter the picture or text can be wrapped with a minimum rectangle. Pan, rotate, scale, transparence and so on on these visual objects can achieve most of the ordinary animation.

As you can see above, View solves the basic problem of visual object presentation.

Hilo provides methods for creating and extending classes. We can extend the Container class that visual objects belong to:

  • Add and remove visual objects
  • Visual object sort
  • Position swap, the ownership of the visual object contains judgment
  • Gets the visual object from the position of the coordinate system
  • Add and remove visual objects by location, index, and Id

Similarly, Hilo extends to Stage, Bitmap, Graphic, Sprite, and more, depending on the View’s other presentation features.

Multiple rendering methods

We know the core process of running a game — in a Loop, input is received, game attributes are updated to all visual objects, and then rendered. Here is a loop for a single visual object:

As a visual object, it contains natural information such as position, size, scale, rotation and so on, as shown in the picture below:

Update is a computational process, and we’ll see later in the racing case that we can do some special effects with Update. Before we do that, let’s look at rendering, which is how to “draw” visual objects based on their natural information. How to implement the Render function of a View? As shown above, there are two main problems solved in the Render function:

  • Position, size, rotation and other transform
  • Render (background styles, images, colors, transparency, etc.)
Render: function(renderer, delta){render: function(renderer, delta){render: function(renderer, delta){render: function(renderer, delta){render: function(renderer, delta){render: function(renderer, delta); }Copy the code

Hilo first proposed a special rendering scheme — providing DOM, Canvas, Flash or WebGL rendering methods to achieve render, and the scheme has applied for a patent. These four rendering methods are separate from the View. The View does not need to consider how to “draw” when updating its properties. Similarly, after taking the View, we can use different “brushes” to paint it. If you have a better way to draw, you can also expand to more rendering schemes. As shown below:

View can be roughly divided into ordinary class View, Text class View (Text) and View (Graphic) several types. Different types of views “look” different, Update and Render should also be handled.

General class views, such as Bitmap, Container, Button, and Sprite, deal mainly with image presentation at the rendering level. In terms of the technical implementation of picture display alone, DOM rendering can be achieved by setting the background style of elements, Canvas also has the drawing method drawImage, and WebGL can do texture binding by shader.

In particular, in Flash rendering mode, Hilo first sends all View methods related to drawing to the adapter FlashAdapter through JSBridge, and FlashAdapter translates them into methods corresponding to Flash project implementation drawing, as shown below:

Due to Flash’s extensive support on PC browsers, especially IE, the additional benefit of using Flash rendering is across terminals, including all major PC browsers (IE 6,7,8 included).

In addition, on some low-end mobile browsers, DOM rendering mode can be used instead of other rendering methods. DOM rendering works well on machines where Canvas support is poor or where the interactive game scene itself is performance intensive. In 2015, we used DOM rendering scheme on Android machine for the car interaction promoted by Tmall.

Derivative ability

In addition to multiple rendering modes, Hilo also provides several other derivative capabilities. These capabilities derive either from technical improvements in each project or from the incorporation of other excellent engine capabilities. For example, Hilo supports mainstream bone animation and self-built bone animation system (Tahiti), high performance optimization under Carnival City multiple images, seamless support for mainstream physics engines and implementation of some special physics effects.

Skeletal animation

Compared with Sprite Animation, Skeletal Animation can complete tens of thousands of action changes using a set of resources.

At present, Spine and DragonBones are relatively mature products for bone animation. The two are already functionally close, considering DragonBones is free and freely available, and Hilo implements Support for DragonBones.

Hilo has also implemented its own animation editor (currently only used internally), Tahiti. Tahiti is implemented by Flash plug-in and currently supports CSS3 animation, DOM, Canvas, Hilo animation export.

Bone animation decomposes visual objects to obtain visual components. Obviously, each of these visual components is itself a View, as long as the corresponding time slice adjust the transform property of these views, they combined into a complete set of actions.

Tahiti manages the separated visual objects flat, with each part at the same level. With the help of our own Flash plugin, we can export the following animation data format:

{// Layer data, arrange layers from top to bottom :[{"name":"head", // keyframe data "frames":[{"tween": true, // whether to slow "duration": {"scaleX": 1, "scaleY": 1, "rotation": 30, "originX": , 46.5, "originY" : 76.5 "x" : 108.5, "y" : 507.5, "alpha" : 100 // Transparency, range 0~100, 0 completely transparent, 100 fully opaque}}}]], / / material data "texture" : {" img1 ": {" x" : 20, / / place in the larger image x "y" : 50, / / place in the larger image y "w" : 100, the "h" : 200}}, / / stage data "stage" : {" width ": 550, / / animation container wide" height ": 400, / / animation container high" FPS ": 24 / / frame frequency}, / / actions data" actions ": {" anim_die" : 12 / / {action name: Frames}}}Copy the code

Tahiti implements the analysis of the exported data, and Hilo renders the animation to run. In particular, Tahiti not only connects to Hilo rendering, but also can connect to CSS3 Animation, independent JS mode (Canvas) rendering.

Hilo bone animation Demo click here

performance

The annual Double 11 carnival city is a big test of performance. Take the 2015 Double Eleven Carnival City as an example, the main performance challenges are as follows:

  • More pictures: more than 100 businesses, each with a brand Logo
  • Animation: Most businesses need to dynamically display the Logo and at least 3 Sprite animations
  • Single screen: All animations need to be split on a single page (8 screens on IPhone 6 Plus)

Carnival City is estimated to have a total of 200 images (252*296). In order to optimize performance, we first make three layers for the overall picture:

  • Map part: the resources of this layer are mostly still pictures, and the probability of content updating is low.
  • Logo display part: dynamic display area of the merchant brand, usually 3 frames of Sprite animation.
  • UI layer: navigation, operation UI, etc.

Let’s focus on optimizing the map.

The map part is mostly still picture, which is the block of TiledMap. Due to the limited size of Canvas, and considering performance, we split the 8-screen Carnival City interface into multiple blocks according to 512*512, as shown in the following figure:

These blocks are separated into individual canvases, which are rendered only at first load and (relatively infrequently) when the content changes, and the rendered results are stored in these Cache lists. The List is also managed by the graphical map Container, so you only need to render the List cached in memory once for each update. This avoids the problem of hundreds of views rendering separately and greatly reduces the number of draws.

In addition, when these blocks have content updates, as shown in the dirty rectangle update above, View 2 has content updates in a certain frame, so first find all views that intersect with View 2, and then update these views in z-axis order from far and near, and update only the intersecting parts. In this way, it is possible to render only the parts that need to be rendered.

In a nutshell, we first guaranteed performance in terms of structure, stratified the big picture, and pulled out those that were “moving” and “not moving very much.” Secondly, we divided the view into blocks and changed the updated rendering of multiple views into a 512*512 view rendering to form the Cache List. Then, within the interactive scope, we rendered the objects to be output in the Cache List to the real physical screen of the phone. At the same time, when updating the Cache List, we tried to update the smallest rectangular block that caused the change in order to avoid updating all view objects in the Cache List.

physical

Hilo chose Chipmunk as its default 2D physics engine for performance and library simplification.

We know that the physical world is so rich that it’s impossible to capture it all in one physics engine. Different materials, rigid or non-rigid, fluid or cloth can have a very different physical appearance. The physics engine helps us solve some basic problems, just as the base class View in Hilo solves the basic problems of visual objects.

Business-oriented, we can scale out more physical effects. For example, in the 2015 Tmall mid-year racing project, we realized a set of racing drift effect by ourselves and rewrote the calculation method of View Update. Specific implementation will be presented in the subsequent introduction articles.

Above, from the animation, performance, physical case is expounded in three aspects: the Hilo can do more things, believe in support of business and technology, driven by Hilo can be more perfect, hope very much interested in the interaction of students join the Hilo open source team, perfect the Hilo ability, improve the efficiency of Hilo development, produce more and happy work at the same time.

Hilo received a lot of attention and help from ali front-end Committee to the completion of development, and also supported Sharing, Ali Communication, Mobile shopping, Tmall, City Life, International UED and Ali Mom BU. For the promotion of technology here is not a thank you. Leave the names of the two main authors @ Zhenglin @ Mochuan

Reference