Nate I've been trying with Google gemini
Unfortunately its been writing stuff even less correct then me
Web Preview
Aye, Gemini is not very good. I prefer ChatGPT. If you don't want to pay the $20/month, DeepSeek can be just as good. You might also try Claude.
Nate is Microsoft copilot any good?
I don't use it, but probably. Under the covers it is ChatGPT.
2 месяца спустя
hey I know its been a while but I finally found out how the JSON was encoded
it was done using compress-json (beenotung/compress-json)
is there a way to plug the compress reverser into the spine runtime?
You would decompress it with that, giving you regular JSON, which you'd give to Spine as normal.
9 дней спустя
after a bunch of circulatory discussions with AI, I finally came up with the start of a solution
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gimkit Spine Player (CodePen)</title>
<style>
body { margin: 0; }
#spine-player-container { width: 600px; height: 400px; border: 1px solid #ccc; }
</style>
<link href="https://unpkg.com/@esotericsoftware/spine-player@4.1/dist/spine-player.css" rel="stylesheet">
</head>
<body>
<div>
<label for="filenameInput">Enter Filename:</label>
<input type="text" id="filenameInput" value="snowman">
<button id="loadButton">Load Animation</button>
</div>
<div id="spine-player-container"></div>
<script src="https://unpkg.com/@esotericsoftware/spine-player@4.1/dist/iife/spine-player.js"></script>
<script src="https://cdn.jsdelivr.net/npm/compress-json@3/bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const filenameInput = document.getElementById('filenameInput');
const loadButton = document.getElementById('loadButton');
const GIMKIT_ASSET_BASE_URL = 'https://www.gimkit.com/assets/map/characters/spine/';
const CORS_PROXY_URL = 'https://api.allorigins.win/raw?url=';
loadButton.addEventListener('click', () => {
const filename = filenameInput.value.trim();
if (filename) {
encodeAssets(filename);
} else {
console.warn("Please enter a filename.");
}
});
async function encodeAssets(filename) {
const jsonUrl = GIMKIT_ASSET_BASE_URL + filename + '.json';
const proxiedJsonUrl = CORS_PROXY_URL + encodeURIComponent(jsonUrl);
const atlasUrl = GIMKIT_ASSET_BASE_URL + filename + '.atlas';
const proxiedAtlasUrl = CORS_PROXY_URL + encodeURIComponent(atlasUrl);
const pngUrl = GIMKIT_ASSET_BASE_URL + filename + '.png';
const proxiedPngUrl = CORS_PROXY_URL + encodeURIComponent(pngUrl);
try {
// Fetch and Base64 encode JSON
const jsonResponse = await fetch(proxiedJsonUrl);
if (!jsonResponse.ok) throw new Error(`Failed to fetch JSON: ${jsonResponse.status}`);
const compressedData = await jsonResponse.json();
const spineJsonData = compressJSON.decompress(compressedData);
const jsonString = JSON.stringify(spineJsonData);
const base64Json = btoa(jsonString);
console.log("Base64 JSON:", base64Json);
// Fetch and Base64 encode Atlas
const atlasResponse = await fetch(proxiedAtlasUrl);
if (!atlasResponse.ok) throw new Error(`Failed to fetch atlas: ${atlasResponse.status}`);
const atlasText = await atlasResponse.text();
const base64Atlas = btoa(atlasText);
console.log("Base64 Atlas:", base64Atlas);
// Fetch and Base64 encode PNG
const pngResponse = await fetch(proxiedPngUrl);
if (!pngResponse.ok) console.warn(`Failed to fetch PNG: ${pngResponse.status}`);
const pngBlob = await pngResponse.blob();
const reader = new FileReader();
const pngBase64 = await new Promise((resolve, reject) => {
reader.onloadend = () => {
const base64String = reader.result.split(',')[1]; // Extract the Base64 part
resolve(base64String);
};
reader.onerror = reject;
reader.readAsDataURL(pngBlob);
});
console.log("Base64 PNG:", pngBase64);
} catch (error) {
console.error("Error encoding assets:", error);
}
}
// Encode default on start
encodeAssets(filenameInput.value.trim());
});
</script>
</body>
</html>I'm getting the JSON file decompressed, then base64 encoded. I can't for the life of me figure out how that works tho
just realized my previous reply may be confusing, the part I don't understand is the RawDataURIs section. I'm not really sure where to put my variable containing the BASE64 for the JSON, and the same goes for the Atlas
You have to place it in the player config. It's pretty clear in the documentation.
Davide right, sorry I probably should've been more specific.
skeleton: "raptor-pro.json",
atlas: "raptor-pma.atlas",
rawDataURIs: {
"raptor-pro.json": "data:application/json;base64,<base64 encoded raptor-pro.json>",
"raptor-pma.atlas": "data:application/octet-stream;base64,<base64 encoded raptor-pma.atlas>",
"raptor-pma.png": "data:image/png;base64,<base64 encoded raptor-pma.png>"
}
}where in this example would I put the BASE64 encoded json file, and would I need to append the .JSON onto the end of it
<base64 encoded raptor-pro.json>
How do I layer 2 animations on top of each other?
For what I'm trying to create a preview of, there's one animation that controls the skeleton, another that controls the special effects. How do I combine the 2?
See advanced playback:
https://en.esotericsoftware.com/spine-player#Advanced-playback
And AnimationState:
https://esotericsoftware.com/spine-applying-animations#AnimationState-API
I'm having trouble with the success callback. The code is working fine besides the animation part, I can't get it to work.
new spine.SpinePlayer("player-container", {
skeleton: `${filename}.json`,
atlas: `${filename}.atlas`,
rawDataURIs: {
[`${filename}.json`]: jsonDataUri,
[`${filename}.atlas`]: atlasDataUri,
[pngFilenameFromAtlas]: pngDataUri
},
alpha: true, // Enable player translucency
backgroundColor: "#00000000", // Background is fully transparent
premultipliedAlpha: false,
skin: filename,
success: function (player) {
player.setAnimation("run", true);
},
error: function (player, reason) {
alert(reason);
}
});I keep getting this error, and I'm not sure where its coming from
Uncaught SyntaxError: Missing catch or finally after try
The error is odd, as if you had try { ... } with no finally. Does it tell you where the error occurs? If you can post a link to these files on your webserver, that would help.
The JavaScript looks fine. Do you have a run animation in your skeleton?
I'm running this on codepen.io since it has automatic updates and I don't have to wait for it to update. So I'm not 100% where the error occurs since it gives me a link that returns 404 as the location. According to Gemini, it's line 135, but that doesn't make sense since my lowest line is line 116.
And there is a run animation
In case it matters, when the script is started, the skeleton and atlas are not initially defined, they only are BASE64 encoded and uploaded after the filename constant is defined.
Can you link to your codepen?
huh it embeded
If you wish to test viable filenames, a couple are
snowman
atom
eclipse
Link: https://codepen.io/Leinad-Noscaj/pen/RNNbZqQ
You should see error:
SyntaxError: missing } after property list
at https://cdpn.io/cpe/boomboom/index.html?editors=1111&key=index.html-92ce83c4-3f00-ca09-07a4-bcb8925ee348:136Go to the URL in the error so you can see just the resulting page without the codepen junk wrapping it. Look in the browser console (F12) and you'll see (in Firefox):
Uncaught SyntaxError: missing } after property list index.html:136:13
note: { opened at line 119, column 63 index.html:119:63Those will have links you can click and it'll show you exactly the line with the problem: Line 107 is });, needs to be }});.
Nate TYSM!