ai游戏场景制作方法

AI 游戏场景制作方法

视频拆解与复刻教程

Gemini 出像素地图 · 豆包抠物件 · FrameRonin 切图 · Godot 拼装：把 AI 画的一整张图，变成会遮挡、有碰撞的 2D 游戏场景

来源：抖音视频「ai游戏场景制作方法」· 作者 @狗熊岭第一突破手 · 视频 1 分 44 秒 · 拆解核验日期 2026-09-27

来源与证据说明

原视频：抖音视频「ai游戏场景制作方法 #零基础游戏开发 #Gemini #ai #豆包」，作者「狗熊岭第一突破手」（昵称取自抖音用户主页标题「狗熊岭第一突破手的主页」，主页显示作品 8 个；抖音号与粉丝数因平台反爬未能读取）。视频规格为 1920×1080、29.98 fps、时长 1 分 44 秒（约 3118 帧）。本文由「视频拆解与复刻图文教程」流程产出：抽取原视频关键帧、逐帧还原操作流程，并核验所涉工具的官方资料；配图均为原视频整帧画面，未做裁切或遮挡。

原视频链接：douyin.com（视频作品编号 7640443947411721526）

证据与复刻声明：本文严格区分四层证据——来源画面事实（视频画面、字幕与界面可直接观察到的内容）、创作者披露（作者在视频中明确说明的工具与方法）、官方资料（撰稿时在其官方页面核验到的能力与说明）、复刻方案（为让读者做出同类作品而设计的步骤）。本文的复刻方案不等于创作者的完整原始流程；作者未在视频中披露的 Gemini 自定义 Gem 内部设定、豆包具体模型版本、FrameRonin 账号与付费情况等，本文一律标注为推断或我们的方案，不作虚构。

一、结论：能复刻，是一条「AI 出图 → 工具加工 → 引擎拼装」的完整链路

一句话结论：可以复刻，但它不是「一键生成游戏」。作者做的是——用 Gemini 画出「一整张」俯视像素地图，再用豆包把地图里的物件抠出来、配成白底和黑底两张，交给 FrameRonin 做双背景去背并自动切成一张张独立素材，最后把这些素材拖进 Godot 引擎拼成一个会遮挡、能加碰撞的 2D 场景。

· 方法本质：把「AI 一次性生成的整张地图」当成素材库，而不是直接当场景。作者的关键洞察是：整图放进游戏只是一张平铺的画（他形容为「简直如履平地」），必须把物件一个个抠出来，才能做前后遮挡与碰撞。

· 四个工具、各司其职：Gemini（生成整图）→ 豆包（抠物件、去水印、换白/黑底）→ FrameRonin（双背景去背 + 零散切图导出）→ Godot Engine 4.4.2（拼场景 + Y 轴排序 + 碰撞）。

· 主要门槛：需要能访问 Google 的网络环境（Gemini 网页版与 FrameRonin 的非 API 模式都要用到），一个 Gemini 账号（作者口播「Gemini 每天只能免费生成 20 张图片」）、一个豆包账号、以及免费的 FrameRonin 与 Godot。

· 最关键的一步是「双背景抠图」：先用豆包把物件分别做成纯白底和纯黑底两张图，再交给 FrameRonin 做双背景去背——这一步决定了抠图边缘（尤其半透明处）干不干净。

图 1：Gemini 的自定义 Gem「像素场景生成v1.1」按提示词直接生成一张俯视像素地图（新手村、铁匠铺、商店、冒险者工会）。来源：原视频画面

二、这条视频在做什么：四个工具、一条流水线

来源画面事实：作者的成品是一个俯视像素风的「新手村」场景——草地、土路、木栅栏、房屋、树木、喷泉，角色可以在场景里走动，走到树后面会被挡住。整条流程被拆成四段：

来源画面事实：作者的成品形态是一个用 Godot 打开的 2D 像素场景（画面窗口标题「My Game」）；作者在结尾明确说「最后再手动或者让 ai 帮我们添加物理碰撞就可以了」——也就是遮挡之外，碰撞要另外补。

图 2：追加「去除场景人物和ui图像」后，Gemini 输出的无人物、无 UI 版地图（保留纯场景）。来源：原视频画面

图 3：作者点出问题——整张 AI 地图直接加进游戏「简直如履平地」（它只是一张平铺的图）。来源：原视频画面

图 4：把生成的整图导入 Godot Engine 4.4.2，得到的就是一整张图片，无法按物件交互或遮挡。来源：原视频画面

三、逐项拆解：从一张 AI 大图到一组可用素材

3.1 第一步：用 Gemini 的自定义 Gem 生成像素地图

来源画面事实：作者打开 Gemini 的一个自定义 Gem（画面标题「像素场景生成v1.1」，页面地址为 gemini.google.com/gem/12a7e640d237c01b127c5a38089a3），输入一句中文提示词，Gem 直接返回一张像素地图。随后他又补发一句，去掉人物和 UI。两条提示词原文如下：

Gemini 生图提示词（视频原文）

生成一个像素风格的游戏场景地图：视角为俯视，是新手村，有铁匠铺，有商店，还有冒险者工会等

（追加）去除场景人物和ui图像

官方资料（核验日期 2026-09-27）：Gemini 的「Gem」是自定义版本的 Gemini——用户可以设定它的角色、指令与默认工具（例如把默认工具设为「建立图像」），保存后反复调用，无需每次重写提示词；该能力最初面向 Gemini Advanced / Business / Enterprise 用户逐步开放。Gemini 的图像生成由 Google 的图像模型驱动，生成图带有 SynthID 隐形水印与右下角可见水印。

已知限制：自定义 Gem 的内部系统提示词对使用者不可见，因此本文只能复刻作者「在对话里输入的那两句」，无法还原他这个 Gem 的完整人设与规则——这也是同一条提示词换个人用可能效果不同的原因。

复刻提示词示例（我们的方案，非作者原文）

生成一张像素风格（pixel art）的俯视（top-down）游戏场景地图：主题是【新手村 / 森林入口 / 港口小镇】，

画面中需要包含【铁匠铺、商店、冒险者工会、水井、树木、道路、栅栏】等要素；

像素风、正交俯视视角、色彩明快、地图铺满整个画面；

不要出现人物、不要出现任何 UI、按钮或文字标注。

3.2 第二步：发现「整图不能直接当游戏资源」

来源画面事实：作者把这张 AI 整图导入 Godot 引擎（画面为 Godot Engine 4.4.2），发现它只是一张平铺的图片——人物会直接踩在房屋、树木上面，没有前后遮挡，也不分物件。他用字幕概括了这个问题：「当我们使用 ai 生成游戏的地图后，添加到游戏中就会发现简直如履平地」。

复刻要点（复刻方案）：这一步是整条视频的「问题定义」，也是最容易被忽略的认知——AI 生成的是「一张画」，不是「一组素材」。做游戏场景需要的是一张张可独立摆放、可排序、可加碰撞的物件，所以必须走「先抠图、再切图」这两步。

3.3 第三步：用豆包把物件抠出来，配成白底 + 黑底两张

来源画面事实：作者切到豆包的「生成图片（页面为 doubao.com）」功能，用对话方式一步步改图。画面里出现的提示词与其回复：

豆包改图提示词（视频原文）

帮我生成图片：将物件提取出来背景换为白色

→ 这就为您提取图片中的物件，并将背景更换为白色。

帮我生成图片：去除下方物品栏

→ 这就为您去除图片下方的物品栏。

帮我生成图片：把背景换为黑色

→ 这就为您把背景换为黑色。

来源画面事实：豆包页面顶部还提示「已成功去除图片水印，可下载无水印图片」。作者口播解释了为什么不用 Gemini 继续做：「由于 Gemini 每天只能免费生成 20 张图片，所以我选择用豆包帮我把图片中的物件提取出来」；字幕补充「分别生成白色背景和黑色背景的图片」。

图 5：转用豆包「生成图片」处理——页面提示已成功去除图片水印、可下载无水印图片。来源：原视频画面

图 6：豆包执行「将物件提取出来背景换为白色」，返回一张白底物件图。来源：原视频画面

图 7：作者的思路——分别生成白色背景和黑色背景两张物件图，为下一步的双背景抠图做准备。来源：原视频画面

图 8：豆包再执行「把背景换为黑色」，得到黑底物件图（与白底图配成一对）。来源：原视频画面

官方资料（核验日期 2026-09-27）：豆包（字节跳动旗下 AI 助手，doubao.com）的图像生成内置AI 抠图、擦除、区域重绘、扩图、智能编辑（换背景）等功能，普通使用免费，与视频中「抠物件 / 去物品栏 / 换背景」的操作吻合。

复刻要点（复刻方案）：「白底 + 黑底两张」不是多余的——下一节的「双背景去背」正是靠纯黑、纯白两个版本的差异来反推每个像素的透明度。所以这一步的目标不是「好看」，而是「背景要纯、物件要全」，发指令时务必强调「纯白 / 纯黑背景、物件不要重叠」。

复刻提示词示例（我们的方案，非作者原文）

把这幅游戏地图里的所有独立物件（房屋、树木、喷泉、栅栏、路牌等）逐一提取出来，

等距排列在纯白背景上，物件之间留出空隙、不要重叠；不要改变物件本身的像素风格。

（再发一次，把纯白背景换成纯黑背景，得到黑白两张。）

3.4 第四步：FrameRonin「双背景」去背

来源画面事实：作者打开 FrameRonin（画面地址 frameronin.com，一个「一站式 AI 像素素材工具站」），进入「抠图去背」并切到「双背景」模式，把上一步的两种背景物件图分别上传（画面显示两个上传位：黑底图与白底图）。站上说明写着：同一物体分别在纯黑和纯白背景下各一张，上传后自动去水印并提供智能透明，适合头发、玻璃等半透明边缘。作者字幕提示「然后上传我们黑白背景的物件图」「然后选择 Ronin Pro 功能」。

图 9：打开 FrameRonin（一站式 AI 像素素材工具站），可见「地图拼接」「视频转序列帧」「Sprite Sheet」「抠图去背」等模块。来源：原视频画面

图 10：在 FrameRonin 的「双背景」模式里，分别上传白底与黑底两张物件图。来源：原视频画面

图 11：FrameRonin 提示——同一物体在纯黑、纯白背景下各一张，上传后自动去水印并获得智能透明边缘。来源：原视频画面

官方资料（核验日期 2026-09-27）：FrameRonin（frameronin.com）自述为「一站式 AI 工具 · ai 像素素材生成、处理、高效插件」，当前版本 V4.3；模块包括视频转序列帧、Sprite Sheet、抠图去背（绿幕/蓝幕、白底、双背景去背；抑色、容差与边缘可调）、精灵表调整、瓦片调整，以及「RoninPro 高效工具，目前无需 NFT 凭证即可使用」。其为开源项目（GitHub 上可检索到 FrameRonin 仓库），页面同时提示：非 API 模式下，所有 AI 生成需要带可访问 Google 的网络环境。

图 12：FrameRonin 的工具面板（含序列压缩模块、去 Gemini 水印、高级像素处理算法等）。来源：原视频画面

复刻要点（复刻方案）：双背景去背是目前处理半透明边缘（火焰、头发、玻璃、水花）较稳的方案之一，代价是要先准备黑白两张图。如果你的物件边缘都很「硬」（纯色像素块），也可以直接用绿幕/白底去背，省掉黑底那张。

3.5 第五步：FrameRonin「零散切图」把大图切成独立素材

来源画面事实：去背之后，作者在 FrameRonin 里进入「识别并编辑零散区域 / 零散切图」，让工具自动识别图里的零散物件，并手动框选真正需要的场景资源，最后导出。画面里出现的参数：

· 识别模式：自动；并可设合并间距、最少像素、最小长边（画面显示 4 与 1）。

· 零散切图预览：自动把图中物件分隔开，逐个显示，可手动增删框选（画面显示「已新增一个零散框」）。

· 导出：格式 PNG、排序「换行，从左到右」、质量 0.92，点「下载零散 ZIP」。

作者字幕依次是：「点击零散切图」「导入我们刚刚下载的图片」「然后框选我们需要的场景资源」「下载后，我们进入到游戏」。

图 13：「零散切图」（识别并编辑零散区域）界面：识别模式自动、合并间距、最少像素 4、最小长边 1。来源：原视频画面

图 14：在「零散切图预览」里框选需要的场景资源（画面显示已新增一个零散框）。来源：原视频画面

图 15：导出设置——PNG、排序「换行，从左到右」、质量 0.92，点「下载零散 ZIP」。来源：原视频画面

复刻要点（复刻方案）：这一步等于「自动把一张素材大图切成一张张独立 PNG」，省掉一个个手动抠图的重复劳动。切完后你会得到一个 ZIP，里面就是可以逐个拖进引擎的房屋、树木、喷泉等素材。

3.6 第六步：Godot 拼场景 + 开 Y 轴排序 + 加碰撞

来源画面事实：作者回到 Godot Engine 4.4.2，新建 2D 场景，把切好的 sprite 逐个拖进去摆成地图；然后在父节点（Node2D）上勾选「Y Sort Enabled」（对应 y_sort_enabled）——子节点便按各自的 y 坐标排序，实现「角色走到树后被遮挡」。作者字幕依次是：

· 「将物品拖入场景后开启 Y 轴排序功能」

· 「进入到游戏后我们就会发现已经完成了人物遮挡」

· 「最后再手动或者让 ai 帮我们添加物理碰撞就可以了」

图 16：把切好的 sprite 拖入 Godot 2D 场景摆成地图，准备开启 Y 轴排序。来源：原视频画面

图 17：在 Node2D 的 Ordering 里勾选「Y Sort Enabled」（y_sort_enabled）。来源：原视频画面

官方资料（核验日期 2026-09-27）：在 Godot 4 中，早期独立的 YSort 节点已并入 Node2D——只要在任意 CanvasItem（Node2D 或 Control）上启用「Y Sort Enabled」属性，它的所有子节点就会按 y 坐标排序：y 值较大的节点后绘制、显示在更上层。这正是俯视 / 斜视角游戏实现「人物走到物件后面被遮挡」的标准做法。视频所用的 Godot 版本为 4.4.2。

图 18：开启 Y 轴排序后，角色走到树后即被树遮挡（人物遮挡生效）。来源：原视频画面

图 19：作者收尾——「最后再手动或者让 ai 帮我们添加物理碰撞就可以了」。来源：原视频画面

图 20：视频结尾，成品场景已是可走动、有遮挡的 2D 游戏画面。来源：原视频画面

复刻要点（复刻方案）：Y 轴排序只解决「谁画在谁上面」，不解决「撞不撞」。要让角色不能穿过房屋 / 树木，还需要给物件加上碰撞形状（Godot 里通常是给节点挂 CollisionObject2D / CharacterBody2D 并配 CollisionShape2D）——这正是作者最后一句提醒的「补物理碰撞」。新手最容易只做排序、忘了碰撞，结果角色能从墙上走过去。

四、工具与操作速查表

说明：上表「画面可见用量」一栏中，豆包页面出现的次数计量随账号与活动变化，仅作「视频当时画面」记录；各工具的免费额度、模型与入口请以官方当日页面为准。

五、提示词与指令清单（可直接复制）

说明：以下「视频原文」按视频画面逐字整理，可直接复制；「复刻提示词示例」是为通用化而由本文编写，不冒充作者原文。发送前请把【】里的内容替换成你自己的主题与要素。

① Gemini 生图提示词（视频原文）

生成一个像素风格的游戏场景地图：视角为俯视，是新手村，有铁匠铺，有商店，还有冒险者工会等

（追加）去除场景人物和ui图像

② 豆包改图指令（视频原文）

帮我生成图片：将物件提取出来背景换为白色

帮我生成图片：去除下方物品栏

帮我生成图片：把背景换为黑色

③ Gemini 生图提示词 · 复刻示例（我们的方案）

生成一张像素风格(pixel art)的俯视(top-down)游戏场景地图：主题是【新手村】，

画面需包含【铁匠铺、商店、冒险者工会、水井、树木、道路、栅栏】等要素；

正交俯视视角、色彩明快、地图铺满整个画面；不要出现人物，不要出现任何 UI、按钮或文字标注。

④ 豆包改图指令 · 复刻示例（我们的方案）

把这些物件（房屋、树木、喷泉、栅栏、路牌等）逐一提取出来，等距排列在纯白背景上，

物件之间留出空隙、不要重叠，不改变物件本身的像素风格。（再发一次，改纯黑背景。）

⑤ FrameRonin 关键设置（来源画面事实）

抠图去背 → 双背景：上传「白底图 + 黑底图」各一张

零散切图：识别模式=自动；最少像素=4；最小长边=1

导出：格式=PNG；排序=换行，从左到右；质量=0.92 → 下载零散 ZIP

⑥ Godot 关键设置（来源画面事实 + 官方资料）

父节点 Node2D → Ordering → 勾选 Y Sort Enabled（y_sort_enabled）

需要阻挡时：给物件挂碰撞节点（CollisionObject2D / CharacterBody2D + CollisionShape2D）

六、手把手复刻 10 步

第 1 步 准备环境：确认能访问 Google（Gemini 网页版与 FrameRonin 非 API 模式都要用），装好免费引擎 Godot，注册 Gemini 与豆包账号。

第 2 步 在 Gemini 里新建一个自定义 Gem（或直接用默认对话），把「① 生图提示词」发出去，生成一张俯视像素地图。

第 3 步 把生成图里的杂项去掉：追加一句「去除场景人物和ui图像」，拿到纯场景地图。

第 4 步 把这张地图交给豆包「生成图片」：先发「将物件提取出来背景换为白色」，再发「把背景换为黑色」，得到白底、黑底两张物件图（如原图带物品栏，顺手发一句「去除下方物品栏」）。

第 5 步 打开 FrameRonin，进入「抠图去背」，选「双背景」，把白底与黑底两张图上分别上传，执行去背，得到透明背景物件的图。

第 6 步 在 FrameRonin 里进入「零散切图」，用自动识别 + 手动框选，把需要的物件一个个框出来；导出设置选 PNG、排序「换行，从左到右」、质量 0.92，点「下载零散 ZIP」。

第 7 步 解压 ZIP，得到一组独立的 PNG 素材（房屋、树木、喷泉、栅栏等）。

第 8 步 打开 Godot，新建 2D 场景，把素材逐个拖进去摆成地图；注意把需要参与遮挡的物件放在同一个父节点下。

第 9 步 在该父节点（Node2D）的 Ordering 里勾选「Y Sort Enabled」，运行后角色走到物件后就会被遮挡。

第 10 步 最后给需要阻挡的物件补物理碰撞（CollisionShape2D 等），让角色不能穿墙——这一步可手动做，也可让 AI 帮你配。

七、可复刻度评测与已知限制

可复刻度评测（依据视频画面与官方资料，核验日期 2026-09-27）：

已知限制：

八、交付前检查清单

· 已确认能访问 Google（Gemini 网页版 + FrameRonin 非 API 模式都需要）。

· Gemini 已生成一张合适的俯视像素地图，并已「去除场景人物和 ui 图像」。

· 豆包已把物件提取出来，并分别导出纯白底与纯黑底两张物件图。

· FrameRonin「双背景」去背完成，物件边缘（含半透明处）干净。

· FrameRonin「零散切图」已框选出需要的物件，并导出 PNG / ZIP。

· Godot 里素材已摆成地图，父节点（Node2D）已勾选「Y Sort Enabled」。

· 运行验证：角色走到树木 / 房屋后会被遮挡。

· 需要阻挡的物件已补物理碰撞，角色不能穿墙。

· 已核对各工具当前版本与免费额度，确认在可接受范围内。

九、来源与参考链接

原视频（抖音）：抖音「ai游戏场景制作方法」（@狗熊岭第一突破手）

Gemini 官网：gemini.google.com

豆包官网：www.doubao.com

FrameRonin：frameronin.com

Godot Engine：godotengine.org

官方链接核验日期：2026-09-27。工具版本、免费额度、模型名称与功能入口会随时间变化，以官方当日页面为准。自定义 Gem 的提示词设定归其创作者所有，本文引用作者对话中的输入仅为教学拆解之用。

免责声明：本教程基于创作者公开发布的视频画面与公开页面整理，仅用于学习与复刻参考；文中提到的第三方工具版权归各自所有，使用前请阅读其官方条款。本文与视频创作者、工具方均无隶属关系。配图取自原视频整帧画面，未做裁切或遮挡，其中出现的界面、角色与文字版权归原视频作者及原软件方所有。

原片地址：https://www.douyin.com/video/7640443947411721526

关于作者：狗熊岭第一突破手（抖音号 45024480992）

作者主页：https://www.douyin.com/user/MS4wLjABAAAAFmU7ExShXSVq8H0POMxHNnjoRX1lIdRoMx73cWNXRlUUuJ-6uXX6kPu-_v9-kzWG