Crate for loading SVG files directly into bevy. The properties of the lines (color, opacity, fill…) can be used to programmatically add functionality, setting the foundation for a very weird workflow: Vector Graphics as editor to bevy entities!
If you are looking for a plugin that loads SVGs, you may want to take a look at bevy_svg.
Add the library to your project's Cargo.toml (check last published version,
it corresponds to the stable version on the branch crates.io):
[dependencies]
bevy_svg_map = "0.2"If you want the bleeding edge (corresponds to master):
[dependencies]
bevy_svg_map = {git="https://github.com/carrascomj/bevy_svg_map.git"}
⚠️ The master branch points to each master branch of bevy. Use with caution!
The library provides a function to be used inside a bevy's startup_system.
Here, we are loading the file ex.svg under the assets/ directory.
use bevy_svg_map::load_svg_map;
use bevy::prelude::*;
// We need to provide a struct implementing the StyleStrategy
// leave it as default, we'll come back to this later
struct MyStrategy;
impl StyleStrategy for MyStrategy {}
fn main() {
App::build()
.add_default_plugins()
.add_startup_system(setup.system())
.run();
}
fn setup(mut com: Commands, mat: ResMut<Assets<ColorMaterial>>, mesh: ResMut<Assets<Mesh>>) {
load_svg_map(com, mat, mesh, "assets/ex.svg", MyStrategy);
}That should display some lines as in the image on the top. However, they are plain
black (default for StyleStrategy). What about using the colors from the SVG
path strokes?
// we're now also using SvgStyle
use bevy_svg_map::{load_svg_map, StyleStrategy, SvgStyle};
use bevy::prelude::*;
struct MyStrategy;
impl StyleStrategy for MyStrategy {
// implement this trait method
fn color_decider(&self, style: &SvgStyle) -> Color {
match style.stroke() {
Some(c) => c,
// add red lines if the Color could not be parsed from the SVG
_ => Color::RED,
}
}
}OK, that's a bit more interesting. Notice how SvgStyle exposes properties of
the style of the SVG path. For each of these paths, the color_decider
function is applied to… well… decide its color.
Finally, to provide some actually interesting functionality, we can apply arbitrary functions to each component created from the path.
// ... same as before
use bevy::ecs::system::EntityCommands;
// This Component will be added to each SpriteComponents created from a path
enum Collider {
Scorable,
Solid,
}
impl StyleStrategy for MyStrategy {
// implement this trait method
fn color_decider(&self, style: &SvgStyle) -> Color {
// same as before
}
fn component_decider(&self, style: &SvgStyle, mut comp: EntityCommands) {
// use the stroke opacity to decide the kind of Collider
comp.insert(
if style.stroke_opacity().unwrap() == 1.0 {
Collider::Solid
} else{
Collider::Scorable
}
);
}
}Check out more properties to extract from SvgStyle in the documentation!
- Set up your Document Properties (in Inkscape Ctrl+Shift+D) to pixels so that you get the right world units.
- See this comment about setting SVG output.
- Load Horizontal and Vertical lines.
- Load other types of svgtypes
PathSegments. - Provide a strategy trait to use the style to add Components and materials.
- Basic shapes.
- Handling of units.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent