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(800, 600);
    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/raptor.json')      .load(onAssetsLoaded);
    
    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);
    var texture = PIXI.Texture.fromImage('https://raw.githubusercontent.com/pixijs/examples/gh-pages/_assets/panda.png');
    console.log(texture);
    function onAssetsLoaded(loader,res)
    {           
        
        for(var i = 0; i < 1; ++i){
        		var dragon = new PIXI.spine.Spine(res.f1.spineData);
            console.log(dragon);
            dragon.interactive = true;
            
            dragon.state.setAnimationByName(0, 'walk', true);
            dragon.position.set(200, 200);
            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;
                return;
                var slot = dragon.skeleton.findSlot('legL_1');
                var temp = slot.sprites['legL_1'].texture;
                slot.sprites['legL_1'].texture = texture;
                texture = temp;                
                //texture
            });

           ...