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;

var atlas_src = 
"\n" + 
"aaaa.png\n" + 
"size: 128,32\n" + 
"format: rgba8888\n" + 
"filter: linear,linear\n" + 
"repeat: none\n" + 
"cooltime_gauge33\n" + 
"  rotate: true\n" + 
"  xy: 2, 2\n" + 
"  size: 22, 42\n" + 
"  orig: 42, 42\n" + 
"  offset: 0, 0\n" + 
"  index: -1\n" + 
"cooltime_gauge42\n" + 
"  rotate: true\n" + 
"  xy: 46, 2\n" + 
"  size: 22, 40\n" + 
"  orig: 42, 42\n" + 
"  offset: 0, 2\n" + 
"  index: -1\n" + 
"cooltime_gauge51\n" + 
"  rotate: false\n" + 
"  xy: 88, 2\n" + 
"  size: 22, 22\n" + 
"  orig: 42, 42\n" + 
"  offset: 0, 20\n" + 
"  index: -1\n";



function runMain() {
    var renderer = PIXI.autoDetectRenderer(1920, 1080,{backgroundColor:0xff0000});
    document.body.appendChild(renderer.view);

// create the root of the scene graph
    var stage = new PIXI.Container();
  
   
    var atlas = new PIXI.spine.SpineRuntime.Atlas(atlas_src, 'https://raw.githubusercontent.com/SeminYun/test/master/asset/');
    // create base textures
    for (var i in atlas.pages) {
         var page = atlas.pages[i];
         atlas.updateUVs(page);
         var base_texture = page.rendererObject;
  
         var regions = atlas.regions;
         for (var i in regions) {
              var region = regions[i];
              var texture = createTextureByRegion(region);
              var spr = new PIXI.Sprite(texture);
              spr.position.set(i*50, 0);
              stage.addChild(spr);
         }
    } 

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

runMain();

  
  function createTextureByRegion(region) {
    var spriteRect = new PIXI.Rectangle(
        region.x,
        region.y,
        region.width,
        region.height);
    //region.rotate ? region.height : region.width,
    //region.rotate ?...