Nicole Wang


Diegetic UI Design: Umbrella Sword

Academic Independent Project 

Duration: 2 Weeks in September, 2020

Project Brief: The umbrella sword is a diegetic user interface element that focuses on immersive gameplay. The following sections will walk through the creative process of the design.

01. Visual Equations

  • The umbrella in Kingsman (movie) + assault rifle in The Last of Us = Elementary Umbrella with Gun
  • The King’s Avatar Umbrella + Ubume’s umbrella in Onmyoji + magic light + magic stone = Multifunctional Energy Umbrella
  • Ubume’s umbrella in Onmyoji + The King’s Avatar umbrella + Zelda’s ancient sword = Elementary Umbrella Sword
  • Ubume’s umbrella in Onmyoji + the umbrella shield in Monster Hunter Rise = Umbrella Sword with Shield
  • The King’s Avatar umbrella + Zelda’s ancient weapons + Diablo II crystal sword + magic light = Crystal Umbrella Sword
  • The visual effect of petals in Eastward Legend + the light effect of Zelda’s ancient weapons = The Health Bar for the Umbrella

02. Inspirations

03. References

04. Photobash Version of the Idea

Based on inspirations and references, I came out with an idea about the umbrella sword, which can absorb energy or magic from lightning. So, it’s an ideal and multifunctional weapon in a rainy scene.

05. Final Design of the Diegetic Umbrella Sword

  • The diegetic umbrella sword was designed with Adobe Illustration.
  • The umbrella sword has different shapes indicating its states. It can be used as a sword when it folds, or it can be a shield while it unfolds. The blue health bars mean the umbrella is full of energy to cast a spell, and the ultimate is ready as well. After it turns red, it needs to absorb energy from lightning. Otherwise, it can be used as a shield only.

06. Storyboards

a. When health bars are blue, the player can free to cast a spell and fight with the umbrella as a sword or a shield. 

b. After using the umbrella sword for a while, health bars turn red to indicate its energy is run out and remind the player to absorb the energy from lightning. If the player tries to cast a spell under this circumstance, an error sound plays along with the controller vibrates.

b-1. Even though health bars are red, the player can still use it as a shield to intercept attacks and protect the character.

c. In the proper situation, the player can absorb energy immediately from lightning.

c-1. The acceptor on the top of the umbrella absorbs the lightning energy and lights up health bars to blue. The controller will keep vibrating slightly until the absorbing process finishes.

c-2. After the absorbing process finishes, the blue wind visual effect along with the sound effect will be applied around the weapon, to indicate that the umbrella sword is back to normal and ready to cast a spell.

c-3. Can be used as either a sword or a shield.