gplan-2/reports/美术审计-canvas转HTML-2026-10-14.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视觉与美术审计 - 2026-10-14</title>
<!-- 接收方：待办清单.md「立绘太丑/像素粒度」条；本页是 美术审计-cursor会话存档-2026-10-14.md 的网页渲染版，两份同批退役。 -->
<style>
  :root {
    --bg: #f8f9fb; --fg: #1c2128; --muted: #5c6675; --border: #d9dee5;
    --card: #ffffff; --card-hd: #f1f3f6; --th-bg: #eef1f5; --stripe: #f6f8fa;
    --warn-fg: #92400e; --warn-bg: #fffbeb; --warn-bd: #f59e0b;
    --danger-fg: #991b1b; --danger-bg: #fef2f2; --danger-bd: #ef4444;
    --info-fg: #1e40af; --info-bg: #eff6ff; --info-bd: #3b82f6;
    --seg-done: #10b981; --seg-hold: #f59e0b; --seg-none: #9ca3af;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #14181e; --fg: #e6e9ee; --muted: #9aa4b2; --border: #2c3440;
      --card: #1b2029; --card-hd: #222935; --th-bg: #20262f; --stripe: rgba(255,255,255,.03);
      --warn-fg: #fbbf24; --warn-bg: rgba(245,158,11,.10); --warn-bd: #d97706;
      --danger-fg: #f87171; --danger-bg: rgba(239,68,68,.10); --danger-bd: #dc2626;
      --info-fg: #93c5fd; --info-bg: rgba(59,130,246,.10); --info-bd: #2563eb;
      --seg-done: #34d399; --seg-hold: #fbbf24; --seg-none: #6b7280;
    }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--fg);
    font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
    line-height: 1.75; font-size: 16px;
  }
  main { max-width: 1040px; margin: 0 auto; padding: 40px 22px 60px; }
  .stack { display: flex; flex-direction: column; gap: 24px; }
  .stack-8 { display: flex; flex-direction: column; gap: 8px; }
  .stack-10 { display: flex; flex-direction: column; gap: 10px; }
  h1 { font-size: 1.7rem; margin: 0; }
  h2 { font-size: 1.28rem; margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
  h3 { font-size: 1.08rem; margin: 0; }
  p { margin: 0; }
  .secondary { color: var(--muted); }
  .small { font-size: .88rem; color: var(--muted); }
  code { background: var(--card-hd); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; font-size: .9em; }
  hr.divider { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }

  .callout { border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: 8px; padding: 14px 18px; }
  .callout .title { font-weight: 700; margin-bottom: 6px; }
  .callout.warning { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-fg); }
  .callout.info { background: var(--info-bg); border-color: var(--info-bd); color: var(--info-fg); }

  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .stat { border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; background: var(--card); }
  .stat .value { font-size: 1.45rem; font-weight: 700; }
  .stat .label { color: var(--muted); font-size: .9rem; }
  .stat.tone-warning .value { color: var(--warn-fg); }
  .stat.tone-danger .value { color: var(--danger-fg); }

  .usage-top { display: flex; justify-content: space-between; font-size: .88rem; color: var(--muted); margin-bottom: 6px; }
  .bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--border); }
  .bar .seg-done { width: 26.67%; background: var(--seg-done); }
  .bar .seg-hold { width: 53.33%; background: var(--seg-hold); }
  .bar .seg-none { width: 20%; background: var(--seg-none); }

  .cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--card); }
  .card .hd { font-weight: 700; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--card-hd); }
  .card .bd { padding: 12px 16px; }

  table { width: 100%; border-collapse: collapse; font-size: .95rem; }
  th, td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; vertical-align: top; }
  thead th { background: var(--th-bg); font-weight: 700; white-space: nowrap; }
  tbody tr:nth-child(even) { background: var(--stripe); }
  tr.tone-warning td:first-child { box-shadow: inset 4px 0 0 var(--warn-bd); }
  tr.tone-danger  td:first-child { box-shadow: inset 4px 0 0 var(--danger-bd); }
  tr.tone-info    td:first-child { box-shadow: inset 4px 0 0 var(--info-bd); }

  footer { max-width: 1040px; margin: 0 auto; padding: 0 22px 40px; font-size: .82rem; color: var(--muted); }
  @media (max-width: 760px) {
    .stats { grid-template-columns: 1fr 1fr; }
    .cards2 { grid-template-columns: 1fr; }
  }
</style>
</head>
<body>
<main class="stack">

  <div class="stack-8">
    <h1>视觉与美术审计</h1>
    <p class="secondary">对照现行美术圣经、素材状态清单、实机入包图与已登记待办。日期 2026-10-14。未跑游戏测试，结论来自静态读图与文档。</p>
  </div>

  <div class="callout warning">
    <div class="title">总判</div>
    <p>丑的主因不是「没有风格」，而是「圣经写的是手绘明快像素地牢，实机交付的是 AI 降采样角色 + 平涂 UI 皮 + 高噪棋盘」。立绘已裁为精细手绘像素（不是插画、不是两者折中）。参考游戏只取像素绘制语言，不取对方的砖、怪、色板当素材。整屏方向稿与地面 / 立绘密度同批锁。</p>
  </div>

  <div class="stats">
    <div class="stat"><div class="value">4 / 15</div><div class="label">素材已交付</div></div>
    <div class="stat tone-warning"><div class="value">8 / 15</div><div class="label">占位在役</div></div>
    <div class="stat tone-danger"><div class="value">3 / 15</div><div class="label">未开始</div></div>
    <div class="stat tone-warning"><div class="value">已冻格 / 未冻屏</div><div class="label">样张闸</div></div>
  </div>

  <div>
    <div class="usage-top"><span>十五件看板资产</span><span>已交付 4 · 占位 8 · 未开始 3</span></div>
    <div class="bar"><div class="seg-done"></div><div class="seg-hold"></div><div class="seg-none"></div></div>
    <p class="small" style="margin-top:8px">来源：美术素材状态清单 2026-10-06 对账。已交付 = 格子样张、主角三态、八敌站桩、状态图标。未开始 = 战斗一屏样张、连锁坍塌、封印特效。</p>
  </div>

  <h2>四条根因</h2>
  <div class="cards2">
    <div class="card">
      <div class="hd">1. 生产方法与风格目标拧着</div>
      <div class="bd"><p>现行角色是 ComfyUI 出图再块降采样，边缘脏、明暗糊成一团；主角棋盘小人还是插值糊图。用户要的是精细手绘像素：放大能数清像素簇，但脸和装备认得出。不是插画、也不是「半像素半高清」。</p></div>
    </div>
    <div class="card">
      <div class="hd">2. 第二 / 三关地板在跟数字抢读</div>
      <div class="bd"><p>第一关地面是均匀暖石噪，还能直画亮墨。幽暗与矿城地面是近黑斑加亮筋的双峰纹理——圣经自己写过「任何墨族直画不可救」，才上了色牌垫底。色牌能过对比机检，过不了「盯十分钟不累」。这是素材轴问题，不是再叠一层 UI。</p></div>
    </div>
    <div class="card">
      <div class="hd">3. UI 皮太薄，半拟物没穿上戏服</div>
      <div class="bd"><p>圣经要「容器穿石木戏服、数据素面」。实装是 48×48 米色点边面板、几乎同款按钮、空心仪式框。铺大之后接缝可见，全屏同一材质，标题又只有单字重——结果既不像物件，也不像干净 HUD。</p></div>
    </div>
    <div class="card">
      <div class="hd">4. 屏级没有北向图</div>
      <div class="bd"><p>格子样张冻过砖，战斗 / 菜单 / 营地整屏样张没出。占位条款写着不得跨里程碑，看板却把战斗一屏样张标成未开始。没有目标图，迭代只能修局部瑕疵（按钮五态、光柱、邻近采样），修不成气质。</p></div>
    </div>
  </div>

  <h2>逐项对照</h2>
  <table>
    <thead><tr><th>面</th><th>性质</th><th>现状（实机）</th><th>建议</th></tr></thead>
    <tbody>
      <tr class="tone-warning"><td>立绘与棋盘小人</td><td>已裁：精细手绘像素</td><td>现行是 AI 降采样的假像素，颗粒过粗且糊</td><td>仍是像素风：手绘像素簇 + 更高源密度；不是插画、也不是 HD-2D</td></tr>
      <tr class="tone-danger"><td>第二 / 三关棋盘</td><td>可读性</td><td>地板纹理双峰：近黑斑 + 近白筋，数字怎么换墨都累</td><td>重出幽暗 / 矿城地面：降局部对比，禁双峰</td></tr>
      <tr class="tone-warning"><td>UI 石皮九宫格</td><td>观感廉价</td><td>48×48 近乎平涂，铺到四百像素宽必出接缝</td><td>重出 96 或 128 源 + 对齐切片；先修仪式框与石板面板</td></tr>
      <tr class="tone-info"><td>战斗舞台背景</td><td>占位</td><td>平色 + 光柱，圣经已写 stage_bg.png 仍未产</td><td>一张 1280×270 地窟看台插画，三关只换色</td></tr>
      <tr class="tone-info"><td>营地柜台</td><td>占位</td><td>程序化木石块，与「全作最暖的营地」差一整档</td><td>贴图重构：烛光黄 × 木色，CC0 改色即可起步</td></tr>
      <tr class="tone-info"><td>字体层级</td><td>规格未兑现</td><td>全局单字重 Fusion Pixel，标题压不住正文</td><td>补第二字重，或标题用拉丁像素字专件</td></tr>
      <tr><td>格面徽章 / 意图 / 封印特效</td><td>占位</td><td>十九枚奖励徽、意图姿态、封印特效仍是符号或空</td><td>徽章与封印旗优先；意图先做蓄力一态即可</td></tr>
      <tr class="tone-warning"><td>整屏样张闸</td><td>缺尺子</td><td>格子样张已冻，战斗一屏样张未开工</td><td>先出战斗 / 营地 / 菜单方向稿，再动终稿资产</td></tr>
    </tbody>
  </table>
  <p class="small">已做过、不再当新债：全局邻近采样、按钮五态、标题屏光柱过渡、商店居中、营地四栏等高、诊断钮移出玩家画面、八敌显示体型分档。</p>

  <h2>建议施工顺序</h2>
  <p>先锁方向和尺子，再动会改变「第一眼」的三件终稿，最后才铺图标与演出。不要平行开动画大工程。</p>

  <h3>第一刀 · 两周内能改观感</h3>
  <table>
    <thead><tr><th>项</th><th>做什么</th><th>验收</th></tr></thead>
    <tbody>
      <tr class="tone-danger"><td>立绘口径（已裁）</td><td>精细手绘像素：邻近采样、可数的像素簇、限色；源密度高于现行 36–48 档；禁 AI 降采样当终稿</td><td>写入角色设计 + 圣经 §8.2；终值随整屏方向稿冻结</td></tr>
      <tr class="tone-warning"><td>战斗整屏方向稿（含地面）</td><td>一张静帧同时锁：站桩密度、三关地面、舞台、C 区、棋盘数字。地面与立绘不拆批</td><td>目检过气质再机检对比；这张图成为后续一切素材的北向</td></tr>
      <tr class="tone-danger"><td>UI 九宫格升源</td><td>panel / border / button 出 96 或 128 带真实石纹与圆角结构的切片</td><td>四百像素宽面板无错位小方块；按钮按压是结构下沉不是换一张平涂</td></tr>
    </tbody>
  </table>

  <h3>第二刀 · 把占位换成物件</h3>
  <table>
    <thead><tr><th>项</th><th>做什么</th><th>渠道</th></tr></thead>
    <tbody>
      <tr><td>舞台背景</td><td>一张 1280×270 地窟看台，三关 tint 换皮</td><td>插画一张即可</td></tr>
      <tr><td>营地柜台</td><td>木石柜台 + 钥石 / 三柜台图标终稿</td><td>CC0 改色过复用闸优先</td></tr>
      <tr><td>标题字重</td><td>第二字重或拉丁像素字专件</td><td>开源字体，不新生图</td></tr>
      <tr><td>奖励徽章十九枚</td><td>金满框 / 红缺框双通道小图标</td><td>脚本或手绘，勿再纯文字徽</td></tr>
      <tr><td>主角棋盘小人</td><td>从定稿立绘派生 32 源，邻近缩放，禁插值糊图</td><td>派生管线，已有审计旧账</td></tr>
    </tbody>
  </table>

  <h3>第三刀 · 可晚、不要用它救丑</h3>
  <p>站桩帧动画、连锁坍塌、意图三档表演、提灯点亮，都是锦上添花。静止形象难看时，补帧只会让同一张糊图在动。动画维持 Alpha 定版前完成即可，不插队。</p>

  <hr class="divider">

  <h2>圣经本身建议动的三处</h2>
  <div class="stack-10">
    <p>风格宣言「明快的地牢，轻快的扫荡，仔细的推理」可以保留。要改的是会把成品往脏、累、平里推的执行条款。</p>
    <p>一，角色允许双分辨率：棋盘与砖面严守像素整数倍；B 区站桩允许较高清插画或更高像素源。这与「高定宽随」兼容，也能结束「改回高清」和「像素风已定档」的假对立。</p>
    <p>二，第二 / 三关「更深更险」改走色相与材质，不走地板内部的黑白双峰。明度分层已经允许空间更暗，但暗要均匀，不能在格子里打斑马纹。</p>
    <p>三，口号型条款（约一半正文）先不要扩写新禁令。色相禁入带、蓝只说己方、红只说危险，对信息游戏有用；再加禁令只会让 UI 更褐、更平。缺的是整屏样张，不是新规则。</p>
  </div>

  <h2>明确不要做的</h2>
  <div class="cards2">
    <div class="card">
      <div class="hd">会浪费一轮的</div>
      <div class="bd"><p>先改战斗三区几何；先上满屏粒子；继续用同一套 AI 图再降一次采样当「升档」；把第二 / 三关问题当成叠暗角或换数字颜色就能解决。</p></div>
    </div>
    <div class="card">
      <div class="hd">已经做过的</div>
      <div class="bd"><p>邻近采样、按钮悬停 / 焦点、光柱软边、商店与营地留白、八敌体型分档、第一关高墙砖结构。这些该留，不是丑的主因。</p></div>
    </div>
  </div>

  <div class="callout info">
    <div class="title">参考池纠偏（待落圣经）</div>
    <p>Moonlighter / Peglin 只作像素画风示例，不规定暖砖、胖怪、洞穴色。Into the Breach 的「信息画在格子上」是玩法呈现，与「抄它的地块贴图」要拆开——后者是否同样降级，待用户确认。</p>
  </div>

  <p class="small">实机抽查过的入包图：主角立绘与棋盘待机、地精 / 熊地精 / 蛛化卓尔、三关地面各一、石板面板 / 石砖按钮 / 仪式框、锻造图标、攻击状态图标。冻结样张磁盘路径 <code>artwork/mockups/sample-batch-v3-final-2026-09-30.png</code> 本机未读到（旧审计 P0-1 死指涉仍在）。</p>

</main>
<footer>本页由 Cursor Canvas 组件页 <code>visual-art-audit.canvas.tsx</code>（会话「Game UI and art optimization」，2026-10-14）静态转换而来，内容与 canvas 终版逐字对应；行首色条对应原页 rowTone（红=最急、黄=警告、蓝=信息）。会话全文见 <code>design/art/美术审计-cursor会话存档-2026-10-14.md</code>。</footer>
</body>
</html>