JSFiddle - React, Tailwind, and code Playground

by gbear

HTML

<script src="https://cdn.rawgit.com/SeminYun/test/master/asset/pixi.js"></script>
<script src="https://rawgit.com/SeminYun/test/master/asset/pixi-spine.js"></script>
<!--<script src="https://cdn.rawgit.com/SeminYun/test/master/asset/pixi.spine.new.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
var lowerOptions = { metadata: { spineMetadata: { choice: ["@.5x.atlas", "@2x.atlas"] } } };
    //PIXI.loader.add('f1', 'https://raw.githubusercontent.com/pixijs/examples/gh-pages/_assets/spine/goblins.json')
    PIXI.loader.add('f1', 'https://raw.githubusercontent.com/SeminYun/test/master/asset/out_test/skeleton.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)
    {           
        
        		var dragon = new PIXI.spine.Spine(res.f1.spineData);
            console.log(dragon);
            dragon.interactive = true;
            
            dragon.state.setAnimationByName(0, 'walk', true);
            dragon.position.set(400, 300);
            dragon.scale.set(0.2, 0.2);
            
            
            dragon.on('mousedown', function(){
                console.log('mousedown_rapter', this.inex);                                 
                dragon.skeleton.flipX = dragon.skeleton.flipX?false:true;
            });

            dragon.on('mouseover', function(data){
                console.log('mouseover', this.inex);                    
            });

            dragon.on('mouseout', function(){
                console.log('mouseout', this.inex);                
            });

            // create a container for the spine animation and add the animation to it

            dragonCage.addChild(dragon);
        


        animate();
    }
    var elased = Date.now();
    var delta = 0;
    function animate() {
        delta = (Date.now() - elased)/1000;
        elased = Date.now();
       ...