Roblox Lua开发：如何实现Frame从左向右缩减尺寸

核心问题本质是默认血条填充元素的对齐锚点在左侧，宽度变化时自然从右侧收缩，不需要写复杂的尺寸+偏移量计算逻辑，只需要调整锚点位置，让布局系统自动处理宽度变化，就能完全避免偏移误差。

前端Web场景（CSS实现，零计算误差） #

两种无冗余逻辑的实现方案，适配所有分辨率、容器尺寸变化场景：

• 绝对定位右锚定法
  血条外框设相对定位，内部填充条设绝对定位并锚定右侧，宽度直接绑定血量百分比即可：

  /* 血条外框容器 */
  .hp-bar {
    position: relative;
    width: 240px;
    height: 22px;
    border: 2px solid #222;
    border-radius: 4px;
    overflow: hidden;
  }
  /* 血条填充层 */
  .hp-bar__fill {
    position: absolute;
    right: 0; /* 核心配置：锚定容器右侧 */
    top: 0;
    bottom: 0;
    width: 100%; /* 动态绑定血量百分比，满血为100%，空血为0% */
    background-color: #e63946;
    transition: width 0.15s linear;
  }
  

• 缩放原点法
  不需要修改定位，通过设置缩放原点实现，性能更优（不触发布局重排）：

  .hp-bar__fill {
    width: 100%;
    height: 100%;
    background-color: #e63946;
    transform-origin: right center; /* 核心配置：以右侧中心为缩放原点 */
    transform: scaleX(var(--hp-ratio, 1)); /* 动态传入0-1区间的血量比值 */
  }
  

游戏引擎UI场景 #

所有游戏UI引擎逻辑和前端一致，核心是调整填充元素的轴心/填充方向，不需要手写位置计算：

• Unity UGUI：如果用Image的Simple模式，把填充图RectTransform的Pivot X值设为1（轴心移到元素最右侧），之后直接修改宽度或者fillAmount即可；如果用Filled填充模式，直接把Fill Origin设置为Right，引擎会自动处理从左收缩的逻辑。
• Unreal UMG：直接选中ProgressBar组件，在Fill Settings配置项里把Fill Direction从默认的Left To Right改为Right To Left，绑定0-1区间的血量比值即可，无需额外逻辑。

避坑提示：不要手动计算「掉血宽度 * 比例」再设置填充条的left偏移，这种写法在分辨率适配、容器缩放、血条长度动态调整时必然出现位置偏差。所有实现都只需要调整锚点/原点，尺寸计算交给原生布局系统处理，能做到100%贴合设计要求。

内容的提问来源于stack exchange，提问作者OhRetro