嗒啦啦生图参考图超限了？拼图脚本一分钟搞定
05/2680 浏览开发心得
作者：浠涫
这篇攻略解决什么问题
用 AI 做游戏风格探索的时候（比如：我想测试"像素 RPG 风格"放到我的游戏里是什么感觉），通常的流程是：
- 收集一批参考截图（各种风格的游戏截图、UI 素材）
- 把截图传给嗒啦啦的 GPT image2，配上 prompt，让它帮你生成一批"换皮版本"
- 反复迭代，直到风格基本稳定
但很快你会遇到一个硬墙：gpt image2似乎只能带六张参考图
截图一多，要么超限传不进去，要么 AI 的"注意力"被稀释掉，生成效果乱跑。
核心思路：拼图降维，把多张压成少张提前把截图拼成"板块全景图"，让原本占 8 个参考图槽的素材只占 1 个槽，腾出来的空间放风格锚点图和其他补充参考。
本质是：在 AI 有限的感知窗口里，最大化有效信息密度。
一张精心组织过的全景图，比十二张散图让 AI 理解得更准确。
用 Python 脚本拼图（附完整代码）下面是一个 2×N 网格拼图脚本，支持中文标注。直接复制就能用：
from PIL import Image, ImageDraw, ImageFont
import os
def compose_grid(image_paths, labels, output_path,
cols=2, cell_w=600, cell_h=400, label_h=40,
font_path="/home/Maker/misans_merged.ttf", font_size=26):
"""
把多张图拼成 cols 列的网格，每张图底部附中文标注。
image_paths : 图片路径列表
labels : 每张图的中文标注（与 image_paths 一一对应）
output_path : 输出文件路径
cols : 列数（默认 2 列）
cell_w/h : 每个格子的宽高（像素）
label_h : 底部标注区高度
font_path : 中文字体路径（见下方"踩坑：中文变方框"）
"""
rows = (len(image_paths) + cols - 1) // cols
canvas = Image.new("RGB", (cols * cell_w, rows * (cell_h + label_h)), (240, 240, 240))
draw = ImageDraw.Draw(canvas)
try:
font = ImageFont.truetype(font_path, font_size)
except Exception:
print(f"[警告] 字体加载失败: {font_path}，中文会变方框")
font = ImageFont.load_default()
for i, (img_path, label) in enumerate(zip(image_paths, labels)):
row, col = divmod(i, cols)
x = col * cell_w
y = row * (cell_h + label_h)
# 缩放图片填满格子
img = Image.open(img_path).convert("RGB")
img.thumbnail((cell_w, cell_h), Image.LANCZOS)
canvas.paste(img, (x + (cell_w - img.width) // 2,
y + (cell_h - img.height) // 2))
# 底部标注
label_y = y + cell_h
draw.rectangle([x, label_y, x + cell_w, label_y + label_h], fill=(30, 30, 30))
bbox = draw.textbbox((0, 0), label, font=font)
text_w = bbox[2] - bbox[0]
draw.text((x + (cell_w - text_w) // 2, label_y + 8),
label, font=font, fill=(255, 255, 255))
canvas.save(output_path, quality=90)
print(f"已保存: {output_path} ({canvas.width}x{canvas.height})")
# ——— 使用示例 ———
if __name__ == "__main__":
images = [
"assets/image/风格参考/sci-fi-ui.png",
"assets/image/风格参考/pixel-rpg.png",
"assets/image/风格参考/card-game.png",
"assets/image/风格参考/casual-farm.png",
]
labels = ["科幻 HUD 风格", "像素 RPG 风格", "卡牌游戏风格", "休闲农场风格"]
compose_grid(images, labels, "assets/image/风格参考_合并.jpg")
跑完你会得到一张"风格总览图"，4 张参考图变成 1 张，节省 3 个参考图槽位。
踩坑：中文标注全部变成方框 □□□脚本跑起来没报错，但生成的图片里所有中文都是 □□□。
原因很直接：嗒啦啦的环境里只有 DejaVu 等英文字体，没有中文字体。PIL 遇到找不到字形的字符，直接画成空方框。
三步修复步骤 1：安装 MiSans 字体包
npm install misans
装完后字体文件在 node_modules/misans/lib/Normal/MiSans-Regular.*.woff2，是一堆按字符范围分片的 woff2 文件。
步骤 2：用 fontTools 把分片合并成一个 TTF
import os, glob
from fontTools.merge import Merger
shard_dir = "node_modules/misans/lib/Normal"
shard_paths = sorted(glob.glob(os.path.join(shard_dir, "MiSans-Regular.*.woff2")))
print(f"找到 {len(shard_paths)} 个分片")
merger = Merger()
merged = merger.merge(shard_paths)
merged.save("/home/Maker/misans_merged.ttf")
print("合并完成：/home/Maker/misans_merged.ttf")
分片较多时合并需要约 10-30 秒，等它跑完就好。
步骤 3：在拼图脚本里指定字体路径
font = ImageFont.truetype("/home/Maker/misans_merged.ttf", 26)
这就是前面完整脚本里的 font_path 参数，改好之后中文标注正常显示。
拼图完成后：传给 GPT 做风格生成拼好全景图后，传给 GPT 生图就简单多了：
reference_images: ["风格参考_合并.jpg", "我的游戏截图_合并.jpg"]
prompt: 基于参考图的视觉风格，为我的游戏生成一套 HUD 界面方案，
保持参考图中的色调和 UI 密度感，输出 16:9 横屏。
几个实用小技巧：
- 第一张生成满意后，把它存下来当风格锚点，后续每轮都带上它，防止跨次生成风格漂移
- prompt 里描述排版逻辑，拼图让 AI 看到素材，但排版意图还是要说清楚
- 控制单张合并图在 400KB 以内；素材太多就拆成 p1/p2
不推荐的操作：用 edit_image 修文字有时候生成的图里文字位置或大小不对，可能会想用 edit_image 局部修改。
这个方法对文字的效果很差：会让文字变模糊（字糊了）。
更好的做法是：在 prompt 里明确描述文字要求重新生成，或者接受"AI 生成的文字本来就是装饰性的"——游戏里的真实文字用 UI 系统渲染，不依赖 AI 生图里的文字保持清晰。
快速参考:问题解决中文标注显示 □□□npm install misans → fontTools 合并分片 → PIL truetype参考图超过6张按内容分组，拼成全景图不同轮次风格漂移第一张满意后存为风格锚点，每轮带上它合并图太大识别变差单张控制在 400KB 内，过多拆成 p1/p2edit_image 改文字变模糊不用 edit_image 改文字，重新生成或接受 AI 文字是装饰