cleaned up skillbar, adjusted buffs placing

cleaned up skillbar, adjusted buffs placing

cleaned up skillbar, adjusted buffs placing

render diary example items in voxygen instead of using pre-rendered image files

assets/voxygen/item_image_manifest.ron

@@ -3,6 +3,47 @@
 //  VoxTrans(specifier, offset, (x_rot, y_rot, z_rot), zoom)
 ({
     // Weapons
+    // Diary Example Images
+    Tool("example_sword"): VoxTrans(
+        "voxel.weapon.sword.greatsword_2h_dullahan",
+        (0.0, 0.0, 0.0), (90.0, 80.0, 0.0), 1.0,
+    ),
+    Tool("example_axe"): VoxTrans(
+        "voxel.weapon.axe.2haxe_bloodsteel-0",
+       (0.0, 0.0, 0.0), (-90.0, 70.0, 0.0), 1.0,
+    ),
+    Tool("example_hammer"): VoxTrans(
+        "voxel.weapon.hammer.2hhammer_ramshead",
+        (-1.0, 0.0, 0.0), (-70.0, 55.0, 0.0), 1.0,
+    ),
+    Tool("example_bow"): VoxTrans(
+        "voxel.weapon.bow.longbow_ore_nature-0",
+        (-1.0, 0.0, 0.0), (90.0, 60.0, 0.0), 1.0,
+    ),
+    Tool("example_staff_fire"): VoxTrans(
+        "voxel.weapon.staff.firestaff_saurok",
+        (-1.0, 0.0, 0.0), (-100.0, -140.0, 0.0), 1.0,
+    ),
+    Tool("example_sceptre"): VoxTrans(
+        "voxel.weapon.sceptre.wood-nature",
+        (-1.0, 0.0, 0.0), (-90.0, 55.0, 0.0), 1.0,
+    ),
+    Tool("example_dagger"): VoxTrans(
+        "voxel.weapon.dagger.dagger_basic-0",
+        (0.0, 0.0, 0.0), (90.0, 90.0, 0.0), 1.0,
+    ),
+    Tool("example_shield"): VoxTrans(
+        "voxel.weapon.shield.wood-0",
+        (0.0, 0.0, 0.0), (90.0, 90.0, 0.0), 1.0,
+    ),
+    Tool("example_general_combat_left"): VoxTrans(
+        "voxel.weapon.shield.wood-0",
+        (0.0, 0.0, 0.0), (90.0, 90.0, 0.0), 1.0,
+    ),
+    Tool("example_general_combat_right"): VoxTrans(
+        "voxel.weapon.sword.long_2h_saurok",
+        (0.0, 0.0, 0.0), (90.0, 90.0, 0.0), 1.0,
+    ),
     // Bows
     Tool("common.items.weapons.bow.starter_bow"): VoxTrans(
         "voxel.weapon.bow.shortbow_starter",

voxygen/src/hud/buffs.rs

@@ -9,13 +9,12 @@ use crate::{
     GlobalState,
 };
 
-use common::comp::{BuffKind, Buffs};
+use common::comp::{BuffKind, Buffs, Energy, Health};
 use conrod_core::{
     color,
     widget::{self, Button, Image, Rectangle, Text},
     widget_ids, Color, Colorable, Positionable, Sizeable, Widget, WidgetCommon,
 };
-
 widget_ids! {
     struct Ids {
         align,
@@ -43,6 +42,8 @@ pub struct BuffsBar<'a> {
     buffs: &'a Buffs,
     pulse: f32,
     global_state: &'a GlobalState,
+    health: &'a Health,
+    energy: &'a Energy,
 }
 
 impl<'a> BuffsBar<'a> {
@@ -56,6 +57,8 @@ impl<'a> BuffsBar<'a> {
         buffs: &'a Buffs,
         pulse: f32,
         global_state: &'a GlobalState,
+        health: &'a Health,
+        energy: &'a Energy,
     ) -> Self {
         Self {
             imgs,
@@ -67,6 +70,8 @@ impl<'a> BuffsBar<'a> {
             buffs,
             pulse,
             global_state,
+            health,
+            energy,
         }
     }
 }
@@ -119,9 +124,26 @@ impl<'a> Widget for BuffsBar<'a> {
         .font_id(self.fonts.cyri.conrod_id)
         .desc_text_color(TEXT_COLOR);
         if let BuffPosition::Bar = buff_position {
+            let show_health = if self.health.current() != self.health.maximum() {
+                true
+            } else {
+                false
+            };
+            let show_stamina = if self.energy.current() != self.energy.maximum() {
+                true
+            } else {
+                false
+            };
+            let offset = if show_health && show_stamina {
+                140.0
+            } else if show_health || show_stamina {
+                95.0
+            } else {
+                55.0
+            };
             // Alignment
             Rectangle::fill_with([484.0, 100.0], color::TRANSPARENT)
-                .mid_bottom_with_margin_on(ui.window, 92.0)
+                .mid_bottom_with_margin_on(ui.window, offset)
                 .set(state.ids.align, ui);
             Rectangle::fill_with([484.0 / 2.0, 90.0], color::TRANSPARENT)
                 .bottom_left_with_margins_on(state.ids.align, 0.0, 0.0)
@@ -201,7 +223,7 @@ impl<'a> Widget for BuffsBar<'a> {
                     let buff_widget = buff_widget.bottom_left_with_margins_on(
                         state.ids.buffs_align,
                         0.0 + y as f64 * (41.0),
-                        0.0 + x as f64 * (41.0),
+                        1.5 + x as f64 * (43.0),
                     );
                     buff_widget
                         .color(
@@ -310,7 +332,7 @@ impl<'a> Widget for BuffsBar<'a> {
                     let debuff_widget = debuff_widget.bottom_right_with_margins_on(
                         state.ids.debuffs_align,
                         0.0 + y as f64 * (41.0),
-                        0.0 + x as f64 * (41.0),
+                        1.5 + x as f64 * (43.0),
                     );
 
                     debuff_widget

voxygen/src/hud/diary.rs

@@ -1,5 +1,6 @@
 use super::{
     img_ids::{Imgs, ImgsRot},
+    item_imgs::{ItemImgs, ItemKey::Tool},
     Show, TEXT_COLOR, UI_HIGHLIGHT_0, UI_MAIN,
 };
 use crate::{
@@ -131,6 +132,7 @@ pub struct Diary<'a> {
     _client: &'a Client,
 
     imgs: &'a Imgs,
+    item_imgs: &'a ItemImgs,
     fonts: &'a Fonts,
     localized_strings: &'a Localization,
     rot_imgs: &'a ImgsRot,
@@ -150,6 +152,7 @@ impl<'a> Diary<'a> {
         show: &'a Show,
         _client: &'a Client,
         imgs: &'a Imgs,
+        item_imgs: &'a ItemImgs,
         fonts: &'a Fonts,
         localized_strings: &'a Localization,
         rot_imgs: &'a ImgsRot,
@@ -159,6 +162,7 @@ impl<'a> Diary<'a> {
             show,
             _client,
             imgs,
+            item_imgs,
             fonts,
             localized_strings,
             rot_imgs,
@@ -561,27 +565,20 @@ impl<'a> Widget for Diary<'a> {
         }
         // Skill-Icons and Functionality
         // Art dimensions
-        let art_size = tweak!(0.6);
-        let sword_size = [265.0 * art_size, 818.0 * art_size];
-        let axe_size = [448.0 * art_size, 818.0 * art_size];
-        let hammer_size = [465.0 * art_size, 818.0 * art_size];
-        let bow_size = [205.0 * art_size, 818.0 * art_size];
-        let staff0_size = [177.0 * art_size, 818.0 * art_size];
-        let sceptre_size = [241.0 * art_size, 818.0 * art_size];
-        let general_comb_size = [762.0 * art_size, 818.0 * art_size];
-        let _shield_size = [757.0 * art_size, 818.0 * art_size];
-        let _dagger_size = [265.0 * art_size, 818.0 * art_size];
-
+        let art_size = [tweak!(490.0), tweak!(490.0)];
         match sel_tab {
             SelectedSkillTree::Sword => {
                 use skills::SwordSkill::*;
                 // Sword
-                Image::new(self.imgs.sword_render)
-                    .wh(sword_size)
-                    .middle_of(state.content_align)
-                    .graphics_for(state.content_align)
-                    .color(Some(Color::Rgba(1.0, 1.0, 1.0, tweak!(1.0))))
-                    .set(state.sword_render, ui);
+                Image::new(
+                    self.item_imgs
+                        .img_id_or_not_found_img(Tool("example_sword".to_string()).clone()),
+                )
+                .wh(art_size)
+                .middle_of(state.content_align)
+                .graphics_for(state.content_align)
+                .color(Some(Color::Rgba(1.0, 1.0, 1.0, tweak!(1.0))))
+                .set(state.sword_render, ui);
                 // Top Left skills
                 //        5 1 6
                 //        3 0 4
@@ -929,12 +926,15 @@ impl<'a> Widget for Diary<'a> {
             SelectedSkillTree::Axe => {
                 use skills::AxeSkill::*;
                 // Axe
-                Image::new(self.imgs.axe_render)
-                    .wh(axe_size)
-                    .middle_of(state.content_align)
-                    .graphics_for(state.content_align)
-                    .color(Some(Color::Rgba(1.0, 1.0, 1.0, tweak!(1.0))))
-                    .set(state.axe_render, ui);
+                Image::new(
+                    self.item_imgs
+                        .img_id_or_not_found_img(Tool("example_axe".to_string()).clone()),
+                )
+                .wh(art_size)
+                .middle_of(state.content_align)
+                .graphics_for(state.content_align)
+                .color(Some(Color::Rgba(1.0, 1.0, 1.0, tweak!(1.0))))
+                .set(state.axe_render, ui);
                 // Top Left skills
                 //        5 1 6
                 //        3 0 4
@@ -1239,12 +1239,15 @@ impl<'a> Widget for Diary<'a> {
             SelectedSkillTree::Hammer => {
                 use skills::HammerSkill::*;
                 // Hammer
-                Image::new(self.imgs.hammer_render)
-                    .wh(hammer_size)
-                    .middle_of(state.content_align)
-                    .graphics_for(state.content_align)
-                    .color(Some(Color::Rgba(1.0, 1.0, 1.0, tweak!(1.0))))
-                    .set(state.hammer_render, ui);
+                Image::new(
+                    self.item_imgs
+                        .img_id_or_not_found_img(Tool("example_hammer".to_string()).clone()),
+                )
+                .wh(art_size)
+                .middle_of(state.content_align)
+                .graphics_for(state.content_align)
+                .color(Some(Color::Rgba(1.0, 1.0, 1.0, tweak!(1.0))))
+                .set(state.hammer_render, ui);
                 // Top Left skills
                 //        5 1 6
                 //        3 0 4
@@ -1549,12 +1552,14 @@ impl<'a> Widget for Diary<'a> {
             SelectedSkillTree::Bow => {
                 use skills::BowSkill::*;
                 // Bow
-                Image::new(self.imgs.bow_render)
-                    .wh(bow_size)
-                    .middle_of(state.content_align)
-                    .graphics_for(state.content_align)
-                    .color(Some(Color::Rgba(1.0, 1.0, 1.0, tweak!(1.0))))
-                    .set(state.bow_render, ui);
+                Image::new(
+                    self.item_imgs
+                        .img_id_or_not_found_img(Tool("example_bow".to_string()).clone()),
+                )
+                .wh(art_size)
+                .middle_of(state.content_align)
+                .graphics_for(state.content_align)
+                .set(state.bow_render, ui);
                 // Top Left skills
                 //        5 1 6
                 //        3 0 4
@@ -1860,12 +1865,15 @@ impl<'a> Widget for Diary<'a> {
             SelectedSkillTree::StaffFire => {
                 use skills::StaffSkill::*;
                 // Staff
-                Image::new(self.imgs.staff0_render)
-                    .wh(staff0_size)
-                    .middle_of(state.content_align)
-                    .graphics_for(state.content_align)
-                    .color(Some(Color::Rgba(1.0, 1.0, 1.0, tweak!(1.0))))
-                    .set(state.staff_render, ui);
+                Image::new(
+                    self.item_imgs
+                        .img_id_or_not_found_img(Tool("example_staff_fire".to_string()).clone()),
+                )
+                .wh(art_size)
+                .middle_of(state.content_align)
+                .graphics_for(state.content_align)
+                .color(Some(Color::Rgba(1.0, 1.0, 1.0, tweak!(1.0))))
+                .set(state.staff_render, ui);
                 // Top Left skills
                 //        5 1 6
                 //        3 0 4
@@ -2149,12 +2157,15 @@ impl<'a> Widget for Diary<'a> {
             SelectedSkillTree::Sceptre => {
                 use skills::SceptreSkill::*;
                 // Sceptre
-                Image::new(self.imgs.sceptre_render)
-                    .wh(sceptre_size)
-                    .middle_of(state.content_align)
-                    .graphics_for(state.content_align)
-                    .color(Some(Color::Rgba(1.0, 1.0, 1.0, tweak!(1.0))))
-                    .set(state.sceptre_render, ui);
+                Image::new(
+                    self.item_imgs
+                        .img_id_or_not_found_img(Tool("example_sceptre".to_string()).clone()),
+                )
+                .wh(art_size)
+                .middle_of(state.content_align)
+                .graphics_for(state.content_align)
+                .color(Some(Color::Rgba(1.0, 1.0, 1.0, tweak!(1.0))))
+                .set(state.sceptre_render, ui);
                 // Top Left skills
                 //        5 1 6
                 //        3 0 4

voxygen/src/hud/img_ids.rs

@@ -64,16 +64,7 @@ image_ids! {
         
         // Diary Window
         diary_bg: "voxygen.element.misc_bg.diary_bg",
-        diary_frame: "voxygen.element.misc_bg.diary_frame",
-        sword_render: "voxygen.element.misc_bg.sword_render",
-        axe_render: "voxygen.element.misc_bg.axe_render",
-        hammer_render: "voxygen.element.misc_bg.hammer_render",
-        bow_render: "voxygen.element.misc_bg.bow_render",
-        staff0_render: "voxygen.element.misc_bg.staff0_render",
-        sceptre_render: "voxygen.element.misc_bg.sceptre_render",
-        general_combat_render: "voxygen.element.misc_bg.general_combat_render",
-        shield_render: "voxygen.element.misc_bg.shield_render",
-        dagger_render: "voxygen.element.misc_bg.dagger_render",
+        diary_frame: "voxygen.element.misc_bg.diary_frame",        
 
         // Skill Trees
         sceptre: "voxygen.element.icons.sceptre",
@@ -180,10 +171,15 @@ image_ids! {
         bar_content: "voxygen.element.skillbar.bar_content",
         skillbar_bg: "voxygen.element.skillbar.bg",
         skillbar_frame: "voxygen.element.skillbar.frame",
+        health_bg: "voxygen.element.skillbar.health_bg",
+        health_frame: "voxygen.element.skillbar.health_frame",
+        stamina_bg: "voxygen.element.skillbar.stamina_bg",
+        stamina_frame: "voxygen.element.skillbar.stamina_frame",
         m1_ico: "voxygen.element.icons.m1",
         m2_ico: "voxygen.element.icons.m2",
         m_scroll_ico: "voxygen.element.icons.m_scroll",
         m_move_ico: "voxygen.element.icons.m_move",
+        skillbar_slot: "voxygen.element.skillbar.slot",
 
         // Other Icons/Art
         skull: "voxygen.element.icons.skull",

voxygen/src/hud/mod.rs

@@ -1859,26 +1859,6 @@ impl Hud {
                 None => {},
             }
         }
-
-        // Buffs and Debuffs
-        if let Some(player_buffs) = buffs.get(client.entity()) {
-            for event in BuffsBar::new(
-                &self.imgs,
-                &self.fonts,
-                &self.rot_imgs,
-                tooltip_manager,
-                i18n,
-                &player_buffs,
-                self.pulse,
-                &global_state,
-            )
-            .set(self.ids.buffs, ui_widgets)
-            {
-                match event {
-                    buffs::Event::RemoveBuff(buff_id) => events.push(Event::RemoveBuff(buff_id)),
-                }
-            }
-        }
         // Group Window
         for event in Group::new(
             &mut self.show,
@@ -2039,7 +2019,35 @@ impl Hud {
             )
             .set(self.ids.skillbar, ui_widgets);
         }
-
+        // Buffs
+        let ecs = client.state().ecs();
+        let entity = client.entity();
+        let health = ecs.read_storage::<comp::Health>();
+        let energy = ecs.read_storage::<comp::Energy>();
+        if let (Some(player_buffs), Some(health), Some(energy)) = (
+            buffs.get(client.entity()),
+            health.get(entity),
+            energy.get(entity),
+        ) {
+            for event in BuffsBar::new(
+                &self.imgs,
+                &self.fonts,
+                &self.rot_imgs,
+                tooltip_manager,
+                i18n,
+                &player_buffs,
+                self.pulse,
+                &global_state,
+                &health,
+                &energy,
+            )
+            .set(self.ids.buffs, ui_widgets)
+            {
+                match event {
+                    buffs::Event::RemoveBuff(buff_id) => events.push(Event::RemoveBuff(buff_id)),
+                }
+            }
+        }
         // Crafting
         if self.show.crafting {
             if let Some(inventory) = inventories.get(entity) {
@@ -2312,6 +2320,7 @@ impl Hud {
                 &self.show,
                 client,
                 &self.imgs,
+                &self.item_imgs,
                 &self.fonts,
                 i18n,
                 &self.rot_imgs,

voxygen/src/hud/skillbar.rs

@@ -3,7 +3,7 @@ use super::{
     img_ids::{Imgs, ImgsRot},
     item_imgs::ItemImgs,
     slots, BarNumbers, ShortcutNumbers, Show, BLACK, CRITICAL_HP_COLOR, HP_COLOR, LOW_HP_COLOR,
-    STAMINA_COLOR, TEXT_COLOR, UI_HIGHLIGHT_0, UI_MAIN, XP_COLOR,
+    STAMINA_COLOR, TEXT_COLOR, UI_HIGHLIGHT_0,
 };
 use crate::{
     i18n::Localization,
@@ -28,6 +28,7 @@ use conrod_core::{
     widget::{self, Button, Image, Rectangle, Text},
     widget_ids, Color, Colorable, Positionable, Sizeable, Widget, WidgetCommon,
 };
+use inline_tweak::*;
 use std::time::{Duration, Instant};
 use vek::*;
 
@@ -51,6 +52,10 @@ widget_ids! {
         alignment,
         bg,
         frame,
+        bg_health,
+        frame_health,
+        bg_stamina,
+        frame_stamina,
         m1_ico,
         m2_ico,
         // Level
@@ -212,13 +217,13 @@ impl<'a> Widget for Skillbar<'a> {
     fn update(self, args: widget::UpdateArgs<Self>) -> Self::Event {
         let widget::UpdateArgs { state, ui, .. } = args;
 
-        let level = if self.stats.level.level() > 999 {
+        let _level = if self.stats.level.level() > 999 {
             "A".to_string()
         } else {
             (self.stats.level.level()).to_string()
         };
 
-        let exp_percentage = (self.stats.exp.current() as f64) / (self.stats.exp.maximum() as f64);
+        let _exp_percentage = (self.stats.exp.current() as f64) / (self.stats.exp.maximum() as f64);
 
         let mut hp_percentage = self.health.current() as f64 / self.health.maximum() as f64 * 100.0;
         let mut energy_percentage =
@@ -236,6 +241,8 @@ impl<'a> Widget for Skillbar<'a> {
 
         let localized_strings = self.localized_strings;
 
+        let slot_offset = tweak!(3.0);
+
         // Level Up Message
         if !self.show.intro {
             let current_level = self.stats.level.level();
@@ -339,65 +346,75 @@ impl<'a> Widget for Skillbar<'a> {
         }
         // Skillbar
         // Alignment and BG
-        Rectangle::fill_with([524.0, 80.0], color::TRANSPARENT)
+        let alignment_size = 40.0 * 12.0 + slot_offset * 11.0;
+        Rectangle::fill_with([alignment_size, 80.0], color::TRANSPARENT)
             .mid_bottom_with_margin_on(ui.window, 10.0)
-            .set(state.ids.alignment, ui);
-        Image::new(self.imgs.skillbar_bg)
-            .w_h(480.0, 80.0)
-            .color(Some(UI_MAIN))
-            .middle_of(state.ids.alignment)
-            .set(state.ids.bg, ui);
-        // Level
-        let lvl_size = match self.stats.level.level() {
-            11..=99 => 13,
-            100..=999 => 10,
-            _ => 14,
-        };
-        Text::new(&level)
-            .mid_top_with_margin_on(state.ids.bg, 3.0)
-            .font_size(self.fonts.cyri.scale(lvl_size))
-            .font_id(self.fonts.cyri.conrod_id)
-            .color(TEXT_COLOR)
-            .set(state.ids.level, ui);
-        // Exp-Bar
-        Rectangle::fill_with([476.0, 8.0], color::TRANSPARENT)
-            .mid_bottom_with_margin_on(state.ids.bg, 4.0)
-            .set(state.ids.exp_alignment, ui);
-        Image::new(self.imgs.bar_content)
-            .w_h(476.0 * exp_percentage, 8.0)
-            .color(Some(XP_COLOR))
-            .bottom_left_with_margins_on(state.ids.exp_alignment, 0.0, 0.0)
-            .set(state.ids.exp_filling, ui);
+            .set(state.ids.frame, ui);
         // Health and Stamina bar
-        // Alignment
-        Rectangle::fill_with([240.0, 17.0], color::TRANSPARENT)
-            .top_left_with_margins_on(state.ids.alignment, 0.0, 0.0)
-            .set(state.ids.hp_alignment, ui);
-        Rectangle::fill_with([240.0, 17.0], color::TRANSPARENT)
-            .top_right_with_margins_on(state.ids.alignment, 0.0, 0.0)
-            .set(state.ids.stamina_alignment, ui);
-        let health_col = match hp_percentage as u8 {
-            0..=20 => crit_hp_color,
-            21..=40 => LOW_HP_COLOR,
-            _ => HP_COLOR,
+        let show_health = if self.health.current() != self.health.maximum() {
+            true
+        } else {
+            false
         };
-        // Content
-        Image::new(self.imgs.bar_content)
-            .w_h(216.0 * hp_percentage / 100.0, 14.0)
-            .color(Some(health_col))
-            .top_right_with_margins_on(state.ids.hp_alignment, 4.0, 0.0)
-            .set(state.ids.hp_filling, ui);
-        Image::new(self.imgs.bar_content)
-            .w_h(216.0 * energy_percentage / 100.0, 14.0)
-            .color(Some(STAMINA_COLOR))
-            .top_left_with_margins_on(state.ids.stamina_alignment, 4.0, 0.0)
-            .set(state.ids.stamina_filling, ui);
-        Rectangle::fill_with([219.0, 14.0], color::TRANSPARENT)
-            .top_left_with_margins_on(state.ids.hp_alignment, 4.0, 20.0)
-            .set(state.ids.hp_txt_alignment, ui);
-        Rectangle::fill_with([219.0, 14.0], color::TRANSPARENT)
-            .top_right_with_margins_on(state.ids.stamina_alignment, 4.0, 20.0)
-            .set(state.ids.stamina_txt_alignment, ui);
+        let show_stamina = if self.energy.current() != self.energy.maximum() {
+            true
+        } else {
+            false
+        };
+
+        if show_health && !self.health.is_dead {
+            let offset = if show_stamina {
+                tweak!(1.0)
+            } else {
+                tweak!(1.0)
+            };
+            Image::new(self.imgs.health_bg)
+                .w_h(484.0, 24.0)
+                .mid_top_with_margin_on(state.ids.frame, -offset)
+                .set(state.ids.bg_health, ui);
+            Rectangle::fill_with([480.0, 18.0], color::TRANSPARENT)
+                .top_left_with_margins_on(state.ids.bg_health, 2.0, 2.0)
+                .set(state.ids.hp_alignment, ui);
+            let health_col = match hp_percentage as u8 {
+                0..=20 => crit_hp_color,
+                21..=40 => LOW_HP_COLOR,
+                _ => HP_COLOR,
+            };
+            Image::new(self.imgs.bar_content)
+                .w_h(480.0 * hp_percentage / 100.0, 18.0)
+                .color(Some(health_col))
+                .top_left_with_margins_on(state.ids.hp_alignment, 0.0, 0.0)
+                .set(state.ids.hp_filling, ui);
+            Image::new(self.imgs.health_frame)
+                .w_h(484.0, 24.0)
+                .color(Some(UI_HIGHLIGHT_0))
+                .middle_of(state.ids.bg_health)
+                .set(state.ids.frame_health, ui);
+        }
+        if show_stamina && !self.health.is_dead {
+            let offset = if show_health {
+                tweak!(34.0)
+            } else {
+                tweak!(1.0)
+            };
+            Image::new(self.imgs.stamina_bg)
+                .w_h(323.0, 16.0)
+                .mid_top_with_margin_on(state.ids.frame, -offset)
+                .set(state.ids.bg_stamina, ui);
+            Rectangle::fill_with([319.0, 10.0], color::TRANSPARENT)
+                .top_left_with_margins_on(state.ids.bg_stamina, 2.0, 2.0)
+                .set(state.ids.stamina_alignment, ui);
+            Image::new(self.imgs.bar_content)
+                .w_h(319.0 * energy_percentage / 100.0, 10.0)
+                .color(Some(STAMINA_COLOR))
+                .top_left_with_margins_on(state.ids.stamina_alignment, 0.0, 0.0)
+                .set(state.ids.stamina_filling, ui);
+            Image::new(self.imgs.stamina_frame)
+                .w_h(323.0, 16.0)
+                .color(Some(UI_HIGHLIGHT_0))
+                .middle_of(state.ids.bg_stamina)
+                .set(state.ids.frame_stamina, ui);
+        }
         // Bar Text
         // Values
         if let BarNumbers::Values = bar_values {
@@ -413,7 +430,7 @@ impl<'a> Widget for Skillbar<'a> {
                 energy_txt = self.localized_strings.get("hud.group.dead").to_string();
             };
             Text::new(&hp_txt)
-                .middle_of(state.ids.hp_txt_alignment)
+                .middle_of(state.ids.frame_health)
                 .font_size(self.fonts.cyri.scale(12))
                 .font_id(self.fonts.cyri.conrod_id)
                 .color(Color::Rgba(0.0, 0.0, 0.0, 1.0))
@@ -425,7 +442,7 @@ impl<'a> Widget for Skillbar<'a> {
                 .color(TEXT_COLOR)
                 .set(state.ids.hp_txt, ui);
             Text::new(&energy_txt)
-                .middle_of(state.ids.stamina_txt_alignment)
+                .middle_of(state.ids.frame_stamina)
                 .font_size(self.fonts.cyri.scale(12))
                 .font_id(self.fonts.cyri.conrod_id)
                 .color(Color::Rgba(0.0, 0.0, 0.0, 1.0))
@@ -446,7 +463,7 @@ impl<'a> Widget for Skillbar<'a> {
                 energy_txt = self.localized_strings.get("hud.group.dead").to_string();
             };
             Text::new(&hp_txt)
-                .middle_of(state.ids.hp_txt_alignment)
+                .middle_of(state.ids.frame_health)
                 .font_size(self.fonts.cyri.scale(12))
                 .font_id(self.fonts.cyri.conrod_id)
                 .color(Color::Rgba(0.0, 0.0, 0.0, 1.0))
@@ -458,7 +475,7 @@ impl<'a> Widget for Skillbar<'a> {
                 .color(TEXT_COLOR)
                 .set(state.ids.hp_txt, ui);
             Text::new(&energy_txt)
-                .middle_of(state.ids.stamina_txt_alignment)
+                .middle_of(state.ids.frame_stamina)
                 .font_size(self.fonts.cyri.scale(12))
                 .font_id(self.fonts.cyri.conrod_id)
                 .color(Color::Rgba(0.0, 0.0, 0.0, 1.0))
@@ -475,8 +492,8 @@ impl<'a> Widget for Skillbar<'a> {
         let image_source = (self.item_imgs, self.imgs);
         let mut slot_maker = SlotMaker {
             // TODO: is a separate image needed for the frame?
-            empty_slot: self.imgs.inv_slot,
-            filled_slot: self.imgs.inv_slot,
+            empty_slot: self.imgs.skillbar_slot,
+            filled_slot: self.imgs.skillbar_slot,
             selected_slot: self.imgs.inv_slot_sel,
             background_color: None,
             content_size: ContentSize {
@@ -559,12 +576,12 @@ impl<'a> Widget for Skillbar<'a> {
         };
         // Slot 1-5
         // Slot 1
-        slot_maker.empty_slot = self.imgs.inv_slot;
-        slot_maker.selected_slot = self.imgs.inv_slot;
+        slot_maker.empty_slot = self.imgs.skillbar_slot;
+        slot_maker.selected_slot = self.imgs.skillbar_slot;
         let slot = slot_maker
             .fabricate(hotbar::Slot::One, [40.0; 2])
-            .filled_slot(self.imgs.inv_slot)
-            .bottom_left_with_margins_on(state.ids.frame, 15.0, 22.0);
+            .filled_slot(self.imgs.skillbar_slot)
+            .bottom_left_with_margins_on(state.ids.frame, 0.0, 0.0);
         if let Some((title, desc)) = tooltip_text(hotbar::Slot::One) {
             slot.with_tooltip(self.tooltip_manager, title, desc, &item_tooltip, TEXT_COLOR)
                 .set(state.ids.slot1, ui);
@@ -574,8 +591,8 @@ impl<'a> Widget for Skillbar<'a> {
         // Slot 2
         let slot = slot_maker
             .fabricate(hotbar::Slot::Two, [40.0; 2])
-            .filled_slot(self.imgs.inv_slot)
-            .right_from(state.ids.slot1, 0.0);
+            .filled_slot(self.imgs.skillbar_slot)
+            .right_from(state.ids.slot1, slot_offset);
         if let Some((title, desc)) = tooltip_text(hotbar::Slot::Two) {
             slot.with_tooltip(self.tooltip_manager, title, desc, &item_tooltip, TEXT_COLOR)
                 .set(state.ids.slot2, ui);
@@ -585,8 +602,8 @@ impl<'a> Widget for Skillbar<'a> {
         // Slot 3
         let slot = slot_maker
             .fabricate(hotbar::Slot::Three, [40.0; 2])
-            .filled_slot(self.imgs.inv_slot)
-            .right_from(state.ids.slot2, 0.0);
+            .filled_slot(self.imgs.skillbar_slot)
+            .right_from(state.ids.slot2, slot_offset);
         if let Some((title, desc)) = tooltip_text(hotbar::Slot::Three) {
             slot.with_tooltip(self.tooltip_manager, title, desc, &item_tooltip, TEXT_COLOR)
                 .set(state.ids.slot3, ui);
@@ -596,7 +613,7 @@ impl<'a> Widget for Skillbar<'a> {
         // Slot 4
         let slot = slot_maker
             .fabricate(hotbar::Slot::Four, [40.0; 2])
-            .filled_slot(self.imgs.inv_slot)
+            .filled_slot(self.imgs.skillbar_slot)
             .right_from(state.ids.slot3, 0.0);
         if let Some((title, desc)) = tooltip_text(hotbar::Slot::Four) {
             slot.with_tooltip(self.tooltip_manager, title, desc, &item_tooltip, TEXT_COLOR)
@@ -607,7 +624,7 @@ impl<'a> Widget for Skillbar<'a> {
         // Slot 5
         let slot = slot_maker
             .fabricate(hotbar::Slot::Five, [40.0; 2])
-            .filled_slot(self.imgs.inv_slot)
+            .filled_slot(self.imgs.skillbar_slot)
             .right_from(state.ids.slot4, 0.0);
         if let Some((title, desc)) = tooltip_text(hotbar::Slot::Five) {
             slot.with_tooltip(self.tooltip_manager, title, desc, &item_tooltip, TEXT_COLOR)
@@ -616,9 +633,9 @@ impl<'a> Widget for Skillbar<'a> {
             slot.set(state.ids.slot5, ui);
         }
         // Slot M1
-        Image::new(self.imgs.inv_slot)
+        Image::new(self.imgs.skillbar_slot)
             .w_h(40.0, 40.0)
-            .right_from(state.ids.slot5, 0.0)
+            .right_from(state.ids.slot5, slot_offset)
             .set(state.ids.m1_slot_bg, ui);
         Button::image(
             match self
@@ -645,9 +662,9 @@ impl<'a> Widget for Skillbar<'a> {
         .middle_of(state.ids.m1_slot_bg)
         .set(state.ids.m1_content, ui);
         // Slot M2
-        Image::new(self.imgs.inv_slot)
+        Image::new(self.imgs.skillbar_slot)
             .w_h(40.0, 40.0)
-            .right_from(state.ids.m1_slot_bg, 0.0)
+            .right_from(state.ids.m1_slot_bg, slot_offset)
             .set(state.ids.m2_slot, ui);
 
         fn get_tool(inventory: &Inventory, equip_slot: EquipSlot) -> Option<&Tool> {
@@ -669,7 +686,7 @@ impl<'a> Widget for Skillbar<'a> {
             (_, _) => None,
         };
 
-        Image::new(self.imgs.inv_slot)
+        Image::new(self.imgs.skillbar_slot)
             .w_h(40.0, 40.0)
             .middle_of(state.ids.m2_slot)
             .set(state.ids.m2_slot_bg, ui);
@@ -704,12 +721,12 @@ impl<'a> Widget for Skillbar<'a> {
         .set(state.ids.m2_content, ui);
         // Slot 6-10
         // Slot 6
-        slot_maker.empty_slot = self.imgs.inv_slot;
-        slot_maker.selected_slot = self.imgs.inv_slot;
+        slot_maker.empty_slot = self.imgs.skillbar_slot;
+        slot_maker.selected_slot = self.imgs.skillbar_slot;
         let slot = slot_maker
             .fabricate(hotbar::Slot::Six, [40.0; 2])
-            .filled_slot(self.imgs.inv_slot)
-            .right_from(state.ids.m2_slot_bg, 0.0);
+            .filled_slot(self.imgs.skillbar_slot)
+            .right_from(state.ids.m2_slot_bg, slot_offset);
         if let Some((title, desc)) = tooltip_text(hotbar::Slot::Six) {
             slot.with_tooltip(self.tooltip_manager, title, desc, &item_tooltip, TEXT_COLOR)
                 .set(state.ids.slot6, ui);
@@ -719,8 +736,8 @@ impl<'a> Widget for Skillbar<'a> {
         // Slot 7
         let slot = slot_maker
             .fabricate(hotbar::Slot::Seven, [40.0; 2])
-            .filled_slot(self.imgs.inv_slot)
-            .right_from(state.ids.slot6, 0.0);
+            .filled_slot(self.imgs.skillbar_slot)
+            .right_from(state.ids.slot6, slot_offset);
         if let Some((title, desc)) = tooltip_text(hotbar::Slot::Seven) {
             slot.with_tooltip(self.tooltip_manager, title, desc, &item_tooltip, TEXT_COLOR)
                 .set(state.ids.slot7, ui);
@@ -730,8 +747,8 @@ impl<'a> Widget for Skillbar<'a> {
         // Slot 8
         let slot = slot_maker
             .fabricate(hotbar::Slot::Eight, [40.0; 2])
-            .filled_slot(self.imgs.inv_slot)
-            .right_from(state.ids.slot7, 0.0);
+            .filled_slot(self.imgs.skillbar_slot)
+            .right_from(state.ids.slot7, slot_offset);
         if let Some((title, desc)) = tooltip_text(hotbar::Slot::Eight) {
             slot.with_tooltip(self.tooltip_manager, title, desc, &item_tooltip, TEXT_COLOR)
                 .set(state.ids.slot8, ui);
@@ -741,8 +758,8 @@ impl<'a> Widget for Skillbar<'a> {
         // Slot 9
         let slot = slot_maker
             .fabricate(hotbar::Slot::Nine, [40.0; 2])
-            .filled_slot(self.imgs.inv_slot)
-            .right_from(state.ids.slot8, 0.0);
+            .filled_slot(self.imgs.skillbar_slot)
+            .right_from(state.ids.slot8, slot_offset);
         if let Some((title, desc)) = tooltip_text(hotbar::Slot::Nine) {
             slot.with_tooltip(self.tooltip_manager, title, desc, &item_tooltip, TEXT_COLOR)
                 .set(state.ids.slot9, ui);
@@ -750,19 +767,18 @@ impl<'a> Widget for Skillbar<'a> {
             slot.set(state.ids.slot9, ui);
         }
         // Quickslot
-        slot_maker.empty_slot = self.imgs.inv_slot;
-        slot_maker.selected_slot = self.imgs.inv_slot;
+        slot_maker.empty_slot = self.imgs.skillbar_slot;
+        slot_maker.selected_slot = self.imgs.skillbar_slot;
         let slot = slot_maker
             .fabricate(hotbar::Slot::Ten, [40.0; 2])
-            .filled_slot(self.imgs.inv_slot)
-            .right_from(state.ids.slot9, 0.0);
+            .filled_slot(self.imgs.skillbar_slot)
+            .right_from(state.ids.slot9, slot_offset);
         if let Some((title, desc)) = tooltip_text(hotbar::Slot::Ten) {
             slot.with_tooltip(self.tooltip_manager, title, desc, &item_tooltip, TEXT_COLOR)
                 .set(state.ids.slot10, ui);
         } else {
             slot.set(state.ids.slot10, ui);
         }
-
         // Shortcuts
         if let ShortcutNumbers::On = shortcuts {
             if let Some(slot1) = &self
@@ -860,44 +876,6 @@ impl<'a> Widget for Skillbar<'a> {
                     .color(TEXT_COLOR)
                     .set(state.ids.slot5_text, ui);
             }
-            /*if let Some(m1) = &self
-                .global_state
-                .settings
-                .controls
-                .get_binding(GameInput::Primary)
-            {
-                Text::new(m1.to_string().as_str())
-                    .top_left_with_margins_on(state.ids.m1_slot, 5.0, 5.0)
-                    .font_size(self.fonts.cyri.scale(8))
-                    .font_id(self.fonts.cyri.conrod_id)
-                    .color(BLACK)
-                    .set(state.ids.m1_text_bg, ui);
-                Text::new(m1.to_string().as_str())
-                    .bottom_right_with_margins_on(state.ids.m1_text_bg, 1.0, 1.0)
-                    .font_size(self.fonts.cyri.scale(8))
-                    .font_id(self.fonts.cyri.conrod_id)
-                    .color(TEXT_COLOR)
-                    .set(state.ids.m1_text, ui);
-            }
-            if let Some(m2) = &self
-                .global_state
-                .settings
-                .controls
-                .get_binding(GameInput::Secondary)
-            {
-                Text::new(m2.to_string().as_str())
-                    .top_right_with_margins_on(state.ids.m2_slot, 5.0, 5.0)
-                    .font_size(self.fonts.cyri.scale(8))
-                    .font_id(self.fonts.cyri.conrod_id)
-                    .color(BLACK)
-                    .set(state.ids.m2_text_bg, ui);
-                Text::new(m2.to_string().as_str())
-                    .bottom_left_with_margins_on(state.ids.m2_text_bg, 1.0, 1.0)
-                    .font_size(self.fonts.cyri.scale(8))
-                    .font_id(self.fonts.cyri.conrod_id)
-                    .color(TEXT_COLOR)
-                    .set(state.ids.m2_text, ui);
-            }*/
             if let Some(slot6) = &self
                 .global_state
                 .settings
@@ -994,15 +972,7 @@ impl<'a> Widget for Skillbar<'a> {
                     .set(state.ids.slot10_text, ui);
             }
         };
-        // Frame
-        Image::new(self.imgs.skillbar_frame)
-            .w_h(524.0, 80.0)
-            .color(Some(UI_HIGHLIGHT_0))
-            .middle_of(state.ids.bg)
-            .floating(true)
-            .set(state.ids.frame, ui);
         // M1 and M2 icons
-        // TODO Don't show this if key bindings are changed
         Image::new(self.imgs.m1_ico)
             .w_h(16.0, 18.0)
             .mid_bottom_with_margin_on(state.ids.m1_content, -11.0)