Merge branch 'pfauenauge-fix' into 'master'

Update UI (Pfauenauge)

See merge request veloren/veloren!68

Former-commit-id: 43d549dbb8882937df929f618325163d22c919a4
This commit is contained in:
Joshua Barretto
2019-04-25 12:25:30 +00:00
4 changed files with 568 additions and 469 deletions

File diff suppressed because it is too large Load Diff

View File

@ -5,6 +5,7 @@ use crate::{
}; };
use common::{ use common::{
assets, assets,
figure::Segment,
comp::character::{ comp::character::{
Character, Character,
Race, Race,
@ -33,7 +34,7 @@ widget_ids! {
bg_selection, bg_selection,
bg_creation, bg_creation,
v_logo, v_logo,
alpha_version, version,
// Windows // Windows
selection_window, selection_window,
@ -173,12 +174,12 @@ struct Imgs {
v_logo: ImgId, v_logo: ImgId,
bg_selection: ImgId, bg_selection: ImgId,
bg_creation: ImgId, bg_creation: ImgId,
button_dark: ImgId, button: ImgId,
button_dark_hover: ImgId, button_hover: ImgId,
button_dark_press: ImgId, button_press: ImgId,
button_dark_red: ImgId, button_red: ImgId,
button_dark_red_hover: ImgId, button_red_hover: ImgId,
button_dark_red_press: ImgId, button_red_press: ImgId,
selection_window: ImgId, selection_window: ImgId,
test_char_l_button: ImgId, test_char_l_button: ImgId,
test_char_l_big: ImgId, test_char_l_big: ImgId,
@ -241,7 +242,7 @@ struct Imgs {
} }
impl Imgs { impl Imgs {
fn new(ui: &mut Ui, renderer: &mut Renderer) -> Imgs { fn new(ui: &mut Ui, renderer: &mut Renderer) -> Imgs {
let mut load = |filename| { let load_img = |filename, ui: &mut Ui| {
let fullpath: String = ["/voxygen/", filename].concat(); let fullpath: String = ["/voxygen/", filename].concat();
let image = image::load_from_memory( let image = image::load_from_memory(
assets::load(fullpath.as_str()) assets::load(fullpath.as_str())
@ -251,75 +252,85 @@ impl Imgs {
.unwrap(); .unwrap();
ui.new_graphic(ui::Graphic::Image(image)) ui.new_graphic(ui::Graphic::Image(image))
}; };
let load_vox = |filename, ui: &mut Ui| {
let fullpath: String = ["/voxygen/", filename].concat();
let dot_vox = dot_vox::load_bytes(
assets::load(fullpath.as_str())
.expect("Error loading file")
.as_slice(),
)
.unwrap();
ui.new_graphic(ui::Graphic::Voxel(Segment::from(dot_vox)))
};
Imgs { Imgs {
v_logo: load("element/v_logo.png"), v_logo: load_vox("element/v_logo.vox", ui),
bg_selection: load("background/bg_selection.png"), bg_selection: load_img("background/bg_selection.png", ui),
bg_creation: load("background/bg_creation.png"), bg_creation: load_img("background/bg_creation.png", ui),
selection_window: load("element/frames/selection.png"), selection_window: load_img("element/frames/selection.png", ui),
button_dark: load("element/buttons/button_dark.png"), button: load_vox("element/buttons/button.vox", ui),
button_dark_hover: load("element/buttons/button_dark_hover.png"), button_hover: load_vox("element/buttons/button_hover.vox", ui),
button_dark_press: load("element/buttons/button_dark_press.png"), button_press: load_vox("element/buttons/button_press.vox", ui),
button_dark_red: load("element/buttons/button_dark_red.png"), button_red: load_vox("element/buttons/button_red.vox", ui),
button_dark_red_hover: load("element/buttons/button_dark_red_hover.png"), button_red_hover: load_vox("element/buttons/button_red_hover.vox", ui),
button_dark_red_press: load("element/buttons/button_dark_red_press.png"), button_red_press: load_vox("element/buttons/button_red_press.vox", ui),
test_char_l_button: load("element/misc_backgrounds/test_char_l.png"), test_char_l_button: load_img("element/misc_bg/test_char_l.png", ui),
test_char_l_big: load("element/misc_backgrounds/test_char_l_big.png"), test_char_l_big: load_img("element/misc_bg/test_char_l_big.png", ui),
name_input: load("element/misc_backgrounds/textbox.png"), name_input: load_vox("element/misc_bg/textbox.vox", ui),
creation_window: load("element/frames/char_creation.png"), creation_window: load_img("element/frames/char_creation.png", ui),
creation_window_body: load("element/frames/body_creation.png"), creation_window_body: load_img("element/frames/body_creation.png", ui),
frame_closed: load("element/buttons/frame/closed.png"), frame_closed: load_img("element/buttons/frame/closed.png", ui),
frame_closed_mo: load("element/buttons/frame/closed_mo.png"), frame_closed_mo: load_img("element/buttons/frame/closed_mo.png", ui),
frame_closed_press: load("element/buttons/frame/closed_press.png"), frame_closed_press: load_img("element/buttons/frame/closed_press.png", ui),
frame_open: load("element/buttons/frame/open.png"), frame_open: load_img("element/buttons/frame/open.png", ui),
frame_open_mo: load("element/buttons/frame/open_mo.png"), frame_open_mo: load_img("element/buttons/frame/open_mo.png", ui),
frame_open_press: load("element/buttons/frame/open_press.png"), frame_open_press: load_img("element/buttons/frame/open_press.png", ui),
skin_eyes_window: load("element/frames/skin_eyes.png"), skin_eyes_window: load_img("element/frames/skin_eyes.png", ui),
hair_window: load("element/frames/skin_eyes.png"), hair_window: load_img("element/frames/skin_eyes.png", ui),
accessories_window: load("element/frames/skin_eyes.png"), accessories_window: load_img("element/frames/skin_eyes.png", ui),
color_picker_bg: load("element/misc_backgrounds/color_picker_blank.png"), color_picker_bg: load_img("element/misc_bg/color_picker_blank.png", ui),
slider_range: load("element/slider/track.png"), slider_range: load_img("element/slider/track.png", ui),
slider_indicator: load("element/slider/indicator.png"), slider_indicator: load_img("element/slider/indicator.png", ui),
window_frame_2: load("element/frames/window_2.png"), window_frame_2: load_img("element/frames/window_2.png", ui),
// Weapon Icons // Weapon Icons
daggers: load("element/icons/daggers.png"), daggers: load_img("element/icons/daggers.png", ui),
sword_shield: load("element/icons/swordshield.png"), sword_shield: load_img("element/icons/swordshield.png", ui),
sword: load("element/icons/sword.png"), sword: load_img("element/icons/sword.png", ui),
axe: load("element/icons/axe.png"), axe: load_img("element/icons/axe.png", ui),
hammer: load("element/icons/hammer.png"), hammer: load_img("element/icons/hammer.png", ui),
bow: load("element/icons/bow.png"), bow: load_img("element/icons/bow.png", ui),
staff: load("element/icons/staff.png"), staff: load_img("element/icons/staff.png", ui),
//test_char_m_button: load("test_char_m_button"), //test_char_m_button: load_img("test_char_m_button"),
//test_char_r_button: load("test_char_r_button"), //test_char_r_button: load_img("test_char_r_button"),
// Race Icons // Race Icons
male: load("element/icons/male.png"), male: load_img("element/icons/male.png", ui),
female: load("element/icons/female.png"), female: load_img("element/icons/female.png", ui),
human_m: load("element/icons/human_m.png"), human_m: load_img("element/icons/human_m.png", ui),
human_f: load("element/icons/human_f.png"), human_f: load_img("element/icons/human_f.png", ui),
orc_m: load("element/icons/orc_m.png"), orc_m: load_img("element/icons/orc_m.png", ui),
orc_f: load("element/icons/orc_f.png"), orc_f: load_img("element/icons/orc_f.png", ui),
dwarf_m: load("element/icons/dwarf_m.png"), dwarf_m: load_img("element/icons/dwarf_m.png", ui),
dwarf_f: load("element/icons/dwarf_f.png"), dwarf_f: load_img("element/icons/dwarf_f.png", ui),
undead_m: load("element/icons/ud_m.png"), undead_m: load_img("element/icons/ud_m.png", ui),
undead_f: load("element/icons/ud_f.png"), undead_f: load_img("element/icons/ud_f.png", ui),
elf_m: load("element/icons/elf_m.png"), elf_m: load_img("element/icons/elf_m.png", ui),
elf_f: load("element/icons/elf_f.png"), elf_f: load_img("element/icons/elf_f.png", ui),
danari_m: load("element/icons/danari_m.png"), danari_m: load_img("element/icons/danari_m.png", ui),
danari_f: load("element/icons/danari_f.png"), danari_f: load_img("element/icons/danari_f.png", ui),
// Arrows // Arrows
arrow_left: load("element/buttons/arrow/left.png"), arrow_left: load_img("element/buttons/arrow/left.png", ui),
arrow_left_mo: load("element/buttons/arrow/left_mo.png"), arrow_left_mo: load_img("element/buttons/arrow/left_mo.png", ui),
arrow_left_press: load("element/buttons/arrow/left_press.png"), arrow_left_press: load_img("element/buttons/arrow/left_press.png", ui),
arrow_left_grey: load("element/buttons/arrow/left_inactive.png"), arrow_left_grey: load_img("element/buttons/arrow/left_inactive.png", ui),
arrow_right: load("element/buttons/arrow/right.png"), arrow_right: load_img("element/buttons/arrow/right.png", ui),
arrow_right_mo: load("element/buttons/arrow/right_mo.png"), arrow_right_mo: load_img("element/buttons/arrow/right_mo.png", ui),
arrow_right_press: load("element/buttons/arrow/right_press.png"), arrow_right_press: load_img("element/buttons/arrow/right_press.png", ui),
arrow_right_grey: load("element/buttons/arrow/right_inactive.png"), arrow_right_grey: load_img("element/buttons/arrow/right_inactive.png", ui),
// Icon Borders // Icon Borders
icon_border: load("element/buttons/border.png"), icon_border: load_img("element/buttons/border.png", ui),
icon_border_mo: load("element/buttons/border_mo.png"), icon_border_mo: load_img("element/buttons/border_mo.png", ui),
icon_border_press: load("element/buttons/border_press.png"), icon_border_press: load_img("element/buttons/border_press.png", ui),
icon_border_pressed: load("element/buttons/border_pressed.png"), icon_border_pressed: load_img("element/buttons/border_pressed.png", ui),
} }
} }
} }
@ -415,11 +426,11 @@ impl CharSelectionUi {
.set(self.ids.bg_selection, ui_widgets); .set(self.ids.bg_selection, ui_widgets);
// Logout_Button // Logout_Button
if Button::image(self.imgs.button_dark) if Button::image(self.imgs.button)
.bottom_left_with_margins_on(self.ids.bg_selection, 10.0, 10.0) .bottom_left_with_margins_on(self.ids.bg_selection, 10.0, 10.0)
.w_h(150.0, 40.0) .w_h(150.0, 40.0)
.hover_image(self.imgs.button_dark_hover) .hover_image(self.imgs.button_hover)
.press_image(self.imgs.button_dark_press) .press_image(self.imgs.button_press)
.label("Logout") .label("Logout")
.label_color(TEXT_COLOR) .label_color(TEXT_COLOR)
.label_font_size(18) .label_font_size(18)
@ -431,11 +442,11 @@ impl CharSelectionUi {
} }
// Create Character Button // Create Character Button
if Button::image(self.imgs.button_dark) if Button::image(self.imgs.button)
.mid_bottom_with_margin_on(self.ids.bg_selection, 10.0) .mid_bottom_with_margin_on(self.ids.bg_selection, 10.0)
.w_h(270.0, 50.0) .w_h(270.0, 50.0)
.hover_image(self.imgs.button_dark_hover) .hover_image(self.imgs.button_hover)
.press_image(self.imgs.button_dark_press) .press_image(self.imgs.button_press)
.label("Create Character") .label("Create Character")
.label_color(TEXT_COLOR) .label_color(TEXT_COLOR)
.label_font_size(20) .label_font_size(20)
@ -459,15 +470,15 @@ impl CharSelectionUi {
} }
// Veloren Logo and Alpha Version // Veloren Logo and Alpha Version
Button::image(self.imgs.v_logo) Image::new(self.imgs.v_logo)
.w_h(346.0, 111.0) .w_h(123.0*3.0, 35.0*3.0)
.top_left_with_margins_on(self.ids.bg_selection, 30.0, 40.0) .top_left_with_margins(30.0, 30.0)
.label(version)
.label_rgba(1.0, 1.0, 1.0, 1.0)
.label_font_size(10)
.label_y(conrod_core::position::Relative::Scalar(-40.0))
.label_x(conrod_core::position::Relative::Scalar(-100.0))
.set(self.ids.v_logo, ui_widgets); .set(self.ids.v_logo, ui_widgets);
Text::new(version)
.top_left_with_margins_on(ui_widgets.window, 5.0, 5.0)
.font_size(14)
.color(TEXT_COLOR)
.set(self.ids.version, ui_widgets);
// Click Character to Login <-- Temporary! // Click Character to Login <-- Temporary!
Image::new(self.imgs.window_frame_2) Image::new(self.imgs.window_frame_2)
.mid_top_with_margin_on(self.ids.bg_selection, 60.0) .mid_top_with_margin_on(self.ids.bg_selection, 60.0)
@ -506,11 +517,11 @@ impl CharSelectionUi {
} }
// Enter World Button // Enter World Button
if Button::image(self.imgs.button_dark) if Button::image(self.imgs.button)
.mid_bottom_with_margin_on(self.ids.selection_window, 65.0) .mid_bottom_with_margin_on(self.ids.selection_window, 65.0)
.w_h(210.0, 55.0) .w_h(210.0, 55.0)
.hover_image(self.imgs.button_dark_hover) .hover_image(self.imgs.button_hover)
.press_image(self.imgs.button_dark_press) .press_image(self.imgs.button_press)
.label("Enter World") .label("Enter World")
.label_color(TEXT_COLOR) .label_color(TEXT_COLOR)
.label_font_size(22) .label_font_size(22)
@ -523,11 +534,11 @@ impl CharSelectionUi {
} }
// Delete Button // Delete Button
if Button::image(self.imgs.button_dark_red) if Button::image(self.imgs.button_red)
.bottom_right_with_margins_on(self.ids.selection_window, -25.0, 0.0) .bottom_right_with_margins_on(self.ids.selection_window, -25.0, 0.0)
.w_h(100.0, 20.0) .w_h(100.0, 20.0)
.hover_image(self.imgs.button_dark_red_hover) .hover_image(self.imgs.button_red_hover)
.press_image(self.imgs.button_dark_red_press) .press_image(self.imgs.button_red_press)
.label("Delete") .label("Delete")
.label_color(TEXT_COLOR) .label_color(TEXT_COLOR)
.label_font_size(12) .label_font_size(12)
@ -544,11 +555,11 @@ impl CharSelectionUi {
.middle_of(ui_widgets.window) .middle_of(ui_widgets.window)
.set(self.ids.bg_creation, ui_widgets); .set(self.ids.bg_creation, ui_widgets);
// Back Button // Back Button
if Button::image(self.imgs.button_dark) if Button::image(self.imgs.button)
.bottom_left_with_margins_on(self.ids.bg_creation, 10.0, 10.0) .bottom_left_with_margins_on(self.ids.bg_creation, 10.0, 10.0)
.w_h(150.0, 40.0) .w_h(150.0, 40.0)
.hover_image(self.imgs.button_dark_hover) .hover_image(self.imgs.button_hover)
.press_image(self.imgs.button_dark_press) .press_image(self.imgs.button_press)
.label("Back") .label("Back")
.label_color(TEXT_COLOR) .label_color(TEXT_COLOR)
.label_font_size(18) .label_font_size(18)
@ -559,11 +570,11 @@ impl CharSelectionUi {
self.character_creation = false; self.character_creation = false;
} }
// Create Button // Create Button
if Button::image(self.imgs.button_dark) if Button::image(self.imgs.button)
.bottom_right_with_margins_on(self.ids.bg_creation, 10.0, 10.0) .bottom_right_with_margins_on(self.ids.bg_creation, 10.0, 10.0)
.w_h(150.0, 40.0) .w_h(150.0, 40.0)
.hover_image(self.imgs.button_dark_hover) .hover_image(self.imgs.button_hover)
.press_image(self.imgs.button_dark_press) .press_image(self.imgs.button_press)
.label("Create") .label("Create")
.label_color(TEXT_COLOR) .label_color(TEXT_COLOR)
.label_font_size(18) .label_font_size(18)

View File

@ -45,6 +45,7 @@ widget_ids! {
// Error // Error
error_frame, error_frame,
button_ok, button_ok,
version,
} }
} }
@ -54,18 +55,13 @@ struct Imgs {
input_bg: ImgId, input_bg: ImgId,
login_button: ImgId,
login_button_hover: ImgId,
login_button_press: ImgId,
button: ImgId,
button_hover: ImgId,
button_press: ImgId,
error_frame: ImgId, error_frame: ImgId,
button_dark: ImgId, button_dark: ImgId,
button_dark_hover: ImgId, button_dark_hover: ImgId,
button_dark_press: ImgId, button_dark_press: ImgId,
button: ImgId,
button_hover: ImgId,
button_press: ImgId,
} }
impl Imgs { impl Imgs {
fn new(ui: &mut Ui, renderer: &mut Renderer) -> Imgs { fn new(ui: &mut Ui, renderer: &mut Renderer) -> Imgs {
@ -91,27 +87,18 @@ impl Imgs {
}; };
Imgs { Imgs {
bg: load_img("background/bg_main.png", ui), bg: load_img("background/bg_main.png", ui),
v_logo: load_img("element/v_logo.png", ui), v_logo: load_vox("element/v_logo.vox", ui),
// Input fields // Input fields
input_bg: load_img("element/misc_backgrounds/textbox.png", ui), input_bg: load_vox("element/misc_bg/textbox.vox", ui),
// Login button
login_button: load_img("element/buttons/button_login.png", ui),
login_button_hover: load_img("element/buttons/button_login_hover.png", ui),
login_button_press: load_img("element/buttons/button_login_press.png", ui),
// Servers, settings, and quit buttons
//button: load_vox("element/buttons/button.vox", ui),
button: load_img("element/buttons/button.png", ui),
button_hover: load_img("element/buttons/button_hover.png", ui),
button_press: load_img("element/buttons/button_press.png", ui),
//Error
error_frame: load_img("element/frames/window_2.png", ui), error_frame: load_img("element/frames/window_2.png", ui),
button_dark: load_img("element/buttons/button_dark.png", 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_hover: load_vox("element/buttons/button_dark_hover.vox", ui),
button_dark_press: load_img("element/buttons/button_dark_press.png", 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),
} }
} }
} }
@ -184,16 +171,15 @@ impl MainMenuUi {
Image::new(self.imgs.bg) Image::new(self.imgs.bg)
.middle_of(ui_widgets.window) .middle_of(ui_widgets.window)
.set(self.ids.bg, ui_widgets); .set(self.ids.bg, ui_widgets);
Button::image(self.imgs.v_logo) Image::new(self.imgs.v_logo)
.w_h(346.0, 111.0) .w_h(123.0*3.0, 35.0*3.0)
.top_left_with_margins(30.0, 40.0) .top_left_with_margins(30.0, 30.0)
.label(version)
.label_rgba(1.0, 1.0, 1.0, 1.0)
.label_font_size(10)
.label_y(Relative::Scalar(-40.0))
.label_x(Relative::Scalar(-100.0))
.set(self.ids.v_logo, ui_widgets); .set(self.ids.v_logo, ui_widgets);
Text::new(version)
.top_left_with_margins_on(ui_widgets.window, 5.0, 5.0)
.font_size(14)
.color(TEXT_COLOR)
.set(self.ids.version, ui_widgets);
// Input fields // Input fields
// Used when the login button is pressed, or enter is pressed within input field // Used when the login button is pressed, or enter is pressed within input field
macro_rules! login { macro_rules! login {
@ -368,7 +354,7 @@ impl MainMenuUi {
// Login button // Login button
// Change button text and remove hover/press images if a connection is in progress // Change button text and remove hover/press images if a connection is in progress
if let Some(start) = self.connecting { if let Some(start) = self.connecting {
Button::image(self.imgs.login_button) Button::image(self.imgs.button)
.w_h(258.0, 68.0) .w_h(258.0, 68.0)
.down_from(self.ids.address_bg, 20.0) .down_from(self.ids.address_bg, 20.0)
.align_middle_x_of(self.ids.address_bg) .align_middle_x_of(self.ids.address_bg)
@ -386,9 +372,9 @@ impl MainMenuUi {
.label_y(Relative::Scalar(5.0)) .label_y(Relative::Scalar(5.0))
.set(self.ids.login_button, ui_widgets); .set(self.ids.login_button, ui_widgets);
} else { } else {
if Button::image(self.imgs.login_button) if Button::image(self.imgs.button)
.hover_image(self.imgs.login_button_hover) .hover_image(self.imgs.button_hover)
.press_image(self.imgs.login_button_press) .press_image(self.imgs.button_press)
.w_h(258.0, 68.0) .w_h(258.0, 68.0)
.down_from(self.ids.address_bg, 20.0) .down_from(self.ids.address_bg, 20.0)
.align_middle_x_of(self.ids.address_bg) .align_middle_x_of(self.ids.address_bg)
@ -404,9 +390,9 @@ impl MainMenuUi {
}; };
// Singleplayer button // Singleplayer button
if Button::image(self.imgs.login_button) if Button::image(self.imgs.button)
.hover_image(self.imgs.login_button_hover) .hover_image(self.imgs.button_hover)
.press_image(self.imgs.login_button_press) .press_image(self.imgs.button_press)
.w_h(258.0, 68.0) .w_h(258.0, 68.0)
.down_from(self.ids.login_button, 20.0) .down_from(self.ids.login_button, 20.0)
.align_middle_x_of(self.ids.address_bg) .align_middle_x_of(self.ids.address_bg)