2D 渲染:Sprite 与图集
《长风渡》的库房齐了,台上却还是老样子:上一章开机那天,水畔那道红色身影是 Sprite::from_color 变出来的色块,梢公是另一个色块——道具有了皮相,演员还没有。这天早上,原画师小棠抱着画夹进组,老雷只交代了一句:“给阿燕一张脸。”
这一章拆 Bevy 的 2D 渲染地基。从第 2 章那块会动的色块起,Sprite(精灵——2D 世界里一张会被摆放、缩放、染色的图)一直在场,但我们只用过它的两个便捷构造。现在把它整个翻开:
- Sprite 全解剖——把一张 32×40 的像素画放大上台,先糊后锐,顺手把染色、翻面、裁切、改尺寸试个遍;
- TextureAtlas(纹理图集)——把十二格“连环画”装进一张图,靠一个编号挑格子;帧动画就是按节拍拨编号,外加一桩编号越界的事故;
- Anchor(锚点)——钉子钉在画的哪个点上:镜头推近拉远时,脚还踩不踩得住台板;
- 九宫格与平铺——
SpriteImageMode:一块画框素材裱出任意尺寸的字幕框,一块贴片铺出整条江面,外加一次真报错; - bevy_color 调色间——
Color的十种色彩空间、混色为什么会混出脏色、现成色票与亮度色相的旋钮; - Mesh2d 与 ColorMaterial——不用画的道具:月亮、光晕这类几何形状现场“铸”出来,顺便认识洋红色的“缺料警告”;
- 带妆彩排——全部家伙什装进一台《渡口夜话》。
这些类型主要住在 bevy_sprite 与 bevy_color 两个 crate 里;图集的切格说明书 TextureAtlasLayout 在 bevy_image,2D 网格的渲染实现在 bevy_sprite_render——用的时候它们都从 bevy::prelude 里来,不用记这些门牌。
配套 crate 是 code/ch15-sprites,不需要任何新依赖。assets/ 里小棠的全部画稿——阿燕的十二格连环画、梢公的摇橹四帧、画框、水纹与桥板贴片——由 scripts/make_ch15_assets.py 一键生成,仓库里已经备好。所有画稿都是原始像素尺寸(角色一帧只有 32×40),这不是省事,是像素美术的惯例——放大的事交给引擎,这正是本章第一节要踩的坑。