换图

world.html

@@ -751,7 +751,7 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
 .mv-cell.active { background: rgba(255,213,79,.14); border-color: #ffd54f; box-shadow: 0 0 10px rgba(255,213,79,.45); }
 .mv-cell .mv-ico { font-size: 30px; line-height: 1; pointer-events: none; }
 .mv-cell .mv-ico-img { width: 44px; height: 44px; object-fit: contain; pointer-events: none; border-radius: 6px; }
-.mv-cell .mv-ico-char { width: 44px; height: 44px; background-repeat: no-repeat; background-position: center 0; background-size: auto 100%; pointer-events: none; border-radius: 6px; image-rendering: pixelated; }
+.mv-cell .mv-ico-char { width: 44px; height: 44px; background-repeat: no-repeat; background-position: 0 0; background-size: auto 100%; pointer-events: none; border-radius: 6px; image-rendering: pixelated; }
 .mv-cell .mv-nm { font-size: 11px; color: #9fb3c8; pointer-events: none; }
 .mv-cost { font-size: 10px; color: #ffd54f; pointer-events: none; font-weight: 600; }
 .mv-cost.free { color: #7fdca0; }
@@ -7663,8 +7663,17 @@ function microRenderBuildPanel() {
   const items = visibleInCat(microBuildCat);
   gridEl.innerHTML = items.length ? items.map(it => {
     let ico;
-    if (it.isChar && it.sprite) {
+    if (it.isChar) {
-      ico = `<div class="mv-ico-char" style="background-image:url('${it.sprite}')"></div>`;
+      // 生物卡片：优先用 thumb（单帧图标），避免精灵表（288×64 六帧横排）在 44×44 容器里露出多帧
+      const thumb = it.icon;
+      const hasThumb = typeof thumb === 'string' && /\.(png|webp|jpg|jpeg)(\?.*)?$/i.test(thumb);
+      if (hasThumb) {
+        ico = `<img src="${thumb}" class="mv-ico-img" alt="">`;
+      } else {
+        // 无 thumb 时用精灵表第一帧：精灵表 288×64（6帧×48），容器 44×44
+        // background-size 按高度缩放 + background-position 锚定左上角只露第1帧
+        ico = `<div class="mv-ico-char" style="background-image:url('${it.sprite}')"></div>`;
+      }
     } else {
       const isImg = typeof it.icon === 'string' && /\.(png|webp|jpg|jpeg)(\?.*)?$/i.test(it.icon);
       ico = isImg ? `<img src="${it.icon}" class="mv-ico-img" alt="">` : `<span class="mv-ico">${it.icon}</span>`;