chizui/aklive2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(fallback): use dynamic filename

Browse Source
This commit is contained in:
Haoyu Xu
2021-08-08 16:27:58 -04:00
parent 7099bc8c27
commit bbaacd766d
5 changed files with 39 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
config.yaml
View File

@@ -15,6 +15,7 @@ operators:
operator_logo: logo_rhodes_override operator_logo: logo_rhodes_override
title: Ch'en the Holungday title: Ch'en the Holungday
version: __get_version version: __get_version
fallback_name: char_1013_chen2_2
operator_settings.js: operator_settings.js:
fallbackImage_height: 2048 fallbackImage_height: 2048
fallbackImage_width: 2048 fallbackImage_width: 2048
@@ -52,6 +53,7 @@ operators:
operator_logo: logo_sui operator_logo: logo_sui
title: Nian title: Nian
version: __get_version version: __get_version
fallback_name: char_2014_nian_2
operator_settings.js: operator_settings.js:
fallbackImage_height: 2048 fallbackImage_height: 2048
fallbackImage_width: 2048 fallbackImage_width: 2048
@@ -88,6 +90,7 @@ operators:
operator_logo: logo_egir operator_logo: logo_egir
title: Skadi the Corrupting Heart title: Skadi the Corrupting Heart
version: __get_version version: __get_version
fallback_name: char_1012_skadi2_2
operator_settings.js: operator_settings.js:
fallbackImage_height: 2048 fallbackImage_height: 2048
fallbackImage_width: 2048 fallbackImage_width: 2048

2
lib/builder.py
View File

@@ -99,7 +99,7 @@ class Builder:
) )
fallback_thread = threading.Thread( fallback_thread = threading.Thread(
target=AlphaComposite, target=AlphaComposite,
args=(source_path + fallback_name, target_path + "../fallback"), args=(source_path + fallback_name, target_path + "../{}".format(fallback_name)),
daemon=True, daemon=True,
) )

6
template/assets/runner.js
View File

@@ -18,9 +18,7 @@ function supportsWebGL() {
if (!supportsWebGL()) { if (!supportsWebGL()) {
alert('WebGL is unavailable. Fallback image will be used.'); alert('WebGL is unavailable. Fallback image will be used.');
var e = document.getElementById("container"); var e = document.getElementById("fallback");
e.classList.add("fallback");
e.parentElement.classList.add("widget-wrapper");
function calculateScale(width, height) { function calculateScale(width, height) {
let windowWidth = window.innerWidth; let windowWidth = window.innerWidth;
@@ -39,6 +37,8 @@ if (!supportsWebGL()) {
e.style.width = window.operatorSettings.fallbackImage.width * scale.x + "px"; e.style.width = window.operatorSettings.fallbackImage.width * scale.x + "px";
e.style.height = window.operatorSettings.fallbackImage.height * scale.x + "px"; e.style.height = window.operatorSettings.fallbackImage.height * scale.x + "px";
} }
e.classList.add("show");
document.getElementById("container").classList.add("hide");
} }
window.addEventListener('resize', fallback, true); window.addEventListener('resize', fallback, true);

43
template/assets/style.css
View File

@@ -13,13 +13,39 @@ body {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-image: url("../operator/operator_bg.png");
height: 100%; height: 100%;
width: 100%; width: 100%;
touch-action: none; touch-action: none;
-ms-touch-action: none; -ms-touch-action: none;
} }
#dev {
position: fixed;
left: 0;
top: 0;
background-color: white;
}
#widget-wrapper, #container, #fallback {
width: 100%;
height: 100%;
}
.hide {
display: none;
}
#fallback.show {
display: flex;
align-items: center;
margin: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
.logo { .logo {
position: fixed; position: fixed;
left: 0; left: 0;
@@ -32,21 +58,6 @@ body {
opacity: 0.3; opacity: 0.3;
} }
.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%;
}
.website-settings { .website-settings {
position: fixed; position: fixed;
left: 0; left: 0;

9
template/index.html
View File

@@ -11,11 +11,12 @@
<link rel="stylesheet" href="./assets/spine-player.css?v={# version #}"> <link rel="stylesheet" href="./assets/spine-player.css?v={# version #}">
</head> </head>
<body> <body style="background-image: url('./operator/operator_bg.png');">
<div id="dev" style="position: fixed;left: 0;top: 0;background-color: white;"></div> <div id="dev"></div>
<image src="./operator/{# operator_logo #}.png" class="logo invert-filter" id="logo" alt="operator logo" /> <image src="./operator/{# operator_logo #}.png" class="logo invert-filter" id="logo" alt="operator logo" />
<div id="widget-wrapper" style="width: 100%; height: 100%;"> <div id="widget-wrapper">
<div id="container" style="width: 100%; height: 100%;"></div> <div id="container"></div>
<div id="fallback" class="hide" style="background-image: url('./operator/{# fallback_name #}.png');"></div>
</div> </div>
</body> </body>