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

feat: separate steam build and directory build to save space

Browse Source
This commit is contained in:
Haoyu Xu
2025-05-02 16:57:44 +08:00
parent 065fe5b15e
commit 093f9d7f1a
20 changed files with 503 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/directory/package.json
View File

@@ -4,9 +4,9 @@
"version": "0.0.0",
"type": "module",
"scripts": {
"dev:directory": "vite --clearScreen false",
"build": "mode=build bun runner.ts",
"preview:directory": "vite preview",
"dev:directory": "bunx --bun vite --clearScreen false",
"build:directory": "mode=build:directory bun runner.ts",
"preview:directory": "bunx --bun vite preview",
"lint": "eslint && stylelint \"src/**/*.css\" \"src/**/*.scss\" && prettier --check ."
},
"dependencies": {

24
apps/directory/runner.ts
View File

@@ -1,28 +1,12 @@
import path from 'node:path'
import { DIST_DIR } from '@aklive2d/showcase'
import { build as viteBuild } from 'vite'
import { envParser, file } from '@aklive2d/libs'
const build = async (namesToBuild: string[]) => {
if (!namesToBuild.length) {
// skip as directory can only build
// when all operators are built
await viteBuild()
const releaseDir = path.resolve(DIST_DIR)
file.rmdir(releaseDir)
}
}
import { file } from '@aklive2d/libs'
async function main() {
const { name } = envParser.parse({
name: {
type: 'string',
short: 'n',
multiple: true,
default: [],
},
})
await build(name as string[])
await viteBuild()
const releaseDir = path.resolve(DIST_DIR)
file.rmdir(releaseDir)
}
main()

4
apps/directory/src/routes/path/Home.jsx
View File

@@ -349,7 +349,7 @@ function OperatorElement({ item, hidden, handleVoicePlay }) {
<section
onMouseEnter={() =>
handleVoicePlay(
`/${item.link}/assets/${buildConfig.voice_folders.main}/${buildConfig.app_voice_url}`
`/${item.link}/${buildConfig.default_assets_dir}${buildConfig.voice_folders.main}/${buildConfig.app_voice_url}`
)
}
>
@@ -439,7 +439,7 @@ function ImageElement({ item }) {
const { language } = useLanguage()
return (
<img
src={`/${buildConfig.directory_folder}/${item.fallback_name.replace(/#/g, '%23')}_portrait.png`}
src={`/${buildConfig.directory_folder}/${buildConfig.portraits}/${item.fallback_name.replace(/#/g, '%23')}_portrait.png`}
alt={item.codename[language]}
/>
)

24
apps/directory/src/routes/path/Operator.jsx
View File

@@ -108,7 +108,9 @@ export default function Operator() {
if (spineRef.current?.children.length > 0) {
spineRef.current?.removeChild(spineRef.current?.children[0])
}
fetch(`/${key}/assets/charword_table.json`)
fetch(
`/${key}/${buildConfig.default_assets_dir}charword_table.json`
)
.then((res) => res.json())
.then((data) => {
setVoiceConfig(data)
@@ -159,7 +161,7 @@ export default function Operator() {
useEffect(() => {
if (spineRef.current?.children.length === 0 && configRef.current) {
const playerConfig = {
atlasUrl: `./${key}/assets/${configRef.current.filename.replace(/#/g, '%23')}.atlas`,
atlasUrl: `./${key}/${buildConfig.default_assets_dir}${configRef.current.filename.replace(/#/g, '%23')}.atlas`,
animation: spineAnimationName,
premultipliedAlpha: true,
alpha: true,
@@ -200,7 +202,7 @@ export default function Operator() {
currentVoiceId = id
setCurrentVoiceId(id)
setVoiceSrc(
`/${configRef.current.link}/assets/${getVoiceFoler(voiceLangRef.current)}/${id}.ogg`
`/${configRef.current.link}/${buildConfig.default_assets_dir}${getVoiceFoler(voiceLangRef.current)}/${id}.ogg`
)
lastVoiceId = currentVoiceId
}
@@ -208,9 +210,9 @@ export default function Operator() {
}
if (configRef.current.use_json) {
playerConfig.jsonUrl = `./${key}/assets/${configRef.current.filename.replace(/#/g, '%23')}.json`
playerConfig.jsonUrl = `./${key}/${buildConfig.default_assets_dir}${configRef.current.filename.replace(/#/g, '%23')}.json`
} else {
playerConfig.skelUrl = `./${key}/assets/${configRef.current.filename.replace(/#/g, '%23')}.skel`
playerConfig.skelUrl = `./${key}/${buildConfig.default_assets_dir}${configRef.current.filename.replace(/#/g, '%23')}.skel`
}
setSpinePlayer(new SpinePlayer(spineRef.current, playerConfig))
}
@@ -267,7 +269,7 @@ export default function Operator() {
useEffect(() => {
if (voiceLang && isVoicePlaying) {
const audioUrl = `/assets/${getVoiceFoler(voiceLang)}/${currentVoiceId}.ogg`
const audioUrl = `/${buildConfig.default_assets_dir}${getVoiceFoler(voiceLang)}/${currentVoiceId}.ogg`
if (
voiceSrc !==
window.location.href.replace(/\/$/g, '') + audioUrl
@@ -287,7 +289,7 @@ export default function Operator() {
if (id) {
setCurrentVoiceId(id)
setVoiceSrc(
`/${key}/assets/${getVoiceFoler(voiceLangRef.current)}/${id}.ogg`
`/${key}/${buildConfig.default_assets_dir}${getVoiceFoler(voiceLangRef.current)}/${id}.ogg`
)
}
}
@@ -563,13 +565,13 @@ export default function Operator() {
className={classes.container}
style={
currentBackground && {
backgroundImage: `url(/chen/assets/${buildConfig.background_folder}/${currentBackground})`,
backgroundImage: `url(/${buildConfig.directory_folder}/${buildConfig.background_folder}/${currentBackground})`,
}
}
>
{config && (
<img
src={`/${config.link}/assets/${config.logo}.png`}
src={`/${buildConfig.directory_folder}/${buildConfig.logo_dir}${config.logo}.png`}
alt={config?.codename[language]}
className={classes.logo}
style={
@@ -630,8 +632,8 @@ function MusicElement() {
useEffect(() => {
if (background && enableMusic) {
const introOgg = musicMapping[background].intro
const intro = `./chen/assets/${buildConfig.music_folder}/${introOgg}`
const loop = `./chen/assets/${buildConfig.music_folder}/${musicMapping[background].loop}`
const intro = `/${buildConfig.directory_folder}/${buildConfig.music_folder}/${introOgg}`
const loop = `/${buildConfig.directory_folder}/${buildConfig.music_folder}/${musicMapping[background].loop}`
musicLoopRef.current.src = loop
if (introOgg) {
musicIntroRef.current.src = intro || loop

6
apps/directory/vite.config.js
View File

@@ -30,9 +30,9 @@ export default defineConfig(async () => {
),
rollupOptions: {
output: {
entryFileNames: `${config.directory.assets_dir}/[name]-[hash:8].js`,
chunkFileNames: `${config.directory.assets_dir}/[name]-[hash:8].js`,
assetFileNames: `${config.directory.assets_dir}/[name]-[hash:8].[ext]`,
entryFileNames: `${config.app.directory.assets}/[name].js`,
chunkFileNames: `${config.app.directory.assets}/[name].js`,
assetFileNames: `${config.app.directory.assets}/[name].[ext]`,
manualChunks: (id) => {
if (id.includes('node_modules')) {
return 'vendor' // all other package goes here

35
apps/module/src/libs/TimeKeeper.ts Normal file
View File

@@ -0,0 +1,35 @@
/**
* Adapted from 'spine-ts/core/src/Utils.ts'
*/
export class TimeKeeper {
framesPerSecond = 0
delta = 0
totalTime = 0
private lastTime = performance.now() / 1000
private frameCount = 0
private frameTime = 0
private fpsInterval = 1 / 60
update() {
const now = performance.now() / 1000
this.delta = now - this.lastTime
if (this.delta > this.fpsInterval) {
this.frameTime += this.delta
this.totalTime += this.delta
this.lastTime = now
this.frameCount++
if (this.frameTime > 1) {
this.framesPerSecond = this.frameCount / this.frameTime
this.frameTime = 0
this.frameCount = 0
}
} else {
this.delta = -1
}
}
setFps(v: number) {
this.fpsInterval = 1 / v
}
}

249
apps/module/src/player.ts
View File

@@ -1,4 +1,5 @@
import { spine } from '../spine-ts/build/spine-webgl.js'
import { TimeKeeper } from './libs/TimeKeeper.ts'
/**
* Adapted from 'spine-ts/player/src/Player.ts'
@@ -104,15 +105,13 @@ export class Player {
private paused = false
private playTime = 0
private speed = 1
private time = new spine.TimeKeeper()
private time = new TimeKeeper()
private currentViewport!: Viewport
private previousViewport!: Viewport
private viewportTransitionStart = 0
private parent: HTMLElement
private devicePixelRatio = window.devicePixelRatio || 1
private lastFrameTime: number = 0
private disposed = false
private eventListeners: {
target: HTMLElement | Document | Window
@@ -330,136 +329,134 @@ export class Player {
if (this.disposed) return
if (requestNextFrame) requestAnimationFrame(() => this.drawFrame())
// Have we finished loading the asset? Then set things up
if (this.assetManager.isLoadingComplete() && this.skeleton == null)
this.loadSkeleton()
this.time.update()
const delta = this.time.delta
if (delta !== -1) {
// Have we finished loading the asset? Then set things up
if (this.assetManager.isLoadingComplete() && this.skeleton == null)
this.loadSkeleton()
// Resize the canvas
this.resize(spine.webgl.ResizeMode.Expand)
// Resize the canvas
this.resize(spine.webgl.ResizeMode.Expand)
// Update and draw the skeleton
if (this.loaded) {
// Update animation and skeleton based on user selections
if (!this.paused && this.config.animation) {
const ctx = this.context
const gl = ctx.gl
// Update and draw the skeleton
// Clear the viewport
const bg = new spine.Color().setFromString(
this.config.backgroundColor
)
gl.clearColor(bg.r, bg.g, bg.b, bg.a)
gl.clear(gl.COLOR_BUFFER_BIT)
if (this.loaded) {
const fpsInterval = 1 / this.config.fps
const now = performance.now() / 1000
// Update animation and skeleton based on user selections
if (!this.paused && this.config.animation) {
const ctx = this.context
const gl = ctx.gl
const animationDuration =
this.animationState.getCurrent(0).animation.duration
this.playTime += delta
while (
this.playTime >= animationDuration &&
animationDuration != 0
) {
this.playTime -= animationDuration
}
this.playTime = Math.max(
0,
Math.min(this.playTime, animationDuration)
)
// Clear the viewport
const bg = new spine.Color().setFromString(
this.config.backgroundColor
)
gl.clearColor(bg.r, bg.g, bg.b, bg.a)
gl.clear(gl.COLOR_BUFFER_BIT)
this.lastFrameTime = now
this.time.update()
const delta = this.time.delta * this.speed
const animationDuration =
this.animationState.getCurrent(0).animation.duration
this.playTime += delta
while (
this.playTime >= animationDuration &&
animationDuration != 0
) {
this.playTime -= animationDuration
this.animationState.update(delta)
this.animationState.apply(this.skeleton)
}
this.playTime = Math.max(
0,
Math.min(this.playTime, animationDuration)
this.skeleton.updateWorldTransform()
let viewport = {
x:
this.currentViewport.x -
(this.currentViewport.padLeft as number),
y:
this.currentViewport.y -
(this.currentViewport.padBottom as number),
width:
this.currentViewport.width +
(this.currentViewport.padLeft as number) +
(this.currentViewport.padRight as number),
height:
this.currentViewport.height +
(this.currentViewport.padBottom as number) +
(this.currentViewport.padTop as number),
}
const transitionAlpha =
(performance.now() - this.viewportTransitionStart) /
1000 /
this.config.viewport.transitionTime
if (this.previousViewport && transitionAlpha < 1) {
const oldViewport = {
x:
this.previousViewport.x -
(this.previousViewport.padLeft as number),
y:
this.previousViewport.y -
(this.previousViewport.padBottom as number),
width:
this.previousViewport.width +
(this.previousViewport.padLeft as number) +
(this.previousViewport.padRight as number),
height:
this.previousViewport.height +
(this.previousViewport.padBottom as number) +
(this.previousViewport.padTop as number),
}
viewport = {
x:
oldViewport.x +
(viewport.x - oldViewport.x) * transitionAlpha,
y:
oldViewport.y +
(viewport.y - oldViewport.y) * transitionAlpha,
width:
oldViewport.width +
(viewport.width - oldViewport.width) *
transitionAlpha,
height:
oldViewport.height +
(viewport.height - oldViewport.height) *
transitionAlpha,
}
}
const viewportSize = this.scaleViewport(
viewport.width,
viewport.height,
this.canvas.width,
this.canvas.height
)
this.animationState.update(delta)
this.animationState.apply(this.skeleton)
this.sceneRenderer.camera.zoom =
((viewport.width * this.devicePixelRatio) /
viewportSize.x) *
this.scale
this.sceneRenderer.camera.position.x =
viewport.x + viewport.width / 2
this.sceneRenderer.camera.position.y =
viewport.y + viewport.height / 2
this.sceneRenderer.begin()
// Draw skeleton and debug output
this.sceneRenderer.drawSkeleton(
this.skeleton,
this.config.premultipliedAlpha
)
this.sceneRenderer.end()
this.sceneRenderer.camera.zoom = 0
}
this.skeleton.updateWorldTransform()
let viewport = {
x:
this.currentViewport.x -
(this.currentViewport.padLeft as number),
y:
this.currentViewport.y -
(this.currentViewport.padBottom as number),
width:
this.currentViewport.width +
(this.currentViewport.padLeft as number) +
(this.currentViewport.padRight as number),
height:
this.currentViewport.height +
(this.currentViewport.padBottom as number) +
(this.currentViewport.padTop as number),
}
const transitionAlpha =
(performance.now() - this.viewportTransitionStart) /
1000 /
this.config.viewport.transitionTime
if (this.previousViewport && transitionAlpha < 1) {
const oldViewport = {
x:
this.previousViewport.x -
(this.previousViewport.padLeft as number),
y:
this.previousViewport.y -
(this.previousViewport.padBottom as number),
width:
this.previousViewport.width +
(this.previousViewport.padLeft as number) +
(this.previousViewport.padRight as number),
height:
this.previousViewport.height +
(this.previousViewport.padBottom as number) +
(this.previousViewport.padTop as number),
}
viewport = {
x:
oldViewport.x +
(viewport.x - oldViewport.x) * transitionAlpha,
y:
oldViewport.y +
(viewport.y - oldViewport.y) * transitionAlpha,
width:
oldViewport.width +
(viewport.width - oldViewport.width) * transitionAlpha,
height:
oldViewport.height +
(viewport.height - oldViewport.height) *
transitionAlpha,
}
}
const viewportSize = this.scaleViewport(
viewport.width,
viewport.height,
this.canvas.width,
this.canvas.height
)
this.sceneRenderer.camera.zoom =
((viewport.width * this.devicePixelRatio) / viewportSize.x) *
this.scale
this.sceneRenderer.camera.position.x =
viewport.x + viewport.width / 2
this.sceneRenderer.camera.position.y =
viewport.y + viewport.height / 2
this.sceneRenderer.begin()
// Draw skeleton and debug output
this.sceneRenderer.drawSkeleton(
this.skeleton,
this.config.premultipliedAlpha
)
this.sceneRenderer.end()
this.sceneRenderer.camera.zoom = 0
}
}
@@ -621,7 +618,6 @@ export class Player {
}
this.config.success(this)
this.lastFrameTime = performance.now() / 1000
this.loaded = true
}
@@ -847,6 +843,7 @@ export class Player {
set fps(v) {
this.config.fps = v
this.time.setFps(v)
}
}

5
apps/showcase/package.json
View File

@@ -5,9 +5,10 @@
"type": "module",
"main": "index.ts",
"scripts": {
"dev:showcase": "vite --clearScreen false",
"dev:showcase": "bunx --bun vite --clearScreen false",
"build": "mode=build bun runner.ts",
"preview:showcase": "vite preview",
"build:directory": "mode=build:directory bun runner.ts",
"preview:showcase": "bunx --bun vite preview",
"lint": "eslint && prettier --check ."
},
"peerDependencies": {

19
apps/showcase/runner.ts
View File

@@ -5,34 +5,41 @@ import { envParser, file } from '@aklive2d/libs'
import { copyShowcaseData, copyProjectJSON } from '@aklive2d/vite-helpers'
import * as dirs from './index.js'
const build = async (namesToBuild: string[]) => {
const build = async (namesToBuild: string[], mode: string) => {
const names = !namesToBuild.length ? Object.keys(operators) : namesToBuild
console.log('Generating assets for', names.length, 'operators')
for (const name of names) {
copyShowcaseData(name, {
dataDir: dirs.DATA_DIR,
publicAssetsDir: dirs.PUBLIC_ASSETS_DIR,
mode,
})
await viteBuild()
const releaseDir = path.join(dirs.DIST_DIR, name)
file.mv(dirs.OUT_DIR, releaseDir)
file.rm(dirs.DATA_DIR)
copyProjectJSON(name, {
releaseDir,
})
if (mode !== 'build:directory') {
copyProjectJSON(name, {
releaseDir,
})
}
}
}
async function main() {
const { name } = envParser.parse({
const { name, mode } = envParser.parse({
name: {
type: 'string',
short: 'n',
multiple: true,
default: [],
},
mode: {
type: 'string',
short: 'm',
},
})
await build(name as string[])
await build(name as string[], mode as string)
}
main()

2
apps/showcase/src/components/background.js
View File

@@ -13,7 +13,7 @@ export default class Background {
#parentEl
#videoEl
#default = {
location: `${import.meta.env.BASE_URL}assets/${buildConfig.background_folder}/`,
location: `${import.meta.env.BASE_URL}${buildConfig.build_assets_dir}${buildConfig.background_folder}/`,
image: buildConfig.default_background,
}
#config = {

2
apps/showcase/src/components/fallback.js
View File

@@ -30,7 +30,7 @@ export default class Fallback {
this.#el.innerHTML = `
<div id="fallback-container">
<div id="fallback"
style="background-image: url(./assets/${buildConfig.fallback_name}.png)"
style="background-image: url(${import.meta.env.BASE_URL}${buildConfig.default_assets_dir}${buildConfig.fallback_name}.png)"
/>
</div>
`

2
apps/showcase/src/components/logo.js
View File

@@ -13,7 +13,7 @@ export default class Logo {
#imageEl
#parentEl
#default = {
location: `${import.meta.env.BASE_URL}assets/`,
location: `${import.meta.env.BASE_URL}${buildConfig.build_assets_dir}${buildConfig.logo_dir}`,
image: `${buildConfig.logo_filename}.png`,
useInvertFilter: buildConfig.invert_filter,
ratio: 61.8,

4
apps/showcase/src/components/music.js
View File

@@ -104,8 +104,8 @@ export default class Music {
#playMusic() {
if (!this.#config.name) {
const introOgg = this.#music.mapping[this.#music.current].intro
const intro = `./assets/${this.#music.location}/${introOgg}`
const loop = `./assets/${this.#music.location}/${this.#music.mapping[this.#music.current].loop}`
const intro = `${import.meta.env.BASE_URL}${buildConfig.build_assets_dir}${this.#music.location}/${introOgg}`
const loop = `${import.meta.env.BASE_URL}${buildConfig.build_assets_dir}${this.#music.location}/${this.#music.mapping[this.#music.current].loop}`
this.#audio.loop.el.src = loop
this.#audio.loop.el.querySelector('source').type = 'audio/ogg'
if (introOgg) {

6
apps/showcase/src/components/player.js
View File

@@ -45,7 +45,7 @@ export default class Player {
async init() {
const _this = this
const playerConfig = {
atlasUrl: `./assets/${buildConfig.filename}.atlas`,
atlasUrl: `${import.meta.env.BASE_URL}${buildConfig.default_assets_dir}${buildConfig.filename}.atlas`,
premultipliedAlpha: true,
alpha: true,
backgroundColor: '#00000000',
@@ -115,9 +115,9 @@ export default class Player {
},
}
if (buildConfig.use_json) {
playerConfig.jsonUrl = `./assets/${buildConfig.filename}.json`
playerConfig.jsonUrl = `${import.meta.env.BASE_URL}${buildConfig.default_assets_dir}${buildConfig.filename}.json`
} else {
playerConfig.skelUrl = `./assets/${buildConfig.filename}.skel`
playerConfig.skelUrl = `${import.meta.env.BASE_URL}${buildConfig.default_assets_dir}${buildConfig.filename}.skel`
}
this.#spine = new SpinePlayer(this.#el, playerConfig)
}

6
apps/showcase/src/components/voice.js
View File

@@ -83,7 +83,9 @@ export default class Voice {
}
async init() {
const res = await fetch('./assets/charword_table.json')
const res = await fetch(
`${import.meta.env.BASE_URL}${buildConfig.default_assets_dir}charword_table.json`
)
this.#charwordTable = await res.json()
this.#voice.languages = Object.keys(
this.#charwordTable.voiceLangs[this.#default.region]
@@ -170,7 +172,7 @@ export default class Voice {
if (!this.useVoice) return
this.#voice.id.last = this.#voice.id.current
this.#voice.id.current = id
this.#audio.el.src = `./assets/${this.#getVoiceLocation()}/${id}.ogg`
this.#audio.el.src = `${import.meta.env.BASE_URL}${buildConfig.default_assets_dir}${this.#getVoiceLocation()}/${id}.ogg`
let startPlayPromise = this.#audio.el.play()
if (startPlayPromise !== undefined) {
startPlayPromise