DragonBonesJS Documentation

DragonBones provides runtimes and integration guides for several major game engines. Use the following links to find specific implementation guides:

• Egret
• PixiJS
• Phaser
• Hilo
• Cocos Creator

When integrating Hilo into your project, ensure your directory structure includes the hilo.d.ts declaration file within a libs folder to support TypeScript definitions.

Your project
    |-- libs
        |-- hilo.d.ts
    |-- node_modules
        |-- ...
    |-- out
        |-- ...
    |-- src
        |-- ...
    |-- ...

You can use the dragonbones-runtime CLI tool to generate the necessary DragonBones files (.js, .d.ts) required for specific game engines. This is useful for integrating DragonBones into your project's build pipeline.

Steps:

1. Install the CLI globally via npm: npm install -g dragonbones-runtime
2. Run the dbr command specifying the engine and version.
3. The generated files will be placed in a dragonbones-out directory in your current working directory (unless specified otherwise).

Supported Engines and Examples:

• Egret: dbr egret@4.1.0
• PixiJS: dbr pixijs@4.6.2
• Phaser: dbr phaser@2.6.2 or dbr phaser-ce@2.7.0
• Hilo: dbr hilo@1.1.6

To use DragonBones in a Phaser project, you must register the DragonBonesPlugin within your Phaser.Game configuration object. Ensure the start property is set to true to initialize the plugin automatically.

const gameConfig = {
    plugins: {
        global: [
            { key: "DragonBonesPlugin", plugin: dragonBones.phaser.plugin.DragonBonesPlugin, start: true }
        ]
    },
    scene: TestSceneToDisplay
};

new Phaser.Game(gameConfig);

To use Hilo with TypeScript, you must include the hilo.d.ts declaration file in your project. You can obtain the latest definitions from the Hilo team's repository.

https://github.com/hiloteam/Hilo/tree/dev/d.ts

To see how DragonBones integrates with ThreeJS, you can view the available demos. The primary entry point for a basic implementation is the HelloDragonBones demo, which demonstrates the core setup and animation playback within a ThreeJS environment.

/* View the Hello DragonBones implementation at: */
// ./Demos/src/HelloDragonBones.ts

To run the PixiJS 8.x demos, you must manually copy the assets and materials located in the Demos/resource folder of the repository into your local project's resource directory. These materials are required for the animations and assets to load correctly during the demo execution.

# Example command to copy resources (adjust paths as necessary)
cp -r ../../resource/* ./resource/

To run the Hilo demonstration project, install the dependencies using npm and then start the development server with the start command.

$ npm install
$ npm run start

For the PixiJS integration, you will need to acquire the following files:

1. pixi.js: Download the release from the official PixiJS releases.
2. pixi.js.d.ts: For TypeScript support, download the type definitions from the PixiJS TypeScript repository.