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

7
.env
View File

@@ -1,7 +1,7 @@
VITE_TITLE="Arknights: Chongyue - 明日方舟：重岳" VITE_TITLE="Arknights: It Does Wash the Strings / Ling - 明日方舟：濯缨 · 令"
VITE_FILENAME=dyn_illust_char_2024_chyue VITE_FILENAME=dyn_illust_char_2023_ling_nian%239
VITE_LOGO_FILENAME=logo_sui 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_LEFT=0
VITE_VIEWPORT_RIGHT=0 VITE_VIEWPORT_RIGHT=0
VITE_VIEWPORT_TOP=0 VITE_VIEWPORT_TOP=0
@@ -9,3 +9,4 @@ VITE_VIEWPORT_BOTTOM=0
VITE_INVERT_FILTER=true VITE_INVERT_FILTER=true
VITE_IMAGE_WIDTH=2048 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"> <meta name="renderer" content="webkit">
<title>aklive2d</title> <title>aklive2d</title>
</head> </head>
<body style="background-image: url('./operator_bg.png');"> <body style="background-image: url('./assets/background/operator_bg.png');">
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/index.js"></script> <script type="module" src="/src/index.js"></script>
</body> </body>

4
libs/background.js
View File

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

7
libs/env_generator.js
View File

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

2
libs/exec.js
View File

@@ -4,7 +4,7 @@ import { createServer, build } from 'vite'
export function buildAll(config) { export function buildAll(config) {
for (const [key, _] of Object.entries(config.operators)) { for (const [key, _] of Object.entries(config.operators)) {
if (key.startsWith('_')) break; 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 #operatorName
#operatorSourceFolder #operatorSourceFolder
#operatorShareFolder #operatorShareFolder
#assets
constructor(config, operatorName, __dirname, operatorShareFolder) { constructor(config, operatorName, __dirname, operatorShareFolder, assets) {
this.#config = config this.#config = config
this.#operatorName = operatorName this.#operatorName = operatorName
this.#operatorSourceFolder = path.join(__dirname, this.#config.folder.operator) this.#operatorSourceFolder = path.join(__dirname, this.#config.folder.operator)
this.#operatorShareFolder = operatorShareFolder this.#operatorShareFolder = operatorShareFolder
this.#assets = assets
} }
async load() { async load() {
@@ -47,25 +49,144 @@ export default class ProjectJson {
...this.#json.general, ...this.#json.general,
properties: { properties: {
...this.#json.general.properties, ...this.#json.general.properties,
paddingbottom: { ...this.#properties
...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
},
} }
}, },
} }
} }
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) 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) => { projectJson.load().then((content) => {
write(JSON.stringify(content, null, 2), path.join(OPERATOR_RELEASE_FOLDER, 'project.json')) 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`)) 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) => { envGenerator.generate().then((content) => {
write(content, path.join(__dirname, '.env')) write(content, path.join(__dirname, '.env'))
}) })
@@ -89,8 +97,8 @@ async function main() {
}, },
{ {
filename: 'operator_bg.png', filename: 'operator_bg.png',
source: path.join(OPERATOR_SOURCE_FOLDER, config.folder.background), source: path.join(OPERATOR_SHARE_FOLDER, config.folder.background),
target: path.join(SHOWCASE_PUBLIC_FOLDER) target: path.join(SHOWCASE_PUBLIC_ASSSETS_FOLDER, config.folder.background)
}, },
{ {
filename: `${config.operators[OPERATOR_NAME].logo}.png`, filename: `${config.operators[OPERATOR_NAME].logo}.png`,

36
src/components/settings.js
View File

@@ -60,7 +60,6 @@ export default class Settings {
setFPS(value) { setFPS(value) {
this.#fps = value this.#fps = value
console.log(typeof value)
this.spinePlayer.setFps(value) this.spinePlayer.setFps(value)
} }
@@ -126,6 +125,14 @@ export default class Settings {
document.body.style.backgroundImage = v 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) { setBackground(e) {
this.#readFile( this.#readFile(
e, e,
@@ -133,13 +140,14 @@ export default class Settings {
const content = readerEvent.target.result; const content = readerEvent.target.result;
this.setBackgoundImage(`url("${content}")`) this.setBackgoundImage(`url("${content}")`)
}, },
() => document.getElementById("background_image_clear").disabled = false () => document.getElementById("custom_background_clear").disabled = false
) )
} }
resetBackground() { resetBackground() {
this.setBackgoundImage(this.#defaultBackgroundImage) 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) { positionPadding(key, value) {
@@ -254,9 +262,19 @@ export default class Settings {
</div> </div>
</div> </div>
<div> <div>
<label for="background_image">Background Image (Store Locally)</label> <div>
<input type="file" id="background_image"/> <label for="default_background_select">Choose a default background:</label>
<button type="button" disabled id="background_image_clear" disabled>Clear</button> <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>
<div> <div>
<label for="position">Position</label> <label for="position">Position</label>
@@ -346,8 +364,10 @@ export default class Settings {
_this.setLogoOpacity(e.currentTarget.value); _this.setLogoOpacity(e.currentTarget.value);
}) })
document.getElementById("background_image").addEventListener("change", e => _this.setBackground(e)) document.getElementById('default_background_select').addEventListener("change", e => _this.setDefaultBackground(e.currentTarget.value))
document.getElementById("background_image_clear").addEventListener("click", e => _this.resetBackground())
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 => { document.getElementById("position").addEventListener("click", e => {
_this.#showRelated(e.currentTarget, "position_realted"); _this.#showRelated(e.currentTarget, "position_realted");

5
src/libs/wallpaper_engine.js
View File

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