Hilo Game Framework

Hilo is an HTML5 cross-terminal game solution developed by Alibaba. Key features include:

• Module Support: Supports AMD, CMD, CommonJS, and Standalone module formats.
• Rendering Engines: Provides multiple rendering options including DOM, Canvas, Flash, and WebGL.
• Physics & Animation: Supports Chipmunk physics engine and DragonBones for skeletal animation.
• Performance: Optimized for various browsers, including low-end mobile browsers via DOM rendering and older IE versions via Flash rendering.

Hilo is a cross-end HTML5 game development solution developed by Alibaba Group. It provides an Object-Oriented Programming (OOP) environment with a visual object architecture to help developers build games quickly.

Key Features:

• Multiple Render Models: Supports CanvasRenderer, DOMRenderer, and WebGLRenderer.
• Module Support: Independent module design supporting multiple styles (CMD, AMD, CommonJS, KMD).
• Browser Compatibility: Compatible with multiple desktop and mobile browsers; includes a Flash Shim to support IE.
• Extensions: Supports Chipmunk for physics and DragonBones for skeleton animation.

Hilo uses gulp for its build process. To build the framework or its components, ensure you have the dependencies installed and use the following commands:

• Install dependencies: npm install
• Build source: gulp
• Build extensions: gulp extensions
• Build API documentation: gulp doc
• Run tests: gulp test

Built modules can be found in the build folder in various formats: CMD, AMD, CommonJS, and KMD.

You can use a Yeoman generator to scaffold a new Hilo game project quickly. First, install yo and generator-hilo globally, then run the generator.

npm install -g yo
npm install -g generator-hilo
yo hilo

Detailed information regarding the Hilo API and practical usage examples can be found at the following locations:

• Full API Documentation: docs/api-en/index.html
• API Samples:
  • Visual Objects (View): Bitmap, Sprite, Graphics, DOM element, Button, Background, Canvas Text.
  • Core Features: Load queue, Web sound, Mouse Event, Drag.
  • Extensions: Camera, Camera3d, Skeleton Animation (Dragonbones), Particle System, Physics.

The jsrun.sh shell script simplifies running JsDoc Toolkit, especially within build environments like Ant. It handles long paths and environment variables to reduce command-line complexity.

Usage: ./jsrun.sh <run.js arguments>

Environment Variables:

• JSDOCDIR: If set, adds -Djsdoc.dir=$JSDOCDIR to the command.
• JSDOCTEMPLATEDIR: If set, adds -Djsdoc.template.dir=$JSDOCTEMPLATEDIR to the command.

If these variables are not set, the script assumes jsrun.jar and the app/ directory are in the current working directory.

Example: If JSDOCDIR is set to /some/path/to/my/jsdoc, running ./jsrun.sh ./src/ will execute: java -Djsdoc.dir=/some/path/to/my/jsdoc -jar /some/path/to/my/jsdoc/jsrun.jar /some/path/to/my/jsdoc/app/run.js ./src/

You can quickly scaffold a new Hilo game project using the generator-hilo Yeoman generator. This will create a pre-configured initial project structure for your game.

npm install -g yo
npm install -g generator-hilo
yo hilo

Use Class.mix(target, PhysicsViewMixin) to inject physics functionality into a target class. This adds a body property (of type cpBody) and several movement methods.

Available Methods:

• applyImpulse(impulse, pos): Apply an impulse {x, y} at a relative position {x, y} from the center of mass.
• applyForce(force, pos): Apply a force {x, y} at a relative position {x, y} from the center of mass.
• setPosition(x, y): Set the physical position.
• setRotation(rotation): Set the rotation in degrees.