JSFiddle - React, Tailwind, and code Playground

by gbear

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.8/pixi.min.js"></script>
<script src="https://cdn.rawgit.com/pixijs/pixi-spine/master/bin/pixi-spine.min.js"></script>
<script src="https://cdn.rawgit.com/pixijs/pixi-spine/gpupatch/gpupatch/SkinnedMeshPatch.js"></script>
<script src="https://cdn.rawgit.com/pixijs/pixi-extra-filters/master/bin/pixi-extra-filters.min.js"></script>

<canvas class="js-canvas" width="640" height="480"></canvas>

JavaScript

var spineContainer = null;

function runMain() {
    var renderer = PIXI.autoDetectRenderer(1920, 1080);
    document.body.appendChild(renderer.view);

// create the root of the scene graph
    var stage = new PIXI.Container();

// load spine data
    PIXI.loader        
    .add('f1', 'https://raw.githubusercontent.com/pixijs/examples/gh-pages/_assets/spine/goblins.json')

        .load(onAssetsLoaded);

    var dragon = null;


    var dragonCage = new PIXI.Container();
    spineContainer = dragonCage;

    // add the container to the stage
    stage.addChild(dragonCage);
    function onAssetsLoaded(loader,res)
    {
      console.log('123123');
        for(var i = 0; i < 1; ++i){
            // instantiate the spine animation
            dragon = new PIXI.spine.Spine(res.f1.spineData);
            dragon.skeleton.setToSetupPose();
            dragon.update(0);
            dragon.autoUpdate = false;

            dragon.interactive = true;

            dragon.inex = i;
            dragon.on('mousedown', function(){
                console.log('mousedown', this.inex);
                var anis = this.state.data.skeletonData.animations;
                var ani = anis[JLib.random(0, anis.length-1)];
                this.state.setAnimation(0, ani, true);
                console.log(dragon.state, ani);
            });

            dragon.on('mouseover', function(data){
                console.log('mouseover', this.inex);
                this.filters = [
                    new PIXI.filters.GlowFilter(
                        this.width,
                        this.height,
                        1,
                        1.1,
                        0,
                        0xEF0000,
                        //parseInt(0xff00000, 16),
                        3
                    )
                ]
            });

            dragon.on('mouseout', function(){
                console.log('mouseout', this.inex);
                this.filters = null;
           ...