https://github.com/playcanvas/playcanvas-spine

Plugin component for PlayCanvas which enables support for Spine animations.
https://github.com/playcanvas/playcanvas-spine

html5 playcanvas spine webgl

Last synced: about 1 month ago
JSON representation

Plugin component for PlayCanvas which enables support for Spine animations.

• Host: GitHub
• URL: https://github.com/playcanvas/playcanvas-spine
• Owner: playcanvas
• License: mit
• Created: 2016-01-01T17:36:50.000Z (almost 9 years ago)
• Default Branch: main
• Last Pushed: 2024-07-09T14:44:34.000Z (5 months ago)
• Last Synced: 2024-08-02T07:09:11.351Z (4 months ago)
• Topics: html5, playcanvas, spine, webgl
• Language: JavaScript
• Size: 17 MB
• Stars: 48
• Watchers: 16
• Forks: 17
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-playcanvas - playcanvas-spine - Spine plugin for PlayCanvas for 2D animations. (Extensions and Utilities)

README

        
# PlayCanvas Spine

A [Spine](http://esotericsoftware.com/) plugin for the PlayCanvas Engine.

[![CI][ci-badge]][ci-url]

![](images/spine-man.gif)

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](https://developer.playcanvas.com/en/user-manual/scripting/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:

```javascript

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`

[ci-badge]: https://github.com/playcanvas/playcanvas-spine/actions/workflows/ci.yml/badge.svg

[ci-url]: https://github.com/playcanvas/playcanvas-spine/actions/workflows/ci.yml