Search the Community
Showing results for tags 'pixi-spine'.
Found 5 results
-
Hello, I'm new to pixijs and spine. I'm trying to render a spine animation version 4.0.17. I first look up spine-runtimes and I don't see spine-pixi for version 4.0.x, so I look for pixi-spine, but there is almost no documentations about this library (pixi-spine examples on github). According to this forum question, pixi-spine works the same as spine-pixi by esoteric software, so I tried to follow esotericsoftware docs, but things didn't go the way I expected. I'm trying to get the below code going to work, but the result is only 1 frame of the spine being displayed when I call the render function. I've attach the skel and atlas file, please help me. I'm using pixijs v6.5.10 and pixi-spine v4.0. When I set the animation, it still run, but I have a strong reason to render it frame by frame. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Spine Animation</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.5.10/browser/pixi.js"></script> <script src="https://cdn.jsdelivr.net/npm/pixi-spine@4.0.4/dist/pixi-spine.umd.js"></script> <style> body { margin: 0; overflow: hidden; background-color: rgb(76.5, 76.5, 76.5); height: 100vh; width: 100vw; } canvas { width: 100%; height: 100%; display: block; } </style> </head>a <body id="container"> <canvas id="canvas"></canvas> <div style="color: #fff; position: fixed; top: 0; width: 100%; display: flex; justify-content: center;"> <span id="status"></span> <span id="animation"></span> <span>Render: </span><button id="render">Render next frame</button> </div> <script> var spineAnimation; var lastFrameTime; var canvas = document.getElementById("canvas"); var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); if (!gl) { alert('WebGL is unavailable.'); } var renderButton = document.getElementById('render'); renderButton.addEventListener('click', render); const pixiapp = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, transparent: true, backgroundAlpha: 0, view: document.getElementById("canvas"), resizeTo: document.getElementById("container") }); document.body.appendChild(pixiapp.view); pixiapp.loader .add("spine", "./spines/Eff_UI_SumeruBirthFloatToyLoading_Spine01.skel") .load((loader, resources) => { try { document.getElementById("status").textContent = "Spine created, loading animation..."; spineAnimation = new PIXI.spine.Spine(resources.spine.spineData); if (spineAnimation) { spineAnimation.scale.set( Math.min( window.innerWidth / spineAnimation.spineData.width, window.innerHeight / spineAnimation.spineData.height ) * 0.8 ); spineAnimation.x = window.innerWidth / 2; spineAnimation.y = pixiapp.screen.height / 2 + spineAnimation.height / 2; pixiapp.stage.addChild(spineAnimation); spineAnimation.skeleton.setToSetupPose(); lastFrameTime = Date.now() / 1000; spineAnimation.state.setAnimation(0, "In", true); window.addEventListener("resize", () => { spineAnimation.scale.set( Math.min( window.innerWidth / spineAnimation.spineData.width, window.innerHeight / spineAnimation.spineData.height ) * 0.8 ); spineAnimation.x = window.innerWidth / 2; spineAnimation.y = pixiapp.screen.height / 2 + spineAnimation.height / 2; }); document.getElementById("status").textContent = "Animation loaded"; } requestAnimationFrame(render); } catch (error) { console.error("Spine creation error: ", error); } }); function render() { var state = spineAnimation.state; var skeleton = spineAnimation.skeleton; var animationDuration = spineAnimation.spineData.animations.find(animation => animation.name === "In").duration; var now = Date.now() / 1000; var delta = now - lastFrameTime; lastFrameTime = now; document.getElementById("animation").textContent = `now: ${now} delta: ${delta} anim: ${animationDuration}`; state.update(delta); state.apply(skeleton); // requestAnimationFrame(render); } </script> </body> </html> Eff_UI_SumeruBirthFloatToyLoading_Spine01.skel Eff_UI_SumeruBirthFloatToyLoading_Spine01.atlas https://streamable.com/wdnbzt Above is a video of how it behave. Any help is appreciated!
-
I'm new to pixi and pixi-spine,and my english not so well In normal pixi-spine examples,you just : loader.add('dragontest','assets2/dragon.json') it will auto load the json file,atlas file,and the related png files the thing is,my mission is to avoid http request in my html file like,all your resources need to be in your one html file i know how to deal with a noral sprite load,like using:loader.add('dragontest.png' , 'data:image/png;base64,blablabla....'),you can avoid load file thru http like this but what to do with pixi-spine's json,altas files really bugs me. please please please help me and thank you for your time
-
Hi, I was trying to understand how to use Pixi-spine library that adds support for spine animations for PixiJS . But I did not find anything useful on the internet. Can anyone help me understand it?
-
hi guys, We use pixi-spine for rendering, but I have a runtime question: phase01: one json file, one png vs phase02: one separate to more jsons, but same png does the phase02 will multiply the memory cost of the same png in gpu? I mean that more json files with the same png, will it multiply the png memory cost? sorry for my bad english thanks for your replying
-
Anyone know the correct way to get plugins like pixi-spine into Angular 2 or Ionic 2? import * as PIXI from 'pixi.js'; works for getting the base pixi library in. But, how do you do something like import * as PIXI from 'pixi.js' and 'pixi-spine';
