开源AVG制作框架来袭！- AVGPlus~用爱发电！

一些过去的事

先谈谈初衷，两年前我花时间做过一个在手机上跑的简陋AVG引擎，功能十分简单，仅有基本的背景图、对话和分支跳转功能。甚至连立绘都没有，而是用了小头像形式。这一设定源于童年时玩的一款GBA游戏「换装迷宫2」，在小头像基础上加上一些抖动、缩放动画，可以做出很生动的表情效果。

后来因为出于很多复杂的原因，包括个人遇到了很多困难。就没再坚持下去了。后来我重新起了一个项目，开始了没日没夜的写代码。认认真真做了一个非常精致的AVG制作框架，它叫做 —— AVGPlus.

也是今天我想介绍的东西。

关于AVGPlus

AVGPlus 是一个跨平台、灵活、门槛低的文字游戏制作引擎，可以把游戏发布到 Windows、Mac 桌面平台下，同时还可以发布到 Web 浏览器, Android 以及 iOS 下。可以胜几乎任意类型的 Galgame, 包括有声小说、解谜游戏等。引擎拥有超多开放的游戏API，游戏作者可以很轻易从0到1开发文字冒险游戏，甚至可以基于更高级的插件机制开发定制化的游戏特性。

AVGPlus 可以做什么：

带有开放性结局的恋爱游戏
背包&道具、收集功能的冒险解谜游戏
在游戏里实现和游戏角色聊天的功能
在某个“场景”偶遇女主的功能
……

关于技术选型

（非程序员可以跳过这段）

该引擎基于HTML DOM, 部分情况基于 WebGL, 在 Mac & PC 平台下基于 Electron。采用 JavaScript 作为脚本语言，除了可以用到 JavaScript 的常规语法之外，引擎提供的所有 API 均为线性执行，并且所有API支持同步和异步两种方式，支持最小粒度控制剧情脚本的运行流程。

支持特性

目前引擎提供以下几个模块的 API（文章末尾有部分章节的演示视频）：

对话/立绘/文本输入处理

剧本对白、对话样式；立绘显示与隐藏、立绘效果、选项、自定义文本输入处理等。

场景操作/特效

场景加载、过渡效果、场景粒子特效（包括常见的雨、雪、风等天气效果）、多层场景以及景深效果。

镜头效果

包括全屏色调变化、画面闪烁、全屏过渡以及镜头震动等特效。

音效/音乐

分为四个音轨管理声音。分别是背景音乐、背景音效、音效、语音的播放和停止。

存档变量操作

存档变量的设置与读取。

字幕和图片显示

在游戏画面的任意位置显示字幕和图片，并且提供了大量的补间动画，还允许自己编写CSS动画，可用于制作剧情动画CG。

游戏流程和延时控制

标题菜单跳转、读/存档界面呼出、语言级流程控制语法、加载另一个脚本文件以及定时器处理。

高级功能

加载插件、调用插件方法等

如何创建一个游戏

要创建一个新的游戏项目很简单，在我们提供的预编译发布包中（过些时间会提供下载~），仅需要在 scripts 目录新建一个 .avs 文件，如 start.avs, 然后输入引擎提供的API，并且执行游戏客户端即可。以下是一段范例脚本（和文章末尾的演示视频吻合）：

// /* 文本以及立绘相关剧情 */
api.playBGM("tutorial/text-theme.mp3");
api.loadScene(0, "tutorial/bedroom-1.bmp", {
  block: true
});
api.wait(3000);
api.loadScene(1, "tutorial/bedroom-1-day.bmp", {
  block: true,
  animation: {
    name: "fadein",
    options: {
      duration: 2000,
    }
  }
});
api.wait(1000);

const titleResult = api.showSubtitle("[c=yellow]普通文本对话[/c]", {
  position: "Top",
  animation: {
    name: "FlyIn",
    options: {
      direction: "Up",
      duration: 1000
    }
  }
}, true);

api.showCharacter(2, "tutorial/boy-normal.png");

api.showText([
  "如你所见，文本对白是AVG的核心功能，因此我们也支持了大量样式，丰富演出效果~",
  "这里是基本的对话演示，可以通过以下 API 显示一段文本：[br][br][c=red] api.showText(text, [options]) [/c]"
]);

api.wait(100);
api.updateSubtitle(titleResult.id, "[c=yellow]字体样式[/c]");
api.showText(
  `以及还可以在文本里面加入一些基础文本样式，比如说：[br][br]` +
  `[b]文本加粗[/b]，[i]斜体[/i]，[c=#FF0000]更改文本颜色[/c]，改变[s=30]文本大小[/s]，` +
  `甚至是... [del]删除线[/del]。几乎把 Markdown 的语法都支持了一次。`
);

// ...

api.showText(["在某些情况下我们可以接受玩家的选项输入和文本输入……", "比如……你愿意告诉我你的名字吗？"], {
  name: "风见",
  character: {
    index: 4,
    avatar: {
      file: "tutorial/girl-normal.png"
    }
  }
});

const choice = api.showChoices(["我愿意", "不愿意"]);
if (choice.selectedIndex === 0) {
  let isOK = false;

  while (!isOK) {
    const inputResult = api.showInputBox("输入你的名字", {
      inputType: 0,
      minLength: 2,
      maxLength: 5,
      allowCancel: true
    });

    isOK = inputResult.isOK;
    if (!isOK) {
      api.showText("要告诉我你的名字哦。。。", {
        name: "风见",
        character: {
          index: 4,
          avatar: {
            file: "tutorial/girl-angry.png"
          }
        }
      });
    } else {
      api.setVariable("your_name", inputResult.value);
    }
  }

}

api.showText("唔……[wait=1000][c=yellow]${your_name}[/c]真是个好名字呢！", {
  name: "风见",
  character: {
    index: 4,
    avatar: {
      file: "tutorial/girl-smile.png"
    }
  }
});

// ...

脚本提供了为 TypeScript 爱好者准备的 d.ts 文件，可以用你喜欢的编辑器（如 VSCode）编写，带有智能提示将会更加便利。

怎么样，脚本是不是很简单呢（官方吐槽：并没有！）。不过不要紧，适用于没有任何编程基础的编辑器也已经正式提上日程了！

关于插件机制

插件是本引擎提供的最重要的功能之一，我们允许用户使用 JavaScript 编写插件，并且——你可以采用HTML编写任意UI，并且可以在脚本中通过以下方式在游戏中随时呼出插件界面：

avg.plugins.your_plugin.show()

同时，我们在几乎所有API的调用前后都提供了 Hook 接口，比如说显示对话前、显示对话后，你甚至可以通过在对话显示之前，重新将对话内容进行解析，实现自己的文本渲染方式，增加对话的语法表现。

你甚至可以在自己的插件里引入npm 或 yarn 的 packages, 用你最熟悉的方式，就像你平时进行前端开发的那样。

你可以在插件中调用引擎提供的 API, 也可以实现 Hook 接口，扩展你的游戏。你将可以很轻易做到：

实现一个背包功能，在游戏中显示/隐藏背包界面
实现网络通信功能（其实我们的API里提供了 HTTP Get/Post 接口了）
实现自定义的解谜界面

后话

以上是给大家带来的功能介绍。近段时间一直忙于功能开发，对于发布的规范以及文档也在紧张准备中。其次就是填上一些小坑了，其实正式制作剧情时，依然发现很多健壮性问题，所以我也希望在发布第一个版本时能尽量有稳定的体验。

发布时间未定，但不会很久，也不会跳票，可放心食用，除非我死了。在等待更新过程中，我将会持续发布一些关于技术方面的文章进行分享。

关注 avg-engine.com ，在正式发布时，相关下载将会发布在该网站。（官网目前还是一年前的状态，忙得连logo都来不及换……）

Github: AngryPowman/avg.renderer

以下是录制的第一章节的演示视频，大概感受一下（限于视频长度不能全部录制）：
https://www.zhihu.com/video/976996130843807744
（部分素材来源于网络）

（另外，文章封面图片是习惯性开车，作者是黑娘，被我一顿早茶收买，目前AVGPlus的御用画师~俗称死宅杀手，曾扬言如果画本子将绝不收费）

参与AVGPlus，用爱发电的小伙伴❤️

**黑娘，**不在知乎，负责原画以及所有美术相关

RealSys ，负责引擎功能模块的开发

诸诺，负责Demo游戏的剧本、以及功能开发

豚大人，负责作曲

棉狼，负责原画