mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-01-18 11:59:26 +08:00
readme.md与更新记录
This commit is contained in:
parent
74225246c7
commit
2c25c1367b
94
README.md
94
README.md
@ -1,64 +1,66 @@
|
||||
# mota-vite 使用说明
|
||||
# 魔塔 人类：开天辟地
|
||||
|
||||
图文说明：https://h5mota.com/bbs/thread/?tid=940&p=1
|
||||
游戏地址：https://h5mota.com/tower/?name=HumanBreak
|
||||
|
||||
## 功能介绍
|
||||
## 项目结构
|
||||
|
||||
1. 极细粒度的热重载，使用它开发，你可以省去 95% 以上的刷新操作
|
||||
2. 支持 vue ts antdv 等插件，使开发更为便捷迅速，写插件和 ui 更加方便
|
||||
3. 基于 pnpm，可以自己安装想要的依赖包
|
||||
`public`: mota-js 样板所在目录，该塔对样板的目录进行了一定的魔改，其中插件全部移动到`project/plugin`文件夹中，并使用了`es模块化`
|
||||
|
||||
### 热重载
|
||||
`src`: 与 ui、特效等与游戏进程无关的插件所在目录。其中包含以下内容：
|
||||
|
||||
1. 当 libs/ main.js index.html 中的任意一个文件被更改后，会自动刷新塔的页面
|
||||
2. 修改楼层文件后自动在塔的页面上显示出来，不需要刷新
|
||||
3. 修改脚本编辑或插件编写后也能自动更新更改的插件或脚本，但不保证不会出问题（一般都不会有问题的
|
||||
4. 修改图块属性、怪物属性等后会自动更新
|
||||
5. 当全塔属性被修改时，会自动刷新塔的页面
|
||||
6. 样板的 styles.css 被修改后也可以直接显示，不需要刷新
|
||||
7. 当 ts 文件和 vue 文件修改时，会自动更新对应的组件
|
||||
8. 其余内容修改后不会自动更新也不会刷新页面
|
||||
1. `plugin`: 所有相关插件的源码，其中包含多个文件夹，内有不同的内容
|
||||
2. `ui`: 所有 ui 的 vue 源码
|
||||
3. `panel`: ui 中用到的部分面板
|
||||
4. `components`: 所有 ui 的通用组件
|
||||
5. `data`: 数据文件，包含百科全书的内容、成就的内容等
|
||||
6. `fonts`: ui 中用到的字体文件
|
||||
7. `types`: mota-js 的类型声明文件
|
||||
8. `source`: mota-js 的图块等资源的类型声明文件，会通过热重载更新
|
||||
9. `initPlugin.ts`: 所有插件的入口文件
|
||||
10. `main.ts`: 主入口，会将`App.vue`与`App2.vue`渲染到 html 上
|
||||
|
||||
## 使用说明
|
||||
`script`: 在构建、发布等操作时会用到的 node 脚本
|
||||
|
||||
### 进入开发环境
|
||||
`vite.config.ts`: `vite`的配置文件
|
||||
|
||||
1. 首先需要安装 node.js，图文教程见 https://h5mota.com/bbs/thread/?tid=921&p=1
|
||||
2. 右键 windows 图标，选择打开终端，运行 `npm i -g pnpm`，等待安装完成
|
||||
3. 用 vscode 打开项目文件夹，修改 mota.config.ts 中的塔 name，并保证与全塔属性中的相同，否则上传到网站之后可能无法进行游玩
|
||||
4. 使用 ctrl+j 快捷键打开 vscode 底栏，并选择终端选项（Terminal），运行 pnpm i，安装依赖包，依赖包较多，安装时长可能较长
|
||||
5. 在系统资源管理器中（不是 vscode！）打开 public 文件夹，按下 shift + 鼠标右键（win11 只按右键即可），选择在终端打开或在 powershell 打开
|
||||
6. 在刚刚打开的终端中执行`node server.cjs`，运行样板的启动服务，可以提供样板相关的热重载服务
|
||||
7. 回到 vscode，在终端中执行`pnpm dev`，运行 vite 启动服务，可以提供 ts 的按需编译等功能
|
||||
8. 打开 vite 提供的网址，即可进入游戏界面，打开样板启动服务提供的编辑器网址，即可进入编辑器界面
|
||||
9. 想要退出时，可以按下 ctrl+c 终止服务或直接退出 vscode 或终端
|
||||
`mota.config.ts`: 魔塔配置文件
|
||||
|
||||
### 构建 & 发布
|
||||
## 开发说明
|
||||
|
||||
1. 开发完成后，你可以执行`pnpm build`进行构建，结果会生成在 dist 文件夹下，对其进行压缩成 zip 后即可发布和更新
|
||||
2. 构建完成后，你还可以执行`pnpm preview`来预览网站上的效果或使用`pnpm preview-node`在热重载条件下预览网站上的效果
|
||||
1. 首先请确保你安装了`node.js`与`pnpm`
|
||||
2. 将项目拉到你的设备上
|
||||
3. 运行`pnpm i`以安装所有依赖包
|
||||
4. 在`public`目录运行`node server.cjs`以启动样板热重载服务
|
||||
5. 在根目录运行`pnpm run dev`以启动`vite`服务
|
||||
6. 打开`vite`提供的网址即可进入游戏
|
||||
7. 打开样板热重载服务提供的网址即可进入编辑器
|
||||
|
||||
### 开发
|
||||
## 构建说明
|
||||
|
||||
1. 对于 vue，它会在 body 的一个子标签（id="root"）上构建 vue app
|
||||
2. 对于 ts，所有在 src 文件夹内的 ts 都会被编译，但会根据引入情况，只将使用到的文件构建
|
||||
3. 建议安装 vscode 插件 volar，它提供了 vue 文件的语法高亮与 ts 支持
|
||||
1. 运行`pnpm run build`以打包以`/games/HumanBreak/`为目录的构建包
|
||||
2. 运行`pnpm run build-local`以打包以`/`为目录的本地构建包
|
||||
3. 运行`pnpm run build-gh`以打包以`/HumanBreak/`为目录的可部署到`github pages`的构建包
|
||||
|
||||
### 插件
|
||||
### 构建流程
|
||||
|
||||
1. 该样板提供了 ts 插件的解决方案，你可以在 plugin 文件夹下创建你的插件（样板内置了一个弹出显示文字的插件）
|
||||
2. 插件创建后，必须有一个默认导出，且必须是一个函数，表示进行插件的初始初始化，同时必须有返回值，返回所有在外部会用到的变量与函数，其中所有的变量与函数都会转发到`core.plugin`上，所有不以下划线开头的函数都会转发到`core`上，例如样板内置的弹出显示的插件可以直接在外部使用`core.addPop()`来调用，注意所有的转发会在游戏加载完成后进行！
|
||||
3. 插件中与样板相关的初始化应当全部在默认导出的函数中进行，不可在函数外部进行，否则会报错！
|
||||
4. 插件编写完成后，需要在`src/types/plugin.d.ts`中进行类型标注，把所有在外部可见的函数与变量标注在接口`PluginDeclaration`中
|
||||
5. 之后在`src/initPlugin.ts`中按照示例初始化插件即可
|
||||
6. 之后便可以在各个地方使用插件中的函数了！
|
||||
1. 运行`vue-tsc`检查类型是否正确
|
||||
2. 运行`vite`的构建工具，打包除`public`外的内容
|
||||
3. 运行`script/build.ts`，首先去除未使用的文件（即全塔属性中未注册的文件），然后压缩字体，再用`rollup`及`babel`压缩插件与`main.js`
|
||||
|
||||
## 注意事项
|
||||
## 热重载说明
|
||||
|
||||
1. 所有 ts 与 vue 文件中的代码在录像验证时都不会运行，请勿在里面进行直接的与分数相关的操作
|
||||
2. 如果其中有与其相关的操作，应当为用户操作后的回调函数，并在样板的插件中注册相应录像操作，才能使录像验证正常运行
|
||||
支持一下内容的热重载：
|
||||
|
||||
## 一键更新
|
||||
1. `vite`热重载
|
||||
2. 楼层热重载
|
||||
3. 插件热重载
|
||||
4. 脚本编辑热重载
|
||||
5. 道具、怪物、图块属性热重载
|
||||
6. styles.css
|
||||
|
||||
1. 在 script/update.ts 中修改你的用户 id 和密码
|
||||
2. 执行 pnpm update 即可自动发自助更新，之后通知管理员审核即可
|
||||
以下内容修改后会自动刷新页面
|
||||
|
||||
1. `vite`提供的自动刷新页面
|
||||
2. 全塔属性
|
||||
3. libs/下的文件
|
||||
4. main.js
|
||||
|
||||
@ -1161,7 +1161,7 @@ var items_296f5d02_12fd_4166_a7c1_b5e830c9ee3a =
|
||||
"name": "bgm查看器",
|
||||
"canUseItemEffect": "true",
|
||||
"text": "可以查看游戏内你已经听过的bgm，歌曲名格式：歌手——歌曲名。未完工。",
|
||||
"useItemEffect": "core.plugin.bgmOpened.value = true;"
|
||||
"useItemEffect": "core.tip('warn', '当前道具还未制作完成！');\n// core.plugin.bgmOpened.value = true;"
|
||||
},
|
||||
"I559": {
|
||||
"cls": "constants",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"title.mp3": {
|
||||
"area": "标题",
|
||||
"area": "未完工",
|
||||
"name": "川井宪次 - 破裂足音",
|
||||
"from": "《永远的七日之都》",
|
||||
"img": "/project/images/bg.jpg",
|
||||
|
||||
15
update_record.md
Normal file
15
update_record.md
Normal file
@ -0,0 +1,15 @@
|
||||
## 更新记录
|
||||
|
||||
此处会列出每次更新的更新记录。
|
||||
|
||||
## 1.0.0-alpha
|
||||
|
||||
1. 新增第二章的前半部分，包含两个区域 - 智慧小径和冰封高原
|
||||
2. 重构大部分 ui，包括 怪物手册、楼层传送器、装备栏、道具栏、状态栏、开始界面、商店 等
|
||||
3. 新增成就系统
|
||||
4. 新增怪物标记功能
|
||||
5. 新增定点查看功能与快捷查看怪物属性功能
|
||||
6. 新增百科全书
|
||||
7. 新增自动切换技能
|
||||
8. 新增全屏游戏
|
||||
9. 修复录像
|
||||
Loading…
Reference in New Issue
Block a user