Merge pull request #176 from StarArawn/native-msdf

Native msdf

assets/lato-light.kttf

+{
+    "file": "lato-light.ttf",
+    "char_range_start": "0x20",
+    "char_range_end": "0x7f"
+}
\ No newline at end of file

assets/roboto.kttf

+{
+    "file": "roboto.ttf",
+    "char_range_start": "0x20",
+    "char_range_end": "0x7f"
+}
\ No newline at end of file

book/src/chapter_6.md

@@ -4,7 +4,18 @@ Kayak UI uses SDF(signed distance fields) for rendering fonts. More specifically
 - Fast rendering!
 - No need for a new asset for each font size. MSDF's can size to any font size!
 
-Font's are stored as an atlased image and a json file which tells Kayak about the font glyphs. Check out `roboto.kayak_font` and `roboto.png` in the `assets` folder.
+Fonts are stored in two different ways. First a font can be defined as a Kayak TTF(kttf) file. 
+These font files are relatively simple and simply link to a ttf font:
+```json
+{
+    "file": "roboto.ttf",
+    "char_range_start": "0x20",
+    "char_range_end": "0x7f"
+}
+``` 
+The char range is a defined as u32 char values. 0x20 through 0x7f represents most of the standard English language characters. Font's using this method are processed in native rust into MSDF's. The output is cached as the generation can take a while. 
+
+Fonts are also stored as an atlased image and a json file which tells Kayak about the font glyphs. These fonts are generated using `msdf-atlas-gen`. Check out `roboto.kayak_font` and `roboto.png` in the `assets` folder. The cached file name will be located next to the kttf file and have the file format of: `{font_name}.kttf-cached.png`.
 
 ## Generating new fonts.
 In order to create a new font you need to use the `msdf-atlas-gen` tool. This can be found at:

examples/clipping.rs

@@ -6,7 +6,7 @@ fn startup(
     mut font_mapping: ResMut<FontMapping>,
     asset_server: Res<AssetServer>,
 ) {
-    font_mapping.set_default(asset_server.load("lato-light.kayak_font"));
+    font_mapping.set_default(asset_server.load("lato-light.kttf"));
 
     let image = asset_server.load("panel.png");
 

examples/conditional_widget.rs

@@ -109,7 +109,7 @@ fn startup(
     mut font_mapping: ResMut<FontMapping>,
     asset_server: Res<AssetServer>,
 ) {
-    font_mapping.set_default(asset_server.load("lato-light.kayak_font"));
+    font_mapping.set_default(asset_server.load("lato-light.kttf"));
 
     // Camera 2D forces a clear pass in bevy.
     // We do this because our scene is not rendering anything else.

examples/main_menu.rs

@@ -96,8 +96,9 @@ fn menu_button_render(
                         content: button_text,
                         size: 28.0,
                         user_styles: KStyle {
-                            top: Units::Stretch(1.0).into(),
-                            bottom: Units::Stretch(1.0).into(),
+                            // top: Units::Stretch(1.0).into(),
+                            top: Units::Pixels(-16.0).into(),
+                            height: Units::Pixels(40.0).into(),
                             ..Default::default()
                         },
                         ..Default::default()
@@ -120,7 +121,7 @@ fn startup(
     asset_server: Res<AssetServer>,
     mut preload_resource: ResMut<PreloadResource>,
 ) {
-    font_mapping.set_default(asset_server.load("lato-light.kayak_font"));
+    font_mapping.set_default(asset_server.load("lato-light.kttf"));
 
     let mut widget_context = KayakRootContext::new();
     widget_context.add_plugin(KayakWidgetsContextPlugin);

examples/simple_state.rs

@@ -83,7 +83,7 @@ fn startup(
     mut font_mapping: ResMut<FontMapping>,
     asset_server: Res<AssetServer>,
 ) {
-    font_mapping.set_default(asset_server.load("lato-light.kayak_font"));
+    font_mapping.set_default(asset_server.load("lato-light.kttf"));
 
     // Camera 2D forces a clear pass in bevy.
     // We do this because our scene is not rendering anything else.

kayak_font/Cargo.toml

@@ -18,6 +18,11 @@ bevy_renderer = ["bevy"]
 anyhow = { version = "1.0" }
 nanoserde = "0.1.30"
 unicode-segmentation = "1.10.0"
+num = "0.4"
+num-derive = "0.3"
+num-traits = "0.2"
+ttf-parser = "0.17"
+image = "0.24"
 
 # Provides UAX #14 line break segmentation
 xi-unicode = "0.3"

kayak_font/assets/roboto.kttf

+{
+    "file": "roboto.ttf",
+    "char_range_start": "0x20",
+    "char_range_end": "0x7f"
+}
\ No newline at end of file

kayak_font/examples/bevy.rs

@@ -18,7 +18,7 @@ const FONT_SIZE: f32 = 24.0;
 const INITIAL_SIZE: Vec2 = Vec2::from_array([400.0, 300.0]);
 const INITIAL_POS: Vec2 = Vec2::from_array([-200.0, 0.0]);
 const INSTRUCTIONS: &str =
-    "Press 'A' and 'D' to shrink and grow the text box.\nPress 'Space' to cycle text alignment.";
+    "Press 'A' and 'D' to shrink and grow the text box.\nPress \"Space\" to cycle text alignment.";
 
 #[derive(Component)]
 struct Instructions;
@@ -26,7 +26,8 @@ struct Instructions;
 fn startup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn(Camera2dBundle::default());
 
-    let font_handle: Handle<KayakFont> = asset_server.load("roboto.kayak_font");
+    let font_handle: Handle<KayakFont> = asset_server.load("roboto.kttf");
+    // let font_handle: Handle<KayakFont> = asset_server.load("roboto.kayak_font");
 
     commands
         .spawn(Text {

kayak_font/src/atlas.rs

@@ -6,6 +6,12 @@ pub enum SDFType {
     Msdf,
 }
 
+impl Default for SDFType {
+    fn default() -> Self {
+        Self::Msdf
+    }
+}
+
 #[derive(DeJson, Debug, Copy, Clone, PartialEq, Eq)]
 pub enum Origin {
     #[nserde(rename = "bottom")]
@@ -18,7 +24,13 @@ pub enum Origin {
     Top,
 }
 
-#[derive(DeJson, Debug, Copy, Clone, PartialEq)]
+impl Default for Origin {
+    fn default() -> Self {
+        Self::Bottom
+    }
+}
+
+#[derive(DeJson, Default, Debug, Copy, Clone, PartialEq)]
 pub struct Atlas {
     #[nserde(rename = "type")]
     pub sdf_type: SDFType,

kayak_font/src/bevy/font_texture.rs

@@ -22,7 +22,7 @@ pub fn init_font_texture(
     let not_processed_fonts = not_processed.drain(..).collect::<Vec<_>>();
     for font_handle in not_processed_fonts {
         if let Some(font) = fonts.get(&font_handle) {
-            if let Some(mut texture) = images.get_mut(&font.atlas_image) {
+            if let Some(mut texture) = images.get_mut(font.image.get()) {
                 texture.texture_descriptor.format = TextureFormat::Rgba8Unorm;
                 texture.sampler_descriptor = ImageSampler::Descriptor(SamplerDescriptor {
                     label: Some("Present Sampler"),