playcanvas / playcanvas-spine

Plugin component for PlayCanvas which enables support for Spine animations.

PlayCanvas Spine

A Spine plugin for the PlayCanvas Engine.

Examples such as the Hero above can be found in the examples folder. To run them, start a local web server and go to http://localhost/path/to/examples/hero.html (the path will depend on your file serving root directory).

Usage

Versions

The following plugins are available:

Spine Editor	PlayCanvas Engine
3.6	Up to 1.65
3.8	Up to 1.65
4.0	1.27 and later
4.1	1.27 and later

Each plugin provides both a Component System to PlayCanvas Engine and the corresponding spine-core runtime to your scripts as global variable called spine. This allows developers to leverage the full spine library.

Editor

Add the plugin matching the Spine version used to export the animations, i.e build/playcanvas-spine.X.X.min.js and the PlayCanvas script build/spine.js to your project.

Create an entity with a script component and add the script spine to it. Upload your exported spine resources (atlas, skeleton json file, textures) and attach them to the spine script on your entity.

Ensure the plugin file is listed before the PlayCanvas script in the Scripts Loading Order.

Engine-only

Load the required library script, i.e. build/playcanvas-spine.X.X.min.js. Then, add spine components to your entities as follows:

var entity = new pc.Entity();
entity.addComponent("spine", {
    atlasAsset: atlas,       // atlas text asset id
    textureAssets: textures, // array of texture asset ids
    skeletonAsset: skeleton  // skeleton json asset id
});

Building

Prebuilt versions of the PlayCanvas Spine library can be found in the lib folder. However, to build them yourself, first install the NPM package dependencies:

npm install

Then, to build do:

npm run build