位图、矢量、透明通道与字体：素材如何变成画面

依据：官方文档与本站教学拆解｜环境：图片与字体资源；示例为概念估算｜真机：未验证

磁盘上的文件、GPU 使用的纹理和屏幕上的像素，是三件不同的东西。一张很小的压缩图片，解码后仍可能占用很大的像素缓冲。一个清晰的矢量图标，也可能在进入目标引擎之前被转换成固定分辨率纹理。

位图存像素，矢量存形状

PNG、JPEG 等常见位图记录离散像素；矢量图记录路径、填充和其他绘图描述。位图缩放时需要采样，放大后不会凭空获得细节。矢量的几何轮廓可以按目标尺寸重新绘制，但渐变、滤镜、字体和复杂路径仍受具体渲染器支持限制。

游戏引擎中的 Sprite 通常使用纹理。即便源文件是矢量，最终也可能先栅格化再上传 GPU。应该确认实际导入结果，而不是只根据扩展名判断“任何尺寸都清晰”。

未压缩 RGBA8 的基础估算是宽乘高乘四字节。一张 1024×1024 图片约为 4 MiB 的基础像素数据；这只是计算示例，不包含 mipmap、额外副本、驱动开销或引擎元数据。纹理压缩格式的占用另算，平台支持也不同。

透明边缘也要检查。假如半透明像素周围的 RGB 颜色处理不当，缩放或滤波后可能出现暗边、白边。预乘透明度是把 RGB 预先乘以 alpha 的表示方式；资源和混合状态必须匹配，不能仅凭“透明 PNG”就认为没有问题。

系统字体依赖设备字体与排版；随包字体带来文件和加载成本；位图字体通过字形图集绘制，常用于风格固定的数字与短文本。中文字符集较大，不能照搬只包含十个数字的方案。字体授权、缺字、替代字体以及动态内容范围都要提前确认。

倍率越高通常意味着更多像素。某些素材在屏幕里只有很小的显示区域，统一高倍率只增加加载和内存，并不带来可见收益。相反，某个被放大展示的角色图可能确实需要更高分辨率。按最大显示尺寸、设备像素比与视觉重要性分别制定规格。

展开：用代码估算基础像素数据

function rgba8MiB(width: number, height: number) {
  return width * height * 4 / (1024 * 1024);
}
// 示例计算，不是实际设备测量：1024×1024 → 4 MiB

PNG 规范：颜色与透明度、SVG 规范、Cocos 纹理资源提供格式与导入依据。继续阅读图集与九宫格，观察资源如何组合进入界面。