|
|
@@ -0,0 +1,162 @@
|
|
|
+<!-- This example is adapted from https://github.com/GoodBoyDigital/pixi-bunnymark -->
|
|
|
+<!DOCTYPE html>
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <title>spine-pixi-v8 bunnymark</title>
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
|
|
|
+ <script src="../dist/iife/spine-pixi-v8.js"></script>
|
|
|
+ <link rel="stylesheet" href="../../index.css">
|
|
|
+ </head>
|
|
|
+
|
|
|
+ <body>
|
|
|
+ <script>javascript:(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);stats.dom.children[1].style.display='block';if (stats.dom.children[2]) stats.dom.children[2].style.display='block';requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='https://mrdoob.github.io/stats.js/build/stats.min.js';document.head.appendChild(script);})()</script>
|
|
|
+ <script>
|
|
|
+ (async function () {
|
|
|
+ const params = new URLSearchParams(window.location.search);
|
|
|
+ const totalBunnies = parseInt(params.get('count')) || 100;
|
|
|
+ const preference = params.get('renderer') || 'webgl';
|
|
|
+
|
|
|
+ const bunnyPool = [];
|
|
|
+
|
|
|
+ const renderer = await PIXI.autoDetectRenderer({
|
|
|
+ preference,
|
|
|
+ clearBeforeRender: true,
|
|
|
+ backgroundAlpha: 1,
|
|
|
+ backgroundColor: 0xFFFFFF,
|
|
|
+ width: 800,
|
|
|
+ height: 600,
|
|
|
+ resolution: 1,
|
|
|
+ antialias: false,
|
|
|
+ hello: true,
|
|
|
+ })
|
|
|
+
|
|
|
+ document.body.appendChild(renderer.view.canvas);
|
|
|
+
|
|
|
+ const stage = new PIXI.Container();
|
|
|
+
|
|
|
+ PIXI.Assets.add({ alias: "spineboyData", src: "assets/spineboy-pro.skel" });
|
|
|
+ PIXI.Assets.add({ alias: "spineboyAtlas", src: "assets/spineboy-pma.atlas" });
|
|
|
+ await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
|
|
|
+
|
|
|
+ const bounds = new PIXI.Rectangle(0, 0, 800, 600);
|
|
|
+
|
|
|
+ const bunnies = []
|
|
|
+
|
|
|
+ function addBunny() {
|
|
|
+
|
|
|
+ const bunny = bunnyPool.pop() || new BunnyV8(bounds)
|
|
|
+
|
|
|
+ bunny.reset();
|
|
|
+
|
|
|
+ stage.addChild(bunny.view);
|
|
|
+ bunnies.push(bunny);
|
|
|
+ }
|
|
|
+
|
|
|
+ for (let i = 0; i < totalBunnies; i++) {
|
|
|
+ addBunny();
|
|
|
+ }
|
|
|
+
|
|
|
+ let pause = false;
|
|
|
+
|
|
|
+ renderer.view.canvas.addEventListener('mousedown', () => {
|
|
|
+ pause = !pause
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ function renderUpdate() {
|
|
|
+
|
|
|
+ if (!pause) {
|
|
|
+ for (let i = 0; i < bunnies.length; i++) {
|
|
|
+ bunnies[i].update();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // bunnies[0].view.visible = !bunnies[0].view.visible;
|
|
|
+
|
|
|
+ renderer.render(stage);
|
|
|
+ requestAnimationFrame(renderUpdate)
|
|
|
+ }
|
|
|
+
|
|
|
+ renderUpdate();
|
|
|
+ })();
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ class BunnyV8 {
|
|
|
+
|
|
|
+ view;
|
|
|
+
|
|
|
+ gravity = 0.75
|
|
|
+
|
|
|
+ speedX = Math.random() * 10;
|
|
|
+ speedY = (Math.random() * 10) - 5;
|
|
|
+
|
|
|
+ positionX = 0;
|
|
|
+ positionY = 0;
|
|
|
+
|
|
|
+ bounds;
|
|
|
+
|
|
|
+ constructor(bounds) {
|
|
|
+ const spineboy = spine.Spine.from({
|
|
|
+ atlas: "spineboyAtlas",
|
|
|
+ skeleton: "spineboyData",
|
|
|
+ scale: 0.125,
|
|
|
+ });
|
|
|
+
|
|
|
+ // Set the default mix time to use when transitioning
|
|
|
+ // from one animation to the next.
|
|
|
+ spineboy.state.data.defaultMix = 0.2;
|
|
|
+
|
|
|
+ // Center the spine object on screen.
|
|
|
+ spineboy.x = window.innerWidth / 2;
|
|
|
+ spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
|
|
|
+
|
|
|
+ // Set animation "cape-follow-example" on track 0, looped.
|
|
|
+ spineboy.state.setAnimation(0, "run", true);
|
|
|
+
|
|
|
+ this.view = spineboy
|
|
|
+ this.bounds = bounds;
|
|
|
+ }
|
|
|
+
|
|
|
+ update() {
|
|
|
+ let pX = this.positionX;
|
|
|
+ let pY = this.positionY;
|
|
|
+
|
|
|
+ pX += this.speedX;
|
|
|
+ pY += this.speedY;
|
|
|
+ this.speedY += this.gravity;
|
|
|
+
|
|
|
+ if (pX > this.bounds.right) {
|
|
|
+ this.speedX *= -1;
|
|
|
+ pX = this.bounds.right;
|
|
|
+ }
|
|
|
+ else if (pX < this.bounds.left) {
|
|
|
+ this.speedX *= -1;
|
|
|
+ pX = this.bounds.left;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (pY > this.bounds.bottom) {
|
|
|
+ this.speedY *= -0.85;
|
|
|
+ pY = this.bounds.bottom;
|
|
|
+ if (Math.random() > 0.5) {
|
|
|
+ this.speedY -= Math.random() * 6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else if (pY < this.bounds.top) {
|
|
|
+ this.speedY = 0;
|
|
|
+ pY = this.bounds.top;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.view.position.x = this.positionX = pX;
|
|
|
+ this.view.position.y = this.positionY = pY;
|
|
|
+ }
|
|
|
+
|
|
|
+ reset() {
|
|
|
+ this.positionX = 0;
|
|
|
+ this.positionY = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
Davide Tantillo