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

feat(background): add other in-game backgrouds (2/2)

Browse Source
This commit is contained in:
Haoyu Xu
2023-01-19 14:18:01 -05:00
parent 5669f78009
commit f18b5a6116
10 changed files with 199 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
.env
View File

@@ -1,11 +1,12 @@
VITE_TITLE="Arknights: Chongyue - 明日方舟：重岳"
VITE_FILENAME=dyn_illust_char_2024_chyue
VITE_TITLE="Arknights: It Does Wash the Strings / Ling - 明日方舟：濯缨 · 令"
VITE_FILENAME=dyn_illust_char_2023_ling_nian%239
VITE_LOGO_FILENAME=logo_sui
VITE_FALLBACK_FILENAME=char_2024_chyue_2
VITE_FALLBACK_FILENAME=char_2023_ling_nian%239
VITE_VIEWPORT_LEFT=0
VITE_VIEWPORT_RIGHT=0
VITE_VIEWPORT_TOP=0
VITE_VIEWPORT_BOTTOM=0
VITE_INVERT_FILTER=true
VITE_IMAGE_WIDTH=2048
VITE_IMAGE_HEIGHT=2048
VITE_IMAGE_HEIGHT=2048
VITE_BACKGROUND_FILES=["background/operator_bg.png","background/bg_anniversary_1.png","background/bg_iberia_1.png","background/bg_kazimierz_1.png","background/bg_main_victoria_1.png","background/bg_rhodes_day.png","background/bg_rhodes_night.png","background/bg_rogue_1.png","background/bg_siesta_1.png","background/bg_ursus_1.png","background/bg_yan_1.png"]

2
Version
View File

@@ -1 +1 @@
3.0.0
3.1.0

2
index.html
View File

@@ -7,7 +7,7 @@
<meta name="renderer" content="webkit">
<title>aklive2d</title>
</head>
<body style="background-image: url('./operator_bg.png');">
<body style="background-image: url('./assets/background/operator_bg.png');">
<div id="app"></div>
<script type="module" src="/src/index.js"></script>
</body>

4
libs/background.js
View File

@@ -51,6 +51,10 @@ export default class Background {
.toFile(path.join(this.#backgroundFolder, `${filenamePrefix}${fileExt}`));
}
get files() {
return this.#files.map(f => f.replace('_left', ''))
}
getFilesToCopy(publicAssetsDir) {
return this.#files.map((f) => {
return {

7
libs/env_generator.js
View File

@@ -1,10 +1,10 @@
import path from 'path'
export default class EnvGenerator {
#config
#assets
constructor(config, operatorName) {
constructor(config, operatorName, assets) {
this.#config = config.operators[operatorName]
this.#assets = assets
}
async generate() {
@@ -25,6 +25,7 @@ export default class EnvGenerator {
`VITE_INVERT_FILTER=${this.#config.invert_filter}`,
`VITE_IMAGE_WIDTH=2048`,
`VITE_IMAGE_HEIGHT=2048`,
`VITE_BACKGROUND_FILES=${JSON.stringify(this.#assets.backgrounds)}`,
].join('\n'))
})
}

2
libs/exec.js
View File

@@ -4,7 +4,7 @@ import { createServer, build } from 'vite'
export function buildAll(config) {
for (const [key, _] of Object.entries(config.operators)) {
if (key.startsWith('_')) break;
console.log(execSync(`node runner.js --build ${key}`).toString());
console.log(execSync(`node runner.js build ${key}`).toString());
}
}

155
libs/project_json.js
View File

@@ -8,12 +8,14 @@ export default class ProjectJson {
#operatorName
#operatorSourceFolder
#operatorShareFolder
#assets
constructor(config, operatorName, __dirname, operatorShareFolder) {
constructor(config, operatorName, __dirname, operatorShareFolder, assets) {
this.#config = config
this.#operatorName = operatorName
this.#operatorSourceFolder = path.join(__dirname, this.#config.folder.operator)
this.#operatorShareFolder = operatorShareFolder
this.#assets = assets
}
async load() {
@@ -47,25 +49,144 @@ export default class ProjectJson {
...this.#json.general,
properties: {
...this.#json.general.properties,
paddingbottom: {
...this.#json.general.properties.paddingbottom,
value: this.#config.operators[this.#operatorName].viewport_bottom
},
paddingleft: {
...this.#json.general.properties.paddingleft,
value: this.#config.operators[this.#operatorName].viewport_left
},
paddingright: {
...this.#json.general.properties.paddingright,
value: this.#config.operators[this.#operatorName].viewport_right
},
paddingtop: {
...this.#json.general.properties.paddingtop,
value: this.#config.operators[this.#operatorName].viewport_top
},
...this.#properties
}
},
}
}
get #properties() {
const properties = [
{
key: "notice",
value: {
text: "ui_logo_notice",
type: "textinput",
"value": "Set FPS target in Settings"
}
}, {
key: "logo",
value: {
text: "ui_operator_logo",
type: "bool",
value: true
}
}, {
key: "logoimage",
value: {
text: "ui_logo_image",
type: "file",
value: "",
condition: "logo.value == true",
}
}, {
key: "logoratio",
value: {
text: "ui_logo_ratio",
type: "slider",
value: 61.8,
condition: "logo.value == true",
fraction: true,
max: 100,
min: 0,
precision: 2,
step: 0.1,
}
}, {
key: "logoopacity",
value: {
text: "ui_logo_opacity",
type: "slider",
value: 30,
condition: "logo.value == true",
fraction: false,
max: 100,
min: 0,
}
}, {
key: "defaultbackground",
value: {
text: "ui_default_background",
type: "combo",
value: this.#assets.backgrounds[0],
fraction: false,
max: 100,
min: 0,
options: this.#assets.backgrounds.map((b) => {
return {
"label": b,
"value": b
}
})
}
}, {
key: "background",
value: {
text: "ui_custom_background",
type: "file",
value: "",
}
}, {
key: "position",
value: {
text: "ui_position",
type: "bool",
value: false,
}
}, {
key: "paddingleft",
value: {
text: "ui_position_padding_left",
type: "slider",
value: this.#config.operators[this.#operatorName].viewport_left,
condition: "position.value == true",
fraction: false,
max: 100,
min: -100,
}
}, {
key: "paddingright",
value: {
text: "ui_position_padding_right",
type: "slider",
value: this.#config.operators[this.#operatorName].viewport_right,
condition: "position.value == true",
fraction: false,
max: 100,
min: -100,
}
}, {
key: "paddingtop",
value: {
text: "ui_position_padding_top",
type: "slider",
value: this.#config.operators[this.#operatorName].viewport_top,
condition: "position.value == true",
fraction: false,
max: 100,
min: -100,
}
}, {
key: "paddingbottom",
value: {
text: "ui_position_padding_bottom",
type: "slider",
value: this.#config.operators[this.#operatorName].viewport_bottom,
condition: "position.value == true",
fraction: false,
max: 100,
min: -100,
}
}
]
const output = {}
for (let i = 0; i < properties.length; i++) {
output[properties[i].key] = {
index: i,
order: 100 + i,
...properties[i].value
}
}
return output
}
}

16
runner.js
View File

@@ -65,7 +65,13 @@ async function main() {
rmdir(OPERATOR_RELEASE_FOLDER)
const projectJson = new ProjectJson(config, OPERATOR_NAME, __dirname, OPERATOR_SHARE_FOLDER)
const backgrounds = ['operator_bg.png', ...background.files].map((f) => {
return `${config.folder.background}/${f}`
})
const projectJson = new ProjectJson(config, OPERATOR_NAME, __dirname, OPERATOR_SHARE_FOLDER, {
backgrounds
})
projectJson.load().then((content) => {
write(JSON.stringify(content, null, 2), path.join(OPERATOR_RELEASE_FOLDER, 'project.json'))
})
@@ -75,7 +81,9 @@ async function main() {
write(JSON.stringify(content.assetsJson, null), path.join(OPERATOR_SOURCE_FOLDER, OPERATOR_NAME, `${config.operators[OPERATOR_NAME].filename}.json`))
})
const envGenerator = new EnvGenerator(config, OPERATOR_NAME, __dirname)
const envGenerator = new EnvGenerator(config, OPERATOR_NAME, {
backgrounds
})
envGenerator.generate().then((content) => {
write(content, path.join(__dirname, '.env'))
})
@@ -89,8 +97,8 @@ async function main() {
},
{
filename: 'operator_bg.png',
source: path.join(OPERATOR_SOURCE_FOLDER, config.folder.background),
target: path.join(SHOWCASE_PUBLIC_FOLDER)
source: path.join(OPERATOR_SHARE_FOLDER, config.folder.background),
target: path.join(SHOWCASE_PUBLIC_ASSSETS_FOLDER, config.folder.background)
},
{
filename: `${config.operators[OPERATOR_NAME].logo}.png`,

36
src/components/settings.js
View File

@@ -60,7 +60,6 @@ export default class Settings {
setFPS(value) {
this.#fps = value
console.log(typeof value)
this.spinePlayer.setFps(value)
}
@@ -126,6 +125,14 @@ export default class Settings {
document.body.style.backgroundImage = v
}
setDefaultBackground(e) {
const backgroundURL = `url("${import.meta.env.BASE_URL}assets/${e}")`
if (document.getElementById("custom_background_clear").disabled && !document.body.style.backgroundImage.startsWith("url(\"file:")) {
this.setBackgoundImage(backgroundURL)
}
this.#defaultBackgroundImage = backgroundURL
}
setBackground(e) {
this.#readFile(
e,
@@ -133,13 +140,14 @@ export default class Settings {
const content = readerEvent.target.result;
this.setBackgoundImage(`url("${content}")`)
},
() => document.getElementById("background_image_clear").disabled = false
() => document.getElementById("custom_background_clear").disabled = false
)
}
resetBackground() {
this.setBackgoundImage(this.#defaultBackgroundImage)
document.getElementById("background_image_clear").disabled = true
document.getElementById("custom_background").value = ""
document.getElementById("custom_background_clear").disabled = true
}
positionPadding(key, value) {
@@ -254,9 +262,19 @@ export default class Settings {
</div>
</div>
<div>
<label for="background_image">Background Image (Store Locally)</label>
<input type="file" id="background_image"/>
<button type="button" disabled id="background_image_clear" disabled>Clear</button>
<div>
<label for="default_background_select">Choose a default background:</label>
<select name="default_backgrounds" id="default_background_select">
${JSON.parse(import.meta.env.VITE_BACKGROUND_FILES).map((b) => {
return `<option value="${b}">${b}</option>`
})}
</select>
</div>
<div>
<label for="custom_background"> Custom Background (Store Locally)</label>
<input type="file" id="custom_background"/>
<button type="button" disabled id="custom_background_clear" disabled>Clear</button>
</div>
</div>
<div>
<label for="position">Position</label>
@@ -346,8 +364,10 @@ export default class Settings {
_this.setLogoOpacity(e.currentTarget.value);
})
document.getElementById("background_image").addEventListener("change", e => _this.setBackground(e))
document.getElementById("background_image_clear").addEventListener("click", e => _this.resetBackground())
document.getElementById('default_background_select').addEventListener("change", e => _this.setDefaultBackground(e.currentTarget.value))
document.getElementById("custom_background").addEventListener("change", e => _this.setBackground(e))
document.getElementById("custom_background_clear").addEventListener("click", e => _this.resetBackground())
document.getElementById("position").addEventListener("click", e => {
_this.#showRelated(e.currentTarget, "position_realted");

5
src/libs/wallpaper_engine.js
View File

@@ -25,6 +25,11 @@ window.wallpaperPropertyListener = {
window.settings.resetLogoImage()
}
}
if (properties.defaultbackground) {
if (properties.defaultbackground.value) {
window.settings.setDefaultBackground(properties.defaultbackground.value)
}
}
if (properties.background) {
if (properties.background.value) {
window.settings.setBackgoundImage(`url('file:///${properties.background.value}`)