UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-21 01:36:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Generator background image UI and application.

Browse Source
This commit is contained in:
badlogic 2019-11-28 10:35:16 +01:00
parent c37916a731
commit a2bae9dea4
2 changed files with 57 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
spine-ts/player/example/generator/embedding-generator.html
View File

@ -130,12 +130,32 @@ body {
<th>Fullscreen background color</th> <th>Fullscreen background color</th>
<td><input id="sp_generator_background_fullscreen" class="jscolor {onFineChange:'changeFullscreenBackgroundColor(this)'}'" value="000000"></td> <td><input id="sp_generator_background_fullscreen" class="jscolor {onFineChange:'changeFullscreenBackgroundColor(this)'}'" value="000000"></td>
</tr> </tr>
<tr> <tr style="vertical-align: top;">
<th>Background image</th> <th>Background image</th>
<td> <td>
<select id="sp_generator_background_image"> <select id="sp_generator_background_image">
</select> </select>
</td> </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> </tr>
</table> </table>
</div> </div>

37
spine-ts/player/example/generator/embedding-generator.js
View File

@ -112,7 +112,10 @@ function setupPlayer(dataUrls, jsonFile, skelFile, atlasFile) {
atlasUrl: atlasFile, atlasUrl: atlasFile,
rawDataURIs: dataUrls, rawDataURIs: dataUrls,
success: setupConfigUI, success: setupConfigUI,
alpha: true // needed so we can emulate shizzle 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); appState.player = new spine.SpinePlayer(player, config);
@ -190,6 +193,12 @@ function setupConfigUI() {
appState.player.assetManager.loadTexture(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) { if (appState.player.config.backgroundImage) {
appState.player.config.backgroundImage.url = imageUrl != "none" ? imageUrl: null; appState.player.config.backgroundImage.url = imageUrl != "none" ? imageUrl: null;
} else { } else {
@ -198,6 +207,32 @@ function setupConfigUI() {
} }
} }
} }
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 animations tab