@vf.js/spine NPM

vf-spine

Usage

import {Spine} from '@vf.js/spine';

Basic example

var app = new vf.Application();

document.body.appendChild(app.view);

Spine.globalAutoUpdate = true; // Spine的设置需在Loader之前。 不要移动位置。

app.loader.add('eddyData', './static/db/eddy.json') //shoot drive

app.loader.load(function (loader, resources) {
    
    const eddy = Spine.from(resources.eddyData,app);
    eddy.name = 'eddy';
    eddy.on(Spine.SPINE_START,(animationName:string)=>{
        console.log(Spine.SPINE_START,animationName);
    });
    eddy.on(Spine.SPINE_COMPLETE,(animationName:string)=>{
        console.log(Spine.SPINE_COMPLETE,animationName);
    });
    eddy.on(Spine.SPINE_EVENT,(animationName:string,event:vf.spine.core.Event)=>{
        console.log(Spine.SPINE_EVENT,animationName,event);
    });
    eddy.x = 500;
    eddy.y = 300;
    eddy.scale.set(0.1);
    eddy.timeScale(0.5);
    eddy.play('animationName'); //eddy.playQueue([{name:'shoot'},{name:'drive'}]);
    spineContainer.addChild(eddy);

});

基于数据创建 example

var app = new vf.Application();

document.body.appendChild(app.view);

app.loader.add('eddyData', './static/db/eddy.json') 
app.loader.add('eddAtlas', './static/db/eddy.atlas') 
app.loader.add('eddPng', './static/db/eddy.png')  

app.loader.load(function (loader, resources) {
    
    Spine.fromData(resources['eddyData'].data,resources['eddAtlas'].data,resources['eddPng'].texture as any,app,spine=>{
        spineContainer.addChild(spine)
    })
});