游戏机制笔记:九宫格界面缩放如何保留边角——36×28面板的七种尺寸(例13)
游戏面板拉伸时,边角装饰往往需要保持原尺寸,中间区域再吸收宽高变化。把图片切成三列三行,可以分别处理角、边和中心,避免把圆角和边框一起等比拉大。
下面使用一组独立练习数据,说明输入、规则、处理顺序和输出之间的关系。建议先遮住结果自己推演,再逐步对照;如果出现差异,应先定位第一处不同,并检查边界条件,不要只把最后的答案改成一样。
规则和数据
本例明确给出原图宽高及左右上下边距,目标宽高均大于对应边距之和。四角宽高保持,横边只横向拉伸,竖边只纵向拉伸,中心两轴拉伸;没有平铺、裁切或小于边框尺寸时的特殊规则。
原图36×28,左/右/上/下边距[6, 10, 10, 6] [[61, 76], [27, 48], [80, 61], [55, 36], [51, 37], [64, 45], [66, 55]]
逐步推演
目标61×76:三列宽[6, 45, 10]、三行高[10, 60, 6],中心横纵比例9/4、5;九块面积按行[[60, 450, 100], [360, 2700, 600], [36, 270, 60]],总面积4636。
目标27×48:三列宽[6, 11, 10]、三行高[10, 32, 6],中心横纵比例11/20、8/3;九块面积按行[[60, 110, 100], [192, 352, 320], [36, 66, 60]],总面积1296。
目标80×61:三列宽[6, 64, 10]、三行高[10, 45, 6],中心横纵比例16/5、15/4;九块面积按行[[60, 640, 100], [270, 2880, 450], [36, 384, 60]],总面积4880。
目标55×36:三列宽[6, 39, 10]、三行高[10, 20, 6],中心横纵比例39/20、5/3;九块面积按行[[60, 390, 100], [120, 780, 200], [36, 234, 60]],总面积1980。
目标51×37:三列宽[6, 35, 10]、三行高[10, 21, 6],中心横纵比例7/4、7/4;九块面积按行[[60, 350, 100], [126, 735, 210], [36, 210, 60]],总面积1887。
目标64×45:三列宽[6, 48, 10]、三行高[10, 29, 6],中心横纵比例12/5、29/12;九块面积按行[[60, 480, 100], [174, 1392, 290], [36, 288, 60]],总面积2880。
目标66×55:三列宽[6, 50, 10]、三行高[10, 39, 6],中心横纵比例5/2、13/4;九块面积按行[[60, 500, 100], [234, 1950, 390], [36, 300, 60]],总面积3630。
全部目标都保留四个角的原宽高,中央区域承担剩余尺寸。
如何复核与应用
把目标的横纵分界坐标分别写成四个递增值,相邻差就是三列和三行尺寸。九块面积相加必须正好等于目标面积,并且角块尺寸与原图相同;两项检查可发现漏缝和重叠。
横向和纵向的中心缩放比例可以不同,这正是拉伸面板与整张图片等比缩放的区别。若中心图案也必须保持比例,可以采用平铺或额外内容层,但那是另一种布局策略,不能混入本次面积核对。
这是一套明确限定的教学模型,实际作品可能采用其他约定。记录实验时,保留原始输入、每步状态以及规则版本;调整一个条件后重新演算,并检查起点、终点、重复输入和刚好位于边界的情况,才能知道差异来自设计还是计算。