Kieran Cooksley
Kieran Cooksley
Technical Designer
Role
Sole Developer
Technical Designer
UI Designer
Made With
Unreal Engine 5
Blueprints
Timespan
20 weeks
2 Oct '23 - 01 Mar '24
A Nordic City Builder game that tasks the player with gathering resources to construct buildings, produce food, and maintain a happy population.
Project Goals
-
Gain a deeper understanding of the Common UI Plugin to develop & implement the UI
-
Application of best working practices such as inheritance and communication methods to maintain a dynamic framework.
Key Responsibilities
-
Develop the framework, ensuring systems are efficiently constructed and expandable
-
Prototype new mechanics to ensure gameplay adheres to the vision and goal of the project
-
Iterate and bug-fix technical systems based on user testing and peer feedback
-
Design & implement a full User Interface to display information for the player
Tools Used
Unreal Engine 5​
The primary engine used for development
UMG UI Designer
Development of User Interface using Common UI
Photoshop
Used to mock up a wide
variety of UI designs
Microsoft Office
Project Management & Documentation
Features
Building Construction
Select buildings from a UI panel to place in the world for construction
Happiness Management
Manage a variety of factors, such as food availability and social buildings, to keep your population happy
Resource Production
Assign workers to production buildings to harvest surrounding resources
Scripted Tutorial
Modals, popups, and objectives help introduce new players to the game's mechanics & controls
Inspirations
Frostpunk
Frozenheim
Northgard
Stronghold
Becastled
Diplomacy is Not an Option
Documentation
Class Diagrams
Class Diagrams were used to plan out the layers of inheritance in various systems.
​
This helped me understand exactly what variables are required for each class and where I can inject them into the inheritance system to take advantage of parent/child relationships and optimise development.
​
As shown below, planning with inheritance makes the Building system expandable and efficient. For example, if I wanted to develop extra resource production buildings, these can be created as a child of the Base Production building, inheriting all data and attributes automatically from the base class.
Flowcharts
Flowcharts were created to plan out system functionality by visualising the flow of execution.
The flowcharts I created during development were essential as they helped me understand how these systems should be built, greatly speeding up the prototyping and construction stages of development.
They were also very helpful as they broke down entire systems into bite-sized, manageable tasks. Knowing what functions and behaviours I needed to create benefitted project & time management and ensured systems were completed on schedule and to a sufficient quality.
UI Placement Diagrams
These simple diagrams helped me see where the UIs for each of these systems are placed on the screen in similar, existing games. This research uncovered many patterns that were applied to Nordhavn's User Interface during design.
​
By applying existing patterns into Nordhavn, I ease the learning curve of the game. Any players already familiar with City Builder games will be able to draw on previous knowledge and experiences of games in the genre to help them more easily understand and interact with the games various Interfaces.
​
The images below display the UI Placement diagrams for the Construction Menu (top) and Resources Panel (bottom)
Wireframes
Wireframes delve deeper into UI Construction, analysing how each UI Panel is laid out and what information is contained within.
​
Wireframing existing UIs in City Builder games helped me discover various design patterns & trends that I applied to Nordhavn's UI.
​
This has a similar result as the Placement Diagrams: By applying existing patterns into my own UI, players with any prior City Builder experience will be introduced to Nordhavn in a more intuitive and smooth manner.
Design Mockups
Much of the Design stage consisted of mocking up a wide variety of UI designs for each required Interface in the game.
​
I applied my analysis of existing City Builder Game UIs to my designs to create a series of iterative mockups exploring layout, construction, and contents.
​
Designs were tested and critiqued by peers, and favourable designs were mocked up into a HUD screen, where they can be viewed in the context they'll be interacted with in-game.
Development Shots
A few development screenshots showing the project in various states from early rapid prototyping to final development & polish.
The first functional Construction mechanic. Building Classes could be selected from a UI and placed in the world, initialised with data stored in the Class.
Resource Production was built here. Prototyping of different production methods allowed for a variety of building behaviour. Production methods can be selected with an enum in the base class.
Early mockup of the User Interface, with a functional Construction Menu, Resources Panel , and Building Panel allowing the player to see information and interact with Constructed buildings.
After much of the core systems were functional, building & resources meshes were kitbashed from 3D models sourced in the Synty Studios' Viking Pack.
The second half of the project was dedicated to the research, design, & implementation of the final User Interface.
A level was meshed out using Unreal Engine's Foliage Mode and the UI was polished up to bring the project to a close.
