Skip to content
Snippets Groups Projects
Commit 47d84910 authored by StarArawn's avatar StarArawn
Browse files

Updated the README a bit more.

parent bdb4fbef
No related branches found
No related tags found
No related merge requests found
...@@ -20,7 +20,7 @@ Kayak UI is in the very early stages of development. Important features are miss ...@@ -20,7 +20,7 @@ Kayak UI is in the very early stages of development. Important features are miss
- Basic widget and global state management - Basic widget and global state management
- Input events - Input events
- Fast and accurate layouts using morphorm: https://github.com/geom3trik/morphorm - Fast and accurate layouts using morphorm: https://github.com/geom3trik/morphorm
- A bunch of default widgets check out `kayak_widgets`! - A few default widgets check out [kayak_widgets](./kayak_widgets)!
- Style system built to kind of mimic CSS styles. - Style system built to kind of mimic CSS styles.
- Image and Nine patch rendering. - Image and Nine patch rendering.
...@@ -32,8 +32,11 @@ Kayak UI is in the very early stages of development. Important features are miss ...@@ -32,8 +32,11 @@ Kayak UI is in the very early stages of development. Important features are miss
- Fully integrated into bevy to capture input events, use bevy assets(images, etc). - Fully integrated into bevy to capture input events, use bevy assets(images, etc).
## Missing features ## Missing features
- Tree diffing - Widget diffing see issue: https://github.com/StarArawn/kayak_ui/issues/1
- Removing of widgets. - Removal of widgets.
- More default widgets.
- More events(keyboard events, etc)
- Vec widgets IE: `{some_vec.map(|my_string| <Text content={my_string} />)}`
## Example Screenshot ## Example Screenshot
<img src="images/screen1.png" alt="Kayak UI" width="600" /> <img src="images/screen1.png" alt="Kayak UI" width="600" />
...@@ -56,7 +59,7 @@ rsx! { ...@@ -56,7 +59,7 @@ rsx! {
You can easily declare your own custom widgets: You can easily declare your own custom widgets:
```rust ```rust
#[widget] #[widget]
pub fn MyCustomWidget(children: Children, styles: Option<Style>) { pub fn MyCustomWidget(children: Children) {
rsx! { rsx! {
<> <>
{children} {children}
...@@ -66,27 +69,27 @@ pub fn MyCustomWidget(children: Children, styles: Option<Style>) { ...@@ -66,27 +69,27 @@ pub fn MyCustomWidget(children: Children, styles: Option<Style>) {
``` ```
## Widget State ## Widget State
Widget's can create their own state and will re-render when that state changes.
```rust ```rust
#[widget] #[widget]
fn Counter(context: &mut KayakContext) { fn Counter(context: &mut KayakContext) {
let count = { let count = context.create_state(0i32).unwrap();
let x = context.create_state(0i32).unwrap(); // Since we move the variable into the closure we need to clone here.
*x // Similar cost to cloning an Arc
}; let cloned_count = count.clone();
let id = self.get_id();
let on_event = OnEvent::new(move |context, event| match event.event_type { let on_event = OnEvent::new(move |context, event| match event.event_type {
EventType::Click => { EventType::Click => {
context.set_current_id(id); cloned_count.set(cloned_count.get() + 1);
context.set_state(count + 1);
} }
_ => {} _ => {}
}); });
let count_text = format!("Current Count: {}", count.get());
rsx! { rsx! {
<> <>
<Window position={(50.0, 50.0)} size={(300.0, 300.0)} title={"Counter Example".to_string()}> <Window position={(50.0, 50.0)} size={(300.0, 300.0)} title={"Counter Example".to_string()}>
<Text size={32.0} content={format!("Current Count: {}", count).to_string()} /> <Text size={32.0} content={count_text} />
<Button on_event={Some(on_event)}> <Button on_event={Some(on_event)}>
<Text size={24.0} content={"Count!".to_string()} /> <Text size={24.0} content={"Count!".to_string()} />
</Button> </Button>
...@@ -94,4 +97,50 @@ fn Counter(context: &mut KayakContext) { ...@@ -94,4 +97,50 @@ fn Counter(context: &mut KayakContext) {
</> </>
} }
} }
``` ```
\ No newline at end of file
Widget's can also access global state and when the global state is bound to the widget it will auto re-render:
```rust
#[widget]
fn Counter(context: &mut KayakContext) {
let global_count = {
if let Ok(world) = context.get_global_state::<World>() {
if let Some(global_count) = world.get_resource::<Binding<GlobalCount>>() {
global_count.clone()
} else {
return;
}
} else {
return;
}
};
// Binds the global state to the widget.
// When `global_count.set()` is called the Counter widget will auto re-render.
context.bind(&global_count);
let global_count = global_count.get().0;
rsx! {
<>
<Window position={(50.0, 50.0)} size={(300.0, 300.0)} title={"Counter Example".to_string()}>
<Text size={32.0} content={format!("Current Count: {}", global_count).to_string()}>{}</Text>
</Window>
</>
}
}
// Example bevy system:
fn count_up(global_count: Res<Binding<GlobalCount>>) {
global_count.set(GlobalCount(global_count.get().0 + 1));
}
```
## Creating new fonts
The `bevy_kayak_ui` renderer uses MSDF fonts in order to render crisp and accurate fonts at different scales without needing to re-rasterize the font. In order to generate custom fonts you need to use the following tool:
https://github.com/Chlumsky/msdf-atlas-gen
To generate a font run the following command:
```
.\msdf-atlas-gen.exe -font .\font_name.ttf -type msdf -minsize 32 -format png -imageout font_name.png -json font_name.json
```
Where font_name is the name of your font. You can play around with the different parameters that are provided but keep in mind that some of the font stuff is currently hardcoded and might result in graphical glitches if you change the settings too much. You should also try to use a decent size for the `minsize` parameter. The smaller the size the more artifacts will appear in the text.
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment