【保姆级教程】不写一行代码，用 AI 开发一款修仙网页游戏

2026-07-15

视频来源：B 站 UP 主「黑鲸同学」——《【P1】全网最硬核 AI 教程：不写一行代码，0 基础 AI 开发修仙游戏（完整版）》 视频时长：约 98 分钟 ｜ 分集：本文覆盖 P1（完整版），如作者有后续分集另行补充。 本文档：由视频画面（每 2 分钟抽 1 帧，共 49 帧）+ 全程语音转写整理、校对而成。配图见同目录 教程配图/；逐字稿见附录 B。

📌 开始之前（前置说明）

💰 成本速览（视频中提到的花费）

📖 目录

1. 这期视频做了什么
2. 成品演示：完整玩法一览
3. 配套编辑器（6 个）
4. 核心：用 AI 从零把游戏做出来（完整开发时间线）
5. 生成角色美素材（立绘 + 八方位精灵图）
6. 无缝大地图
7. 开场动画
8. 角色 / 怪物动态特效
9. 批量美术素材与 NPC 量产
10. 完整工具清单
11. 方法论总结

• 附录 A：提示词模板
• 附录 B：转写文件与勘误

一、这期视频做了什么

用纯 AI 工具链，在不手写一行代码的前提下，从零做出一款修仙题材的 HTML 网页游戏。成品美术与玩法都相当完整——世界观与设定明显借鉴《凡人修仙传》（角色「韩立」「墨大夫」、门派「七玄门」、地名「乱星海」等），玩法则被作者直言“照抄”自修仙游戏《觅长生》。

整个流程分两大块：

1. 程序：用 AI 编程工具（Cursor）让 AI 生成全部游戏代码（Phaser 3 + Vite，浏览器本地运行）。
2. 美术：用 AI 绘图 / AI 视频平台（XMAI）+ Photoshop + 扣图 / 格式转换工具，批量产出角色立绘、精灵动画、地图贴图、开场动画、特效等。

视频底部固定有一条章节导航条（UP 主自加的视频章节标记，非游戏内元素），共 8 个板块，本文在其基础上重排为更利于“跟做”的顺序：

💡 阅读建议：第四章是“开发主线”，第五~九章是主线里穿插的“美术素材制作”。真实开发时是边写代码边补素材，两者交替进行——见第四章的「完整开发时间线」。

二、成品演示：完整玩法一览

一款玩法相当完整的修仙 RPG 网页游戏：

开局

• 新建角色：取名（如“韩立”）→ 选人物立绘形象 → 分配灵根（金木水火土五行，共 100 点）。灵根决定后续能释放对应属性的法术、以及灵气值上限。 （原视频画面：五行灵根分配）

探索

• 水墨风大地图：主角八方向流畅移动（上/下/左/右 + 四个斜向）。 （原视频画面：大地图探索）
• NPC 与任务：靠近 NPC 出现“附近”提示 → 对话 → 领任务；任务可开启引路箭头导航。
• 机遇系统：靠近特定区域并满足条件，触发随机奖励。
• 传送阵：可传送到「乱星海」等区域，连成无缝大地图（带云雾飘动氛围）。

角色系统（顶部信息栏）

• 储物袋：带凡品→仙品的品级筛选（作者称此 UI“做了好久”）。 （原视频画面：角色储物袋面板）
• 法宝：装备后按 F 键飞行（未装则不能飞）。
• 法术 / 功法：学习后可装配，满足进阶条件可突破。
• 社交：与 NPC 加好友，NPC 死亡会在此显示。
• 还有存档、设置、商店（用灵石买丹炉等物品）。
• 门禁：部分门需**持有特定物品（令牌）**才能进入（如墨大夫给的令牌）。

修炼玩法（门派内）

• 炼丹房：需先学丹方（去竹简处学，如筑基丹）→ 备好灵草 → 玩炼丹小游戏（可失败“炸炉”，材料化灰）。
• 闭关室：可闭关 1 / 10 / 30 / 50 / 100 年，增长修为；带寿命系统（突破可延寿）。 （原视频画面：闭关修炼）
• 突破小游戏：吸收灵液、躲避障碍（碰到扣“道心值”）；高阶如九转凝丹（空格键凝丹、Q/右键召唤护盾）。
• 境界链：炼气 → 筑基 → 结丹 → 元婴……（结丹大能寿命 500 年）。

战斗系统

• 飞行进入巢穴 / 秘境：采集天材地宝（灵草），遭遇怪物。
• 怪物两种形态：卡牌式（早期）与动态视频式（后期升级，见第八章）。
• 战斗有灵气池：每放一个法术消耗对应灵气；带 buff 系统（照抄《觅长生》）。
• 大怪物如“九尾天狐（元婴期）”“远古真龙”；打不过可遁走。 （原视频画面：剧情事件）

🎬 作者原话

• 「先把功能做出来。虽然目前简陋，但先把功能实现，这是最重要的，UI 后面再优化。」
• 「这都是用 AI 帮我策划的游戏，我本人肯定想不出这么多，因为我从来没开发过游戏……我只要充当一个产品经理的角色。」
• 「这是纯网页版游戏，因为我零基础、不会引擎，所以让 AI 全程写代码——要用 AI 全程写，最好就用 HTML 网页游戏形式。」

三、配套编辑器（6 个）

有些内容（成百上千的物品、法术、对话）不可能一条条让 AI 硬写，于是作者让 AI 做了 6 个可视化编辑器来“造内容”：

（原视频画面：对话节点编辑器） （原视频画面：建筑编辑器）

🎬 作者原话

• 「我完全零基础，Godot、Unity 都不会……要用 AI 全程写代码，最好用 HTML 网页游戏形式。」
• 「有些东西不可能全让 AI 写，所以我配套开发了物品、法术、建筑等编辑器……这种节点式对话编辑器，当时 AI 把它开发出来我就好震撼了。」
• 「光这个（法术）编辑器，我感觉开发就至少花了一个月。」

四、核心：用 AI 从零把游戏做出来（完整开发时间线）

这一章是整期视频的主线。真实开发顺序是“能跑的骨架 → 逐步替换真实素材 → 加系统”，其中精灵图（第五章）和大地图（第六章）就是在第 4、5 步穿插进来的。

4.0 先理解 vibe coding

🎬 作者原话

• 「vibe coding 不是具体工具或软件，而是一种开发理念：你动嘴，AI 动手写代码。你用自然语言说要什么功能，AI 写出来，你跑一下看行不行，有问题让他改，没问题继续下一步。」
• 「打个比方——造小汽车：先让 AI 造轮子，检查圆不圆、结不结实，有问题让他修，满意了再造底盘、装动力……每一步都让 AI 干，我们自己验收。」

4.1 准备工具

• AI 编程器：首选 Cursor；国内环境用不了可换 Trae（字节跳动）或 Qoder（阿里巴巴），用法一致。
  • 账号可去闲鱼购买；打开后选 Agent 模式。
• 选模型：把默认的“自动”取消 → 手动选模型。推荐 Claude 家（当前最强，需网络环境）；国产可选 GLM（开源、排行榜靠前）。作者还推荐了一个大模型排行榜网站辅助选型。 （原视频画面：Cursor 模型选择）
• 技术栈：游戏引擎 Phaser 3 + 构建工具 Vite，运行在 localhost:3000（本质是 HTML 网页游戏）。

4.2 完整开发时间线（照着做）

（原视频画面：AI 自动生成的分步指引） （原视频画面：游戏首次运行 WASD 移动）

关键心法：先让游戏“能跑”（走路的骨架），再逐步往上叠系统和美术。

🎬 「大家不要因为出现 Bug 就放弃了，这种 Bug AI 都能解决。截个图发给 AI，描述一下问题，让他改就行。」

五、生成角色美素材（立绘 + 八方位精灵图）

对应时间线第 ⑤ 步。

AI 绘图平台：XMAI

• 平台：XMAI（xmai.net，“让设计更简单”）——集 AI 绘图 / AI 抠图 / AI 视频 于一体。

  ℹ️ 视频里作者口头称它为「熊猫 ai.net / 熊猫 AI」，因该平台以熊猫为形象（页面有熊猫头像）；操作界面即 XMAI，二者为同一平台。

• 主力模型：Nano Banana 2（谷歌 Gemini 图像模型，控制力最强）；另可选 GPT image。
• 玩法：“抽卡”式多次生成，从多张里挑最满意的。

（原视频画面：XMAI 生成角色）

制作八方位行走图（PS）

1. 生成一张角色立绘（1:1）。
2. 用它当参考图，让 Nano Banana 2转成八方位行走图（比例必须 4:3，与首图一致；控制力强，通常一次成型）。
3. 抠图 → 在 PS 里逐格摆进精灵表，逐帧检查连贯性与朝向。 （原视频画面：PS 精灵图序列帧）

精灵图规格

• 单格 256×256。
• 八方位行走图 = 8 列 × 5 行（画布约 2048×1280；行方向依次：下 / 左下 / 左 / 左上 / 上）。
• 待机图 = 1 列 × 5 行（画布 256×1280）。
• 素材必须居中、不超出格子，否则动画会缺块、不流畅。
• 导出 PNG（透明背景），放进项目文件夹。

🎬 作者原话

• 「让插画师画不知要多久，用 AI 就能生成这么多精美素材。」
• 「导出行走图 + 待机图后放进项目文件夹，把文件名发给 AI，AI 会自动接入游戏。」
• 「头发边缘记得让 AI 加明显黑边，后期抠图才方便。」

六、无缝大地图

对应时间线第 ⑦ 步。

用 XMAI「抽卡」式生成可拼接地形贴图，拼成无缝水墨大地图。

（原视频画面：XMAI 抽卡生成地形）

流程

1. PS 新建 2048×2048 文件，放个小人占位、盖印图层，发给 AI。
2. 用「地形图提示词」生成俯视水墨地形（Nano Banana 2，1:1，多抽几张挑最好）。
3. 以此为底图，新建 10000×10000 大画布，用选区 + 「扩图提示词」向四周逐块无缝扩展（每块 1:1，保留一部分原图作参考以保持风格）。
4. PS 视图 → 参考线，按 5 行 5 列切成 25 张（切片工具 → 基于参考线 → 导出 JPG）。
5. 用作者自制的 WebP 转换网页批量压缩（命名前缀=地图拼音简拼、每行 5 列、质量 80%）。
6. 解压后复制进项目根目录，发「地图接入提示词」让 AI 载入。可再让 AI“地图缩小一点”“脚下阴影淡一点”。

🎬 「以中心往四周扩图就能得到无缝大地图……掌握方法后，基本可以做成无限大地图。」

七、开场动画

流程：豆包写提示词 → Nano Banana 2 出封面图 → AI 重绘去遮挡/补细节 → AI 视频转动态。

1. 写绘图提示词：不用自己憋，问豆包（切“专家模式”）：「我想生成一幅游戏开场封面图，修仙手绘风格，帮我写个 AI 绘图提示词」。
2. 出封面图：XMAI + Nano Banana 2，16:9，多抽几张。 （原视频画面：封面提示词 + 生成图）
3. 修图：有多余遮挡就发图让 AI “去掉上面的遮挡”；想补云雾用 **AI 重绘（涂抹模式）**局部重画。
4. 转视频：把封面图放进 XMAI 的 AI 视频工具，首尾帧模式、720P、16:9、10 秒；视频提示词同样让豆包（专家模式）根据图生成。

🎬 「这个视频模型有点贵，生成一条约 10 元（一秒一块）……贵是真的贵，但效果是真的好。」

⚠️ 本节视频作者未明确报出所用模型名（可能与第八章的 Seedance 2.0 fast 不同），成本也更高（10 秒/10 元），跟做时以平台实际计费为准。

八、角色 / 怪物动态特效

把静态立绘变成会动的战斗/怪物特效素材。

（原视频画面：Seedance AI 视频生成绿幕素材） （原视频画面：视频扣图去背）

角色特效流程

1. 生成人物立绘 → 让 AI 转成战斗姿势（朝左/朝右，见附录 A·P12）。
2. 一定给角色（尤其头发）加明显黑边（附录 A·P13），方便抠图。
3. 抠图，背景换成绿幕（绿色比白底好抠）。
4. PS 新建 960×720，把绿幕角色缩放居中、上下留空隙（不然动起来会截掉肢体），盖印。
5. XMAI AI 视频：Seedance 2.0 fast 模型、首尾帧模式、720P、4:3、5 秒（约 4 元）。
6. 下载视频 → 用**视频扣图工具（Video Matting）**点绿幕背景一键去背 → 裁剪左右（别让衣服超框）→ 导出 WebP 逐帧（如 153 帧）。
7. 把整套帧放进项目根目录，告诉 AI “这是人物动态帧，共 153 帧”，让它重命名并接入。

怪物特效：同理，但先去掉角色身边的烟雾/光效/灰尘等特效、加黑边（附录 A·P14），一个一个单独做效果最好。

🎬 作者原话

• 「提交前一定要检查 AI 生成的视频提示词」——比如把与实际不符的“半透明翅膀”“微风环境”删掉，免得生成时乱加特效。
• 「方向反了？把视频镜像一下，或一开始在 PS 里水平翻转图片即可。」

九、批量美术素材与 NPC 量产

• 图片转 WebP：用 “Image to WebP Converter” 把大量素材批量转成更省流量的 WebP。 （原视频画面：批量转 WebP）
• NPC 量产：一条提示词一次生成 9 个不同角色（三行三列），四张就是 36 个（附录 A·P15）。
• 风格统一：把参考图 + 目标图发给 AI，说「将图片 1 的风格转换成图片 2」（附录 A·P16）。
• 素材抠图技巧：让 AI 把山峰/灵草等放到纯白背景、只保留主体、“千万不要有阴影”，抠图效果最好（附录 A·P17）。
• 起名靠 AI：想不出灵草名/境界名，直接让 AI 按“炼气期”这种词生成一批（附录 A·P18）。

🎬 「用 AI 制作 NPC 简直不要太简单……只要你能想象到；想不到，也可以直接问 AI。」

十、完整工具清单

十一、方法论总结（可复用到其他游戏）

1. 先骨架后血肉：先让 AI 把“能走路的网页游戏”跑起来，再逐层加系统与美术。
2. 程序全交给 AI：Cursor + 强模型，自然语言提需求，人只做验证。
3. 美术走 AI 流水线：AI 绘图（抽卡）→ PS 整理/加黑边 → AI 视频做动效 → 绿幕扣图导帧 → 批量转 WebP。
4. 自制编辑器提效：让 AI 顺手做物品/法术/对话/建筑等编辑器，把“造内容”可视化。
5. 先学会抄：新手先照抄一款成熟游戏（作者抄《觅长生》）跑通全流程，再谈原创。

🎬 作者原话

• 「新手第一次用 AI 开发游戏，就是先学会抄；开发过几种后，才知道后面该怎么做。」
• 「AI 比你想象的强大，几乎什么都能做——只要把你的想法告诉它。」
• 「做得差不多后可以打包成 exe，再问 AI 怎么发布到 Steam 赚钱，你不懂 AI 会详细教你。」

附录 A：提示词模板（可直接套用）

⚠️ 视频里提示词多以文档截图一闪而过，未逐字念全。以下模板依据作者讲解重构，用途与关键约束忠于视频，具体措辞可按需微调。

P1 · 项目初始化

我要做一款角色扮演类修仙网页游戏，请使用 Phaser 3 + Vite 搭建项目架构。请先用**“你问我答”的形式**逐步向我收集需求（游戏类型、核心玩法、画面风格等），我回答后再开始写代码。

P2 · 收集信息补充

请继续用你问我答的方式收集信息，一次只问我一个问题。

P3 · 接入八方位精灵图

项目根目录已放入两张图：角色_八方位行走图.png（8 列 5 行，单格 256×256）和 角色_待机图.png（1 列 5 行）。请把它们接入游戏，让主角在地图上按 WASD 八方向行走、静止时播放待机动画。

P4 · 报错修复

游戏出现如下报错（附截图/控制台文字），请排查并修复。

P5 · 画面模糊修复

游戏画面/角色显示很模糊，但原图很清晰。请调整渲染设置（如关闭抗锯齿平滑、按整数像素缩放），让画面清晰锐利。

P6 · 生成地形底图

（附 2048×2048、中心含占位小人的图）请生成一张俯视视角、修仙水墨手绘风格的地形图，用作游戏地图素材，风格统一、可平铺。

P7 · 无缝扩图

请以这张地形图为基础，向四周无缝扩展，保持风格、色调、笔触完全一致，边缘自然衔接，不要出现拼接痕迹。

P8 · 接入大地图

项目根目录已放入名为 qingyunshan 的地图切片（5 行 5 列共 25 张）。请把它拼接接入游戏，替换当前地图；如太大请缩小，并给角色脚下加一个淡一点的阴影。

P9 · 让豆包写绘图提示词（发给豆包·专家模式）

我想生成一幅游戏开场封面图，修仙手绘风格。提示词我不会写，麻烦你帮我写一个 AI 绘图提示词。

P10 · 去遮挡 / 局部重绘

请去掉图片上方多余的遮挡元素，只保留主体画面。（局部补充：用 AI 重绘涂抹该区域 → “这里加一点云雾”。）

P11 · 让豆包写 AI 视频提示词（发给豆包·专家模式，附图）

这是一张游戏封面/角色图，请根据它帮我写一个 AI 视频生成提示词，描述合理的运镜与轻微动效，风格与图一致。（生成后务必人工核对，删掉与画面不符的描述。）

P12 · 转战斗姿势

请将该角色转换成战斗姿态，身体朝向右侧（需要朝左就改“左侧”），摆出蓄力/攻击的姿势，保持原画风与配色。

P13 · 加黑边（便于抠图）

请给角色边缘（尤其头发）增加清晰明显的黑色描边，方便后期抠图，其余不变。（Nano Banana 2，1:1）

P14 · 去特效 + 加黑边（怪物）

请去除该游戏角色身边的所有特效（烟雾、光效、灰尘等），只保留角色本体，并给角色加一个明显黑边，方便后期抠图。

P15 · NPC 九宫格量产

请生成 9 个不同的修仙 NPC 角色，三行三列排列，风格：[此处填角色特征，可先问 AI 要一批特征]，统一画风。

P16 · 风格迁移

请将图片 1 的风格转换成图片 2 的风格，保持图 1 的主体内容不变。

P17 · 素材单独抠出

请把这张图里的[山峰/灵草]单独提取，放到纯白色背景上，只保留该主体、不要阴影，其它元素一概不要。

P18 · 让 AI 起名

帮我起 10 个不同的灵草名字，都加上“炼气期”这个境界；再给我 9 种不同风格的对应素材（三行三列，画面只出现灵草）。

附录 B：转写文件与勘误

转写文件（均在本目录）：

主要同音误识 → 正确用词对照（whisper 对修仙术语/英文术语识别有限，已在校对版中修正）：

⚠️ 少数词受口音/背景音影响仍可能存疑（如个别功法名「冥火诀 / 焚天诀」、法术「九霄神雷」、作者自建 AI 导航站域名「ai888.net」、各模型精确版本号等），如需严格引用请对照视频画面核实。

文档整理自视频画面 + 语音转写，部分操作细节（如提示词原文、精确数值）以视频与平台实际为准。