CODEWITHSUNDEEP
javascripthtmljsonatlas
Geometric
Geometric

Reputation: 1

How would I import a spine image, .json file, and a .atlas file into an HTML Document to display an animated model?

I'm wondering how I would be able to import something from Gimkit into a site I'm creating without having to download the actual file itself, and I'm trying to use a singular HTML Document to make my site. The animated previews use a spritesheet-like thing made in Spine, a .json file, and a .atlas file. I am hoping to eventually make this usable for all filenames, but for this example, I need to use the filename "dayOne". The spritesheet can be found at https://www.gimkit.com/assets/map/characters/spine/dayOne-v2.32.png, the .json file can be found at https://www.gimkit.com/assets/map/characters/spine/dayOne.json?cb=410516585127, and the .atlas file can be found at https://www.gimkit.com/assets/map/characters/spine/dayOne.atlas?cb=410516585127. If anyone could do this for me, I would be forever thankful! Thanks!

I have tried several things, but I honestly have no clue on what to do with this. I tried this, based on some information I previously found online, but is doesn't work. If you could help me, that'd be great!

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sprite Test I Guess</title>
  <style>
    .sprite-container {
      width: 64px;
      height: 64px;
      background-image: none;
      background-position: 0 0;
      animation: playAnimation 1s steps(16) infinite;
      border: 1px solid black;
    }
    
    @keyframes playAnimation {
      100% {
        background-position: -1024px 0;
      }
    }
  </style>
</head>

<body>
  <div class="sprite-container"></div>
  <script>
    const proxyUrl = 'https://api.allorigins.win/raw?url=';
    const spriteSheetUrl = 'https://www.gimkit.com/assets/map/characters/spine/dayOne-v2.32.png';
    const jsonUrl = 'https://www.gimkit.com/assets/map/characters/spine/dayOne.json?cb=410516585127';
    const atlasUrl = 'https://www.gimkit.com/assets/map/characters/spine/dayOne.atlas?cb=410516585127';
    fetch(proxyUrl + encodeURIComponent(spriteSheetUrl))
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok for spritesheet');
        }
        return response.blob();
      })
      .then(blob => {
        const imgUrl = URL.createObjectURL(blob);
        const spriteContainer = document.querySelector('.sprite-container');
        spriteContainer.style.backgroundImage = `url(${imgUrl})`;
      })
      .catch(error => {
        console.error('There was a problem fetching the spritesheet:', error);
      });
    fetch(proxyUrl + encodeURIComponent(jsonUrl))
      .then(response => response.json())
      .then(jsonData => {
        console.log('JSON data loaded:', jsonData);
      })
      .catch(error => {
        console.error('Error loading the JSON data:', error);
      });
    fetch(proxyUrl + encodeURIComponent(atlasUrl))
      .then(response => response.text())
      .then(atlasData => {
        console.log('Atlas data loaded:', atlasData);
      }).catch(error => {
        console.error('Error loading the .atlas data:', error);
      });
  </script>
</body>

</html>

Upvotes: 0

Views: 129

Answers (0)

Related Questions