#css #bevy-ui #bevy #style #themes #ui

tomt_bevycss

基于bevy_ecss的扩展和修复。允许使用CSS的更宽子集与Bevy ECS交互。现在支持Bevy 0.12!

7个版本

0.6.1 2024年1月20日
0.6.0 2024年1月19日
0.5.1 2023年10月12日
0.5.0 2023年8月4日
0.4.1 2023年6月22日

685游戏开发

每月37次下载

MIT/Apache

690KB
3K SLoC

TOMT_BevyCSS BevyECSS Bevy

MIT/Apache 2.0 Realease Doc Rust Crate Bevy tracking

TOMT BevyCSS

什么是TOMT BevyCSS?

TOMT BevyCSS是一个由Bevy ECSS派生的分支项目,它允许使用CSS的子集与bevy_ecs交互。它主要针对为bevy_ui应用样式,但可以通过实现自定义属性由任何组件使用。

此项目分支的主要目标如下

  • 为下游crate提供更频繁的更新
  • 改进并扩展现有文档、测试和示例,以供下游用户使用
  • 扩展BevyECSS目前提供的功能集

包名?

  • TOMT = Many Things Tome
  • BevyCSS = Bevy + CSS,此库将CSS功能引入Bevy UI

谁是TOMT(Many Things Tome)?

Many Things Tome是一个小型友谊小组,拥有各种互联网项目,主要关注Many Things Tome YouTube频道。

此库项目由TheBeardedQuack(GitHubYouTube)提供,从BevyECSS分支而来,并发布在相同的MIT和Apache v2.0许可证下,以允许继续自由使用、修改和分发。

此crate标志着Many Things Tome的第一个公开版本。

与BevyECSS的变更

版本 变更日志
0.4.0
  • 修复
    • 尊重CSS规则顺序
  • 功能
    • 支持伪类
      • 支持交互组件上的:hover:click
      • 目前未实现其他伪类
    • 支持伪属性的占位符
      • 目前未实现伪属性
    • 根据ECS变更重新应用样式(添加/修改UI节点)
    • auto 关键字的额外上下文
  • 文档
    • 在示例 "主题" 中添加了伪类交互
    • 添加了一个示例,专门演示伪类的支持
0.4.1
  • 文档
    • 将 ReadMe 分解成更小的文档
    • 分支后更新了项目引用
0.4.2
  • 修复
    • 在触发 Changed<> 时优化了 select_entities(),仅搜索修改节点的直接祖先和子节点
  • 文档
    • 添加了项目的变更日志和未来目标
    • 项目分支后修复了损坏的文档链接
0.5.0
  • 依赖项
    • bevy - 更新到 0.11
    • bevy_editor_pls - 删除直到更新为 bevy 0.11
    • cssparser - 更新到 0.30.0
  • 功能
    • overflow CSS 属性拆分为 overflow-xoverflow-y,以反映对 bevy::ui::Overflow 的更改
  • 修复了
    • 修复了导致某些 UI 项目直到更新后没有应用样式的错误
  • 文档
    • bevy 0.10 和 0.11 之间的更改详情(主要在上述功能中)
    • 对 readme 的格式和措辞进行了一些小的修改
    • 在跟踪日志输出中添加了实体 #,以帮助诊断问题
0.5.1
  • 修复了
    • 修复了导致某些 UI 项目直到单独更新后没有应用样式的错误(同时应用许多样式导致覆盖)
0.6.0
  • 依赖项
    • bevy - 更新到 0.12
    • bevy_editor_pls - 恢复并更新到 0.7
0.6.1
  • 文档
    • 修复了最新的 readme 中的某些错误

未来目标

  • 更新 crate 依赖项
  • 将修复程序回滚到 BevyECSS
  • 高级语言支持(LESS / SCSS / SASS)
  • 添加 CSS 颜色函数

入门(使用方法)

要使用 TOMT_BevyCSS,只需向任何实体添加一个包含已加载 css 文件的 StyleSheet 即可。所有样式表规则都将应用于实体及其 所有 后代(子子的子节点等)。

use bevy::prelude::*;
use tomt_bevycss::prelude::*;

fn setup_awesome_ui(
    root: Entity,
    mut commands: Commands,
    asset_server: Res<AssetServer>
) {
    commands
        .entity(root)
        .insert(StyleSheet::new(asset_server.load("sheets/awesome.css")));
}

就是这样,现在你的 UI 真的会看起来非常 出色

CSS 支持

这个 crate 旨在首先支持最常见的 CSS 功能,并在提供建议的情况下逐渐添加更多功能。目前这意味着仅提供 CSS 功能的一部分。

要查看目前支持的 CSS 功能,请参阅 CSS 支持(docs/css-support.md)。

自定义组件选择器

TOMT_BevyCSS 支持自定义组件选择器,因此您不仅限于 bevy 提供的组件。

如果您需要一个目前不支持的核心 bevy 组件作为选择器,此功能也可以用来自行实现支持。如果您决定为任何 bevy 内置组件创建自定义选择器,我们会非常感激您的 pull requests。

app.register_component_selector::<MyComponent>("selectorname");

有关更多信息,请参阅 自定义组件(docs/custom-components.md)。

自定义属性

TOMT_BevyCSS 支持自定义属性设置器。

结合上述自定义组件选择器,您可以使用 CSS 系统进行更多操作,而不仅仅是样式。

#[derive(Default)]
pub(crate) struct MyProperty;

impl Property for MyProperty
{
    /* For implementation details please see:
       https://github.com/TheBeardedQuack/tomt_bevycss/tree/main/docs/custom-properties.md
    */
}

fn main()
{
    let mut app = App::new();
    app.register_property::<MyProperty>();
}

有关更多信息,请参阅 自定义属性(docs/custom-properties.md)。

Bevy 支持表

bevy tomt_bevycss
0.8 0.1
0.9 0.2
0.10 0.3
0.10 0.4.x
0.11 0.5.x
0.12 0.6.x

贡献

有想法、反馈、问题或发现了错误吗?随时欢迎在GitHub上打开一个问题!

许可协议

TOMT_BevyCSS采用双重许可协议,可以是以下其中之一:

这意味着您可以选择您偏好的许可协议!这种双重许可方法在Rust生态系统中是事实上的标准,并且有很好的理由包括两者。

特别感谢

我想对那些为这个crate的开发做出贡献的人表示衷心的感谢。

  • Leinnan - Bevy 0.12 支持
  • cntheat - 每个版本的测试和反馈,以及一个实际的游戏

依赖项

~41–74MB
~1.5M SLoC