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?