来源
创意来源于纽约时报的数独游戏, 用三周空闲时间用bevy复刻了一遍.
完成效果
以下是开发时记录的笔记内容.
从模板生成项目
从github bevy_game_template生成项目
克隆下来
git clone [email protected]:foxzool/nyt_sudoku.git
按照文档更新todo项目和图标
其中转换图标使用了ImageMagick和libicns这两个库
加载数独解析库
sudoku = "0.8.0"UI布局
原游戏使用传统的网页css flex布局, bevy也可以用类似的布局代码进行设置, 但由于没有css继承, 多了很多复制代码. 希望下一代布局系统 bsn 会改进.
文字渐隐效果
由于 Visibility::Hidden的node无法触发鼠标事件, 所以文字node都是设置alpha值
字体
目前bevy不支持WOFF2字体, 所以都是用工具将WOFF2字体转为ttf.
目前bevy使用的cosmic-text渲染还未支持font weight, 所以找了解决原字体字号权重的字体进行显示.
SVG
原游戏的图片都是SVG, 目前bevy原生不支持SVG, 有第三方库bevy_svg(https://github.com/Weasy666/bevy_svg), 但它使用2d和3d的坐标系,不使用Node, 这次画数独格子时用了grid布局, 所以是找了一些近似的图片Png进行显示.
UI动画
目前AnimatableProperty还不支持Node, 所以这次的动画还是用的system和timer来模拟动画移动效果.
颜色
传统的css hex颜色可以用下面的方法表示
Color::Srgba(Srgba::hex("6ba1dd").unwrap())迭代entity所有祖先/后代
使用iter_ancestors和iter_descendants, 对UI里快速查找entity祖先/后代的相关组件很有帮助. 这里的方法是广度优先, 查询深度优先有类似depth_first的方法.
Trigger vs Event
这次游戏因为大部分逻辑都是和某一个格子相关,所以用了大量的trigger_targets.
使用下来, 如果事件需要由某些指定的entity处理, 使用trigger, 处理trigger 的system最好也就一个, 多了不好处理先后逻辑.
泛型系统
多使用泛型处理相同的system
app.add_systems(
Update,
(
show_candidates::<AutoCandidates, AutoCandidateCellMarker>,
show_candidates::<ManualCandidates, ManualCandidateCellMarker>,
);