Dev Blog #5: Gameplay UI Refine and Icons

 1.Gameplay UI Refine

Building upon the previously drawn sketches, I further refined the gameplay interface, with a focus on polishing the HUD design.

At the top of the screen, I implemented a classic red-versus-blue score bar to differentiate between the player's team and the opposing team. This color-coding approach is common in many competitive games as it is intuitive and helps players quickly assess the score during fast-paced battles. The score bar displays each team’s points on either end, with space in the middle reserved for key game information such as control point health or other mode-specific indicators. Below this, the center section displays the player’s health bar, while the left and right sides present ability icons and their corresponding hotkeys for primary attacks and special skills.

Gameplay UI（take Fire as an example）

2.Ability Icons

In addition to the overall layout, I designed unique ability icons for each character that share a unified visual style while reflecting their individual elemental identity:

    ① Left-click (Basic Attack): This is a fundamental ability for all characters. I created a consistent silhouette of a magical projectile with a trailing tail, and then customized the details according to the element. The fire element version features a flaming trail, the water element is shaped like a glossy droplet, and the wind element uses flowing lines to suggest air currents.

    ② Right-click (Secondary Skill): These abilities are more functionally distinct, so I designed element-specific icons to reflect their effects. For fire, which causes an explosive knockback, the icon shows a flame bursting outward. For water, which pulls enemies inward, the icon consists of arrows converging toward the center, enhanced with water droplets. For wind, which fires a small vortex, I used a swirling spiral shape to suggest turbulence and disruption.

    ③ Movement Skill: Each element also alters how the movement skill behaves. Fire grants a high upward jump, illustrated with a rising arc and fiery trail. Water gives a horizontal dash, represented by a sweeping wave. Wind offers a blink/teleport ability, so I used streaking wind lines and sparkles at the start and end points.

    ④ Elemental grenades: I designed a standardized grenade icon with a small elemental marker in the top-left corner — a flame for fire, a droplet for water, and a spiral for wind. This approach maintains consistency while also communicating elemental differences clearly.

    ⑤ Ultimate Abilities: To emphasize their area-of-effect nature, all ultimates share a circular base icon. Inside the ring, I added symbols to represent each element: an erupting flame for fire, a healing cross for water, and a tornado swirl for wind. These icons help players quickly grasp the role and impact of each ultimate at a glance.

Left Click
Right Click
Skills

To improve feedback during gameplay, I also created visual states for each ability icon:

Active: The icon is fully colored and emits a soft glow.

Active

Cooling Down: The icon turns gray with a progressive recharge animation from bottom to top.

CD

Interrupted/Unavailable: The icon flashes red and shakes gently to signal the skill is currently unusable.

Interrupted/Unavailable

With these refinements, the gameplay interface is now clearer, more informative, and visually consistent across different characters and elements.


3.Current Progress and Next Steps

Most of the UI design work is complete.

The next key step will be to participate in more thorough game testing to evaluate how well our designs perform in real gameplay scenarios.


4.Reference

Dafont. (n.d.). Lazer Game Zone & Gunplay fonts. https://www.dafont.com/

Riot Games. (2020). Valorant [Video game]. Riot Games.

Nintendo. (2018). Super Smash Bros. Ultimate [Video game]. Nintendo.

Blizzard Entertainment. (2016). Overwatch [Video game]. Blizzard Entertainment.

评论

发表评论

此博客中的热门博文

Dev Blog #4: Refining Key UI Elements and Selecting In-Game Typography

图片
At this stage, my primary task was to organize the overall user interface (UI) flow for Elemental Echo and, with reference to similar games, create preliminary wireframes for each core interface. This would lay the groundwork for high-fidelity UI design and interactive implementation in later stages. 1.  Efined the previous UI wireframes To create a more cohesive visual style for Elemental Echo, I began by selecting appropriate fonts for the game. After browsing extensively on Dafont, I ultimately chose a typeface called “Lazer Game Zone.” Its bold, heavy strokes and rigid structure evoke the grandeur of medieval stone architecture, while its subtle cracked and fractured effects echo the high-stakes clashes of magic and elemental forces central to our game. This made it especially suitable for use in the game’s logo and main title. However, this font was designed with uppercase letters only, lacking a lowercase set. To maintain a consistent visual language throughout the game—parti...
阅读全文

Dev Blog #2: Character Shape Evolution & Elemental Identity

图片
  After defining the worldviews and visual direction of the three elemental factions last week, I started working on the 3D character appearances this week. 1. From Chibi Prototypes to Proportional Models My first version featured some chibi-style characters—small, cute, with exaggerated proportions. But during our first team discussion, everyone felt that a more proportional character style would better fit the tone of our game, which leans toward neutral and tactical. The chibi designs, while fun, didn’t really carry the intensity needed for fast-paced combat, especially during casting or dashing actions. The first version of the design that was not approved. 2. Simplifying the Model for Customizable Gear Since we initially planned to let players customize accessories—like hats, cloaks, and shoulder items—I made the second version of the characters much simpler, with clean silhouettes and no extra gear. I used base colors to represent each elemental faction (blue for Water, r...
阅读全文

Dev Blog #6: Final Test and Tutoriol

图片
1.Play Test After the early design and programming phases were mostly completed, our focus shifted toward actual gameplay testing. Over the course of development, most of the interfaces and interaction logic I designed were successfully implemented in the game, including the main menu, room system, character selection screen, HUD, and the results screen. These designs functioned smoothly during gameplay—navigating between menus, viewing information, and using skills all felt relatively seamless in practice. However, during testing, I also identified several small issues. For example, after a match ended, the game occasionally became stuck on a blank screen, preventing players from returning to the main menu. Additionally, when I exited the game mid-match and rejoined later, I was unable to re-enter the lobby created by other players. To resolve these problems, I worked closely with other designers and programmers to review how the bugs could be reproduced. We then attempted to fix th...
阅读全文