1 Star 0 Fork 0

wyy / spine

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

pixi-spine

Spine 3.7, 3.8, 4.0 implementation for PixiJS v5 & v6.

Typescript definitions are up-to-date with PixiJS v6.

For spine < 3.7 support is limited, but accepting PR's for runtime-3.7 package.

For previous versions of pixi & typescript definitions - please refer to README in pixi5

Demos:

https://pixijs.io/examples/#/plugin-spine/spineboy-pro.js

https://pixijs.io/examples/#/plugin-projection/runner.js

https://sbfkcel.github.io/pixi-spine-debug/

Basic Usage

Please read this carefully: there are three ways to add this lib to your app.

  1. Angular, React, Webpack, Rollup - if you know those words, use ES6 bundles
  2. Good old <script src="pixi-spine.umd.js"> , also named vanilla JS
  3. Custom bundle, for guys who really want to shake da tree

ES6 bundles

import * as PIXI from 'pixi.js';
import {Spine} from 'pixi-spine';

const app = new PIXI.Application();
document.body.appendChild(app.view);

app.loader
    .add('spineCharacter', 'spine-data-1/HERO.json')
    .load(function (loader, resources) {
        const animation = new Spine(resources.spineCharacter.spineData);

        // add the animation to the scene and render...
        app.stage.addChild(animation);
        
        if (animation.state.hasAnimation('run')) {
            // run forever, little boy!
            animation.state.setAnimation(0, 'run', true);
            // dont run too fast
            animation.state.timeScale = 0.1;
        }
        
        app.start();
    });

Alternatively, you may use @pixi-spine/all-3.8 package.

Where are spine core classes?

Classes like AttachmentType, TextureAtlas, TextureRegion and Utils are shared across all spine versions, and re-exported by all bundles. But if you want to see them directly, they are in @pixi-spine-base.

Base also contains unified interfaces, ISkeleton, ISkeletonData, IAnimationData and so on, see ISkeleton.ts file.

Most of classes are spine-version-dependant, including Skeleton, SkeletonData, they are stored in corresponding packages @pixi-spine/runtime-3.8 and so on.

Vanilla JS, UMD build

All pixiJS v6 plugins has special umd build suited for vanilla.
Navigate pixi-spine npm package, take dist/pixi-spine.umd.js file. Alternatively, you can look in @pixi-spine/all-3.8 npm package.

<script src='lib/pixi.js'></script>
<script src='lib/pixi-spine.umd.js'></script>
const animation = new PIXI.spine.Spine(resources.spineCharacter.spineData);

Unfortunately, there are no typescript definitions for vanilla build on both pixi v6 and pixi-spine

Custom bundle

Main bundle pixi-spine weights more than 1 MB.

Bundle @pixi-spine/all-3.8 weights about 400 KB.

If you want to use different version (3.7, 4.0) please look how modules loader-3.8 and pixi-spine-3.8 are made.

Basically, you have to copy its code in a separate file in your project, and alter imports to corresonding version.

For example, here's bundle for 3.8:

import {SpineParser} from '@pixi-spine/loader-3.8';
export {SpineParser};
export * from '@pixi-spine/runtime-3.8';
export * from '@pixi-spine/base';

SpineParser.registerLoaderPlugin();

In case author was too lazy to publishloader-3.7 or loader-4.0, you can do the same trick with them, just look in sources of loader-3.8.

Want to go advanced?

Read our docs.

Two-color tint

Light-dark tint is supported with help of pixi-heaven Currently supported only by UMD build.

let spine = new PIXI.heaven.Spine(spineData);

Debug

To show bones and bounds you can use pixi-spine-debug. If you want to write your own debug plugin, look at how this one was created

Demo: https://sbfkcel.github.io/pixi-spine-debug/

Build & Development

You will need to have node setup on your machine.

Make sure you have rush installed:

npm install -g @microsoft/rush

Then you can install dependencies and build:

npm run prepare
npm run build

That will output the built all modules. UMD can be found in ./bundles/pixi-spine/dist.

If you use IntellIJ Idea / Webstorm to navigate the project, take this line and set it in project settings / exclude files

packages/*/node_modules;packages/*/compile;bundles/*/node_modules;bundles/*/compile;lib;dist

空文件

简介

暂无描述 展开 收起
TypeScript 等 2 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
TypeScript
1
https://gitee.com/wyy5552/spine.git
git@gitee.com:wyy5552/spine.git
wyy5552
spine
spine
master

搜索帮助

344bd9b3 5694891 D2dac590 5694891