[ts] Player example fixes, clean up.

* Use minified JS and CSS absolute URLs.
* Renamed index.html so the other html file can be reached more easily.
* generator.html doesn't seem to work?
This commit is contained in:
Nathan Sweet 2021-06-22 15:43:50 -04:00
parent 4062ccb1a9
commit 61b71e1d9a
5 changed files with 26 additions and 27 deletions

View File

@ -1,5 +1,5 @@
<script src="https://esotericsoftware.com/files/spine-player/3.8/spine-player.js"></script>
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/3.8/spine-player.css">
<script src="https://esotericsoftware.com/files/spine-player/4.0/spine-player.min.js"></script>
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/4.0/spine-player.min.css">
<div id="player" style="width: 640px; height: 380px;"></div>

View File

@ -1,5 +1,5 @@
<script src="https://esotericsoftware.com/files/spine-player/3.8/spine-player.js"></script>
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/3.8/spine-player.css">
<script src="https://esotericsoftware.com/files/spine-player/4.0/spine-player.min.js"></script>
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/4.0/spine-player.min.css">
<div id="player" style="width: 640px; height: 380px;"></div>

View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<script src="../../build/spine-player.js"></script>
<link rel="stylesheet" href="../css/spine-player.xscss">
<link rel="stylesheet" href="../css/spine-player.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

View File

@ -96,10 +96,11 @@ function setupPlayer(dataUrls, jsonFile, skelFile, atlasFile) {
return;
}
var cssUrl = "https://esotericsoftware.com/files/spine-player/" + major + "." + minor + "/spine-player.css";
var cssUrl = "https://esotericsoftware.com/files/spine-player/" + major + "." + minor + "/spine-player.min.css";
spine = null;
loadCSS(cssUrl, function () {
var playerUrl = "https://esotericsoftware.com/files/spine-player/" + major + "." + minor + "/spine-player.js";
var playerUrl = "https://esotericsoftware.com/files/spine-player/" + major + "." + minor + "/spine-player.min.js";
//playerUrl = "../../../build/spine-player.js"; // debug
loadJavaScript(playerUrl, function() {
document.getElementById("sp_generator_editor").classList.remove("sp_generator_hidden");
document.getElementById("sp_generator_drop_zone").classList.add("sp_generator_hidden");
@ -288,7 +289,7 @@ function loadCSS(url, success, error) {
};
function showError(error) {
alert(error);
alert("Error: " + error);
}
function setupDropZone() {
@ -322,8 +323,8 @@ function setupDropZone() {
function generateScript(jsonFile, skelFile, atlasFile, dataUrls) {
var shortVersion = major + "." + minor;
var scriptCode =
'<script src="https://esotericsoftware.com/files/spine-player/' + shortVersion + '/spine-player.js"><' + '/script>\n' +
'<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/' + shortVersion + '/spine-player.css">\n\n' +
'<script src="https://esotericsoftware.com/files/spine-player/' + shortVersion + '/spine-player.min.js"><' + '/script>\n' +
'<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/' + shortVersion + '/spine-player.min.css">\n\n' +
'<div id="player-container" style="width: 100%; height: 100vh;"></div>\n\n' +
'<script>\n' +
'new spine.SpinePlayer("player-container", {\n';
@ -336,10 +337,8 @@ function generateScript(jsonFile, skelFile, atlasFile, dataUrls) {
' atlasUrl: "' + atlasFile + '",\n' +
' rawDataURIs: {\n'
for (var file in dataUrls) {
scriptCode +=
' "' + file + '": "' + dataUrls[file] + '",\n';
}
for (var file in dataUrls)
scriptCode += ' "' + file + '": "' + dataUrls[file] + '",\n';
scriptCode +=
' }\n' +

View File

@ -74,7 +74,7 @@ body {
var editor = document.getElementById("editor")
function showError(errorMessage) {
alert(errorMessage);
alert("Error: " + errorMessage);
}
window.addEventListener("load", function(event) {
@ -87,8 +87,8 @@ body {
console.log(`${data.version} ${data.majorVersion} ${data.minorVersion} ${data.patchVersion}`);
spine = null;
var cssUrl = `https://esotericsoftware.com/files/spine-player/${data.majorVersion}.${data.minorVersion}/spine-player.css`;
var playerUrl = `https://esotericsoftware.com/files/spine-player/${data.majorVersion}.${data.minorVersion}/spine-player.js`;
var cssUrl = `https://esotericsoftware.com/files/spine-player/${data.majorVersion}.${data.minorVersion}/spine-player.min.css`;
var playerUrl = `https://esotericsoftware.com/files/spine-player/${data.majorVersion}.${data.minorVersion}/spine-player.min.js`;
Loader.loadStyle(cssUrl, function () {
Loader.loadJavaScript(playerUrl, function () {