1

I am the beginner of PixiJS and learn it by its website examples. I want to practice animation but it didn't show anything.

This link is the effect it should like to.

This is the first way I tried, code works successfully but the screen didn't show anything.

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

app.stop();

app.loader
    .add('symbol', 'assets/medium/animations/symbol animations/10/10.json')
    .load(onAssetsLoaded);

var symbol = null;

function onAssetsLoaded(loader, resource) {
    symbol = new PIXI.spine.Spine(resource.symbol.spineData);
    symbol.skeleton.setToSetupPose();
    symbol.update(0);
    symbol.autoUpdate = false;

    const symbolCage = new PIXI.Container();
    symbolCage.addChild(symbol);

    const localRect = symbol.getLocalBounds();
    symbol.position.set(-localRect.x, -localRect.y);

    const scale = Math.min(
        (app.screen.width * 0.7) / symbolCage.width, (app.screen.height * 0.7) / symbolCage.height,
    );
    symbolCage.scale.set(scale);
    symbol.position.set(
        (app.screen.width - symbolCage.width) / 2,
        (app.screen.height - symbolCage.height) / 2,
    );

    app.stage.addChild(symbolCage);
    symbol.state.setAnimation(0, 'animation', true);

    app.start();
}

app.ticker.add(() => {
    symbol.update(0.01666666666667);
});

The following is part of the JSON.

"skeleton":{ 
        "hash":"4CHrZE4hbviFvBj9141tsmnOoNA",
        "spine":"3.7.89",
        "width":849,
        "height":791,
        "images":"./images/",
        "audio":"D:/Shiba inu/LOW PAY/source/source/10"
    },
"animations":{ 
        "animation":{ 
            "slots":{...},
            "bones":{...}
        }
    }

I try to trace and "symbol" gets the resource but it didn't show anything in the following step. What is the problem and how can I fix it?

gman
  • 100,619
  • 31
  • 269
  • 393
Zhao Chen
  • 11
  • 1

0 Answers0