大家好!🚀

作为一名独立开发者,在没有艺术和配音工作室预算的情况下,打造一款拥有数十个全语音角色和多个室内场景插图的可点击冒险游戏,在过去几乎是不可能的。

过去一个月,我构建并发布了《以太学院之旅》(Aetheria Academy Journey)——一款包含38个场景的2D可点击幻想浏览器游戏。我想分享我的完整流程,如何利用AI作为效率倍增器,以及将所有组件整合到一起所需的真实软件工程挑战。

在线游戏(桌面端/移动端浏览器免费游玩):

👉 https://aetheria.inventkid.com/

AI流程:

  1. 视觉资产生成(吉卜力2D美学):
  2. 生成了38个宽屏(16:9)场景背景,涵盖旅行、城堡内部、四个元素学院公共休息室、宿舍和秘密挑战室。
  3. 提示词一致性挑战:为了在不同房间类型中保持统一的艺术风格,我建立了一个严格的提示词锚点(2D动漫吉卜力风格插画,平视视角,温暖的环境光,无文字/标志)。
  4. 地标锚定:对于视觉连续性强的场景(如公共休息室及其相连的宿舍),我在提示词中保持了统一的色调和建筑主题(例如:Pyralis:深红与石质;Hydrus:湖中柱与翡翠绿;Zephyrus:蓝色与高拱云窗;Solis:暖木、黄色拼布与绿植)。

  5. 双音频架构(神经语音+声音合成):

  6. 语音:将所有游戏内对话树和叙述页面提取为结构化JSON,然后使用Microsoft Edge-TTS神经模型(例如:ChristopherNeural用于热情的少年主角,GuyNeural/EmmaNeural用于教授和肖像NPC)运行自动化Python脚本。
  7. 音效:我没有加载数百个静态音效文件,而是用TypeScript构建了一个自定义的Web Audio API振荡器合成引擎,直接在浏览器中实时生成音效(大门吱嘎声、魔法闪烁声、猫头鹰叫声、齿轮摩擦声)。

背后的传统代码与架构:

AI生成了原始的视觉和音频资产,但将它们转化为交互式游戏需要自定义的React和TypeScript架构:

  1. 响应式热点坐标引擎:
    为所有38个场景映射了基于百分比的坐标边界框,使得传送门、可交互检查物品和对话触发点在移动屏幕和4K桌面视口上都能保持像素级精确。

  2. 全局施法状态机:
    构建了一个交互式魔杖系统。玩家可以从工具栏中调出魔杖,选择法术(Lux、Ignis、Levitate、Reveal),并在世界中的特定交互热点上施法,触发动态粒子生成、音频合成和解谜状态变化。

  3. 视觉小说多节点对话系统:
    实现了分支式对话树,并带有状态持久化(例如:胖夫人走廊守护者验证密码、校长对话和NPC反应)。

  4. 零摩擦浏览器交付:
    使用Vite将所有内容打包成轻量级单页应用,并通过GitHub Actions CI/CD自动部署到AlmaLinux NVMe VPS(rsync)。

给AI游戏开发者的经验教训:

  • 单纯的AI生成图像不等于游戏。最难的部分是对齐——确保交互式碰撞框在生成的透视线前感觉自然。
  • 神经TTS+Web Audio合成对于想要构建全语音叙事世界且零流媒体延迟的独立开发者来说,是一个游戏规则改变者。

欢迎就流程、提示词、坐标映射或部署提出任何问题!