Revising Project Abyss levels for Video Demonstration.

After recording videos for Project Abyss from this Spring, I decided to revise the levels with better visuals and updated design. Here’s a sneak peek at the project in its current state:

Coming up are particle effects in lights to indicate combinations, revised player physics, improved level geometry and a sandbox level.

I’ll be posting footage with audio commentary within the coming month.

Also coming: Coverage of My other solo academic project Gnome Force.

Peace out.

UI Design and Crypt of the Necrodancer's Heart in the Wrong Place

So, I've been playing a fine amount of Crypt of the Necrodancer, making it to the final group of levels and unlocking most of the content. I can confidently say that I'm having a blast.

However, there's a simple, yet serious flaw that arguably makes the game more unnecessarily difficult than it already is. And it has nothing to do with the difficulty. I believe there's a major problem with Necrodancer's UI in plain sight. Look at the hearts' location.

Crypt of the Necrodancer by Brace Yourself Games

Meanwhile, here's some other UI screenshots for comparison.

The Binding of Isaac: Rebirth by Edmund McMillen and Nicalis.

The Legend of Zelda: A Link Between Worlds by Nintendo

Blossom Tales: The Sleeping King by Castle Pixel and FDG Entertainment

All the health bars in the previous three games are placed on the left. Meanwhile, Crypt of the Necrodancer is the complete opposite. I believe this should be fixed.

The main problems I believe exist with Necrodancer's health bar:

• It doesn't stand out enough from the rest of the UI and is overshadowed by other elements.  The beating heart and items in particular demand more attention.

• It's placed in the corner that players(at least myself) won't bother looking.

• The game does not draw enough attention to it to show players what state they're in.

• The game doesn't provide any other feedback to inform you of the state of your health.

As a result, Necrodancer's placement, in my experience, has affected my ability to perform well. I seldom took my eyes off the player character to look up at my hearts because it took so much effort. I consequentially took risky actions without the immediate knowledge of my health, feeling surprised after dying suddenly and unexpectedly from an enemy hit.

In most games, your character's health is the most vital piece of information to players. It often dictates whether they'll be able to keep playing or have to start over. As seen above, many games a similar perspective feature their health bar on the left, adhering to the left-to-right mapping.

This is likely because we, as Westerners are taught to read left-to-right. Designers have often taken advantage of this to convey important information in terms of priorities. Super Mario Bros., for instance, had you moving left to right to reach the goal. Of course, there's exceptions for this rule, such as multiplayer games like Street Fighter that have the rightmost player with their health bar at the top-right.

Necrodancer's placement of the health bar betrays the years of experience players have accrued from games with similar themes and perspectives. When they're used to certain UI layouts across games, they can more instinctively look at certain parts of the screen. This sort of habit can be hard to break, and creating a UI that goes against that pattern can make the user experience more cumbersome. It's often the reason why UIs can become standardized, such as the use of health bars, or inventories as grids.

It's always important to ask why this position was decided on. This could be part of the possible design goals:

Keep players focused on the environment and rhythm.

The music is one of the core pillars of this game. In most cases, players need to focus on their eyes on their character, the environment and the entities in it. Too much menu feedback runs the risk of distracting them from it, which can hurt overall performance.  

The HUD at the bottom already stands out a lot by:

• The beat bars that move inward to the heart

• The beating heart sprite having the largest size and animation

Emphasize the importance players' Inventory and equipment.

The current loadout greatly affects player actions and decisions. It needs to be visible at all times so the player can take a look at their state.

For instance, having a dagger equipped vs. a longsword makes a huge combat difference, as the latter can hit enemies two squares away compared the dagger's range of one. This lets the player keep enemies at a safe distance. Consumable items such as scrolls, food and bombs are equally important and display button combinations for players to use.

It's very understandable for these items to stay on the left because players need to quickly look at and recall these instructions in order to succeed. But I get annoyed at dying because I want an easier way to evaluate my health.

Possible current UI priority from Brace Yourself Games, descending from highest to lowest:

1. Beat meter and coin multiplier - Bottom, takes up most space, frequently moving elements, largest
2. Equipment  - Top-left, showing 
3. Items - Left, directly under equipment
4. Health - Top-right, next to coins & diamonds
5. Gold & Diamonds - Top-right, after health
6. Map - Bottom-right

As a result, I have established 3 design goals:

• Help players easily know their health with minimal effort

• Maintain similar priorities of other UI elements as much as possible.

• Retain focus on the environment beat of the music.

Using these goals, I've come up with several possible solutions:

Switch the items and health bar positions.

Placing the hearts on the top-left corner and the items on the top-right corner will conform with players' mental model of similar top-down games, allowing them to look more easily without spending the extra mental energy or focus to move their eyes to the top-right.

• Pros:

  • Fits common placement model of UI in games with similar mechanics and perspective, fitting mental models of players who have played such games.

  • Increases priority of the hearts, as the (western)players' eye usually moves from left to right

• Cons:

  • Possibly makes it harder for players to remember to look at the items and equipment on the right.

  • Affects how the items and equipment is being chunked. The equipment and items would be separate entities, risking more fractured information for players to take in.

Turn the heart at the bottom of the screen into a health bar.

Have the heart sprite full when health is full, parts of it darkened from top-down when less than full, gradually getting more "empty" similar to the hearts representing health. Also display in the middle of the heart the numeric health value.

• Pros:

  • Most visible UI element. Player would only have to look vertically down to check on it.

  • Displaying numbers very explicit and informative. Easy to render, requiring no art.

  • Turning the heart into a health meter looks simple

• Cons:

  • Risks adding too much visual noise or clutter, giving too much attention to the bar and visual overload

  • Could be too redundant.

  • The heart "fill" alone would be too ambiguous for the player to gauge exactly how much health they have.

  • Might have to change the beating heart graphic to a heart representing health to better convey it as such.

Move health bar bottom-middle, closer to beating heart/beat bar

• Pros:

  • Many games such as PlayerUnknown's Battlegrounds keep the health bar at the bottom middle, which players are used to seeing.

  • Gives much more visibility and priority.

• Cons:

  • Could make bottom of screen too cluttered, as the health bar consists of up to 2 lines of individual hearts. This can possibly distract from gameplay.

Add small health bar above player character's head when hit

The small health bar would look like the hearts above enemy heads, but would stand out with a different colored outline to denote the player. It could be visible for around 1 second after being hit, similar to Goldeneye 007 on or Perfect Dark on Nintendo 64.

• Pros:

  • Much more easily visible to players when needed.

    • Showing it on top of the character, the player's primary focus point, will make them more likely to see their hearts.

• Cons:

  • Could add clutter to the middle of the game screen and obscure other parts of the game area

  • Could be too heavy handed or redundant

Show flashing of the hearts being removed while taking damage.

• Pros:

  • Draws greater attention to the health bar to remind players of their current state.

    • Similar to the way items they pick up are translated to the appropriate slow to convey that they just equipped them.

• Cons:

  • Could take away too much attention to the gameplay and beat.

    • The player is often forced to pay attention to the beat at all times.

    • This runs the risk of poor performance, as stated above.

Add more sounds to inform players of the health state. For example, if the character's health is low, they could let out a stronger grunt or shout.

This is similar to Nuclear Throne, in which the player's character makes a distinct cry at low health to convey that they're in danger and that players need to change their approach to survive.

• Pros:

  • The right sound can instinctually prime players into knowing their character's in danger and need to change tactics or restore health fast.

  • You might not have to change much about the UI placement.

• Cons:

  • Could be annoying to players if it doesn't sound right.

  • Takes extra sound design effort.

Add a colored flashing effect to character synced to the game's beat.

When hit, if the player ends up at middling health, they would flash yellow for a few beats during the song. If at low health, they would flash red for the rest of the duration of the song until they restore health.

• Pros:

  • Flashing colors like yellow and red are easy to perceive as "warning" and "danger."

  • Since players likely look very often at the character, it will stand out more and relieve players from taking the effort to move their eyes up to the health bar.

• Cons:

  • Flashing colors could be too distracting to the overall gameplay.

  • Continuous flashing could be potentially very annoying.

  • Requires more visual FX programming

Add a colored flash effect to the disco floor based on health

The health of the floor itself could be used to convey the health, using a green-to-red scheme to denote how much health the player has.

• Pros:

  • As the game encourages players to survey the environment to make decisions, it can likely be more difficult to miss.

  • Flashing disco floor helps fit with the game's theme and aesthetic.

• Cons:

  • Players may possibly miss the meaning of the red and yellow tiles as the disco floor is used as positive feedback for moving and acting within the beat.

  • The disco floor is only visible when doing the above, so this system would require a different implementation to see at all times.

  • It could also distract heavily from gameplay since the player would focus on the floor instead of the monsters and traps in the environment.

Add warning flash to the health when low.

Adding a flash would immediately catch the player's attention, even if it's coming from the top-right corner.

• Pros:

  • Flashing would instantly help it stand out more and instantly convey to the player that there's an issue.

  • This wouldn't require any placement changes, just sprite state changes.

• Cons:

  • Would require changing sprite states.

  • Too much flashing could distract from the rest of game.  

Here's a sample mockup made in Photoshop. This was made using a screenshot in 1920 x 1080, based on my own desktop monitor.

Here's using the following solutions I'm using:

• Making the beating heart double as the "filled" health bar

• Adding the health as a number in the middle of the beating heart

• Switching the positions of the health bar and and equipment

Other changes I would plan to use are:

• Flashing for a couple of seconds on the hearts to indicate danger
• The player character shouting in a way that indicates they're in danger. 

Latest Grappling Hook Prototype!

I'm pleased to announce the latest version of my grappling hook game prototype. 

The game allows you to fire the hook and retract it back in the air. When attached to an object, you have the option of pulling the hook back towards you and vice versa. Any dynamic, physics-based object can be pulled back to you to be carried and thrown. Pulling yourself to said object will knock it forwards(gravity is disabled when doing this). What you see here is all coded myself with only a scant few third-party art assets. 

My plans for the next version:

• Fixing the the hook when attached to a dynamic object so it actually stays hooked on the object. 
• Prevent the hook from being drawn back when an object is between the player and the hook. 
• Give player an extra upward boost when being pulled to a wall(see: Widowmaker's hook from Overwatch)
• Create basic level

Future plans:

• Adapting to VR.
• Test out grappling as sole means of traversal.
• Prototype level mechanics and goals

Narrative Design: Octopath Traveler vs. Final Fantasy VI

Octopath Traveler for Nintendo Switch is the hotly-anticipated RPG from Square-Enix and Silicon Studios. It promises eight different playable characters with compelling stories, a unique art style and an innovative combat system. Last year, a demo was released, showing the first few hours of two of the playable characters, Olberic and Primrose. I started with Olberic's story and enjoyed the game's combat and the ability to challenge NPCs to duels. However, I noticed some serious narrative design issues with the way it handles the introduction. I felt that it's something worth discussing.

Narrative design is, in layman terms, the way gameplay and story combine to form a cohesive whole. This makes games completely unique from any other storytelling medium. One popular technique of narrative design is making players feel like they're acting directly in the story, responsible for moving it forward instead of exclusively watching it happen. In other words, this technique is "Do, don't show" instead of "Show, don't tell". Using this as a rule when designing your game helps players stay immersed, making them care more about the story. Some great examples of these include Bioshock, Final Fantasy VI and Undertale. Unfortunately, Project Octopath, at least in Olberic's campaign, does not use this technique where it needs it the most. I couldn't help but find its overly long introduction cutscene as a weakness, especially in comparison to Final Fantasy VI.

In the campaign, Olberic is a knight who loses his kingdom after a fellow knight betrays them. The intro cutscene sets this premise up entirely.

It opens with Olberic defeating a soldier, with the enemy commander talks about how strong Olberic is. When it looks like Olberic and the soldiers are about to fight, allied reinforcements come in and the battle never happens. Here, I was hoping to see Olberic take down the entire crowd of enemies, even if it was a cutscene to see how truly strong he is and felt a little left down.

We then see Olberic moving to the next scene, where he sees corpses of his allied soldiers, remarks on this fact and instantly mentions Erhardt.

We then go to the scene where Olberic watches his fellow knight, Erhardt, kill the king. Olberic then fights Erhardt, who taunts him. They then cross swords one more time, causing the screen to fade to white. Here, I was also hoping to see a battle in which Olberic was defeated as the flash implied.

Olberic then wakes up in the present, stating that this was a nightmare. Now, he talks with a young village kid. Olberic then monologues internally about his current state of being a mercenary guarding a village and training watchmen. At this point, I personally lost most engagement with the narrative and was mostly anticipating when I got to take control.

This cutscene lasted about 7 minutes and 15 seconds. Most of it was dialogue, which often consisted of characters stating the story repeatedly without subtlety. The issue was not the length of this cutscene so much as the fact that it never lets the player get to do anything in those seven minutes. This runs the risk of completely disengaging players from the game like it did for me.

Let's contrast this with the introduction of the character, Cyan in Final Fantasy VI. Developed by Squaresoft in 1994 and directed by Hiroyuki Ito, FFVI is popular among Final Fantasy fans and widely regarded as one of Squaresoft's greatest RPGs.

https://youtu.be/iGNskqYu2_0?t=3h30m5s

The scene starts with a cutscene at the castle of Doma, with several imperial soldiers at the gates trying to break in. Players then see Doma soldiers inside, discussing how to handle the invaders. Enter our new playable character, Cyan, who is introduced through a few brief lines of dialogue and narration.  Players are also able to change his name at this point, giving a little bit of interactivity here before the action starts. He suggests going outside to fight the enemy commander to stop the imperial soldiers from attacking. We then see Cyan and the Doma soldiers moving outside of the gates to face the imperial soldiers. We learn that he's a headstrong commander through just a few short lines of dialogue. It's also at this point that players are given control over Cyan. Players are now expected to act out the mission stated earlier. This cutscene lasted for less than a minute before giving the player free reign to fight.

Despite being a straightforward objective that moves the story forward, the game provides the option of fighting the troops strewn around the area trying to get past the gates. You, as the player can approach each one and press the action button to initiate a normal battle that plays out like any other battle. This is where players experience firsthand how powerful of a fighter Cyan is, especially with his Sword Tech ability(Bushido in later versions). The scene ultimately ends when the player defeats the enemy commander, moving the story forward.

This all does an excellent job at setting up the character and fully utilizes the "Do, don't show," technique. Players easily figure out the context and start to get invested in Cyan as an exceptional warrior.

https://youtu.be/iGNskqYu2_0?t=3h41m9s

After alternating to a separate group of characters for a short time, we see a later cutscene of the game's main villain Kefka, poisoning Doma castle's water. We then see many of the NPCs in the castle dropping dead. Now, we retake control of Cyan and explore the castle to figure out what's going on in this chaos. Initially, after a few seconds of moving downward, the fellow soldier Cyan talks with urges him to go to the king. This brief cutscene has Cyan talking to the dying king, who tells him to check on his family. Cyan says that there have to be survivors and split up to explore the castle. Throughout, you are free explore the aftermath firsthand until you  find Cyan's family dead. Here, the scene ends with Cyan rushing out on his own to fight the soldiers in the same area we had the other party fighting.

Using the "Do, don't show" technique in narrative design, these two scenes effectively keep players engaged with the story by enabling them to partake in it, only taking away control to add information about the story and characters and create drama. Compared to Olberic's intro, players gain more empathy with Cyan by playing as him instead of just merely watching him. You get to feel like the badass warrior and feel the loss of your kingdom more effectively. Whereas with Olberic, the game only shows and tells you how powerful he is. If Olberic's intro had even a fraction of the interactivity that Final Fantasy VI provided with Cyan's, it would be a lot more compelling and narratively engaging.

Using Final Fantasy VI's narrative design techniques, here's how I would fix Olberic's introduction:

• A cutscene shows the enemy soldiers defeating most of the allied soldiers. Then Olberic appears, banters with the enemy and reassures the surviving allies that he'll handle them.
• The game transitions into a battle, where Olberic is pitted against several enemy soldiers. These are deliberately designed to have HP, Attack and Defense stats low enough for any of Olberic's attacks to instantly defeat them and for Olberic to take minimal damage.
• After defeating all the foes in battle, the enemy soldiers who didn't participate will run away from Olberic while allied reinforcements appear. They ask you to move on ahead while they secure the perimeter.
• Control is then given back to the player to move upwards. This is where the corpses of the allied soldiers are strewn about. Olberic makes a quick remark about this, but then returns control to the player. The player has the option of examining the corpses, to which Olberic concludes that their cuts were made by a sword belonging to one such as Erhardt, his fellow knight. The player is given control again to move up to the scene of Erhardt's betrayal.
• The scene where Olberic watches Erhardt kill the king plays out similarly, but when the latter starts to fight, it then transitions to a battle. Erhard's stats allow him to dodge all of Olberic's attacks, strike first and deal more damage to Olberic than vice versa. Between each turn, Erhardt and Olberic say most of the same lines. This battle is meant for the player to lose, no matter what attacks they use.
• After Erhardt's makes an attack that reduces Olberic's HP to 0, the screen fades to white, where Olberic then wakes up…
• After waking up, dialogue would be significantly cut so it's brief and to the point. Instead of Olberic monologuing about being a mercenary for the local town, the young boy who comes in to tell Olberic that the town elder wants to see him while briefly complimenting him on his exceptional sword skills.
• Olberic then monologues, bringing up how he lost his meaning after losing his kingdom. Then, the watchmen outside that Olberic talks to bring up topics such as how he's done a great job protecting against bandits as well as the current status. After this, the player is free to roam around the town.
• This sequence may last from around 5 to upwards of 8 minutes depending on the time taken, but players would experience greater engagement throughout. Players would feel awesome as they took down enemies as Olberic and feel more down as they lost to Erhardt, ultimately better able to sympathize with the former after the dream sequence ends. They would have no doubts from the intro that they're playing as a powerful knight-turned-mercenary.

Despite this criticism, I am definitely looking forward to project octopath Traveler with its use of multiple character perspectives an excellent turn based battle system and its use of 16-bit Graphics Style put on polygons to make for a unique immersive looking world.

I personally believe that FFVI still holds up with how it handles narrative design. With Ito's direction, the game has a excellent balance of gameplay and storytelling which keeps players and most without detracting from either the story or gameplay too much. Ito did this through giving the player more control in story-centric scenes. Players act out the characters' actions both in and out of battle. Control was only taken away from players for dialogue and sequences that were out of the characters' control. However, even in battles, dialogue also went on during it. This is especially the case in Cyan's introduction  several hours into the game.