实用创作流程

像素角色碰撞框:把碰撞区域和可见像素分开

象牙色纸面上,琥珀色框内的炭黑狐狸雕塑
文章配图。操作步骤另附真实 Ciyo 工作区的完整截图。

狐狸尾巴画得好看,不代表平台游戏的碰撞体验公平。如果每个可见像素都算进碰撞矩形,角色可能被尾巴绊住。导出角色前,先决定哪些区域应该参与碰撞。

我们在 Ciyo 中用代码制作了一个虚构的 32×32 狐狸,再生成独立的8× 检查图。这个示例说明怎样一起交付角色图和碰撞坐标。它是确定性的示意样本,不是图像模型测试,也没有接入游戏引擎。

先写清坐标约定

向开发者提供原生尺寸、坐标原点、轴的方向和矩形含义。本例原点位于 32×32 图像的左上角,x 向右增大,y 向下增大。画布上的显示尺寸不会改变这些值。

选定碰撞框从 x=8、y=7 开始,宽高为 16×23 原生像素。右侧与底部的排除式边界分别为 24 和 30,都在 32 以内。这些数值只是示例设计选择;你的矩形应根据游戏中的移动和碰撞表现调整。

虚构狐狸的碰撞坐标约定
字段数值含义
图像32×32原生 PNG 尺寸
原点左上角显示缩放前的坐标
碰撞框8, 7, 16, 23x、y、宽度、高度
排除式边界24, 30x + width; y + height
检查倍率8×仅供检查,256×256

要求生成独立叠加图

新建 Ciyo 项目,在同一个请求里写出源图尺寸和碰撞矩形。要求设计智能体保留原生文件,并在副本上绘制碰撞叠加层。同时要求在回复里附上坐标清单,这样即使画布预览很小,坐标也能读清。

我们使用 Ciyo Agent 和代码工具。提示词明确要求用代码生成占位角色,不调用付费图像或视频生成。正式游戏角色应使用你已确认的源图,并要求对附件执行同样的检查。

完整 Ciyo 界面中的狐狸碰撞框请求
真实 Ciyo 输入:创建前已给出原生矩形和保留源图的要求。
在 Ciyo 中试试
用确定性代码生成一个虚构的 32x32 像素狐狸角色,背景透明,不调用付费生成器。另设碰撞框 x=8 y=7 width=16 height=23,使用角色的原生坐标;用最近邻插值制作单独的 8x PNG 检查图,在其中绘制彩色碰撞框叠加层,保持源角色像素不变。交付原生 PNG、检查 PNG,以及包含原生尺寸、碰撞框和左上角原点的文本 JSON 清单。说明可见 alpha 边界不一定等于碰撞边界。把源图和检查图加入画布。检查原生尺寸、整数坐标、矩形位于图像范围内,以及制作叠加图后源像素哈希未变。不要宣称已接入游戏引擎。这是在真实 Ciyo 工作区中用代码生成的示意样本。

分别理解两种轮廓

结果包括原生 PNG 和一张 256×256 检查图。蓝色叠加层标出我们指定的碰撞矩形,品红色虚线标出可见 alpha 边界。棋盘格是检查背景,不属于原生角色图。

可见边界为 x=5、y=0、宽度=26、高度=31。耳朵和尾巴超出了碰撞矩形。这正是分开两种测量的意义:可见图形描述外观,人工设定的碰撞形状表达游戏设计意图。

完整 Ciyo 画布中的原生狐狸和碰撞框叠加图
实际用代码生成的源图和检查图。碰撞边界与可见轮廓不同。

检查原生文件和坐标清单

下载原生文件,不要用画布截图代替。确认尺寸为 32×32,且具有真实 alpha 透明度。按原生单位读取清单,确认 x + width ≤ 图像宽度、y + height ≤ 图像高度。若必须保留原图,就比较制作检查图前后的源文件像素哈希。

不要把检查图当成正式角色图

保留示例解码后的像素哈希与智能体报告的哈希一致。叠加图是独立文件;除非你有意在游戏中显示调试图形,否则不要把它作为正式角色发布。

完整 Ciyo 界面中的碰撞框验证步骤
智能体实际比较了 alpha 边界和碰撞边界,源图及独立检查图同时可见。

在游戏运行环境里测试碰撞

导入源图,把矩形转换成游戏引擎的碰撞设置。任何引擎支点偏移都应明确记录。在角色预期显示尺寸下测试墙壁、地面、狭窄缝隙和互动。矩形文件正确,并不证明游戏体验公平。

Godot 的物理文档把碰撞形状视为独立对象。这一区分支持本例的交付方式,但我们没有把示例导入 Godot 或其他引擎。移动规则、有效攻击帧和伤害冷却时间仍需单独实现与检查。

常见问题

碰撞框会自动等于 alpha 包围框吗?

不会。我们有意指定了更小的矩形。可以参考可见边界,但要根据游戏需求决定碰撞边界。

应该使用检查图的 256×256 坐标吗?

不应该。清单使用原生 32×32 坐标系,放大的检查图仅用于查看。

这个示例在游戏引擎里测过吗?

没有。我们检查了保留的 PNG 和坐标清单;游戏行为仍需另行测试。

为角色准备明确的碰撞坐标

先在 Ciyo 中完成一个经过检查的示例。保留源文件,在自己的项目中使用前检查导出结果。