From 75fb80adf36277f41492a5cf708a335ed9adb212 Mon Sep 17 00:00:00 2001 From: mars Date: Sun, 6 Nov 2022 16:25:47 -0700 Subject: [PATCH] Fix coordinate system for SAO UI (closes #28) --- scripts/sao-ui/src/main_menu.rs | 37 +++++++++++------------ scripts/sao-ui/src/widgets/button.rs | 2 +- scripts/sao-ui/src/widgets/menu.rs | 44 ++++++++++++++-------------- scripts/sao-ui/src/widgets/scroll.rs | 16 +++++----- 4 files changed, 50 insertions(+), 49 deletions(-) diff --git a/scripts/sao-ui/src/main_menu.rs b/scripts/sao-ui/src/main_menu.rs index 5c034e2..d30e0bb 100644 --- a/scripts/sao-ui/src/main_menu.rs +++ b/scripts/sao-ui/src/main_menu.rs @@ -48,8 +48,8 @@ pub struct MainMenu { } impl MainMenu { - pub const POSITION_X: f32 = -0.40; - pub const SUBMENU_SPACING: f32 = 0.1; + pub const ANCHOR: Vec2 = Vec2::new(100.0, 100.0); + pub const SUBMENU_SPACING: f32 = 15.0; } impl Default for MainMenu { @@ -58,9 +58,9 @@ impl Default for MainMenu { let icons = ["", "", "", "", "", ""]; let button_style = RoundButtonStyle { - radius: 0.05, - spacing: 0.01, - thickness: 0.002, + radius: 7.5, + spacing: 1.5, + thickness: 0.4, body_color: Color::WHITE, ring_color: Color::WHITE, icon_color: Color::BLACK, @@ -77,12 +77,13 @@ impl Default for MainMenu { buttons.push(button); } - let menu = SlotMenu::new(buttons, 0.18); - let menu = Offset::new(menu, Vec2::new(Self::POSITION_X, 0.0)); + let menu = SlotMenu::new(buttons, 30.0); + let menu = Offset::new(menu, Self::ANCHOR); - let submenu_spacing_left = Vec2::new(Self::POSITION_X - Self::SUBMENU_SPACING, 0.0); - let submenu_spacing_right = Vec2::new(Self::POSITION_X + Self::SUBMENU_SPACING, 0.0); - let reveal_slide = -0.02; + let submenu_spacing = Vec2::new(Self::SUBMENU_SPACING, 0.0); + let submenu_spacing_left = Self::ANCHOR - submenu_spacing; + let submenu_spacing_right = Self::ANCHOR + submenu_spacing; + let reveal_slide = -5.0; let reveal_duration = 0.1; let player_info = PlayerInfo::new(); @@ -151,9 +152,9 @@ pub struct PlayerInfo { impl PlayerInfo { pub fn new() -> Self { Self { - width: 0.5, - height: 0.9, - rounding: 0.02, + width: 70.0, + height: 120.0, + rounding: 5.0, } } } @@ -177,7 +178,7 @@ pub struct Inventory { impl Inventory { pub fn new(available_width: f32) -> (Self, f32) { - let height = 1.28; + let height = 1024.0; ( Self { @@ -191,8 +192,8 @@ impl Inventory { impl Widget for Inventory { fn draw(&mut self, ctx: &DrawContext) { - let box_size = 0.06; - let box_margin = 0.02; + let box_size = 12.0; + let box_margin = 4.0; let box_stride = box_size + box_margin; let grid_width = (self.width / box_stride).floor() as usize; @@ -229,7 +230,7 @@ impl SettingsMenu { ("Log Out", "﫼"), ]; - let button_size = Vec2::new(0.4, 0.1); + let button_size = Vec2::new(90.0, 20.0); let button_rect = Rect::from_xy_size(Vec2::new(0.0, -button_size.y / 2.0), button_size); let mut buttons = Vec::new(); @@ -250,7 +251,7 @@ impl SettingsMenu { buttons.push(button); } - let menu = SlotMenu::new(buttons, 0.12); + let menu = SlotMenu::new(buttons, 25.0); Self { menu, diff --git a/scripts/sao-ui/src/widgets/button.rs b/scripts/sao-ui/src/widgets/button.rs index 8404191..6ecf242 100644 --- a/scripts/sao-ui/src/widgets/button.rs +++ b/scripts/sao-ui/src/widgets/button.rs @@ -175,7 +175,7 @@ impl RectButton { let left = label_left; let right = rect.br.x; let baseline = rect.tl.y; - let baseline = (rect.height() * style.label_baseline) + baseline; + let baseline = (rect.height() * (1.0 - style.label_baseline)) + baseline; let color = Color::BLACK; Label::new(text, alignment, scale, color, left, right, baseline) diff --git a/scripts/sao-ui/src/widgets/menu.rs b/scripts/sao-ui/src/widgets/menu.rs index 1ecaff4..5c0a022 100644 --- a/scripts/sao-ui/src/widgets/menu.rs +++ b/scripts/sao-ui/src/widgets/menu.rs @@ -52,7 +52,7 @@ impl SlotMenu { let out_delay = i as f32 * inter_button_delay; let in_delay = max_delay - out_delay; - let mut slide_anim = Animation::new(EaseOut, duration, 0.25, 0.0); + let mut slide_anim = Animation::new(EaseOut, duration, -50.0, 0.0); slide_anim.set_in_delay(in_delay); slide_anim.set_out_delay(out_delay); slide_anim.ease_in(); @@ -108,7 +108,7 @@ impl SlotMenu { pub fn for_buttons(&mut self, mut cb: impl FnMut(&mut SlotMenuButton, usize, f32)) { for (i, button) in self.buttons.iter_mut().enumerate() { - let y = -(i as f32 - self.scroll_anim.get()) * self.spacing + button.slide_anim.get(); + let y = (i as f32 - self.scroll_anim.get()) * self.spacing + button.slide_anim.get(); cb(button, i, y); } } @@ -222,19 +222,19 @@ pub struct TabMenu { } impl TabMenu { - const HEAD_RADIUS: f32 = 0.05; - const HEAD_HEIGHT: f32 = 0.1; - const TAB_WIDTH: f32 = 0.1; - const TAB_HEIGHT: f32 = 0.15; + const HEAD_RADIUS: f32 = 5.0; + const HEAD_HEIGHT: f32 = 15.0; + const TAB_WIDTH: f32 = 15.0; + const TAB_HEIGHT: f32 = 25.0; const TAB_NUM: usize = 6; - const SEPARATOR_WIDTH: f32 = 0.02; - const INNER_RADIUS: f32 = 0.01; - const CONTENT_WIDTH: f32 = 0.64; + const SEPARATOR_WIDTH: f32 = 5.0; + const INNER_RADIUS: f32 = 5.0; + const CONTENT_WIDTH: f32 = 100.0; const HEAD_BUTTON_STYLE: RoundButtonStyle = RoundButtonStyle { - radius: Self::HEAD_RADIUS * 0.5, - spacing: Self::HEAD_RADIUS * 0.2, - thickness: Self::HEAD_RADIUS * 0.1, + radius: Self::HEAD_HEIGHT * 0.25, + spacing: Self::HEAD_HEIGHT * 0.1, + thickness: Self::HEAD_HEIGHT * 0.05, body_color: Color::WHITE, ring_color: Color::BLACK, icon_color: Color::BLACK, @@ -248,8 +248,8 @@ impl TabMenu { let mut tabs = Vec::new(); for i in 0..Self::TAB_NUM { - let y = (i + 1) as f32 * Self::TAB_HEIGHT; - let pos = Vec2::new(0.0, -y); + let y = i as f32 * Self::TAB_HEIGHT; + let pos = Vec2::new(0.0, y); let mut style = RectButtonStyle::default(); style.radius = Self::HEAD_RADIUS; @@ -280,7 +280,7 @@ impl TabMenu { }), ); - let head_button_y = Self::HEAD_HEIGHT / 2.0; + let head_button_y = -Self::HEAD_HEIGHT / 2.0; let pop_out_x = Self::HEAD_BUTTON_MARGIN; let pop_out = Offset::new(pop_out, Vec2::new(pop_out_x, head_button_y)); @@ -295,8 +295,8 @@ impl TabMenu { let scroll_bar = Offset::new(scroll_bar, Vec2::new(scroll_x, -tab_list_height)); let separator_rect = Rect { - tl: Vec2::new(Self::TAB_WIDTH, -tab_list_height), - br: Vec2::new(Self::TAB_WIDTH + Self::SEPARATOR_WIDTH, 0.0), + tl: Vec2::new(Self::TAB_WIDTH, 0.0), + br: Vec2::new(Self::TAB_WIDTH + Self::SEPARATOR_WIDTH, tab_list_height), }; let head_width = Self::TAB_WIDTH @@ -306,13 +306,13 @@ impl TabMenu { + scroll_bar.style.margin.x * 2.0; let head_rect = Rect { - tl: Vec2::ZERO, - br: Vec2::new(head_width, Self::HEAD_HEIGHT), + tl: Vec2::new(0.0, -Self::HEAD_HEIGHT), + br: Vec2::new(head_width, 0.0), }; let view_rect = Rect { - tl: Vec2::new(Self::TAB_WIDTH + Self::SEPARATOR_WIDTH, -tab_list_height), - br: Vec2::new(head_rect.br.x, 0.0), + tl: Vec2::new(Self::TAB_WIDTH + Self::SEPARATOR_WIDTH, 0.0), + br: Vec2::new(head_rect.br.x, tab_list_height), }; let view = ScrollView::new( @@ -358,7 +358,7 @@ impl Container for TabMenu { ); ctx.draw_partially_rounded_rect( - CornerFlags::TOP_LEFT | CornerFlags::TOP_RIGHT, + CornerFlags::TOP, self.head_rect, Self::HEAD_RADIUS, head_color, diff --git a/scripts/sao-ui/src/widgets/scroll.rs b/scripts/sao-ui/src/widgets/scroll.rs index 2fd9ee6..130cbc5 100644 --- a/scripts/sao-ui/src/widgets/scroll.rs +++ b/scripts/sao-ui/src/widgets/scroll.rs @@ -18,13 +18,13 @@ pub struct ScrollBarStyle { impl Default for ScrollBarStyle { fn default() -> Self { Self { - margin: Vec2::new(0.01, 0.01), - body_radius: 0.005, - body_width: 0.015, + margin: Vec2::splat(2.0), + body_radius: 1.0, + body_width: 3.0, body_idle_color: Color(0x7f7f7fff), body_hover_color: Color(0xb0b0b0ff), - body_selected_color: Color::MAGENTA, - rail_width: 0.005, + body_selected_color: Color::WHITE, + rail_width: 1.0, rail_color: Color(0xa0a0a07f), } } @@ -80,7 +80,7 @@ impl ScrollBar { let style = &self.style; let rail_height = self.rail_rect.height(); let body_height = (self.height / self.content_height) * rail_height; - let body_y = rail_height - (self.scroll / self.content_height) * rail_height - body_height; + let body_y = (self.scroll / self.content_height) * rail_height; let body_xy = Vec2::new(style.margin.x, body_y + style.margin.y); let body_size = Vec2::new(style.body_width, body_height); Rect::from_xy_size(body_xy, body_size) @@ -128,7 +128,7 @@ impl Widget for ScrollBar { } if kind == CursorEventKind::Drag && self.is_selected { - self.scroll = ((self.grab_coord - at.y) / self.rail_rect.height()) + self.scroll = ((at.y - self.grab_coord) / self.rail_rect.height()) * self.content_height + self.grab_scroll; @@ -203,7 +203,7 @@ impl ScrollView { impl Widget for ScrollView { fn update(&mut self, dt: f32) { if self.scroll_bar.is_dirty() { - let yoff = self.scroll_bar.get_scroll() - self.content_height + self.height; + let yoff = -self.scroll_bar.get_scroll(); self.inner.set_offset(Vec2::new(0.0, yoff)); }