嗒啦啦生图参考图超限了？拼图脚本一分钟搞定

05/2693 浏览开发交流

作者：浠涫

分类：#开发心得 #TapTap制造

这篇攻略解决什么问题

用 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 文字是装饰

猜你想搜

taptap 制造拼图脚本代码

TapTap 制造应用

9.8

前往论坛