Repository navigation
[TemportalEngine] Integrating from scratch #52
Replies: 11 comments 82 replies
|
oh, that's because before running render engine you should run layout engine (most renderers require layout to be constructed first, especially tesselate renderer since it uses built layout to place renderables in UI space, either triangles or texts) - take a look at tetra's simple host update method: https://github.com/RAUI-labs/raui/blob/master/raui-tetra-renderer/src/simple_host.rs#L106 i think we should emphasize that in the docs, gonna put that on TODO! thanks for bringing that issue up <3 |
|
oh wait, i'm brain damaged - do you run gonna make sure |
|
AH that must be it. No I have not called |
|
SUCCESS: |
|
yeah, the module docs thankfully talk a lot about the proper use and order of RAUI engines :D huge kudos to @zicklag for the docs! :D |
|
AH HA new docs! |
|
Got a couple questions today which are tangentially related to each other:
|
|
I dont see how the depth test would help address clip push/pop if the clip batches are meant to apply to things like scroll boxes. From what zicklag said, it sounds like the z-order is a part of just the order in which batches exist whereas clips are used to prevent internal elements from going outside a box (like the viewport of a scrolling area). |
|
i mean, you've said stencil is expensive in vulkan (it is pretty cheap in opengl), i don't know if that's true but my point about replacing stencil test with depth test is that you can easily replace this particular stencil operation with depth test and it is proven to be really cheap everywhere. so the idea was only about replacement if somehow stencil is not efficient in vulkan. |
|
Ah I gotcha. I gotta do more investigating into it (currently just getting text rendering). I doubts its expensive but its needed up-front to create a pipeline. So if I tried to use stencils up-front, I'd have to create a pipeline every time a clip is pushed (which seems bad). The correct answer is probably somewhere along the lines of a push constant or dynamic state for the stencil test. I'll investigate more when I get around to implementing clips. |
|
Ah ha vulkan allows pipelines to say their scissor is dynamic, which means the scissor can be set per draw call via https://www.khronos.org/registry/vulkan/specs/1.2-extensions/man/html/vkCmdSetScissor.html |
|
To wrap back around to this thread about clipping, I've got dynamic scissor states working as expected with clip batches! |
|
Is there a particular set of widgets which can be used to test each batch type? obviously Tangentially, what are the |
None just means nothing, I don't actually know why it's a batch, though. And FontTriangles are used if you use a font tesselator to render text as a triangle mesh instead of externally rendering it using a texture or something like that. RAUI doesn't come with a text tesselator yet, though, so it isn't used anywhere that I know of at the moment.
You can create an For clipping you could try a It's good to have a UI that you can test back and forth between the Tetra renderer and your own to see whether or not yours looks like the Tetra one. |
|
So using Code Example (there are other things in this tree, this is just an excerpt)(vertical_box [
(#{"row1column1"} text_box: { Props::new(TextBoxProps {
text: "C".to_owned(),
color: utils::Color {
r: 0.0,
g: 0.0,
b: 1.0,
a: 1.0,
},
font: TextBoxFont {
name: "unispace".to_owned(),
size: 30.0,
},
.. Default::default()
}) })
(#{"row2colum1"} image_box: { Props::new(ImageBoxProps {
width: ImageBoxSizeValue::Fill,
height: ImageBoxSizeValue::Fill,
content_keep_aspect_ratio: None,
material: ImageBoxMaterial::Color(ImageBoxColor {
color: ui::utils::Color { r: 0.5, g: 1.0, b: 0.0, a: 1.0 },
scaling: ImageBoxImageScaling::Stretch,
}),
transform: Transform {
pivot: Vec2 { x: 0.0, y: 0.0 },
align: Vec2 { x: 0.0, y: 0.0 },
translation: Vec2 { x: 0.0, y: 0.0 },
rotation: 0.0,
scale: Vec2 { x: 0.0, y: 0.0 },
skew: Vec2 { x: 0.0, y: 0.0 },
},
}) })
])Tesselation vertices: I'd expect the position of the various vertices to be different because they represent the 4 corners of the box, but instead they are all <640, 360> (the top left of that element) |
|
I don't know of any way to get the matrix for a specific item. 🤔 You can use the As far as why it might be zero sized, maybe the |
|
Changing it to Detailssystem.apply_tree(widget! {
(horizontal_box [
(vertical_box [
(#{"hello_world"} text_box: { Props::new(TextBoxProps {
text: "Hello World!".to_owned(),
color: utils::Color {
r: 0.0,
g: 1.0,
b: 1.0,
a: 1.0,
},
font: TextBoxFont {
name: "unispace".to_owned(),
size: 100.0,
},
.. Default::default()
}) })
(#{"item2"} text_box: { Props::new(TextBoxProps {
text: "item 2\nand another line".to_owned(),
color: utils::Color {
r: 1.0,
g: 0.0,
b: 0.0,
a: 1.0,
},
font: TextBoxFont {
name: "unispace".to_owned(),
size: 20.0,
},
.. Default::default()
}) })
(#{"item3"} text_box: { Props::new(TextBoxProps {
text: "fdsa".to_owned(),
color: utils::Color {
r: 1.0,
g: 1.0,
b: 1.0,
a: 1.0,
},
font: TextBoxFont {
name: "unispace".to_owned(),
size: 20.0,
},
.. Default::default()
}) })
])
(vertical_box [
(#{"row1column1"} text_box: { Props::new(TextBoxProps {
text: "C".to_owned(),
color: utils::Color {
r: 0.0,
g: 0.0,
b: 1.0,
a: 1.0,
},
font: TextBoxFont {
name: "unispace".to_owned(),
size: 30.0,
},
.. Default::default()
}) })
(#{"row2colum1"} image_box: { Props::new(ImageBoxProps {
width: ImageBoxSizeValue::Fill,
height: ImageBoxSizeValue::Fill,
content_keep_aspect_ratio: None,
material: ImageBoxMaterial::Color(ImageBoxColor {
color: Color { r: 0.5, g: 1.0, b: 0.0, a: 1.0 },
scaling: ImageBoxImageScaling::Stretch,
}),
transform: Transform {
pivot: Vec2 { x: 0.0, y: 0.0 },
align: Vec2 { x: 0.0, y: 0.0 },
translation: Vec2 { x: 0.0, y: 0.0 },
rotation: 0.0,
scale: Vec2 { x: 0.0, y: 0.0 },
skew: Vec2 { x: 0.0, y: 0.0 },
},
}) })
])
])
}); |
|
Oh I goofed real hard. My scale was set to 0%, and changing it to |
|
Why in the world are there two separate definitions of |
now that i think about it, i should definitely change its name to something different or just replace all these Position, TexCoord and Color into Vec2 and Color directly from core 🤔 original idea was to make it explicit to the user what these stand for, but we could document it and that will give same explanation. |
|
It also might be nice to move it into like a top-level |
|
ok, i'm gonna make a change now to replace these intermediate types into Vec2 and Color from core. |
|
yeah, good point about moving utils to root level module |
|
just pushed code refactoring of tesselation renderer to next branch |
|
When displaying an image box, is there any support atm for 9-sliced images, so I could provide a texture id and say that the image box renders the image with "right", "left", "top", and "bottom" border width and anything between those padding is stretched to fill the center area of the widget? |
|
AH It appears I have neglected to populate my image_sizes :P |
|
🎉 :D |
|
Is there a way to flip an image? I've tried using various bits of the image box transform, but when applying a x scale of -1, the image is no longer rendered (is it flipping the triangle render order??) |
|
Maybe you have backface culling on? |
|
Ah yup, my image pipeline had backface culling turned on |
|
I'm finding the I do like how the properties for widgets use a rust builder-esk syntax, its just a bummer that the widgets dont follow through with the same pattern. Its easier for me to read the builder pattern than it is to understand how this macro syntax parses the tree. |
|
Here's a working example using a builder style: use raui::prelude::*;
use raui_quick_start::RauiQuickStartBuilder;
fn main() {
RauiQuickStartBuilder::default()
.window_title("RAUI Builder".into())
.widget_tree(WidgetNode::Component(make_widget!(app)))
.build()
.expect("Error building quick start")
.run()
.expect("Error running RAUI app");
}
fn app(_ctx: WidgetContext) -> WidgetNode {
WidgetNode::Component(
make_widget!(content_box).listed_slot(
make_widget!(size_box)
.with_props(SizeBoxProps {
height: SizeBoxSizeValue::Exact(200.),
width: SizeBoxSizeValue::Exact(200.),
..Default::default()
})
.with_props(ContentBoxItemLayout {
align: 0.5.into(),
..Default::default()
})
.named_slot(
"content",
make_widget!(image_box).with_props(ImageBoxProps {
material: ImageBoxMaterial::Image(ImageBoxImage {
id: "resources/cat.jpg".into(),
..Default::default()
}),
..Default::default()
}),
),
),
)
} |
|
Thats actually not too bad - I'll give it a shot! |
|
This feels so much better to my brain!! (also cargo format works on it) Explicit builder syntax for widget treespub fn root(mut _context: WidgetContext) -> WidgetNode {
WidgetNode::Component(
// The root widget is a content box (i.e. overlay)
make_widget!(content_box).listed_slot(
// Which has a size box that contains the `controls_info` display
make_widget!(size_box)
// The size box is anchored to the bottom left corner of the screen
.with_props(ContentBoxItemLayout {
anchors: Rect {
left: 0.0,
right: 0.0,
top: 1.0,
bottom: 0.0,
},
align: Vec2 { x: 0.0, y: 1.0 },
..Default::default()
})
// And has a fixed size
.with_props(SizeBoxProps {
width: SizeBoxSizeValue::Exact(400.0),
height: SizeBoxSizeValue::Exact(300.0),
..Default::default()
})
.named_slot(
"content",
// The content of the size box has an overlay/content_box with 2 elements
make_widget!(content_box)
// The first is the background of the area (which is just a translucent black box)
.listed_slot(make_widget!(image_box).with_props(ImageBoxProps {
material: ImageBoxMaterial::Color(ImageBoxColor {
color: Color {
r: 0.0,
g: 0.0,
b: 0.0,
a: 0.6,
},
..Default::default()
}),
..Default::default()
}))
// The second is the actual controls informational display,
// which is clipped to the area of the size box (because the content box takes up the full size box).
.listed_slot(make_widget!(controls_info).with_props(ContentBoxProps {
clipping: true,
..Default::default()
})),
),
),
)
} |
|
NEVERMIND the answer was How would I extract the props from a `WidgetContext` using this syntax?pub fn controls_info(context: WidgetContext) -> WidgetNode {
let WidgetContext { props, .. } = context;
WidgetNode::Component(make_widget!(content_box).with_props(props).listed_slot(
...
))
}Has an error: |
|
Yeah, that turned out pretty nice. I like being able to stick the props inline instead of having to have separate variables for everything ( which I usually did because of the lack of rustfmt, I never wanted to stick the prop structs inline the Seems like it'd be useful to document that method as an alternative syntax, especially because it can be easier to understand for beginners. Tangentally related, I just opened an issue on rustfmt to see if we can start a discussion about possible rustfmt formatting for custom macros through plugins: rust-lang/rustfmt#4849. |
|
How do I give a widget a fixed height? I have a vertical box that contains 3 text elements that I want to float to the top instead of each of them taking up a third of the space of the vertical box. If this were unreal, I'd have them use an auto size (only take up as much vertical space as the text needs) and use top-vertical-alignment. I'm not sure how to accomplish this in raui. |
|
You add a |
|
Hm, for some reason this causes my widget to overlap. Could this be because raui doesnt know how much space the text is taking up? |
|
Yes, that's why. There's an open issue for that: #32 . In the mean time, you can manually specify the height of the text by setting the |
|
Is there a way to get a hover event on an element (like a button)? I'd like to implement a styled button which changes a background image / components based on its current state (default, hovered, pressed, and/or selected) |
|
Yep. I do something like this. Also big warning: You must put the button inside of a container prefixed with Let me know if you need any more clarification on what the code below does. #[pre_hooks(
// This allows us to get a `ButtonProps` instance from our widget state which will keep
// track of whether or not we are clicked, hovered over, etc. This is where all the magic
// is, essentially.
//
// Under the hood this listens for messages from the button component and updates our
// widget state whenever it changes.
use_button_notified_state
)]
fn start_button(mut ctx: WidgetContext) -> WidgetNode {
// Get our button state
let ButtonProps {
// The hover state
selected: hover,
// The clicked state
trigger: clicked,
..
} = ctx.state.read_cloned_or_default();
let button_props = ctx
.props
.clone()
// The button must have this NavItemActive to detect hover, click, etc
.with(NavItemActive)
// This tells the button to send a message to our widget when it is clicked, hovered, etc.
.with(ButtonNotifyProps(ctx.id.to_owned().into()));
// Set different background based on click state
let button_panel_props = ctx.props.clone().with(PaperProps {
frame: None,
variant: if clicked {
String::from("button-down")
} else {
String::from("button-up")
},
..Default::default()
});
let label_props = Props::new(TextPaperProps {
text: "Start Game".to_owned(),
width: TextBoxSizeValue::Fill,
height: TextBoxSizeValue::Fill,
horizontal_align_override: Some(TextBoxHorizontalAlign::Center),
vertical_align_override: Some(TextBoxVerticalAlign::Middle),
..Default::default()
});
// Set different size based on hover state
let scale = if hover { 1.05 } else { 1. };
let size_box_props = Props::new(SizeBoxProps {
width: SizeBoxSizeValue::Exact(85. * scale),
height: SizeBoxSizeValue::Exact(25. * scale),
..Default::default()
});
widget! {
(button: {button_props} {
content = (size_box: {size_box_props} {
content = (horizontal_paper: {button_panel_props} [
(text_paper: {label_props})
])
})
})
}
} |
|
yes, there is Hello World demo that shows how to notify some widget about button component state change, this state contains |
|
Hm so I have this kinda working - the button can detect hover (selected) or active/pressed (trigger), but it never unhovers? DetailsButton used in root: pub fn root(mut _context: WidgetContext) -> WidgetNode {
WidgetNode::Component(
make_widget!(nav_content_box).listed_slot(
make_widget!(size_box)
.with_props(NavItemActive)
.with_props(ContentBoxItemLayout {
anchors: Rect {
left: 0.5,
right: 0.5,
top: 0.5,
bottom: 0.5,
},
align: Vec2 { x: 0.5, y: 0.5 },
..Default::default()
})
.with_props(SizeBoxProps {
width: SizeBoxSizeValue::Exact(250.0),
height: SizeBoxSizeValue::Exact(150.0),
..Default::default()
})
.named_slot("content", make_widget!(ui::button::cs_button)),
),
)
}Button Code: use crate::engine::ui::*;
/* Button
Default:
- background = #6f6f6f
- inner-top-left = opacity(28%)
- inner-bottom-right = opacity(40%)
- border = #000000
Disabled (exclusive):
- background = #2c2c2c
- inner-top-left = opacity(0%)
- inner-bottom-right = opacity(0%)
Hovered:
- inner-top-left = opacity(62%)
- inner-bottom-right = opacity(66%)
Selected: invalid state
Pressed:
- border = #ffffff
*/
// use_button_notified_state - exposes `ButtonProps` as a valid state for this widget, which contains the stateful behavior data
#[pre_hooks(use_button_notified_state)]
pub fn cs_button(mut ctx: WidgetContext) -> WidgetNode {
let ButtonProps {
// if the button is hovered via mouse or navigated to view gamepad/keyboard
selected: is_hovered,
// if the button is currently pressed/active because of a click or key/gamepad button input
trigger: is_active,
..
} = ctx.state.read_cloned_or_default();
log::debug!("is_hovered:{} is_active:{}", is_hovered, is_active);
let background_color = match (is_hovered, is_active) {
(true, _) => Color {
r: 0.6,
g: 0.6,
b: 0.6,
a: 1.0,
},
(_, true) => Color {
r: 1.0,
g: 1.0,
b: 1.0,
a: 1.0,
},
_ => Color {
r: 0.435,
g: 0.435,
b: 0.435,
a: 1.0,
},
};
let border_size = Rect {
left: 5.0,
top: 5.0,
right: 5.0,
bottom: 5.0,
};
let border = make_widget!(image_box).with_props(ImageBoxProps {
material: ImageBoxMaterial::Color(ImageBoxColor {
color: Color {
r: 0.0,
g: 0.5,
b: 0.2,
a: 1.0,
},
scaling: ImageBoxImageScaling::Frame(ImageBoxFrame {
source: border_size,
destination: border_size,
frame_only: true,
..Default::default()
}),
}),
..Default::default()
});
let background = make_widget!(image_box)
.with_props(ContentBoxItemLayout {
margin: border_size,
..Default::default()
})
.with_props(ImageBoxProps {
material: ImageBoxMaterial::Color(ImageBoxColor {
color: background_color,
..Default::default()
}),
..Default::default()
});
let inner_highlight_top_left = make_widget!(image_box)
.with_props(ContentBoxItemLayout {
margin: border_size,
..Default::default()
})
.with_props(ImageBoxProps {
material: ImageBoxMaterial::Color(ImageBoxColor {
color: Color {
r: 1.0,
g: 1.0,
b: 1.0,
a: 1.0,
},
scaling: ImageBoxImageScaling::Frame(ImageBoxFrame {
source: Rect {
left: 5.0,
top: 5.0,
right: 0.0,
bottom: 0.0,
},
destination: Rect {
left: 5.0,
top: 5.0,
right: 0.0,
bottom: 0.0,
},
frame_only: true,
..Default::default()
}),
}),
..Default::default()
});
let inner_highlight_bottom_right = make_widget!(image_box)
.with_props(ContentBoxItemLayout {
margin: border_size,
..Default::default()
})
.with_props(ImageBoxProps {
material: ImageBoxMaterial::Color(ImageBoxColor {
color: Color {
r: 0.0,
g: 0.0,
b: 0.0,
a: 0.8,
},
scaling: ImageBoxImageScaling::Frame(ImageBoxFrame {
source: Rect {
left: 0.0,
top: 0.0,
right: 5.0,
bottom: 10.0,
},
destination: Rect {
left: 0.0,
top: 0.0,
right: 5.0,
bottom: 10.0,
},
frame_only: true,
..Default::default()
}),
}),
..Default::default()
});
WidgetNode::Component(
make_widget!(button)
.with_props(NavItemActive)
.with_props(ButtonNotifyProps(ctx.id.to_owned().into()))
.named_slot(
"content",
make_widget!(content_box)
.listed_slot(border)
.listed_slot(background)
.listed_slot(inner_highlight_top_left)
.listed_slot(inner_highlight_bottom_right),
),
)
} |
|
Ah, I had that same issue! It's an easy fix, but took a while to find: Set |
|
i stand on the shoulders of giants 😅 |
|
Is there any support for hex-integer parsing to make_widget!(image_box)
.with_props(ImageBoxProps {
material: ImageBoxMaterial::Color(ImageBoxColor {
color: Color::hex(0xff00ff),
..Default::default()
}),
.. Default::default()
}) |
|
I don't think that's supported right now, but it's a good idea. You might be able to use this crate to help in the meantime: |
|
i like the idea of hex color creation! |
|
If/when this goes in, I think i'd be a good idea to support both linear and sRGB color spaces (I know unreal does this by default). There are some rust crates doing these kinds of conversions for color spaces too. |
|
i think this links directly to #69 idea that we want to implement at some point 🤔 |
|
@zicklag whats this now? is there a way for my rendering system to tell the layout engine how big a text_box widget's contents are? #32 (comment) |
|
I didn't mean that there is a way for your rendering system to tell the layout how big the text is ( yet ), what I meant is that you can use the For instance, if you have a UI with only a single text box with it's width and height set to That's how I do it in Bevy Retro, so that I can position text in the centers of buttons, etc. |
|
Are there any examples for how to setup a |
|
The closest i've been able to come to is adding the .with_props(TextInputProps {
allow_new_line: true,
.. Default::default()
})if let Some(msg) = msg.as_any().downcast_ref() {
match msg {
TextInputNotifyMessage { state: TextInputProps { text, .. }, .. } if text.ends_with("\n") => {
// get the user's input without the newline
let mut user_input = text.clone();
user_input.pop();
log::debug!("{}", user_input);
// clear the field
let mut input_state = context.state.read_cloned_or_default::<TextInputProps>();
input_state.text = "".to_string();
let _ = context.state.write(input_state);
}
_ => {}
}
} |
|
I think that's probably the most reasonable option for now. The only other thing I can think of off the top of my head would be contributing to the exting The |
|
Hmm so this /mostly/ works, except for the fact that writing the Text input codeuse crate::engine::ui::*;
fn use_message_input(context: &mut WidgetContext) {
context.life_cycle.change(|context| {
for msg in context.messenger.messages {
if let Some(msg) = msg.as_any().downcast_ref() {
match msg {
TextInputNotifyMessage {
state: TextInputProps { text, .. },
..
} if text.ends_with("\n") => {
use crate::engine::network::prelude::{
DeliveryGuarantee::*, OrderGuarantee::*, *,
};
// get the user's input without the newline
let mut user_input = text.clone();
user_input.pop();
log::debug!("{}", user_input);
// clear the field
let mut input_state =
context.state.read_cloned_or_default::<TextInputProps>();
input_state.text = "".to_string();
// DEBUG NOTE: No error is ever logged
if let Err(e) = context.state.write(input_state) {
log::error!("Failed to write state: {:?}", e);
}
// DEBUG NOTE: Reread the props out of the state
let input_state =
context.state.read_cloned_or_default::<TextInputProps>();
// DEBUG NOTE: The text outputted here is always the same as `user_input`, even though the state was written/cleared
log::debug!("text cleared? \"{}\"", input_state.text);
let _ = Network::send_to_server(
Packet::builder()
.with_guarantee(Reliable + Ordered)
.with_payload(&crate::packet::Message::new(user_input)),
);
}
_ => {}
}
}
}
});
}
#[pre_hooks(
use_button_notified_state,
use_text_input_notified_state,
use_message_input
)]
pub fn widget(mut context: WidgetContext) -> WidgetNode {
let WidgetContext { id, state, key, .. } = context;
let ButtonProps {
selected, trigger, ..
} = state.read_cloned_or_default();
let TextInputProps {
text,
cursor_position,
focused,
..
} = state.read_cloned_or_default();
let text = if text.trim().is_empty() {
"> Focus here and start typing...".to_owned()
} else if focused {
log::debug!("text: {}", text);
if cursor_position < text.len() {
format!("{}|{}", &text[..cursor_position], &text[cursor_position..])
} else {
format!("{}|", text)
}
} else {
log::debug!("text: {}", text);
text
};
WidgetNode::Component(
make_widget!(input_field)
.key(key)
.with_props(NavItemActive)
.with_props(TextInputNotifyProps(id.to_owned().into()))
.with_props(ButtonNotifyProps(id.to_owned().into()))
// need to manually indicate that this is a text field until https://github.com/RAUI-labs/raui/pull/73 is fixed
.with_props(TextInputMode::Text)
.with_props(TextInputProps {
allow_new_line: true,
..Default::default()
})
.named_slot(
"content",
make_widget!(text_box).with_props(TextBoxProps {
text,
font: TextBoxFont {
name: crate::engine::asset::statics::font::unispace::REGULAR.to_owned(),
size: 20.0,
},
color: if trigger {
Color {
r: 1.0,
g: 0.0,
b: 0.0,
a: 1.0,
}
} else if selected {
Color {
r: 0.0,
g: 1.0,
b: 0.0,
a: 1.0,
}
} else if focused {
Color {
r: 0.0,
g: 0.0,
b: 1.0,
a: 1.0,
}
} else {
Color {
r: 0.0,
g: 0.0,
b: 0.0,
a: 1.0,
}
},
..Default::default()
}),
),
)
} |
|
Unfortunately I've been swamped lately so I won't have time to look into what might be the issue. 😕 |
|
@PsichiX any thoughts? |
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
So I'm poking about RAUI a bit and looking to integrate it into my custom engine (mostly for learning rust and some game dev stuff). Not sure how y'all use GH Discussions, but I'll probably have a number of questions along the way. My first being along the lines of not getting batches or vertices out of the tessellation renderer.
Encountered Obstacles (and solutions)
Getting an empty tesselation from my TesselateRenderer.render call
Obstacle:
I've created an application, applied a tree, and am trying to render the tree, but I get an empty
Tessellationobject back.and that logs:
Tesselation { vertices: Interleaved([]), indices: [], batches: [] }Solution:
Had to call
Application.processand thenApplication.layoutbeforeApplication.render.All reactions