Bevy SVG map

Load paths from an SVG 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 programmatically to Bevy!

Notice that it has some problems to transform the units to the world and it's far from being production-ready!

Getting started

Add the library to your project's Cargo.toml (check last published version):

[dependencies]
bevy_svg_map = "0.1"

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();
    App::build()
          .add_default_plugins()
          .add_startup_system(setup.system())
          .run();
}

fn setup(commands: Commands, materials: ResMut<Assets<ColorMaterial>>) {
    load_svg_map(commands, materials, "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 {r: 1f32, g: 0f32, b: 0f32, a: 0f32}
        }
    }
}

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 will be applied to... well.. decide its color.

Finally, to provide some actually useful functionality, we can apply arbitrary functions to each component created from the path.

// ... same as before

// 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, comp: &mut Commands) {
    // use the stroke opacity to decide the kind of Collider
      comp.with(
          if style.stroke_opacity().unwrap() == 1.0 {
              Collider::Solid
          } else{
              Collider::Scorable
          }
      );
  }
}

Check out more properties to extract from SvgStyle in the documentation!

Troubleshooting

Set up your Document Properties (in Inkscape Ctrl+Shift+D) to pixels so that you get the right world units.

Features

• Load Horizontal and Vertical lines.
• Load other types of svgtypes PathSegments.
• Provide a strategy trait to use the style to add Components and materials.
• Handling of units.