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>