Merge branch 'pfau-controls-and-visuals' into 'master'

Settings: Controls content added, new Button visuals and Input Frame

See merge request veloren/veloren!102

Former-commit-id: abbdf95c4cd03d42df9c846822e1116ae535f6bf
This commit is contained in:
Forest Anderson 2019-05-03 13:56:27 +00:00
commit c053155d67
6 changed files with 219 additions and 73 deletions

@ -1 +1 @@
Subproject commit 7ebb1a92057e6c0b9d989ffb7a5fe321599ddd6e
Subproject commit bcf9a93d2061c981fa9ecb13e2f8a8d51524d045

View File

@ -157,10 +157,10 @@ impl Chat {
// Chat Arrow
if !self.scrolled_to_bottom(ui_widgets) {
if Button::image(imgs.chat_arrow)
.w_h(22.0, 22.0)
.w_h(20.0, 20.0)
.hover_image(imgs.chat_arrow_mo)
.press_image(imgs.chat_arrow_press)
.bottom_right_with_margins_on(self.ids.message_box_bg, 2.0, 2.0)
.bottom_right_with_margins_on(self.ids.message_box_bg, 0.0, -22.0)
.set(self.ids.chat_arrow, ui_widgets)
.was_clicked()
{

View File

@ -102,6 +102,9 @@ widget_ids! {
settings_title,
settings_r,
settings_l,
settings_scrollbar,
controls_text,
controls_controls,
//Contents
button_help,
button_help2,
@ -215,9 +218,9 @@ pub(self) struct Imgs {
// Menu
esc_bg: ImgId,
fireplace: ImgId,
button_dark: ImgId,
button_dark_hover: ImgId,
button_dark_press: ImgId,
button: ImgId,
button_hover: ImgId,
button_press: ImgId,
// MiniMap
mmap_frame: ImgId,
@ -378,9 +381,9 @@ impl Imgs {
// Esc-Menu
esc_bg: load_img("element/frames/menu.png", ui),
fireplace: load_vox("element/misc_bg/fireplace.vox", ui),
button_dark: load_vox("element/buttons/button_dark.vox", ui),
button_dark_hover: load_img("element/buttons/button_dark_hover.png", ui),
button_dark_press: load_img("element/buttons/button_dark_press.png", ui),
button: load_vox("element/buttons/button.vox", ui),
button_hover: load_img("element/buttons/button_hover.png", ui),
button_press: load_img("element/buttons/button_press.png", ui),
// MiniMap
mmap_frame: load_vox("element/frames/mmap.vox", ui),
@ -409,13 +412,13 @@ impl Imgs {
settings_bg: load_img("element/frames/settings.png", ui),
settings_icon: load_img("element/icons/settings.png", ui),
settings_button_mo: load_img("element/buttons/blue_mo.png", ui),
check: load_img("element/buttons/check/no.png", ui),
check_mo: load_img("element/buttons/check/no_mo.png", ui),
check_press: load_img("element/buttons/check/press.png", ui),
check_checked: load_img("element/buttons/check/yes.png", ui),
check_checked_mo: load_img("element/buttons/check/yes_mo.png", ui),
slider: load_img("element/slider/track.png", ui),
slider_indicator: load_img("element/slider/indicator.png", ui),
check: load_vox("element/buttons/check/no.vox", ui),
check_mo: load_vox("element/buttons/check/no_mo.vox", ui),
check_press: load_vox("element/buttons/check/press.vox", ui),
check_checked: load_vox("element/buttons/check/yes.vox", ui),
check_checked_mo: load_vox("element/buttons/check/yes_mo.vox", ui),
slider: load_vox("element/slider/track.vox", ui),
slider_indicator: load_vox("element/slider/indicator.vox", ui),
button_blank: ui.new_graphic(ui::Graphic::Blank),
button_blue_mo: load_img("element/buttons/blue_mo.png", ui),
button_blue_press: load_img("element/buttons/blue_press.png", ui),
@ -453,9 +456,9 @@ impl Imgs {
questlog_icon: load_img("element/icons/questlog.png", ui),
// Chat-Arrows
chat_arrow: load_img("element/buttons/arrow/chat_arrow.png", ui),
chat_arrow_mo: load_img("element/buttons/arrow/chat_arrow_mo.png", ui),
chat_arrow_press: load_img("element/buttons/arrow/chat_arrow_press.png", ui),
chat_arrow: load_vox("element/buttons/arrow_down.vox", ui),
chat_arrow_mo: load_vox("element/buttons/arrow_down_hover.vox", ui),
chat_arrow_press: load_vox("element/buttons/arrow_down_press.vox", ui),
}
}
}
@ -548,12 +551,12 @@ impl Hud {
ids,
chat,
settings_tab: SettingsTab::Interface,
show_help: true,
show_debug: false,
show_help: false,
show_debug: true,
bag_open: false,
menu_open: false,
map_open: false,
mmap_open: true,
mmap_open: false,
show_ui: true,
inventorytest_button: false,
inventory_space: 0,
@ -1006,10 +1009,10 @@ impl Hud {
// X-button
if Button::image(self.imgs.close_button)
.w_h(4.0 * 4.0, 4.0 * 4.0)
.w_h(28.0, 28.0)
.hover_image(self.imgs.close_button_hover)
.press_image(self.imgs.close_button_press)
.top_right_with_margins_on(self.ids.bag_contents, 4.5, 4.5)
.top_right_with_margins_on(self.ids.bag_contents, 0.0, 0.0)
.set(self.ids.bag_close, ui_widgets)
.was_clicked()
{
@ -1079,6 +1082,10 @@ impl Hud {
.scroll_kids()
.scroll_kids_vertically()
.set(self.ids.settings_content, ui_widgets);
Scrollbar::y_axis(self.ids.settings_content)
.thickness(5.0)
.rgba(0.33, 0.33, 0.33, 1.0)
.set(self.ids.settings_scrollbar, ui_widgets);
// X-Button
if Button::image(self.imgs.close_button)
.w_h(28.0, 28.0)
@ -1237,7 +1244,139 @@ impl Hud {
{
self.settings_tab = SettingsTab::Controls;
}
if let SettingsTab::Controls = self.settings_tab {
Text::new(
"Free Cursor\n\
Toggle Help Window\n\
Toggle Interface\n\
Toggle FPS and Debug Info\n\
\n\
\n\
Move Forward\n\
Move Left\n\
Move Right\n\
Move Backwards\n\
\n\
Jump\n\
\n\
Dodge\n\
\n\
Auto Walk\n\
\n\
Sheathe/Draw Weapons\n\
\n\
Put on/Remove Helmet\n\
\n\
\n\
Basic Attack\n\
Secondary Attack/Block/Aim\n\
\n\
\n\
Skillbar Slot 1\n\
Skillbar Slot 2\n\
Skillbar Slot 3\n\
Skillbar Slot 4\n\
Skillbar Slot 5\n\
Skillbar Slot 6\n\
Skillbar Slot 7\n\
Skillbar Slot 8\n\
Skillbar Slot 9\n\
Skillbar Slot 10\n\
\n\
\n\
Pause Menu\n\
Settings\n\
Social\n\
Map\n\
Spellbook\n\
Character\n\
Questlog\n\
Bag\n\
\n\
\n\
\n\
Send Chat Message\n\
Scroll Chat\n\
\n\
\n\
Chat commands: \n\
\n\
/alias [Name] - Change your Chat Name \n\
/tp [Name] - Teleports you to another player
",
)
.color(TEXT_COLOR)
.top_left_with_margins_on(self.ids.settings_content, 5.0, 5.0)
.font_id(self.font_opensans)
.font_size(18)
.set(self.ids.controls_text, ui_widgets);
// TODO: Replace with buttons that show the actual keybind and allow the user to change it.
Text::new(
"TAB\n\
F1\n\
F2\n\
F3\n\
\n\
\n\
W\n\
A\n\
S\n\
D\n\
\n\
SPACE\n\
\n\
??\n\
\n\
??\n\
\n\
??\n\
\n\
??\n\
\n\
\n\
L-Click\n\
R-Click\n\
\n\
\n\
1\n\
2\n\
3\n\
4\n\
5\n\
6\n\
7\n\
8\n\
9\n\
0\n\
\n\
\n\
ESC\n\
N\n\
O\n\
M\n\
P\n\
C\n\
L\n\
B\n\
\n\
\n\
\n\
ENTER\n\
Mousewheel\n\
\n\
\n\
\n\
\n\
\n\
\n\
",
)
.color(TEXT_COLOR)
.right_from(self.ids.controls_text, 0.0)
.font_id(self.font_opensans)
.font_size(18)
.set(self.ids.controls_controls, ui_widgets);
}
// 4 Video////////////////////////////////
if Button::image(if let SettingsTab::Video = self.settings_tab {
self.imgs.settings_button_pressed
@ -1639,11 +1778,11 @@ impl Hud {
.set(self.ids.fireplace, ui_widgets);
// Settings
if Button::image(self.imgs.button_dark)
if Button::image(self.imgs.button)
.mid_top_with_margin_on(self.ids.esc_bg, 115.0)
.w_h(170.0, 50.0)
.hover_image(self.imgs.button_dark_hover)
.press_image(self.imgs.button_dark_press)
.hover_image(self.imgs.button_hover)
.press_image(self.imgs.button_press)
.label("Settings")
.label_y(conrod_core::position::Relative::Scalar(2.0))
.label_color(TEXT_COLOR)
@ -1655,11 +1794,11 @@ impl Hud {
self.open_windows = Windows::Settings;
};
// Controls
if Button::image(self.imgs.button_dark)
if Button::image(self.imgs.button)
.mid_top_with_margin_on(self.ids.esc_bg, 175.0)
.w_h(170.0, 50.0)
.hover_image(self.imgs.button_dark_hover)
.press_image(self.imgs.button_dark_press)
.hover_image(self.imgs.button_hover)
.press_image(self.imgs.button_press)
.label("Controls")
.label_y(conrod_core::position::Relative::Scalar(2.0))
.label_color(TEXT_COLOR)
@ -1667,14 +1806,16 @@ impl Hud {
.set(self.ids.menu_button_2, ui_widgets)
.was_clicked()
{
//self.menu_open = false;
self.menu_open = false;
self.settings_tab = SettingsTab::Controls;
self.open_windows = Windows::Settings;
};
// Servers
if Button::image(self.imgs.button_dark)
if Button::image(self.imgs.button)
.mid_top_with_margin_on(self.ids.esc_bg, 235.0)
.w_h(170.0, 50.0)
.hover_image(self.imgs.button_dark_hover)
.press_image(self.imgs.button_dark_press)
.hover_image(self.imgs.button_hover)
.press_image(self.imgs.button_press)
.label("Servers")
.label_y(conrod_core::position::Relative::Scalar(2.0))
.label_color(TEXT_COLOR)
@ -1685,11 +1826,11 @@ impl Hud {
//self.menu_open = false;
};
// Logout
if Button::image(self.imgs.button_dark)
if Button::image(self.imgs.button)
.mid_top_with_margin_on(self.ids.esc_bg, 295.0)
.w_h(170.0, 50.0)
.hover_image(self.imgs.button_dark_hover)
.press_image(self.imgs.button_dark_press)
.hover_image(self.imgs.button_hover)
.press_image(self.imgs.button_press)
.label("Logout")
.label_y(conrod_core::position::Relative::Scalar(2.0))
.label_color(TEXT_COLOR)
@ -1700,11 +1841,11 @@ impl Hud {
events.push(Event::Logout);
};
// Quit
if Button::image(self.imgs.button_dark)
if Button::image(self.imgs.button)
.mid_top_with_margin_on(self.ids.esc_bg, 355.0)
.w_h(170.0, 50.0)
.hover_image(self.imgs.button_dark_hover)
.press_image(self.imgs.button_dark_press)
.hover_image(self.imgs.button_hover)
.press_image(self.imgs.button_press)
.label("Quit")
.label_y(conrod_core::position::Relative::Scalar(2.0))
.label_color(TEXT_COLOR)

View File

@ -52,6 +52,7 @@ widget_ids! {
undead_skin_bg,
elf_skin_bg,
danari_skin_bg,
name_input_bg,
// Buttons
@ -577,9 +578,12 @@ impl CharSelectionUi {
self.character_creation = false;
}
// Character Name Input
Rectangle::fill_with([320.0, 50.0], color::rgba(0.0, 0.0, 0.0, 0.99))
.mid_bottom_with_margin_on(self.ids.bg_creation, 20.0)
.set(self.ids.name_input_bg, ui_widgets);
Button::image(self.imgs.name_input)
.w_h(337.0, 67.0)
.mid_bottom_with_margin_on(self.ids.bg_creation, 10.0)
.middle_of(self.ids.name_input_bg)
.set(self.ids.name_input, ui_widgets);
for event in TextBox::new(&self.character_name)
.w_h(300.0, 60.0)

View File

@ -34,6 +34,8 @@ widget_ids! {
username_field,
singleplayer_button,
singleplayer_text,
usrnm_bg,
srvr_bg,
// Serverlist
servers_button,
servers_frame,
@ -56,9 +58,6 @@ struct Imgs {
input_bg: ImgId,
error_frame: ImgId,
button_dark: ImgId,
button_dark_hover: ImgId,
button_dark_press: ImgId,
button: ImgId,
button_hover: ImgId,
button_press: ImgId,
@ -93,9 +92,6 @@ impl Imgs {
input_bg: load_vox("element/misc_bg/textbox.vox", ui),
error_frame: load_img("element/frames/window_2.png", ui),
button_dark: load_vox("element/buttons/button_dark.vox", ui),
button_dark_hover: load_vox("element/buttons/button_dark_hover.vox", ui),
button_dark_press: load_vox("element/buttons/button_dark_press.vox", ui),
button: load_vox("element/buttons/button.vox", ui),
button_hover: load_vox("element/buttons/button_hover.vox", ui),
button_press: load_vox("element/buttons/button_press.vox", ui),
@ -209,15 +205,17 @@ impl MainMenuUi {
const TEXT_COLOR: Color = Color::Rgba(1.0, 1.0, 1.0, 1.0);
// Username
// TODO: get a lower resolution and cleaner input_bg.png
Rectangle::fill_with([320.0, 50.0], color::rgba(0.0, 0.0, 0.0, 0.97))
.middle_of(ui_widgets.window)
.set(self.ids.usrnm_bg, ui_widgets);
Image::new(self.imgs.input_bg)
.w_h(337.0, 67.0)
.middle_of(ui_widgets.window)
.middle_of(self.ids.usrnm_bg)
.set(self.ids.username_bg, ui_widgets);
for event in TextBox::new(&self.username)
.w_h(580.0 / 2.0, 60.0 / 2.0)
.w_h(290.0, 30.0)
.mid_bottom_with_margin_on(self.ids.username_bg, 44.0 / 2.0)
.font_size(20)
.font_size(22)
.font_id(self.font_opensans)
.text_color(TEXT_COLOR)
// transparent background
@ -252,11 +250,11 @@ impl MainMenuUi {
.set(self.ids.error_frame, ui_widgets);
text.mid_top_with_margin_on(self.ids.error_frame, 10.0)
.set(self.ids.login_error, ui_widgets);
if Button::image(self.imgs.button_dark)
if Button::image(self.imgs.button)
.w_h(100.0, 30.0)
.mid_bottom_with_margin_on(self.ids.login_error_bg, 5.0)
.hover_image(self.imgs.button_dark_hover)
.press_image(self.imgs.button_dark_press)
.hover_image(self.imgs.button_hover)
.press_image(self.imgs.button_press)
.label_y(Relative::Scalar(2.0))
.label("Okay")
.label_font_size(10)
@ -294,11 +292,11 @@ impl MainMenuUi {
if item
.set(
Button::image(self.imgs.button_dark)
Button::image(self.imgs.button)
.w_h(100.0, 53.0)
.mid_bottom_with_margin_on(self.ids.servers_frame, 5.0)
.hover_image(self.imgs.button_dark_hover)
.press_image(self.imgs.button_dark_press)
.hover_image(self.imgs.button_hover)
.press_image(self.imgs.button_press)
.label_y(Relative::Scalar(2.0))
.label(&text)
.label_font_size(20)
@ -312,11 +310,11 @@ impl MainMenuUi {
}
}
if Button::image(self.imgs.button_dark)
if Button::image(self.imgs.button)
.w_h(200.0, 53.0)
.mid_bottom_with_margin_on(self.ids.servers_frame, 5.0)
.hover_image(self.imgs.button_dark_hover)
.press_image(self.imgs.button_dark_press)
.hover_image(self.imgs.button_hover)
.press_image(self.imgs.button_press)
.label_y(Relative::Scalar(2.0))
.label("Close")
.label_font_size(20)
@ -328,14 +326,17 @@ impl MainMenuUi {
};
}
// Server address
Rectangle::fill_with([320.0, 50.0], color::rgba(0.0, 0.0, 0.0, 0.97))
.down_from(self.ids.usrnm_bg, 30.0)
.set(self.ids.srvr_bg, ui_widgets);
Image::new(self.imgs.input_bg)
.w_h(337.0, 67.0)
.down_from(self.ids.username_bg, 10.0)
.middle_of(self.ids.srvr_bg)
.set(self.ids.address_bg, ui_widgets);
for event in TextBox::new(&self.server_address)
.w_h(580.0 / 2.0, 60.0 / 2.0)
.w_h(290.0, 30.0)
.mid_bottom_with_margin_on(self.ids.address_bg, 44.0 / 2.0)
.font_size(20)
.font_size(22)
.font_id(self.font_opensans)
.text_color(TEXT_COLOR)
// transparent background
@ -356,7 +357,7 @@ impl MainMenuUi {
// Change button text and remove hover/press images if a connection is in progress
if let Some(start) = self.connecting {
Button::image(self.imgs.button)
.w_h(258.0, 68.0)
.w_h(258.0, 55.0)
.down_from(self.ids.address_bg, 20.0)
.align_middle_x_of(self.ids.address_bg)
.label("Connecting...")
@ -369,14 +370,14 @@ impl MainMenuUi {
pulse / 4.0 + 0.75,
)
})
.label_font_size(24)
.label_font_size(22)
.label_y(Relative::Scalar(5.0))
.set(self.ids.login_button, ui_widgets);
} else {
if Button::image(self.imgs.button)
.hover_image(self.imgs.button_hover)
.press_image(self.imgs.button_press)
.w_h(258.0, 68.0)
.w_h(258.0, 55.0)
.down_from(self.ids.address_bg, 20.0)
.align_middle_x_of(self.ids.address_bg)
.label("Login")
@ -394,12 +395,12 @@ impl MainMenuUi {
if Button::image(self.imgs.button)
.hover_image(self.imgs.button_hover)
.press_image(self.imgs.button_press)
.w_h(258.0, 68.0)
.w_h(258.0, 55.0)
.down_from(self.ids.login_button, 20.0)
.align_middle_x_of(self.ids.address_bg)
.label("Singleplayer")
.label_color(TEXT_COLOR)
.label_font_size(24)
.label_font_size(22)
.label_y(Relative::Scalar(5.0))
.label_x(Relative::Scalar(2.0))
.set(self.ids.singleplayer_button, ui_widgets)
@ -409,7 +410,7 @@ impl MainMenuUi {
}
// Quit
if Button::image(self.imgs.button)
.w_h(203.0, 53.0)
.w_h(190.0, 40.0)
.bottom_left_with_margins_on(ui_widgets.window, 60.0, 30.0)
.hover_image(self.imgs.button_hover)
.press_image(self.imgs.button_press)
@ -424,7 +425,7 @@ impl MainMenuUi {
};
// Settings
if Button::image(self.imgs.button)
.w_h(203.0, 53.0)
.w_h(190.0, 40.0)
.up_from(self.ids.quit_button, 8.0)
.hover_image(self.imgs.button_hover)
.press_image(self.imgs.button_press)
@ -437,7 +438,7 @@ impl MainMenuUi {
{};
// Servers
if Button::image(self.imgs.button)
.w_h(203.0, 53.0)
.w_h(190.0, 40.0)
.up_from(self.ids.settings_button, 8.0)
.hover_image(self.imgs.button_hover)
.press_image(self.imgs.button_press)

View File

@ -116,7 +116,7 @@ impl FigureCache {
match head {
Head::DefaultHead => "head.vox",
},
Vec3::new(-5.5, -7.0, -6.0),
Vec3::new(-7.5, -8.0, 0.0),
)
}