feat(server): finish server part (1/2)
This commit is contained in:
89
template/assets/runner.js
Normal file
89
template/assets/runner.js
Normal file
@@ -0,0 +1,89 @@
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const RATIO = 0.618;
|
||||
var fps = 60;
|
||||
|
||||
if (params.has("fps")) {
|
||||
var tmp = parseInt(params.get("fps"));
|
||||
if (!isNaN(tmp)) {
|
||||
fps = tmp;
|
||||
}
|
||||
}
|
||||
|
||||
function supportsWebGL() {
|
||||
try {
|
||||
let canvas = document.createElement("canvas");
|
||||
let ctx = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
|
||||
return ctx != null;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function calculateScale(width, height) {
|
||||
let windowWidth = window.innerWidth;
|
||||
let windowHeight = window.innerHeight;
|
||||
let scaleX = windowWidth / width;
|
||||
let scaleY = windowHeight / height;
|
||||
return { x: scaleX, y: scaleY };
|
||||
};
|
||||
|
||||
if (!supportsWebGL()) {
|
||||
alert('WebGL is unavailable. Fallback image will be used.');
|
||||
var e = document.getElementById("container");
|
||||
e.classList.add("fallback");
|
||||
e.parentElement.classList.add("widget-wrapper");
|
||||
|
||||
function fallback() {
|
||||
const scale = calculateScale(window.settings.fallbackImage.width, window.settings.fallbackImage.height);
|
||||
if (scale.x > scale.y) {
|
||||
e.style.width = window.settings.fallbackImage.width * scale.y + "px";
|
||||
e.style.height = window.settings.fallbackImage.height * scale.y + "px";
|
||||
} else if (scale.x < scale.y) {
|
||||
e.style.width = window.settings.fallbackImage.width * scale.x + "px";
|
||||
e.style.height = window.settings.fallbackImage.height * scale.x + "px";
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', fallback, true);
|
||||
fallback();
|
||||
} else {
|
||||
var e = document.getElementById("container");
|
||||
var resetTime = window.performance.now();
|
||||
|
||||
var spinePlayer = new spine.SpinePlayer(e, {
|
||||
jsonUrl: window.settings.jsonUrl,
|
||||
atlasUrl: window.settings.atlasUrl,
|
||||
animation: window.settings.animation,
|
||||
rawDataURIs: window.operator,
|
||||
premultipliedAlpha: true,
|
||||
alpha: true,
|
||||
backgroundColor: "#00000000",
|
||||
fps: fps,
|
||||
viewport: window.settings.viewport,
|
||||
showControls: false,
|
||||
defaultMix: window.settings.defaultMix,
|
||||
success: window.settings.success,
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
function resizeLogo() {
|
||||
document.getElementById("logo").width = window.innerWidth / 2 * RATIO
|
||||
}
|
||||
window.addEventListener('resize', resizeLogo, true);
|
||||
resizeLogo()
|
||||
|
||||
window.addEventListener("contextmenu", e => e.preventDefault());
|
||||
document.addEventListener("gesturestart", e => e.preventDefault());
|
||||
|
||||
// wallpaper engine
|
||||
window.wallpaperPropertyListener = {
|
||||
applyGeneralProperties: function (properties) {
|
||||
if (properties.fps) {
|
||||
spinePlayer.setFps(properties.fps);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
console.log("All resources are extracted from Arknights.")
|
||||
@@ -2089,11 +2089,15 @@ var spine;
|
||||
this.errors = {};
|
||||
this.toLoad = 0;
|
||||
this.loaded = 0;
|
||||
this.rawDataUris = {};
|
||||
this.textureLoader = textureLoader;
|
||||
this.pathPrefix = pathPrefix;
|
||||
}
|
||||
AssetManager.downloadText = function (url, success, error) {
|
||||
AssetManager.prototype.downloadText = function (url, success, error) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.overrideMimeType("text/html");
|
||||
if (this.rawDataUris[url])
|
||||
url = this.rawDataUris[url];
|
||||
request.open("GET", url, true);
|
||||
request.onload = function () {
|
||||
if (request.status == 200) {
|
||||
@@ -2108,8 +2112,10 @@ var spine;
|
||||
};
|
||||
request.send();
|
||||
};
|
||||
AssetManager.downloadBinary = function (url, success, error) {
|
||||
AssetManager.prototype.downloadBinary = function (url, success, error) {
|
||||
var request = new XMLHttpRequest();
|
||||
if (this.rawDataUris[url])
|
||||
url = this.rawDataUris[url];
|
||||
request.open("GET", url, true);
|
||||
request.responseType = "arraybuffer";
|
||||
request.onload = function () {
|
||||
@@ -2125,13 +2131,16 @@ var spine;
|
||||
};
|
||||
request.send();
|
||||
};
|
||||
AssetManager.prototype.setRawDataURI = function (path, data) {
|
||||
this.rawDataUris[this.pathPrefix + path] = data;
|
||||
};
|
||||
AssetManager.prototype.loadText = function (path, success, error) {
|
||||
var _this = this;
|
||||
if (success === void 0) { success = null; }
|
||||
if (error === void 0) { error = null; }
|
||||
path = this.pathPrefix + path;
|
||||
this.toLoad++;
|
||||
AssetManager.downloadText(path, function (data) {
|
||||
this.downloadText(path, function (data) {
|
||||
_this.assets[path] = data;
|
||||
if (success)
|
||||
success(path, data);
|
||||
@@ -2150,12 +2159,13 @@ var spine;
|
||||
if (success === void 0) { success = null; }
|
||||
if (error === void 0) { error = null; }
|
||||
path = this.pathPrefix + path;
|
||||
var storagePath = path;
|
||||
this.toLoad++;
|
||||
var img = new Image();
|
||||
img.crossOrigin = "anonymous";
|
||||
img.onload = function (ev) {
|
||||
var texture = _this.textureLoader(img);
|
||||
_this.assets[path] = texture;
|
||||
_this.assets[storagePath] = texture;
|
||||
_this.toLoad--;
|
||||
_this.loaded++;
|
||||
if (success)
|
||||
@@ -2168,6 +2178,8 @@ var spine;
|
||||
if (error)
|
||||
error(path, "Couldn't load image " + path);
|
||||
};
|
||||
if (this.rawDataUris[path])
|
||||
path = this.rawDataUris[path];
|
||||
img.src = path;
|
||||
};
|
||||
AssetManager.prototype.loadTextureData = function (path, data, success, error) {
|
||||
@@ -2201,7 +2213,7 @@ var spine;
|
||||
var parent = path.lastIndexOf("/") >= 0 ? path.substring(0, path.lastIndexOf("/")) : "";
|
||||
path = this.pathPrefix + path;
|
||||
this.toLoad++;
|
||||
AssetManager.downloadText(path, function (atlasData) {
|
||||
this.downloadText(path, function (atlasData) {
|
||||
var pagesLoaded = { count: 0 };
|
||||
var atlasPages = new Array();
|
||||
try {
|
||||
@@ -9726,6 +9738,12 @@ var spine;
|
||||
return dom;
|
||||
}
|
||||
this.assetManager = new spine.webgl.AssetManager(this.context);
|
||||
if (config.rawDataURIs) {
|
||||
for (var path in config.rawDataURIs) {
|
||||
var data = config.rawDataURIs[path];
|
||||
this.assetManager.setRawDataURI(path, data);
|
||||
}
|
||||
}
|
||||
this.assetManager.loadText(config.jsonUrl);
|
||||
this.assetManager.loadTextureAtlas(config.atlasUrl);
|
||||
if (config.backgroundImage && config.backgroundImage.url)
|
||||
43
template/assets/style.css
Normal file
43
template/assets/style.css
Normal file
@@ -0,0 +1,43 @@
|
||||
html {
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-image: url("../operator/operator_bg.png");
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
filter: invert(1);
|
||||
opacity: 0.3;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.widget-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fallback {
|
||||
margin: auto;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-image: url("../operator/fallback.png");
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -1,148 +0,0 @@
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const RATIO = 0.618;
|
||||
var fps = 60;
|
||||
|
||||
if (params.has("fps")) {
|
||||
var tmp = parseInt(params.get("fps"));
|
||||
if (!isNaN(tmp)) {
|
||||
fps = tmp;
|
||||
}
|
||||
}
|
||||
|
||||
function supportsWebGL() {
|
||||
try {
|
||||
let canvas = document.createElement("canvas");
|
||||
let ctx = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
|
||||
return ctx != null;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function calculateScale(width, height) {
|
||||
let windowWidth = window.innerWidth;
|
||||
let windowHeight = window.innerHeight;
|
||||
let scaleX = windowWidth / width;
|
||||
let scaleY = windowHeight / height;
|
||||
return { x: scaleX, y: scaleY };
|
||||
};
|
||||
|
||||
if (!supportsWebGL()) {
|
||||
alert('WebGL is unavailable. Fallback image will be used.');
|
||||
var e = document.getElementById("spine-widget");
|
||||
e.classList.add("fallback");
|
||||
e.parentElement.classList.add("widget-wrapper");
|
||||
document.getElementById("loader").style.display = "none";
|
||||
|
||||
function fallback() {
|
||||
const scale = calculateScale(window.operator.fallbackImage.width, window.operator.fallbackImage.height);
|
||||
if (scale.x > scale.y) {
|
||||
e.style.width = window.operator.fallbackImage.width * scale.y;
|
||||
e.style.height = window.operator.fallbackImage.height * scale.y;
|
||||
} else if (scale.x < scale.y) {
|
||||
e.style.width = window.operator.fallbackImage.width * scale.x;
|
||||
e.style.height = window.operator.fallbackImage.height * scale.x;
|
||||
}
|
||||
document.getElementById("logo").width = window.innerWidth / 2 * RATIO
|
||||
}
|
||||
window.addEventListener('resize', fallback, true);
|
||||
fallback();
|
||||
} else {
|
||||
var resetTime = window.performance.now();
|
||||
var e = document.getElementById("spine-widget");
|
||||
var spineWidget;
|
||||
window.isLoaded = false;
|
||||
|
||||
function render() {
|
||||
let isPlayingInteract = false;
|
||||
|
||||
var scale = calculateScale(window.operator.spineSize.width, window.operator.spineSize.height);
|
||||
|
||||
spineWidget = new spine.SpineWidget(e, {
|
||||
atlasContent: atob(window.operator.atlasContent),
|
||||
jsonContent: window.operator.jsonContent,
|
||||
atlasPages: window.operator.atlasPages,
|
||||
atlasPagesContent: window.operator.atlasPagesContent,
|
||||
animation: "Idle",
|
||||
backgroundColor: "#00000000",
|
||||
loop: true,
|
||||
skin: "default",
|
||||
fps: fps,
|
||||
scale: Math.min(scale.x, scale.y),
|
||||
x: window.innerWidth / 2,
|
||||
y: calculateCenterY(scale.x, scale.y),
|
||||
fitToCanvas: false,
|
||||
premultipliedAlpha: true,
|
||||
success: function (widget) {
|
||||
widget.state.addListener({
|
||||
end: (e) => {
|
||||
if (e.animation.name == "Interact") {
|
||||
isPlayingInteract = false;
|
||||
}
|
||||
},
|
||||
complete: (e) => {
|
||||
if (window.performance.now() - resetTime >= 8 * 1000 && Math.random() < 0.3) {
|
||||
resetTime = window.performance.now();
|
||||
let entry = widget.state.setAnimation(0, "Special", true, 0);
|
||||
entry.mixDuration = 0.2;
|
||||
widget.state.addAnimation(0, "Idle", true, 0);
|
||||
}
|
||||
},
|
||||
});
|
||||
widget.canvas.onclick = function () {
|
||||
if (isPlayingInteract) {
|
||||
return;
|
||||
}
|
||||
isPlayingInteract = true;
|
||||
let entry = widget.state.setAnimation(0, "Interact", true, 0);
|
||||
entry.mixDuration = 0.2;
|
||||
widget.state.addAnimation(0, "Idle", true, 0);
|
||||
}
|
||||
document.getElementById("loader").style.display = "none";
|
||||
window.isLoaded = true;
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("logo").width = window.innerWidth / 2 * RATIO
|
||||
}
|
||||
|
||||
function calculateCenterY(scaleX, scaleY) {
|
||||
var height = window.innerHeight;
|
||||
var offset = Math.min(window.operator.spineSize.offset, height / window.operator.spineSize.correctionFactor);
|
||||
if (scaleX < scaleY) {
|
||||
// constrained by width
|
||||
var scaledSpineHeight = window.operator.spineSize.height * scaleX;
|
||||
return (height - scaledSpineHeight) / 2 + offset;
|
||||
}
|
||||
return offset;
|
||||
}
|
||||
render();
|
||||
optimizedResize.add(function() {
|
||||
if (window.isLoaded) {
|
||||
window.isLoaded = false;
|
||||
document.getElementById("logo").width = window.innerWidth / 2 * RATIO
|
||||
document.getElementById("loader").style.display = "inherit";
|
||||
var scale = calculateScale(window.operator.spineSize.width, window.operator.spineSize.height);
|
||||
spineWidget.reRender({
|
||||
x: window.innerWidth / 2,
|
||||
y: calculateCenterY(scale.x, scale.y),
|
||||
scale: Math.min(scale.x, scale.y),
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener("contextmenu", e => e.preventDefault());
|
||||
|
||||
document.addEventListener("gesturestart", e => e.preventDefault());
|
||||
|
||||
// wallpaper engine
|
||||
window.wallpaperPropertyListener = {
|
||||
applyGeneralProperties: function (properties) {
|
||||
if (properties.fps) {
|
||||
spineWidget.setFps(properties.fps);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
console.log("All resources are extracted from Arknights.")
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,117 +0,0 @@
|
||||
html {
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-image: url("../assets/operator_bg.png");
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
filter: invert(1);
|
||||
opacity: 0.3;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.widget-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fallback {
|
||||
margin: auto;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-image: url("../assets/fallback.png");
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.loader,
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
background: #546e7a;
|
||||
-webkit-animation: load1 1s infinite ease-in-out;
|
||||
animation: load1 1s infinite ease-in-out;
|
||||
width: 1em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
.loader {
|
||||
color: #546e7a;
|
||||
text-indent: -9999em;
|
||||
margin: 88px auto;
|
||||
position: relative;
|
||||
font-size: 11px;
|
||||
-webkit-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-animation-delay: -0.16s;
|
||||
animation-delay: -0.16s;
|
||||
position: fixed;
|
||||
right: 88px;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.loader:before {
|
||||
left: -1.5em;
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.loader:after {
|
||||
left: 1.5em;
|
||||
}
|
||||
|
||||
@-webkit-keyframes load1 {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
box-shadow: 0 0;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
40% {
|
||||
box-shadow: 0 -2em;
|
||||
height: 5em;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes load1 {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
box-shadow: 0 0;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
40% {
|
||||
box-shadow: 0 -2em;
|
||||
height: 5em;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
<html lang="en">
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@@ -6,19 +7,21 @@
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="renderer" content="webkit">
|
||||
<title>Skadi the Corrupting Heart</title>
|
||||
<link rel="stylesheet" type="text/css" href="./build/style.css?v1.6.1">
|
||||
<link rel="stylesheet" href="./assets/style.css">
|
||||
<link rel="stylesheet" href="./assets/spine-player.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="dev" style="position: fixed;left: 0;left: 0;background-color: white;"></div>
|
||||
<div class="loader" id="loader">Loading...</div>
|
||||
<image src="./assets/operator_logo.png" class="logo" id="logo" alt="operator logo" />
|
||||
<div id="widget-wrapper">
|
||||
<div id="spine-widget"></div>
|
||||
<image src="./operator/operator_logo.png" class="logo" id="logo" alt="operator logo" />
|
||||
<div id="widget-wrapper" style="width: 100%; height: 100%;">
|
||||
<div id="container" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script type="text/javascript" src="./build/operator.js?v1.6.1"></script>
|
||||
<script type="text/javascript" src="./build/spine-widget.js?v1.6.1"></script>
|
||||
<script type="text/javascript" src="./build/runner.js?v1.6.1"></script>
|
||||
<script src="./assets/spine-player.js"></script>
|
||||
<script type="text/javascript" src="./operator/operator.js"></script>
|
||||
<script type="text/javascript" src="./operator/settings.js"></script>
|
||||
<script type="text/javascript" src="./assets/runner.js"></script>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
File diff suppressed because one or more lines are too long
@@ -1,148 +0,0 @@
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const RATIO = 0.618;
|
||||
var fps = 60;
|
||||
|
||||
if (params.has("fps")) {
|
||||
var tmp = parseInt(params.get("fps"));
|
||||
if (!isNaN(tmp)) {
|
||||
fps = tmp;
|
||||
}
|
||||
}
|
||||
|
||||
function supportsWebGL() {
|
||||
try {
|
||||
let canvas = document.createElement("canvas");
|
||||
let ctx = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
|
||||
return ctx != null;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function calculateScale(width, height) {
|
||||
let windowWidth = window.innerWidth;
|
||||
let windowHeight = window.innerHeight;
|
||||
let scaleX = windowWidth / width;
|
||||
let scaleY = windowHeight / height;
|
||||
return { x: scaleX, y: scaleY };
|
||||
};
|
||||
|
||||
if (!supportsWebGL()) {
|
||||
alert('WebGL is unavailable. Fallback image will be used.');
|
||||
var e = document.getElementById("spine-widget");
|
||||
e.classList.add("fallback");
|
||||
e.parentElement.classList.add("widget-wrapper");
|
||||
document.getElementById("loader").style.display = "none";
|
||||
|
||||
function fallback() {
|
||||
const scale = calculateScale(window.operator.fallbackImage.width, window.operator.fallbackImage.height);
|
||||
if (scale.x > scale.y) {
|
||||
e.style.width = window.operator.fallbackImage.width * scale.y;
|
||||
e.style.height = window.operator.fallbackImage.height * scale.y;
|
||||
} else if (scale.x < scale.y) {
|
||||
e.style.width = window.operator.fallbackImage.width * scale.x;
|
||||
e.style.height = window.operator.fallbackImage.height * scale.x;
|
||||
}
|
||||
document.getElementById("logo").width = window.innerWidth / 2 * RATIO
|
||||
}
|
||||
window.addEventListener('resize', fallback, true);
|
||||
fallback();
|
||||
} else {
|
||||
var resetTime = window.performance.now();
|
||||
var e = document.getElementById("spine-widget");
|
||||
var spineWidget;
|
||||
window.isLoaded = false;
|
||||
|
||||
function render() {
|
||||
let isPlayingInteract = false;
|
||||
|
||||
var scale = calculateScale(window.operator.spineSize.width, window.operator.spineSize.height);
|
||||
|
||||
spineWidget = new spine.SpineWidget(e, {
|
||||
atlasContent: atob(window.operator.atlasContent),
|
||||
json: "./assets/dyn_illust_char_1012_skadi2.json",
|
||||
atlasPages: window.operator.atlasPages,
|
||||
atlasPagesContent: window.operator.atlasPagesContent,
|
||||
animation: "Idle",
|
||||
backgroundColor: "#00000000",
|
||||
loop: true,
|
||||
skin: "default",
|
||||
fps: fps,
|
||||
scale: Math.min(scale.x, scale.y),
|
||||
x: window.innerWidth / 2,
|
||||
y: calculateCenterY(scale.x, scale.y),
|
||||
fitToCanvas: false,
|
||||
premultipliedAlpha: true,
|
||||
success: function (widget) {
|
||||
widget.state.addListener({
|
||||
end: (e) => {
|
||||
if (e.animation.name == "Interact") {
|
||||
isPlayingInteract = false;
|
||||
}
|
||||
},
|
||||
complete: (e) => {
|
||||
if (window.performance.now() - resetTime >= 8 * 1000 && Math.random() < 0.3) {
|
||||
resetTime = window.performance.now();
|
||||
let entry = widget.state.setAnimation(0, "Special", true, 0);
|
||||
entry.mixDuration = 0.2;
|
||||
widget.state.addAnimation(0, "Idle", true, 0);
|
||||
}
|
||||
},
|
||||
});
|
||||
widget.canvas.onclick = function () {
|
||||
if (isPlayingInteract) {
|
||||
return;
|
||||
}
|
||||
isPlayingInteract = true;
|
||||
let entry = widget.state.setAnimation(0, "Interact", true, 0);
|
||||
entry.mixDuration = 0.2;
|
||||
widget.state.addAnimation(0, "Idle", true, 0);
|
||||
}
|
||||
document.getElementById("loader").style.display = "none";
|
||||
window.isLoaded = true;
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("logo").width = window.innerWidth / 2 * RATIO
|
||||
}
|
||||
|
||||
function calculateCenterY(scaleX, scaleY) {
|
||||
var height = window.innerHeight;
|
||||
var offset = Math.min(window.operator.spineSize.offset, height / window.operator.spineSize.correctionFactor);
|
||||
if (scaleX < scaleY) {
|
||||
// constrained by width
|
||||
var scaledSpineHeight = window.operator.spineSize.height * scaleX;
|
||||
return (height - scaledSpineHeight) / 2 + offset;
|
||||
}
|
||||
return offset;
|
||||
}
|
||||
render();
|
||||
optimizedResize.add(function() {
|
||||
if (window.isLoaded) {
|
||||
window.isLoaded = false;
|
||||
document.getElementById("logo").width = window.innerWidth / 2 * RATIO
|
||||
document.getElementById("loader").style.display = "inherit";
|
||||
var scale = calculateScale(window.operator.spineSize.width, window.operator.spineSize.height);
|
||||
spineWidget.reRender({
|
||||
x: window.innerWidth / 2,
|
||||
y: calculateCenterY(scale.x, scale.y),
|
||||
scale: Math.min(scale.x, scale.y),
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener("contextmenu", e => e.preventDefault());
|
||||
|
||||
document.addEventListener("gesturestart", e => e.preventDefault());
|
||||
|
||||
// wallpaper engine
|
||||
window.wallpaperPropertyListener = {
|
||||
applyGeneralProperties: function (properties) {
|
||||
if (properties.fps) {
|
||||
spineWidget.setFps(properties.fps);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
console.log("All resources are extracted from Arknights.")
|
||||
@@ -1,117 +0,0 @@
|
||||
html {
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-image: url("../assets/operator_bg.png");
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
filter: invert(1);
|
||||
opacity: 0.3;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.widget-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fallback {
|
||||
margin: auto;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-image: url("../assets/fallback.png");
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.loader,
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
background: #546e7a;
|
||||
-webkit-animation: load1 1s infinite ease-in-out;
|
||||
animation: load1 1s infinite ease-in-out;
|
||||
width: 1em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
.loader {
|
||||
color: #546e7a;
|
||||
text-indent: -9999em;
|
||||
margin: 88px auto;
|
||||
position: relative;
|
||||
font-size: 11px;
|
||||
-webkit-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-animation-delay: -0.16s;
|
||||
animation-delay: -0.16s;
|
||||
position: fixed;
|
||||
right: 88px;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.loader:before {
|
||||
left: -1.5em;
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.loader:after {
|
||||
left: 1.5em;
|
||||
}
|
||||
|
||||
@-webkit-keyframes load1 {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
box-shadow: 0 0;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
40% {
|
||||
box-shadow: 0 -2em;
|
||||
height: 5em;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes load1 {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
box-shadow: 0 0;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
40% {
|
||||
box-shadow: 0 -2em;
|
||||
height: 5em;
|
||||
}
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./build/spine-player.js"></script>
|
||||
<link rel="stylesheet" href="./build/style.css">
|
||||
<link rel="stylesheet" href="./build/spine-player.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="dev" style="position: fixed;left: 0;left: 0;background-color: white;"></div>
|
||||
<div id="container" style="width: 100%; height: 100%;"></div>
|
||||
</body>
|
||||
<script>
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
var fps = 60;
|
||||
|
||||
if (params.has("fps")) {
|
||||
var tmp = parseInt(params.get("fps"));
|
||||
if (!isNaN(tmp)) {
|
||||
fps = tmp;
|
||||
}
|
||||
}
|
||||
|
||||
var resetTime = window.performance.now();
|
||||
let isPlayingInteract = false;
|
||||
new spine.SpinePlayer("container", {
|
||||
jsonUrl: "assets/dyn_illust_char_1012_skadi2.json",
|
||||
atlasUrl: "assets/dyn_illust_char_1012_skadi2.atlas",
|
||||
animation: "Idle",
|
||||
premultipliedAlpha: true,
|
||||
alpha: true,
|
||||
backgroundColor: "#00000000",
|
||||
fps: fps,
|
||||
viewport: {
|
||||
debugRender: false,
|
||||
padLeft: "-5%",
|
||||
padRight: "-10%",
|
||||
padTop: "0%",
|
||||
padBottom: "-12%",
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
showControls: false,
|
||||
success: function (widget) {
|
||||
widget.animationState.addListener({
|
||||
end: (e) => {
|
||||
if (e.animation.name == "Interact") {
|
||||
isPlayingInteract = false;
|
||||
}
|
||||
},
|
||||
complete: (e) => {
|
||||
if (window.performance.now() - resetTime >= 8 * 1000 && Math.random() < 0.3) {
|
||||
resetTime = window.performance.now();
|
||||
let entry = widget.animationState.setAnimation(0, "Special", true, 0);
|
||||
entry.mixDuration = 0.2;
|
||||
widget.animationState.addAnimation(0, "Idle", true, 0);
|
||||
}
|
||||
},
|
||||
});
|
||||
widget.canvas.onclick = function () {
|
||||
if (isPlayingInteract) {
|
||||
return;
|
||||
}
|
||||
isPlayingInteract = true;
|
||||
let entry = widget.animationState.setAnimation(0, "Interact", true, 0);
|
||||
entry.mixDuration = 0.2;
|
||||
widget.animationState.addAnimation(0, "Idle", true, 0);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user