资讯中心

游戏机制笔记:九宫格界面缩放如何保留边角——43×24面板的七种尺寸(例18)

2026-10-24

游戏面板拉伸时,边角装饰往往需要保持原尺寸,中间区域再吸收宽高变化。把图片切成三列三行,可以分别处理角、边和中心,避免把圆角和边框一起等比拉大。

下面使用一组独立练习数据,说明输入、规则、处理顺序和输出之间的关系。建议先遮住结果自己推演,再逐步对照;如果出现差异,应先定位第一处不同,并检查边界条件,不要只把最后的答案改成一样。

规则和数据

本例明确给出原图宽高及左右上下边距,目标宽高均大于对应边距之和。四角宽高保持,横边只横向拉伸,竖边只纵向拉伸,中心两轴拉伸;没有平铺、裁切或小于边框尺寸时的特殊规则。

原图43×24,左/右/上/下边距[6, 12, 5, 6] [[58, 58], [76, 40], [35, 38], [69, 75], [46, 50], [93, 28], [40, 33]]

逐步推演

目标58×58:三列宽[6, 40, 12]、三行高[5, 47, 6],中心横纵比例8/5、47/13;九块面积按行[[30, 200, 60], [282, 1880, 564], [36, 240, 72]],总面积3364。

目标76×40:三列宽[6, 58, 12]、三行高[5, 29, 6],中心横纵比例58/25、29/13;九块面积按行[[30, 290, 60], [174, 1682, 348], [36, 348, 72]],总面积3040。

目标35×38:三列宽[6, 17, 12]、三行高[5, 27, 6],中心横纵比例17/25、27/13;九块面积按行[[30, 85, 60], [162, 459, 324], [36, 102, 72]],总面积1330。

目标69×75:三列宽[6, 51, 12]、三行高[5, 64, 6],中心横纵比例51/25、64/13;九块面积按行[[30, 255, 60], [384, 3264, 768], [36, 306, 72]],总面积5175。

目标46×50:三列宽[6, 28, 12]、三行高[5, 39, 6],中心横纵比例28/25、3;九块面积按行[[30, 140, 60], [234, 1092, 468], [36, 168, 72]],总面积2300。

目标93×28:三列宽[6, 75, 12]、三行高[5, 17, 6],中心横纵比例3、17/13;九块面积按行[[30, 375, 60], [102, 1275, 204], [36, 450, 72]],总面积2604。

目标40×33:三列宽[6, 22, 12]、三行高[5, 22, 6],中心横纵比例22/25、22/13;九块面积按行[[30, 110, 60], [132, 484, 264], [36, 132, 72]],总面积1320。

全部目标都保留四个角的原宽高,中央区域承担剩余尺寸。

如何复核与应用

把目标的横纵分界坐标分别写成四个递增值,相邻差就是三列和三行尺寸。九块面积相加必须正好等于目标面积,并且角块尺寸与原图相同;两项检查可发现漏缝和重叠。

横向和纵向的中心缩放比例可以不同,这正是拉伸面板与整张图片等比缩放的区别。若中心图案也必须保持比例,可以采用平铺或额外内容层,但那是另一种布局策略,不能混入本次面积核对。

这是一套明确限定的教学模型,实际作品可能采用其他约定。记录实验时,保留原始输入、每步状态以及规则版本;调整一个条件后重新演算,并检查起点、终点、重复输入和刚好位于边界的情况,才能知道差异来自设计还是计算。