Footage of the Alpha build brought to the Serious Play Conference.

1347 Games - Technical Design Intern

1347 Games is a 501(c)(3) non-profit creating historical simulation games for the classroom. I joined part-time over a summer to help develop the Alpha for Edge of the World. A game about sailing from Europe to the New World.

The game is built with Unity & C# for Chromebook browsers.

I worked on a team of 10 programmers and was one of two that focused heavily on UI.

*Please note that the game is still in early development*

What did I contribute?

My focus was on scripting UI logic & gameplay logic in Unity using C#:

  • Rewrote resource consumption logic

  • Implemented main HUD UI elements in engine

  • Scripted main HUD UI logic:

    • Tracking resources like Food & Water.

    • Updating ship health based on the ship’s 3 main parts.

    • Added supporting code such as functions to damage/health the ship by a given percent for each of its parts.

  • Iterated on UI design based on internal playtest feedback.

About the game

Edge of the World puts the player in charge of a ship sailing from England to Plymouth. Its gameplay is similar to the classic Oregon Trail. Players hire crew members & purchase limited resources and will need to handle various events as they cross the seas.

UI Iteration 1

The first iteration was focused on adding the UI elements in general, ensuring they fit different screen sizes, and starting the scripting.

Thirst / Fluids level icon scripting

You can see the thirst / fluids icon here change color as the players level of fluids lowers.

I added a script to game obj. for the icon which calculated the level of level of fluids (water, beer) the player had remaining.

The icon changes based on 3 tiers of percentages (Green, Yellow, Red). These can be set publicly in the inspector. For example, if the Green image percent = 75, then so as long as the player has over 75% of their starting fluids remaining, the image will be set to it’s green version.

Footage of the icon updating based on player data

UI Iteration 2

The 2nd iteration was focused on adding similar scripting from the thirst icon to the rest of the resource icons as well as creating a custom UI element for the ship health.

Internal playtest feedback changes

Based on feedback from 1347 Devs on the project & outside the project, we changed a few things & added more to the design.

  • Split the fluids icon into Beer & Water icons for greater clarity.

  • Split the Food icon into 3 icons to better represent the 3 main food tiers the player can buy (Good, Standard, Poor).

  • Brought all UI elements in slightly to give padding from the edge of the screen.

Ship health scripting

The ship health assets initially came in as preset 100%, 75%, 50%, & 25% images. I quickly realized this wasn’t ideal as it didn’t communicate the true state of ship health properly to the player and wouldn’t account for the various encounterable events we were planning. For example, if a storm comes and the player loses health. If they go from say 100% to 85%, it wouldn’t be reflected in the UI.

I collaborated with an artist to get separate images for each of the icon’s parts, including the font for the text.

I then used masks & a slider component to create a dynamic icon that could update both the text and the level of the water whenever needed.

Because the slider handle is the image of the water level, I had to tinker with the slider position so that it would be below the mask at 0% but still reach the top at 100%. This way I could simply pass the raw health value directly into the slider.

UI Iteration 2 with new icons, & dynamic ship health.

UI Iteration 3

This iteration was focused on providing even greater clarity to the identity & status of the player’s key resources.

  • Added text labels & counters to every icon

We knew that this version would be shown off at the Serious Play Conference and that we likely wouldn’t have time to make certain changes / additions.

We also knew that certain values like ship health didn’t have events that changed them yet so we focused efforts on the resources instead.

This version tries to cleanly & simply solve issues with the design such as:

  • Some icons not being clear at a glance

  • No tool tip info on mouse hover to contain details / state info.

This version is certainly not final, and we hope to make it cleaner / more communicative as development continues.

The dynamic ship health slider in editor

Iteration 3 with new labels & icons