Relationships Screen

Introduction

Now that the AI system is largely complete, I can focus on the player. This includes all of the interactions that the player will carry out during gameplay.

I decided to create a relationship screen, which would list all of the relations that the player has. Think of this like the relations panel in The Sims or the relationships tab in BitLife.

Design

For the design, I decided to list all of the relationships in a grid with 3 rows. Looking something like this (ignore the older art):

The screen can then be scrolled if the grid of peeps fills the screen.

Implementation

To implement this, I created a new layout. This was instead of overlaying the UI over the game, to prevent lag.

I wrote a function to loop through all of the peeps that the player knows (ie. anyone who isn't a stranger) and then populated an array. I could loop through this new array and create portraits adding to the x position after every iteration. After a multiple of 3 iterations, I added to the y position to populate the grid.

Of course, once the placeholders were created, the portraits, name tags and relationship bars could be easily added on top.

I used an old scroll function to be able to scroll the list. However, this is slightly broken still.

Because of the engine I use, a simple scrollable box with dynamically placed grid elements if off the table (the likes seen in Unity). This meant that it took longer to implement this system.

In Action

Here is a video I captured of the basic mechanism. I changed into a peep who had a large family, to show the scrolling.