Merge pull request #43 from nini22P/main

修改导出游戏相关目录结构和编译 Android apk 文档
OpenWebGAL · Oct 28, 2023 · d742f83 · d742f83
2 parents 3f8aede + 2786124
commit d742f83
Show file tree

Hide file tree

Showing 12 changed files with 88 additions and 57 deletions.
diff --git a/src/.vuepress/sidebar/zh.ts b/src/.vuepress/sidebar/zh.ts
@@ -9,7 +9,17 @@ export const zhSidebar = sidebar({
         "getting-started",
         "resources",
         "config",
-        "publish",
+        {
+          text: "部署或发布我的视觉小说？",
+          link: "publish/",
+          collapsible: true, // 是否可折叠
+          prefix: "publish/",
+          children: [
+            "web",
+            "desktop",
+            "android",
+          ]
+        },
         "faq", 
         "live2D",
       ],

diff --git a/src/publish.md b/src/publish.md
diff --git a/src/publish/android/build.jpg b/src/publish/android/build.jpg
diff --git a/src/publish/android/create-icons.jpg b/src/publish/android/create-icons.jpg
diff --git a/src/publish/android/finsh.jpg b/src/publish/android/finsh.jpg
diff --git a/src/publish/android/keystore.jpg b/src/publish/android/keystore.jpg
diff --git a/src/publish/android/open-in-android-studio.jpg b/src/publish/android/open-in-android-studio.jpg
diff --git a/src/android.md → src/publish/android/readme.md b/src/android.md → src/publish/android/readme.md
@@ -1,49 +1,52 @@
-# 将游戏打包到 Andoird 平台
+# Andoird
 
-## 方法一：自动导出项目文件 (适用于使用 WebGAL Terre 可视化编辑器的游戏开发者)
+推荐使用 WebGAL Terre 可视化编辑器，提供了一键导出安卓项目文件的选项。
 
-::: warning
-如果想要使用 android studio 直接从项目导出的文件夹打开，请新建游戏时填入**英文**，如果游戏名已经是中文，请打开 `WebGAL_Terre\public\games` 修改你的游戏名，并保证项目的文件路径中不会出现英文以外的字符，否则会报错。
-:::
+如果你使用源代码构建项目请切换到源代码选项卡。
+
+## 前期准备
+
+::: tabs#android
 
-### 前期准备
+@tab WebGAL Terre
 
 * 下载安装 [Android Studio](https://developer.android.google.cn/studio/)
 
-### 导出和修改
+@tab 源代码
 
-在编辑器左边侧边栏修改 `游戏标题` 和 `游戏包名`。游戏包名是你的网站域名反写，如果没有域名可以考虑使用开发者加游戏名的组合，比如 `webgaldev.mygalgame` 这种形式，**必须**使用**英文**。
+* 下载安装 [Android Studio](https://developer.android.google.cn/studio/)
+* 将 [WebGAL](https://github.com/MakinoharaShoko/WebGAL) 编译为 Web 网页
+* 下载 [WebGAL Android 项目模板](https://github.com/nini22P/WebGAL-Android)
 
-在编辑器右上角选择导出为安卓项目文件，然后打开 android studio 选择刚刚导出的 `android` 目录，等待依赖下载完毕。
+:::
 
-点击菜单栏中的 `File -> New -> Image Asset` 修改游戏图标，注意图标分为前后两层。
+## 在 Android Studio 中打开项目
 
-### 运行和编译
+::: warning
+如果想要使用 Android Studio 直接从项目导出的文件夹打开，请新建游戏时填入**英文**，如果游戏文件夹名不是英文，请在更多菜单中重命名为英文或者打开 `WebGAL_Terre\public\games` 修改你的游戏名，并保证项目的文件路径中不会出现英文以外的字符，否则会报错
+:::
 
-打开安卓手机的 USB 调试并连接电脑，点击上方工具栏设备标题旁的运行图标后在手机上运行。
+::: tabs#android
 
-点击菜单栏中 `Build -> Generate Signed Bundle or APK`，根据提示创建密钥并编译，等待编译完毕。
+@tab WebGAL Terre
 
-## 方法二：手动编辑项目文件 (适用于在本地通过书写脚本的形式或者通过源码编译开发的游戏开发者)
+在编辑器左边侧边栏修改游戏配置中的 `游戏标题` 和 `游戏包名`。
+游戏包名是你的网站域名反写，如果没有域名可以考虑使用开发者加游戏名的组合，比如 `webgaldev.mygalgame` 这种形式，**必须**使用**英文**。
 
-### 前期准备
+在编辑器右上角选择导出为安卓项目文件，系统会自动打开文件夹。
 
-* 下载安装 [Android Studio](https://developer.android.google.cn/studio/)
-* 将 [WebGAL](https://github.com/MakinoharaShoko/WebGAL) 游戏导出 Web 版本
-* 下载 [WebGAL Android 项目模板](https://github.com/nini22P/WebGAL-Android)
+打开 android studio 选择刚刚导出的 `android` 目录，等待依赖下载完毕。
 
-### 游戏导入
+![在 Android Studio 中打开项目](open-in-android-studio.jpg)
 
-首先将游戏导出为 Web 网页，解压 [项目模板](https://github.com/nini22P/WebGAL-Android)，将文件夹改名（切记必须使用英文）。
+@tab 源代码
+
+下载并解压 [项目模板](https://github.com/nini22P/WebGAL-Android)，将文件夹改名（切记必须使用英文）。
 打开 `项目文件夹\app\src\main\assets\webgal` 文件夹，将你要打包的游戏放到这里。
 
-::: tip
 游戏默认加载 `项目文件夹\app\src\main\assets\webgal\index.html`，如果想要自定义加载链接（比如在线链接），请修改 `项目文件夹\app\src\main\res\values\values.xml` 文件里面的 `load_url` 字段。
-:::
 
-### 信息修改
-
-打开 Android Studio 导入项目。
+打开 Android Studio 打开项目。
 修改 `项目文件夹\settings.gradle` 文件中的 `rootProject.name` 字段。
 
 ``` gradle
@@ -83,13 +86,31 @@ package com.openwebgal.demo //修改包名
 
 上面这个字段修改后会报错，这时候点击刚刚修改的包名，然后点击“黄色灯泡”选择 `Move file to '目标包名'`，再将原本包名文件夹删掉。
 
+:::
+
 点击菜单栏中的 `File -> New -> Image Asset` 修改游戏图标，注意图标分为前后两层。
 
-### 运行和编译
+![创建图标](create-icons.jpg)
+
+## 调试运行
 
 打开安卓手机的 USB 调试并连接电脑，点击上方工具栏设备标题旁的运行图标后在手机上运行。
 
-点击菜单栏中 `Build -> Generate Signed Bundle or APK`，根据提示创建密钥并编译，等待编译完毕。
+![在设备上运行](run-app.jpg)
+
+## 编译 APK
+
+点击菜单栏中 `Build -> Generate Signed Bundle or APK` ，在弹出的菜单中选择 `APK`。
+
+根据提示创建或者选择密钥。
+
+![创建或者选择密钥](keystore.jpg)
+
+选择 `release` 后点击 `Create` 等待编译完毕。
+
+![选择编译变体](build.jpg)
+
+![编译完毕](finsh.jpg)
 
 ## 视频教程
 

diff --git a/src/publish/android/run-app.jpg b/src/publish/android/run-app.jpg
diff --git a/src/publish/desktop/readme.md b/src/publish/desktop/readme.md
@@ -0,0 +1,7 @@
+# Windows / macOS / Linux
+
+在编辑器右上角选择导出为可执行文件，可执行文件可以直接在当前系统上运行。
+
+::: tip
+游戏导出完成后，文件资源管理器会自动打开。如果没有自动打开，你可以在编辑器目录下的 `Exported_Games` 找到。
+:::
diff --git a/src/publish/readme.md b/src/publish/readme.md
@@ -0,0 +1,9 @@
+# 部署或发布我的视觉小说？
+
+首先，请知悉，可以部署到互联网的引擎应该是**发行版或由 WebGAL 图形化编辑器导出的网页**，而不是源代码。
+
+- [Web 网页](web)
+
+- [Windows / macOS / Linux](desktop)
+
+- [Android](android)
diff --git a/src/publish/web/readme.md b/src/publish/web/readme.md
@@ -0,0 +1,13 @@
+# Web 网页
+
+## 如果你使用**编辑器**
+
+在编辑器右上角选择导出为网页。网页的部署方式，与部署一个正常网站的方式无异。你可以购买云服务器（腾讯云、阿里云）等部署或使用 GitHub Pages。
+
+## 如果你使用**发行版**
+
+复制/WebGAL 下的文件(不是文件夹，是/WebGAL 文件夹下的文件)到你想要部署的云服务器的指定目录下，或是部署到 GitHub Pages。
+
+## 使用**源代码开发**的开发者
+
+如果你使用源代码进行调试，你可以通过 `yarn build` 来创建一个静态网页（在 packages/webgal/dist 文件夹），然后将这个文件夹内的内容部署到 GitHub Pages 或你的云服务器上。