河南省郑州市市辖区郑东新区心怡路278号基运投资大厦7楼01 jiuyouapp@j909.vip

游戏动态

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

2026-10-24

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

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

规则和数据

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

原图34×43,左/右/上/下边距[9, 11, 5, 7] [[95, 68], [54, 22], [82, 52], [88, 65], [48, 20], [69, 33], [83, 77]]

逐步推演

目标95×68:三列宽[9, 75, 11]、三行高[5, 56, 7],中心横纵比例75/14、56/31;九块面积按行[[45, 375, 55], [504, 4200, 616], [63, 525, 77]],总面积6460。

目标54×22:三列宽[9, 34, 11]、三行高[5, 10, 7],中心横纵比例17/7、10/31;九块面积按行[[45, 170, 55], [90, 340, 110], [63, 238, 77]],总面积1188。

目标82×52:三列宽[9, 62, 11]、三行高[5, 40, 7],中心横纵比例31/7、40/31;九块面积按行[[45, 310, 55], [360, 2480, 440], [63, 434, 77]],总面积4264。

目标88×65:三列宽[9, 68, 11]、三行高[5, 53, 7],中心横纵比例34/7、53/31;九块面积按行[[45, 340, 55], [477, 3604, 583], [63, 476, 77]],总面积5720。

目标48×20:三列宽[9, 28, 11]、三行高[5, 8, 7],中心横纵比例2、8/31;九块面积按行[[45, 140, 55], [72, 224, 88], [63, 196, 77]],总面积960。

目标69×33:三列宽[9, 49, 11]、三行高[5, 21, 7],中心横纵比例7/2、21/31;九块面积按行[[45, 245, 55], [189, 1029, 231], [63, 343, 77]],总面积2277。

目标83×77:三列宽[9, 63, 11]、三行高[5, 65, 7],中心横纵比例9/2、65/31;九块面积按行[[45, 315, 55], [585, 4095, 715], [63, 441, 77]],总面积6391。

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

如何复核与应用

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

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

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