AncTe/HumanBreak
1
0
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-01-19 12:49:25 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

重写资源分离

Browse Source
This commit is contained in:
unanmed 2023-06-20 22:35:51 +08:00
parent 6ecf201beb
commit ec0a7f6785
11 changed files with 295 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -35,4 +35,5 @@ index.cjs
!public/swap/*.h5save
_bundle
out
dist-resource
dist-resource
_temp

14
mota.config.ts
View File

@ -1,6 +1,7 @@
interface MotaConfig {
name: string;
resourceName?: string;
zip?: Record<string, string[]>;
}
function defineConfig(config: MotaConfig): MotaConfig {
@ -10,5 +11,16 @@ function defineConfig(config: MotaConfig): MotaConfig {
export default defineConfig({
// 这里修改塔的name，请保持与全塔属性的完全相同，否则发布之后可能无法进行游玩
name: 'HumanBreak',
resourceName: 'HumanBreakRes'
resourceName: 'HumanBreakRes',
zip: {
'resource.zip': [
'autotiles/*',
'tilesets/*',
'materials/*',
'images/*',
'animates/*',
'sounds/*',
'fonts/*'
]
}
});

6
package.json
View File

@ -5,9 +5,9 @@
"type": "module",
"scripts": {
"dev": "ts-node-esm script/dev.ts",
"build": "vue-tsc && vite build && ts-node-esm script/build.ts 0 1 1",
"build-gh": "vue-tsc && vite build --base=/HumanBreak/ && ts-node-esm script/build.ts 1",
"build-local": "vue-tsc && vite build --base=/ && ts-node-esm script/build.ts 1",
"build": "vue-tsc && vite build && ts-node-esm script/build.ts dist",
"build-gh": "vue-tsc && vite build --base=/HumanBreak/ && ts-node-esm script/build.ts gh",
"build-local": "vue-tsc && vite build --base=/ && ts-node-esm script/build.ts local",
"preview": "vite preview",
"update": "ts-node-esm script/update.ts",
"declare": "ts-node-esm script/declare.ts",

2
public/main.js
View File

@ -220,7 +220,7 @@ function main() {
// 远程资源地址，在线游戏中，塔本体不包含任何资源，只包含源码，从而可以降低游戏本体的体积并平均分担资源包体积
// 从而可以优化加载并避免网站发布的大小限制
this.USE_RESOURCE = false;
this.RESOURCE_TYPE = 'dev';
this.RESOURCE_URL = '';
this.RESOURCE_SYMBOL = '';
this.RESOURCE_INDEX = {};

9
script/build.ts
View File

@ -11,9 +11,10 @@ import commonjs from '@rollup/plugin-commonjs';
import { splitResorce } from './resource.js';
import compressing from 'compressing';
const map = !!Number(process.argv[2]);
const resorce = !!Number(process.argv[3]);
const compress = !!Number(process.argv[4]);
const type = process.argv[2];
const map = false;
const resorce = type !== 'dev';
const compress = type === 'dist';
(async function () {
const timestamp = Date.now();
@ -175,7 +176,7 @@ const compress = !!Number(process.argv[4]);
// 6. 资源分离
if (resorce) {
await splitResorce(compress);
await splitResorce(type);
}
// 7. 压缩

421
script/resource.ts
View File

@ -1,174 +1,231 @@
import fs from 'fs-extra';
import { uniqueSymbol } from './utils.js';
import { basename, extname, resolve } from 'path';
import { dirname } from 'path';
import { resolve } from 'path';
import motaConfig from '../mota.config.js';
type ResorceType =
| 'bgms'
| 'sounds'
| 'autotiles'
| 'images'
| 'materials'
| 'tilesets'
| 'animates'
| 'fonts';
import compressing from 'compressing';
const SYMBOL = uniqueSymbol();
const MAX_SIZE = 100 * (1 << 20) - 20 * (1 << 10);
const baseDir = './dist';
let totalSize = 0;
const sourceIndex: Record<string, string> = {};
const toMove: Stats[] = [];
const all = [
'bgms',
'sounds',
'autotiles',
'images',
'materials',
'tilesets',
'animates',
'fonts'
];
type Stats = fs.Stats & { name?: string };
export async function splitResorce(compress: boolean = false) {
export async function splitResorce(type: string) {
await fs.ensureDir('./dist-resource');
await fs.emptyDir('./dist-resource');
const folder = await fs.stat('./dist');
totalSize = folder.size;
if (totalSize < MAX_SIZE) return;
await readySplit();
await doSplit(compress);
await zipResource();
await split(type === 'dist' ? MAX_SIZE : void 0);
await endSplit(type);
}
async function sortDir(dir: string, ext?: string[]) {
const path = await fs.readdir(dir);
const stats: Stats[] = [];
for await (const one of path) {
if (ext && !ext.includes(extname(one))) continue;
if (one === 'bg.jpg') continue;
const stat = await fs.stat(resolve(dir, one));
if (!stat.isFile()) continue;
const status: Stats = {
...stat,
name: one
};
stats.push(status);
}
return stats.sort((a, b) => b.size - a.size);
async function readySplit() {
await fs.ensureDir('./_temp');
await fs.emptyDir('./_temp');
await fs.ensureDir('./_temp/origin');
await copyAll();
}
async function calResourceSize() {
return (
await Promise.all(
[
'animates',
'autotiles',
'bgms',
'fonts',
'images',
'materials',
'sounds',
'tilesets'
].map(v => fs.stat(resolve('./dist/project/', v)))
)
).reduce((pre, cur) => pre + cur.size, 0);
async function endSplit(type: string) {
await rewriteMain(type);
await fs.emptyDir('./_temp');
await fs.rmdir('./_temp');
}
async function doSplit(compress: boolean) {
let size = await calResourceSize();
await fs.emptyDir('./dist-resource');
const priority: ResorceType[] = [
'materials',
'tilesets',
'autotiles',
'animates',
'images',
'sounds',
'fonts',
'bgms'
];
const dirInfo: Record<ResorceType, Stats[]> = Object.fromEntries(
await Promise.all(
priority.map(async v => [
v,
await sortDir(resolve(baseDir, 'project', v))
])
)
);
async function zipResource() {
const zip = motaConfig.zip;
if (!zip) return;
for await (const [name, files] of Object.entries(zip)) {
const stream = new compressing.zip.Stream();
const dirs: string[] = [];
let currSize = 0;
const length = Object.fromEntries(
priority.map(v => [v, dirInfo[v].length])
);
const soruceIndex: Record<string, number> = {};
const split = async (index: number): Promise<void> => {
size -= currSize;
currSize = 0;
const cut: string[] = [];
const mapped: ResorceType[] = [];
while (1) {
const toCut = priority.find(
v => dirInfo[v].length > 0 && !mapped.includes(v)
);
if (!toCut) break;
mapped.push(toCut);
const l = dirInfo[toCut].length;
const data: string[] = [];
let pass = 0;
while (1) {
const stats = dirInfo[toCut];
const stat = stats[pass];
if (!stat) {
break;
}
if (currSize + stat.size >= MAX_SIZE) {
pass++;
continue;
}
data.push(`${toCut}/${stat.name}`);
stats.splice(pass, 1);
currSize += stat.size;
}
if (l === length[toCut] && dirInfo[toCut].length === 0) {
soruceIndex[`${toCut}.*`] = index;
for await (const file of files) {
if (/^.+\/\*$/.test(file)) {
const dir = file.split('/')[0];
dirs.push(dir);
await fs.copy(`./_temp/origin/${dir}`, `./_temp/${dir}`);
} else {
data.map(v => (soruceIndex[v] = index));
const [dir, name] = file.split('/');
if (dirs.includes(dir)) dirs.push(dir);
await fs.ensureDir(`./_temp/${dir}`);
await fs.copyFile(
`./_temp/origin/${dir}/${name}`,
`./_temp/${dir}/${name}`
);
}
cut.push(...data);
}
const dir = `./dist-resource/${index}`;
await fs.ensureDir(dir);
await Promise.all(priority.map(v => fs.ensureDir(resolve(dir, v))));
await Promise.all(
cut.map(v =>
fs.move(
resolve('./dist/project', v),
resolve(
dir,
dirname(v),
`${basename(v).split('.')[0]}-${SYMBOL}${extname(v)}`
)
)
)
dirs.forEach(v => stream.addEntry(`./_temp/${v}`));
const dest = fs.createWriteStream(`./_temp/${name}`);
await new Promise<void>(res =>
stream.pipe(dest).on('finish', () => {
res();
})
);
// 生成可发布结构
await generatePublishStructure(dir, index);
if (Object.values(dirInfo).every(v => v.length === 0)) return;
else return split(index + 1);
};
await split(0);
await rewriteMain(soruceIndex);
const stat = await fs.stat(`./_temp/${name}`);
toMove.push({ ...stat, name: `./_temp/${name}` });
}
}
async function rewriteMain(sourceIndex: Record<string, number>) {
async function getRemainReource() {
const zip = motaConfig.zip;
if (!zip) return;
const values = Object.values(zip);
for await (const one of all) {
if (values.some(v => v.includes(`${one}/*`))) continue;
const list = await fs.readdir(`./_temp/origin/${one}`);
for await (const name of list) {
if (!values.some(vv => vv.includes(`${one}/${name}`))) {
const stat = await fs.stat(`./_temp/origin/${one}/${name}`);
toMove.push({
...stat,
name: `./_temp/origin/${one}/${name}`
});
}
}
}
toMove.sort((a, b) => {
if (a.name?.endsWith('.zip') && b.name?.endsWith('.zip')) {
return b.size - a.size;
}
if (a.name?.endsWith('.zip')) return -1;
if (b.name?.endsWith('.zip')) return 1;
return b.size - a.size;
});
}
async function split(max?: number) {
await getRemainReource();
const doSplit = async (index: string | number) => {
const base =
typeof index === 'string' ? index : `./dist-resource/${index}`;
await fs.ensureDir(base);
await generatePublishStructure(
base,
typeof index === 'string' ? 0 : index
);
let size = (await fs.stat(base)).size;
// 计算出要移动多少资源
const res = (() => {
if (!max) return toMove.splice(0, toMove.length);
let remain = max - size;
for (let i = 0; i < toMove.length; i++) {
const ele = toMove[i];
remain -= ele.size;
if (remain <= 0) {
return toMove.splice(0, i);
}
}
return toMove.splice(0, toMove.length);
})();
if (base.endsWith('dist')) {
await fs.ensureDir(resolve(base, 'resource'));
}
// 执行移动
await Promise.all(
res.map(async v => {
if (!v.name) return;
// 压缩包
if (v.name.endsWith('.zip')) {
const [, , name] = v.name.split('/');
const split = name.split('.');
const target = `${split
.slice(0, -1)
.join('.')}-${SYMBOL}.${split.at(-1)}`;
if (base.endsWith('dist')) {
await fs.ensureDir(resolve(base, 'resource/zip'));
return fs.copyFile(
v.name,
resolve(base, 'resource', 'zip', target)
);
} else {
await fs.ensureDir(resolve(base, 'zip'));
return fs.copyFile(
v.name,
resolve(base, 'zip', target)
);
}
}
// 非压缩包
if (!v.name.endsWith('.zip')) {
const [, , , type, name] = v.name.split('/');
const split = name.split('.');
const target = `${split
.slice(0, -1)
.join('.')}-${SYMBOL}.${split.at(-1)}`;
if (base.endsWith('dist')) {
await fs.ensureDir(resolve(base, 'resource', type));
} else {
await fs.ensureDir(resolve(base, type));
}
if (base.endsWith('dist')) {
return fs.copyFile(
v.name,
resolve(base, 'resource', type, target)
);
} else {
return fs.copyFile(v.name, resolve(base, type, target));
}
}
})
);
// 标记资源索引
res.forEach(v => {
if (!v.name) return;
// 压缩包
if (v.name.endsWith('.zip')) {
const [, , name] = v.name.split('/');
sourceIndex[`zip.${name}`] = index.toString();
}
// 非压缩包
if (!v.name.endsWith('.zip')) {
const [, , , type, name] = v.name.split('/');
sourceIndex[`${type}.${name}`] = index.toString();
}
});
if (toMove.length > 0) {
await doSplit(typeof index === 'string' ? 0 : index + 1);
}
};
await doSplit('dist');
}
async function copyAll() {
await Promise.all(
all.map(v => {
return fs.move(`./dist/project/${v}`, `./_temp/origin/${v}`);
})
);
}
async function rewriteMain(type: string) {
const main = await fs.readFile('./dist/main.js', 'utf-8');
const res = main
.replace(/this\.USE_RESOURCE\s*\=\s*false/, 'this.USE_RESOURCE = true')
.replace(
/this\.RESOURCE_TYPE\s*\=\s*.*;/,
`this.RESOURCE_TYPE = '${type}';`
)
.replace(
/this\.RESOURCE_URL\s*\=\s*'.*'/,
`this.RESOURCE_URL = '/games/${motaConfig.resourceName}'`
@ -184,55 +241,47 @@ async function rewriteMain(sourceIndex: Record<string, number>) {
await fs.writeFile('./dist/main.js', res, 'utf-8');
}
/**
* 生成可发布目录
*/
async function generatePublishStructure(dir: string, index: number) {
await fs.mkdir(resolve(dir, 'libs'));
await fs.mkdir(resolve(dir, 'libs/thirdparty'));
await fs.mkdir(resolve(dir, 'project'));
await fs.ensureDir(resolve(dir, 'libs'));
await fs.ensureDir(resolve(dir, 'libs/thirdparty'));
await fs.ensureDir(resolve(dir, 'project'));
await Promise.all(
[
'autotiles',
'images',
'materials',
'animates',
'fonts',
'floors',
'tilesets',
'sounds',
'bgms'
].map(v => fs.mkdir(resolve(dir, 'project', v)))
all.map(v => {
fs.ensureDir(resolve(dir, 'project', v));
fs.emptyDir(resolve(dir, 'project', v));
})
);
await fs.writeFile(
resolve(dir, 'project/icons.js'),
`var icons_4665ee12_3a1f_44a4_bea3_0fccba634dc1 =
{
"autotile": {
if (!dir.endsWith('dist')) {
await fs.writeFile(
resolve(dir, 'project/icons.js'),
`var icons_4665ee12_3a1f_44a4_bea3_0fccba634dc1 =
{"autotile": {}}
`,
'utf-8'
);
await fs.writeFile(
resolve(dir, 'project/floors/none.js'),
'"none"',
'utf-8'
);
await fs.writeFile(resolve(dir, 'libs/none.js'), '"none"', 'utf-8');
await fs.copyFile('./script/template/main.js', resolve(dir, 'main.js'));
const data = await fs.readFile('./script/template/data.js', 'utf-8');
await fs.writeFile(
resolve(dir, 'project/data.js'),
data.replace('@name', `${motaConfig.resourceName}${index}`)
);
await fs.copyFile(
'./script/template/lz-string.min.js',
resolve(dir, 'libs/thirdparty/lz-string.min.js')
);
}
}`,
'utf-8'
);
await fs.writeFile(
resolve(dir, 'project/floors/none.js'),
'"none"',
'utf-8'
);
await fs.writeFile(resolve(dir, 'libs/none.js'), '"none"', 'utf-8');
await fs.copyFile(
'./script/template/main.js',
resolve(dir, 'project/main.js')
);
const data = await fs.readFile('./script/template/data.js', 'utf-8');
await fs.writeFile(
resolve(dir, 'project/data.js'),
data.replace('@name', `${motaConfig.resourceName}${index}`)
);
await fs.copyFile(
'./script/template/lz-string.min.js',
resolve(dir, 'libs/thirdparty/lz-string.min.js')
);
await Promise.all(
['animates', 'images', 'materials', 'sounds', 'tilesets'].map(v => {

9
src/core/loader/load.ts
View File

@ -3,7 +3,11 @@ import { Resource, getTypeByResource } from './resource';
const info = resource;
/**
* 构建游戏包后的加载
*/
export function readyAllResource() {
if (main.RESOURCE_TYPE === 'dev') return readyDevResource();
info.resource.forEach(v => {
const type = getTypeByResource(v);
if (type === 'zip') {
@ -13,3 +17,8 @@ export function readyAllResource() {
}
});
}
/**
* 开发时的加载
*/
function readyDevResource() {}

31
src/core/loader/resource.ts
View File

@ -88,21 +88,34 @@ export class Resource<
const name = (this.name = resolve.slice(1, -1).join('.'));
const ext = (this.ext = '.' + resolve.at(-1));
if (!main.USE_RESOURCE) {
return `/games/${core.data.firstData.name}/project/${type}/${name}${ext}`;
}
const distBase = import.meta.env.BASE_URL;
const base = main.RESOURCE_URL;
const indexes = main.RESOURCE_INDEX;
const symbol = main.RESOURCE_SYMBOL;
const t = main.RESOURCE_TYPE;
if (has(indexes[`${type}.*`])) {
const i = indexes[`${type}.*`];
return `${base}${i}/${type}/${name}-${symbol}${ext}`;
if (t === 'dist') {
if (has(indexes[`${type}.*`])) {
const i = indexes[`${type}.*`];
if (i !== 'dist') {
return `${base}${i}/${type}/${name}-${symbol}${ext}`;
} else {
return `${distBase}resource/${type}/${name}-${symbol}${ext}`;
}
} else {
const i = indexes[`${type}.${name}${ext}`];
const index = has(i) ? i : '0';
if (i !== 'dist') {
return `${base}${index}/${type}/${name}-${symbol}${ext}`;
} else {
return `${distBase}resource/${type}/${name}-${symbol}${ext}`;
}
}
} else if (t === 'gh' || t === 'local') {
return `${distBase}resource/${type}/${name}-${symbol}${ext}`;
} else {
const i = indexes[`${type}.${name}${ext}`];
const index = has(i) ? i : 0;
return `${base}${index}/${type}/${name}-${symbol}${ext}`;
return `${distBase}project/${type}/${name}${ext}`;
}
}

2
src/types/core.d.ts vendored
View File

@ -1259,7 +1259,7 @@ interface Main extends MainData {
readonly RESOURCE_INDEX: Record<string, string>;
readonly RESOURCE_URL: string;
readonly RESOURCE_SYMBOL: string;
readonly USE_RESOURCE: boolean;
readonly RESOURCE_TYPE: 'dev' | 'dist' | 'gh' | 'local';
/**
* 初始化游戏

3
tsconfig.json
View File

@ -19,8 +19,7 @@
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"mota.config.ts",
"script/**/*.ts"
"mota.config.ts"
],
"references": [{ "path": "./tsconfig.node.json" }]
}

5
tsconfig.node.json
View File

@ -4,7 +4,8 @@
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
"allowSyntheticDefaultImports": true,
"strict": true
},
"include": ["vite.config.ts", "mota.config.ts"]
"include": ["vite.config.ts", "mota.config.ts", "script/**/*.ts"]
}