Newer
Older
# Chapter 1 - Installing and hello world!
Kayak UI is quite easy to setup! First make sure you add it to your cargo.toml file in your project.
Because a crate has yet to be released this currently this looks like:
```toml
kayak_ui = { git = "https://github.com/StarArawn/kayak_ui/", rev = "9b212e230a5325a3ac6897390ded0bc358eebc80"}
Once you've added Kayak UI to your bevy project you can now start to use it! In order for you to copy and run this in your own project don't forget to move the `roboto.kayak_font` and the `roboto.png` files to your asset folder. Optionally you can also generate your own font! See: [Chapter 5 - Fonts](./chapter_5.md)
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
Hello World Example:
```rust
use bevy::prelude::*;
use kayak_ui::prelude::{widgets::*, *};
fn startup(
mut commands: Commands,
mut font_mapping: ResMut<FontMapping>,
asset_server: Res<AssetServer>,
) {
font_mapping.set_default(asset_server.load("roboto.kayak_font"));
commands.spawn(UICameraBundle::new());
let mut widget_context = KayakRootContext::new();
let parent_id = None;
// The rsx! macro expects a parent_id, a widget_context from the user.
// It also expects `Commands` from bevy.
// This can be a little weird at first.
// See the rsx! docs for more info!
rsx! {
<KayakAppBundle>
<TextWidgetBundle
text={TextProps {
content: "Hello World".into(),
..Default::default()
}}
/>
</KayakAppBundle>
}
commands.insert_resource(widget_context);
}
fn main() {
App::new()
.add_plugins(DefaultPlugins.set(ImagePlugin::default_nearest()))
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
.add_plugin(KayakContextPlugin)
.add_plugin(KayakWidgets)
.add_startup_system(startup)
.run()
}
```
## Wait where is the ECS?
Kayak UI encourages the use of our proc macro called `rsx!`. This proc macro simulates XML like syntax and turns it into bevy commands. This proc macro is completely optional though!
Here is the same hello world example but this time we'll use bevy's ECS directly.
```rust
use bevy::prelude::*;
use kayak_ui::prelude::{widgets::*, *};
fn startup(
mut commands: Commands,
mut font_mapping: ResMut<FontMapping>,
asset_server: Res<AssetServer>,
) {
font_mapping.set_default(asset_server.load("roboto.kayak_font"));
commands.spawn(UICameraBundle::new());
let mut widget_context = KayakRootContext::new();
let pre_existing_app_entity = widget_context.get_child_at(None);
let app_entity = if let Some(entity) = pre_existing_app_entity {
commands.get_or_spawn(entity).id()
} else {
commands.spawn_empty().id()
};
// Create default app bundle
let mut app_bundle = KayakAppBundle {
..Default::default()
};
// Create app's children
let mut children = KChildren::new();
// Create the text child
let pre_existing_text_entity = widget_context.get_child_at(Some(app_entity));
let text_entity = if let Some(entity) = pre_existing_text_entity {
commands.get_or_spawn(entity).id()
} else {
commands.spawn_empty().id()
};
commands.entity(text_entity).insert(TextWidgetBundle {
text: TextProps {
content: "Hello World".into(),
..Default::default()
},
..Default::default()
});
// Add the text as a child of the App Widget.
children.add(text_entity);
// Finalize app bundle and add to entity.
app_bundle.children = children;
commands.entity(app_entity).insert(app_bundle);
// Add app widget to context.
widget_context.add_widget(None, app_entity);
// Add widget context as resource.
commands.insert_resource(widget_context);
}
fn main() {
App::new()
.add_plugins(DefaultPlugins.set(ImagePlugin::default_nearest()))
.add_plugin(KayakContextPlugin)
.add_plugin(KayakWidgets)
.add_startup_system(startup)
.run()
}
```