[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> <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/3.8/spine-player.css"> <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> <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> <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/3.8/spine-player.css"> <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> <div id="player" style="width: 640px; height: 380px;"></div>

View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<script src="../../build/spine-player.js"></script> <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"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>

View File

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

View File

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