mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-04 22:34:53 +08:00
Merge branch '3.8' into 3.9-beta
This commit is contained in:
Harald Csaszar
commit
feba925a79
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
@ -1,146 +0,0 @@
|
||||
|
||||
hero-pro.png
|
||||
size: 1024,256
|
||||
format: RGBA8888
|
||||
filter: Linear,Linear
|
||||
repeat: none
|
||||
body
|
||||
rotate: false
|
||||
xy: 324, 81
|
||||
size: 97, 95
|
||||
orig: 97, 95
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
cape
|
||||
rotate: false
|
||||
xy: 176, 88
|
||||
size: 146, 159
|
||||
orig: 146, 159
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
eyes
|
||||
rotate: false
|
||||
xy: 604, 216
|
||||
size: 82, 31
|
||||
orig: 82, 31
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
fingers
|
||||
rotate: false
|
||||
xy: 877, 214
|
||||
size: 31, 33
|
||||
orig: 31, 33
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
foot1
|
||||
rotate: false
|
||||
xy: 743, 205
|
||||
size: 50, 42
|
||||
orig: 50, 42
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
foot2
|
||||
rotate: false
|
||||
xy: 688, 209
|
||||
size: 53, 38
|
||||
orig: 53, 38
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
forearm1
|
||||
rotate: false
|
||||
xy: 795, 198
|
||||
size: 41, 49
|
||||
orig: 41, 49
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
forearm2
|
||||
rotate: false
|
||||
xy: 910, 215
|
||||
size: 31, 32
|
||||
orig: 31, 32
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
hand1
|
||||
rotate: false
|
||||
xy: 838, 199
|
||||
size: 37, 48
|
||||
orig: 37, 48
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
hand2
|
||||
rotate: false
|
||||
xy: 286, 49
|
||||
size: 31, 37
|
||||
orig: 31, 37
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
head
|
||||
rotate: false
|
||||
xy: 2, 74
|
||||
size: 172, 173
|
||||
orig: 172, 173
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
mantles
|
||||
rotate: false
|
||||
xy: 2, 17
|
||||
size: 136, 55
|
||||
orig: 136, 55
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
mouth
|
||||
rotate: false
|
||||
xy: 2, 2
|
||||
size: 61, 13
|
||||
orig: 61, 13
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
shin1
|
||||
rotate: false
|
||||
xy: 482, 119
|
||||
size: 53, 57
|
||||
orig: 53, 57
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
shin2
|
||||
rotate: false
|
||||
xy: 192, 32
|
||||
size: 51, 54
|
||||
orig: 51, 54
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
sword
|
||||
rotate: false
|
||||
xy: 324, 178
|
||||
size: 216, 69
|
||||
orig: 216, 69
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
thigh1
|
||||
rotate: false
|
||||
xy: 542, 184
|
||||
size: 60, 63
|
||||
orig: 60, 63
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
thigh2
|
||||
rotate: false
|
||||
xy: 423, 112
|
||||
size: 57, 64
|
||||
orig: 57, 64
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
upper-arm1
|
||||
rotate: false
|
||||
xy: 140, 16
|
||||
size: 50, 56
|
||||
orig: 50, 56
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
upper-arm2
|
||||
rotate: false
|
||||
xy: 245, 27
|
||||
size: 39, 59
|
||||
orig: 39, 59
|
||||
offset: 0, 0
|
||||
index: -1
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 126 KiB |
@ -1,5 +0,0 @@
|
||||
Copyright (c) 2014, XDTech
|
||||
|
||||
The project file and images in this "Hero" project are provided for
|
||||
demonstration purposes only and may not be redistributed for any reason nor
|
||||
used as the basis for derivative work.
|
||||
@ -11967,7 +11967,7 @@ var spine;
|
||||
this.sceneRenderer.begin();
|
||||
if (this.config.backgroundImage && this.config.backgroundImage.url) {
|
||||
var bgImage = this.assetManager.get(this.config.backgroundImage.url);
|
||||
if (!this.config.backgroundImage.x) {
|
||||
if (!(this.config.backgroundImage.hasOwnProperty("x") && this.config.backgroundImage.hasOwnProperty("y") && this.config.backgroundImage.hasOwnProperty("width") && this.config.backgroundImage.hasOwnProperty("height"))) {
|
||||
this.sceneRenderer.drawTexture(bgImage, viewport.x, viewport.y, viewport.width, viewport.height);
|
||||
}
|
||||
else {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -11291,7 +11291,7 @@ var spine;
|
||||
this.sceneRenderer.begin();
|
||||
if (this.config.backgroundImage && this.config.backgroundImage.url) {
|
||||
var bgImage = this.assetManager.get(this.config.backgroundImage.url);
|
||||
if (!this.config.backgroundImage.x) {
|
||||
if (!(this.config.backgroundImage.hasOwnProperty("x") && this.config.backgroundImage.hasOwnProperty("y") && this.config.backgroundImage.hasOwnProperty("width") && this.config.backgroundImage.hasOwnProperty("height"))) {
|
||||
this.sceneRenderer.drawTexture(bgImage, viewport.x, viewport.y, viewport.width, viewport.height);
|
||||
}
|
||||
else {
|
||||
|
||||
File diff suppressed because one or more lines are too long
177
spine-ts/player/example/generator/embedding-generator.html
Normal file
177
spine-ts/player/example/generator/embedding-generator.html
Normal file
@ -0,0 +1,177 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="https://esotericsoftware.com/files/spine-player/3.8/codemirror.js"></script>
|
||||
<script src="jscolor.js"></script>
|
||||
<script src="embedding-generator.js"></script>
|
||||
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/3.8/codemirror.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
|
||||
<style>
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#sp_generator_drop_zone {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: white;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 100vh;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sp_generator_hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#sp_generator_editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.sp_generator_tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
border-bottom: solid 1px #999999;
|
||||
}
|
||||
|
||||
.sp_generator_tabs > span {
|
||||
padding: 0.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sp_generator_tabs > span:hover {
|
||||
background:orangered;
|
||||
}
|
||||
|
||||
.sp_generator_selected_tab {
|
||||
border: solid 1px orangered;
|
||||
}
|
||||
|
||||
.sp_generator_panel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sp_generator_panel TABLE TH {
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.sp_generator_extra {
|
||||
color: #ccc;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div id="sp_generator_drop_zone" class="drop_zone">
|
||||
<span>Choose .skel/.json, .atlas, and .png files, or drop them here.</span>
|
||||
<input id="sp_generator_file_button" class="sp_generator_hidden" type="file" multiple accept=".json,.skel,.atlas,.png"/>
|
||||
</div>
|
||||
<div id="sp_generator_editor" class="sp_generator_hidden">
|
||||
<div id="sp_generator_player">
|
||||
</div>
|
||||
<div id="sp_generator_config">
|
||||
<div class="sp_generator_tabs">
|
||||
<span class="sp_generator_selected_tab" data-tab="sp_generator_tab_general">General</span>
|
||||
<span data-tab="sp_generator_tab_animations">Animations</span>
|
||||
<span data-tab="sp_generator_tab_viewports">Viewports</span>
|
||||
<span data-tab="sp_generator_tab_skins">Skins</span>
|
||||
<span data-tab="sp_generator_tab_debug">Debug</span>
|
||||
</div>
|
||||
<div id="sp_generator_tab_general" class="sp_generator_panel">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Show controls</th>
|
||||
<td><input id="sp_generator_show_controls" type="checkbox" checked="true"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Premultiplied alpha</th>
|
||||
<td><input id="sp_generator_premultiplied_alpha" type="checkbox" checked="false"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Canvas alpha</th>
|
||||
<td><input id="sp_generator_canvas_alpha" value="FF"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Background color</th>
|
||||
<td><input id="sp_generator_background" class="jscolor {onFineChange:'changeBackgroundColor(this)'}'" value="000000"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Fullscreen background color</th>
|
||||
<td><input id="sp_generator_background_fullscreen" class="jscolor {onFineChange:'changeFullscreenBackgroundColor(this)'}'" value="000000"></td>
|
||||
</tr>
|
||||
<tr style="vertical-align: top;">
|
||||
<th>Background image</th>
|
||||
<td>
|
||||
<select id="sp_generator_background_image">
|
||||
</select>
|
||||
</td>
|
||||
<td id="sp_generator_background_bounds" class="sp_generator_hidden">
|
||||
<table>
|
||||
<tr>
|
||||
<th>X</th>
|
||||
<td><input id="sp_generator_background_x"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Y</th>
|
||||
<td><input id="sp_generator_background_y"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Width</th>
|
||||
<td><input id="sp_generator_background_width"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Height</th>
|
||||
<td><input id="sp_generator_background_height"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id="sp_generator_tab_animations" class="sp_generator_panel sp_generator_hidden">
|
||||
Animations
|
||||
</div>
|
||||
<div id="sp_generator_tab_viewports" class="sp_generator_panel sp_generator_hidden">
|
||||
Viewports
|
||||
</div>
|
||||
<div id="sp_generator_tab_skins" class="sp_generator_panel sp_generator_hidden">
|
||||
Skins
|
||||
</div>
|
||||
<div id="sp_generator_tab_debug" class="sp_generator_panel sp_generator_hidden">
|
||||
Debug
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
436
spine-ts/player/example/generator/embedding-generator.js
Normal file
436
spine-ts/player/example/generator/embedding-generator.js
Normal file
@ -0,0 +1,436 @@
|
||||
window.addEventListener("load", function(event) {
|
||||
setupDropZone();
|
||||
});
|
||||
|
||||
if (!String.prototype.endsWith) {
|
||||
String.prototype.endsWith = function(search, this_len) {
|
||||
if (this_len === undefined || this_len > this.length) {
|
||||
this_len = this.length;
|
||||
}
|
||||
return this.substring(this_len - search.length, this_len) === search;
|
||||
};
|
||||
}
|
||||
|
||||
var appState = {
|
||||
dataUrls: null,
|
||||
jsonFile: null,
|
||||
skelFile: null,
|
||||
atlasFile: null,
|
||||
minorVersion: null,
|
||||
majorVersion: null,
|
||||
player: null
|
||||
}
|
||||
|
||||
function loadFiles(files) {
|
||||
var skels = 0;
|
||||
var skelFile = null;
|
||||
var jsons = 0;
|
||||
var jsonFile = null;
|
||||
var atlases = 0;
|
||||
var atlasFile = null;
|
||||
var pngs = 0;
|
||||
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
var file = files[i].name.toLowerCase();
|
||||
if (file.endsWith(".skel")) {
|
||||
skels++;
|
||||
skelFile = file;
|
||||
}
|
||||
if (file.endsWith(".json")) {
|
||||
jsons++;
|
||||
jsonFile = file;
|
||||
}
|
||||
if (file.endsWith(".atlas")) {
|
||||
atlases++;
|
||||
atlasFile = file;
|
||||
}
|
||||
if (file.endsWith(".png")) pngs++;
|
||||
}
|
||||
|
||||
if ((skels == 0 && jsons == 0) || (skels != 0 && jsons != 0) || skels > 1 || jsons > 1) {
|
||||
showError("Please specify a single .skel or .json file.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (atlases != 1) {
|
||||
showError("Please specify a single .atlas file.");
|
||||
return;
|
||||
}
|
||||
|
||||
var filesToLoad = files.length;
|
||||
var dataUrls = {};
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
var file = files[i];
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(file) {
|
||||
return function(dataUrl) {
|
||||
console.log("Loaded " + file.name);
|
||||
dataUrls[file.name] = dataUrl.target.result;
|
||||
filesToLoad--;
|
||||
if (filesToLoad == 0) {
|
||||
setupPlayer(dataUrls, jsonFile, skelFile, atlasFile);
|
||||
}
|
||||
};
|
||||
}(file);
|
||||
reader.onerror = function () {
|
||||
showError("Sorry, couldn't load all files.");
|
||||
}
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
|
||||
function setupPlayer(dataUrls, jsonFile, skelFile, atlasFile) {
|
||||
var version = getSkeletonVersion(dataUrls, jsonFile, skelFile);
|
||||
var major = parseInt(version.split("\.")[0]);
|
||||
var minor = parseInt(version.split("\.")[1]);
|
||||
|
||||
appState.dataUrls = dataUrls;
|
||||
appState.jsonFile = jsonFile;
|
||||
appState.skelFile = skelFile;
|
||||
appState.atlasFile = atlasFile;
|
||||
appState.majorVersion = major;
|
||||
appState.minorVersion = minor;
|
||||
|
||||
if (major == 3 && minor < 8) {
|
||||
showError("Couldn't load script for Spine version " + version + ". Only skeletons with version >= 3.8 are supported.");
|
||||
return;
|
||||
}
|
||||
|
||||
var cssUrl = "https://esotericsoftware.com/files/spine-player/" + major + "." + minor + "/spine-player.css";
|
||||
spine = null;
|
||||
loadCSS(cssUrl, function () {
|
||||
var playerUrl = "https://esotericsoftware.com/files/spine-player/" + major + "." + minor + "/spine-player.js";
|
||||
loadJavaScript(playerUrl, function() {
|
||||
document.getElementById("sp_generator_editor").classList.remove("sp_generator_hidden");
|
||||
document.getElementById("sp_generator_drop_zone").classList.add("sp_generator_hidden");
|
||||
var player = document.getElementById("sp_generator_player");
|
||||
player.innerHTML = "";
|
||||
|
||||
var config = {
|
||||
jsonUrl: jsonFile,
|
||||
skelUrl: skelFile,
|
||||
atlasUrl: atlasFile,
|
||||
rawDataURIs: dataUrls,
|
||||
success: setupConfigUI,
|
||||
alpha: true, // needed so we can emulate shizzle
|
||||
viewport: { // needed so we can see viewport bounds
|
||||
debugRender: true
|
||||
}
|
||||
};
|
||||
|
||||
appState.player = new spine.SpinePlayer(player, config);
|
||||
|
||||
}, function() {
|
||||
showError("Couldn't load script for Spine version " + version + ". Only skeletons with version 3.8+ are supported.");
|
||||
});
|
||||
}, function () {
|
||||
showError("Couldn't load CSS for Spine version " + version + ". Only skeletons with version 3.8+ are supported.");
|
||||
});
|
||||
}
|
||||
|
||||
function setupConfigUI() {
|
||||
// Setup tabs
|
||||
var tabs = document.getElementsByClassName("sp_generator_tabs")[0];
|
||||
var children = tabs.getElementsByTagName("span");
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
(function (tab) {
|
||||
tab.onclick = function () {
|
||||
var panelId = tab.getAttribute("data-tab");
|
||||
var panels = document.getElementById("sp_generator_config").getElementsByClassName("sp_generator_panel");
|
||||
for (var i = 0; i < panels.length; i++) {
|
||||
var panel = panels[i];
|
||||
if (panelId == panel.getAttribute("id")) {
|
||||
tab.classList.add("sp_generator_selected_tab");
|
||||
panel.classList.remove("sp_generator_hidden");
|
||||
} else {
|
||||
tab.classList.remove("sp_generator_selected_tab");
|
||||
panel.classList.add("sp_generator_hidden");
|
||||
}
|
||||
}
|
||||
}
|
||||
})(children[i]);
|
||||
}
|
||||
|
||||
// Fill general tab
|
||||
var showControls = document.getElementById("sp_generator_show_controls");
|
||||
showControls.onchange = function () {
|
||||
appState.player.config.showControls = showControls.checked;
|
||||
};
|
||||
var canvasAlpha = document.getElementById("sp_generator_canvas_alpha");
|
||||
canvasAlpha.onchange = function () {
|
||||
var re = /[0-9A-Fa-f]{2}/g;
|
||||
if (canvasAlpha.value.length > 2 || !re.test(canvasAlpha.value))
|
||||
canvasAlpha.value = "FF";
|
||||
else
|
||||
canvasAlpha.value = canvasAlpha.value.toUpperCase();
|
||||
var alpha = Number.parseInt(canvasAlpha.value, 16);
|
||||
appState.player.config.alpha = alpha != 0xff;
|
||||
appState.player.config.backgroundColor = document.getElementById("sp_generator_background").value + canvasAlpha.value;
|
||||
}
|
||||
var premultipliedAlpha = document.getElementById("sp_generator_premultiplied_alpha");
|
||||
var premultipliedAlpha = document.getElementById("sp_generator_premultiplied_alpha");
|
||||
premultipliedAlpha.onchange = function () {
|
||||
appState.player.config.premultipliedAlpha = premultipliedAlpha.checked;
|
||||
}
|
||||
var backgroundImage = document.getElementById("sp_generator_background_image");
|
||||
backgroundImage.innerHTML = "";
|
||||
var noneImage = document.createElement("option");
|
||||
noneImage.value = "none";
|
||||
noneImage.innerText = "None";
|
||||
noneImage.selected = true;
|
||||
backgroundImage.append(noneImage);
|
||||
for(var data in appState.dataUrls) {
|
||||
if (data.toLowerCase().endsWith(".png")) {
|
||||
var image = document.createElement("option");
|
||||
image.value = data;
|
||||
image.innerText = data;
|
||||
backgroundImage.append(image);
|
||||
}
|
||||
}
|
||||
backgroundImage.onchange = function() {
|
||||
var imageUrl = backgroundImage.value;
|
||||
if (imageUrl != "none" && !appState.player.assetManager.get(imageUrl)) {
|
||||
appState.player.assetManager.loadTexture(imageUrl);
|
||||
}
|
||||
|
||||
var boundsTable = document.getElementById("sp_generator_background_bounds");
|
||||
if (imageUrl == "none")
|
||||
boundsTable.classList.add("sp_generator_hidden");
|
||||
else
|
||||
boundsTable.classList.remove("sp_generator_hidden");
|
||||
|
||||
if (appState.player.config.backgroundImage) {
|
||||
appState.player.config.backgroundImage.url = imageUrl != "none" ? imageUrl: null;
|
||||
} else {
|
||||
appState.player.config.backgroundImage = {
|
||||
url: imageUrl != "none" ? imageUrl : null
|
||||
}
|
||||
}
|
||||
}
|
||||
var backgroundX = document.getElementById("sp_generator_background_x");
|
||||
backgroundX.onkeyup = backgroundX.onchange = function () {
|
||||
var value = Number.parseFloat(backgroundX.value);
|
||||
if (Number.isNaN(value)) return;
|
||||
appState.player.config.backgroundImage.x = value;
|
||||
};
|
||||
|
||||
var backgroundY = document.getElementById("sp_generator_background_y");
|
||||
backgroundY.onkeyup = backgroundY.onchange = function () {
|
||||
var value = Number.parseFloat(backgroundY.value);
|
||||
if (Number.isNaN(value)) return;
|
||||
appState.player.config.backgroundImage.y = value;
|
||||
};
|
||||
var backgroundWidth = document.getElementById("sp_generator_background_width");
|
||||
backgroundWidth.onkeyup = backgroundWidth.onchange = function () {
|
||||
var value = Number.parseFloat(backgroundWidth.value);
|
||||
if (Number.isNaN(value)) return;
|
||||
appState.player.config.backgroundImage.width = value;
|
||||
};
|
||||
var backgroundHeight = document.getElementById("sp_generator_background_height");
|
||||
backgroundHeight.onkeyup = backgroundHeight.onchange = function () {
|
||||
var value = Number.parseFloat(backgroundHeight.value);
|
||||
if (Number.isNaN(value)) return;
|
||||
appState.player.config.backgroundImage.height = value;
|
||||
};
|
||||
|
||||
|
||||
// Fill animations tab
|
||||
|
||||
// Fill viewports tab
|
||||
|
||||
// Fill skins tab
|
||||
|
||||
// Fill debug tab
|
||||
}
|
||||
|
||||
function changeBackgroundColor(background) {
|
||||
appState.player.config.backgroundColor = background.valueElement.value + document.getElementById("sp_generator_canvas_alpha").value;
|
||||
}
|
||||
|
||||
function changeFullscreenBackgroundColor(background) {
|
||||
appState.player.config.fullScreenBackgroundColor = background.valueElement.value;
|
||||
}
|
||||
|
||||
function getSkeletonVersion(dataUrls, jsonFile, skelFile) {
|
||||
if (jsonFile) {
|
||||
var json = JSON.parse(atob(dataUrls[jsonFile].split(',')[1]));
|
||||
return json.skeleton.spine;
|
||||
} else {
|
||||
var bytes = atob(dataUrls[skelFile].split(',')[1]);
|
||||
var array = new Uint8Array(new ArrayBuffer(bytes.length));
|
||||
for (var i = 0; i < bytes.length; i++) {
|
||||
array[i] = bytes.charCodeAt(i);
|
||||
}
|
||||
|
||||
var input = new BinaryInput(array);
|
||||
input.readString();
|
||||
var version = input.readString();
|
||||
return version;x
|
||||
}
|
||||
}
|
||||
|
||||
function loadJavaScript(url, success, error) {
|
||||
var script = document.createElement('script');
|
||||
script.setAttribute('src', url);
|
||||
script.setAttribute('type', 'text/javascript');
|
||||
script.onload = success;
|
||||
script.onerror = error;
|
||||
document.getElementsByTagName("head")[0].appendChild(script);
|
||||
};
|
||||
|
||||
function loadCSS(url, success, error) {
|
||||
var script = document.createElement('link');
|
||||
script.setAttribute('href', url);
|
||||
script.setAttribute('rel', 'stylesheet');
|
||||
script.onload = success;
|
||||
script.onerror = error;
|
||||
document.getElementsByTagName("head")[0].appendChild(script);
|
||||
};
|
||||
|
||||
function showError(error) {
|
||||
alert(error);
|
||||
}
|
||||
|
||||
function setupDropZone() {
|
||||
var fileButton = document.getElementById("sp_generator_file_button");
|
||||
var dropZone = document.getElementById("sp_generator_drop_zone");
|
||||
dropZone.onclick = function() {
|
||||
fileButton.click();
|
||||
};
|
||||
dropZone.addEventListener("dragenter", function (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}, false);
|
||||
dropZone.addEventListener("dragover", function (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}, false);
|
||||
dropZone.addEventListener("drop", function (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
loadFiles(event.dataTransfer.files);
|
||||
}, false);
|
||||
|
||||
|
||||
fileButton.onchange = function () {
|
||||
loadFiles(fileButton.files);
|
||||
fileButton.value = "";
|
||||
};
|
||||
}
|
||||
|
||||
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' +
|
||||
'<div id="player-container" style="width: 100%; height: 100vh;"></div>\n\n' +
|
||||
'<script>\n' +
|
||||
'new spine.SpinePlayer("player-container", {\n';
|
||||
if (jsonFile) scriptCode +=
|
||||
' jsonUrl: "' + jsonFile + '",\n';
|
||||
else scriptCode +=
|
||||
' skelUrl: "' + skelFile + '",\n';
|
||||
|
||||
scriptCode +=
|
||||
' atlasUrl: "' + atlasFile + '",\n' +
|
||||
' rawDataURIs: {\n'
|
||||
|
||||
for (var file in dataUrls) {
|
||||
scriptCode +=
|
||||
' "' + file + '": "' + dataUrls[file] + '",\n';
|
||||
}
|
||||
|
||||
scriptCode +=
|
||||
' }\n' +
|
||||
'});\n' +
|
||||
'<' + '/script>';
|
||||
}
|
||||
|
||||
var BinaryInput = (function () {
|
||||
function BinaryInput(data, strings, index, buffer) {
|
||||
if (strings === void 0) { strings = new Array(); }
|
||||
if (index === void 0) { index = 0; }
|
||||
if (buffer === void 0) { buffer = new DataView(data.buffer); }
|
||||
this.strings = strings;
|
||||
this.index = index;
|
||||
this.buffer = buffer;
|
||||
}
|
||||
BinaryInput.prototype.readByte = function () {
|
||||
return this.buffer.getInt8(this.index++);
|
||||
};
|
||||
BinaryInput.prototype.readShort = function () {
|
||||
var value = this.buffer.getInt16(this.index);
|
||||
this.index += 2;
|
||||
return value;
|
||||
};
|
||||
BinaryInput.prototype.readInt32 = function () {
|
||||
var value = this.buffer.getInt32(this.index);
|
||||
this.index += 4;
|
||||
return value;
|
||||
};
|
||||
BinaryInput.prototype.readInt = function (optimizePositive) {
|
||||
var b = this.readByte();
|
||||
var result = b & 0x7F;
|
||||
if ((b & 0x80) != 0) {
|
||||
b = this.readByte();
|
||||
result |= (b & 0x7F) << 7;
|
||||
if ((b & 0x80) != 0) {
|
||||
b = this.readByte();
|
||||
result |= (b & 0x7F) << 14;
|
||||
if ((b & 0x80) != 0) {
|
||||
b = this.readByte();
|
||||
result |= (b & 0x7F) << 21;
|
||||
if ((b & 0x80) != 0) {
|
||||
b = this.readByte();
|
||||
result |= (b & 0x7F) << 28;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return optimizePositive ? result : ((result >>> 1) ^ -(result & 1));
|
||||
};
|
||||
BinaryInput.prototype.readStringRef = function () {
|
||||
var index = this.readInt(true);
|
||||
return index == 0 ? null : this.strings[index - 1];
|
||||
};
|
||||
BinaryInput.prototype.readString = function () {
|
||||
var byteCount = this.readInt(true);
|
||||
switch (byteCount) {
|
||||
case 0:
|
||||
return null;
|
||||
case 1:
|
||||
return "";
|
||||
}
|
||||
byteCount--;
|
||||
var chars = "";
|
||||
var charCount = 0;
|
||||
for (var i = 0; i < byteCount;) {
|
||||
var b = this.readByte();
|
||||
switch (b >> 4) {
|
||||
case 12:
|
||||
case 13:
|
||||
chars += String.fromCharCode(((b & 0x1F) << 6 | this.readByte() & 0x3F));
|
||||
i += 2;
|
||||
break;
|
||||
case 14:
|
||||
chars += String.fromCharCode(((b & 0x0F) << 12 | (this.readByte() & 0x3F) << 6 | this.readByte() & 0x3F));
|
||||
i += 3;
|
||||
break;
|
||||
default:
|
||||
chars += String.fromCharCode(b);
|
||||
i++;
|
||||
}
|
||||
}
|
||||
return chars;
|
||||
};
|
||||
BinaryInput.prototype.readFloat = function () {
|
||||
var value = this.buffer.getFloat32(this.index);
|
||||
this.index += 4;
|
||||
return value;
|
||||
};
|
||||
BinaryInput.prototype.readBoolean = function () {
|
||||
return this.readByte() != 0;
|
||||
};
|
||||
return BinaryInput;
|
||||
}());
|
||||
1855
spine-ts/player/example/generator/jscolor.js
Normal file
1855
spine-ts/player/example/generator/jscolor.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -794,7 +794,7 @@ module spine {
|
||||
// Draw background image if given
|
||||
if (this.config.backgroundImage && this.config.backgroundImage.url) {
|
||||
let bgImage = this.assetManager.get(this.config.backgroundImage.url);
|
||||
if (!this.config.backgroundImage.x) {
|
||||
if (!(this.config.backgroundImage.hasOwnProperty("x") && this.config.backgroundImage.hasOwnProperty("y") && this.config.backgroundImage.hasOwnProperty("width") && this.config.backgroundImage.hasOwnProperty("height"))) {
|
||||
this.sceneRenderer.drawTexture(bgImage, viewport.x, viewport.y, viewport.width, viewport.height);
|
||||
} else {
|
||||
this.sceneRenderer.drawTexture(bgImage, this.config.backgroundImage.x, this.config.backgroundImage.y, this.config.backgroundImage.width, this.config.backgroundImage.height);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user