DEVLOG.md

GitHub Farm - 开发记录

渲染引擎迭代

版本	方案	结果
v1-v4	SVG 几何 / Spritesheet clipPath / 独立精灵 / 固定背景+网格	废弃 - 效果差
v5-v6	concept-art 背景 + 精灵贴图 / 去白底	废弃 - 风格不统一
v7	concept-art 一体化背景 + 只叠加动态元素	废弃 - 作物无渐变
v8	干净农田背景 + Canvas 像素渲染 + 5阶段作物网格	当前

v8 关键设计

• 背景：farm_field_all_cleared.png（1216x832，AI 生成干净农田）
• 作物网格：7 列 × 8 行 = 56 格，52 周贡献按总量升序排列，低贡献→左列（种子），高贡献→右列（麦子）
• 5 阶段作物：种子(30x20) → 嫩芽(40x35) → 成长(55x55) → 高秆(65x80) → 麦子(70x100)
• 百分位自适应阈值：10%/25%/45%/65% 分位点，适配不同贡献强度的用户
• 精灵渲染：检测内容边界（跳过透明像素），按内容宽高比缩放，底部对齐
• 麦子 sprite：AI 生成高瘦像素风麦子（250x886，宽高比 0.28）

踩坑记录

问题	原因	解决
SVG 效果粗糙	SVG 不适合像素风	切换到 Canvas
精灵裁剪错位	AI 素材不是均匀网格	改为独立 PNG 文件
作物阶段无差异	固定阈值 + mock 数据分布集中	百分位自适应阈值
麦子太矮	sprite 宽高比 1.2（宽>高），按宽度缩放后高度不足	AI 生成高瘦麦子 sprite
透明边距影响缩放	sprite 包含大量透明 padding	内容边界检测
fetcher URL 拼写错误	graphlq → graphql	修复