JSFiddle - React, Tailwind, and code Playground

by jamiri

HTML

<script src="https://pixijs.github.io/examples/_site/js/pixi.js"></script>
<script src="https://pixijs.github.io/examples/_site/js/plugins/pixi-spine.js"></script>

JavaScript

var renderer = PIXI.autoDetectRenderer(window.innerWidth - 100, window.innerHeight - 100);
document.body.appendChild(renderer.view);

var stage = new PIXI.Container();


PIXI.loader
    .add('dragon', 'https://pixijs.github.io/examples/_assets/spine/dragon.json')
    .load(onAssetsLoaded);

var dragons = [];
var dragonCages = [];
const NUMBER_OF_DRAGONS = 10;
const FPS = 30;

var text = new PIXI.Text(NUMBER_OF_DRAGONS, {font : '32px Arial', fill : 0xff1010, align : 'center'});
stage.addChild(text);


function onAssetsLoaded(loader, res) {

    for (var i = 0; i < NUMBER_OF_DRAGONS; i++) {
        (function() {
            'use strict';
            var dragon = null;
            dragon = new PIXI.spine.Spine(res.dragon.spineData);
            dragon.skeleton.setToSetupPose();
            dragon.update(0);
            dragon.autoUpdate = false;
            dragons.push(dragon);

            var dragonCage = new PIXI.Container();
            dragonCage.addChild(dragon);
            dragonCages.push(dragonCage);

            // measure the spine animation and position it inside its container to align it to the origin
            var localRect = dragon.getLocalBounds();
            dragon.position.set(-localRect.x, -localRect.y);

            // now we can scale, position and rotate the container as any other display object
            var rnd = Math.random();
            rnd = .2;
            var scale = Math.min((renderer.width * rnd) / dragonCage.width, (renderer.height * rnd) / dragonCage.height);
            dragonCage.scale.set(scale, scale);
            rnd = Math.random();
            // rnd = i * 100;
            dragonCage.position.set((renderer.width - dragonCage.width) * 0, (renderer.height - dragonCage.height) * rnd);

            // add the container to the stage
            stage.addChild(dragonCage);

            // once position and scaled, set the animation to play
            dragon.state.setAnimationByName(0, 'flying', true);
        }());
    }

 ...