Building a UI: Lists and Text

This week I focused on the basic implementation of two UI panels; the History panel (which shows a list of historical events that have happened) and the Family panel, which shows a list of the characters that are related (by blood or marriage) to a particular character.  I also spent some time getting the text to look sharper.

Preview of history panel and flipping through past updates
Flipping through historical updates
Family Panel: List of related characters
Browsing the list of related characters

Smoothly Scrolling Lists

The main challenge was performance; I’m using ScrollRect objects in Unity and they are surprisingly slow.  I’m not just talking about the need for object pooling (where you reduce the number of game objects used to render a list by re-using a small number of them to populate just the visible portion at any one time), but in the way ScrollRect inherently functions.  To the best of my understanding a ScrollRect recalculates the layout of its contents and rebuilds each graphical element every time the scroll position is changed.  The implication is that if you’re going to use a ScrollRect and want smooth scrolling, you need to make sure it’s contents are as lightweight as possible for Unity to rebuild.  One of the components I am using liberally in the UI is the character card, a character portrait with some decoration, to give you at a glance; Faction affiliation, House affiliation, the character’s general importance (i.e. are they a leader, a ruler, etc.), the character’s happiness, your opinion of the character, and the character’s opinion of you.

Character card shows a character's portrait and their salient details
Character Card

In the History panel list, I can have up to four of these character cards per row.  The control was using an “Auto Layout” based layout, and I got a significant speed up switching to a RectTransform based layout (i.e. where I calculate the position of each element manually once rather than let Unity dynamically recalculate it each rebuild).

The other tweak that seems to have helped considerably is an implementation detail of how I was doing object pooling on the list itself.  It turns out that changing the parent of a UI element also triggers a significant amount of rebuilding, so it is cheaper to leave one or two masked out list elements past the edge of the visible area, rather than temporarily reparenting them to somewhere else until they are reused to show new items.

Sharper Text Rendering

I’m using TextMeshPro to render the text, primarily because I need the ability to embed links and sprites within the text (I’m under the impression that TextMeshPro is also generally the most robust text rendering solution available for Unity).  A weakness of all the text renderers in Unity I’ve tried is that they struggle with drawing small text sharply.  The text ends up looking quite fuzzy, rather than nicely anti-aliased but still sharp.  The only solution that I can see (at least with TextMeshPro) is to find or roll your own bitmap fonts that are of the exact size you need and use them at the explicit size they were designed for (i.e. no scaling at all of either the canvas, game object, or text component font size).  If you want text at different sizes you will need to use different bitmap fonts at each seperate size, but the results are then pixel perfect.  And past a certain size, TextMeshPro’s ability to dynamically resize a font works just fine.

Differences in text sharpness when using variable vs bitmap fonts
Click to enlarge and see the difference in text sharpness

Want to Comment?

Please share your feedback about Building a UI: Lists and Text and join in other discussions on the Star Dynasties reddit

Please follow and like:

Introduction

Star Dynasties is a simulator of the human dramas of a ruling elite in a dark age future.  In the 22nd century humanity had spread to a hundred small colonies, established mainly as industrial bases for commercial exploitation, but the sudden destruction of Earth abandoned these fledgling colonies to an uncertain fate.  Two hundred years later the remnants of human civilization have regressed to a more feudal and traditional society.

The player controls the head of a leading family through multiple generations; finding the right political marriages, acting as the patriarch or matriarch of their household, keeping the colony rulers of their faction in check, and waging war where necessary to ensure that their house survives and grows in influence.  The game simulates the personalities, emotions, and opinions of over a thousand characters to procedurally generate a narrative for the player that is both grand and human.  Characters will fall in love, betray each other, aspire to rise in status, commit murder, and in general engage in the behaviour you’d expect from an aristocratic elite obsessed by power and personal pleasure.  The game’s main inspirations are Crusader Kings, King of Dragon Pass, and The Sims.

I’ve been developing this game for three years, primarily building the engine that drives the character simulation.  Recently I’ve started to extend the prototype with a graphical user interface and art, so it seems like the right time to start talking about it.  I’m hoping to have an alpha version for public feedback in a few months, and in the meantime I would like to maintain a devlog and start getting some feedback on what I’m doing from a wider audience.

The rough prototypes I’ve experimented with have implemented gameplay as either a branching narrative, where the player plays through a sequence of procedurally generated choices, or as a more traditional turn-based strategy game.  The graphical prototype I’m now building is implementing “story mode”, and I’m hoping that player feedback will clarify whether the right strategy is to offer both modes or concentrate on just one.  In either mode the game plays from a bird’s eye view, with the primary interface being the galactic map, and popups that move the story forward and present the player with choices to make.

The character simulation has some interesting properties, which I’ll go into in more detail in future posts.  Key points;

  • Characters have emotional reactions to events that happen (and that are related to them).
  • Characters have personality traits that modify their emotional reactions and influence their behaviours.
  • Characters empathise with what happens to each other.  For example, your character will be pleased when an ally successfully puts down a rebellion on one of his systems, and also pleased when an enemy fails to do so.
  • Characters form opinions of each other based on how they act.  They are more likely to be friendly and helpful to those they like and unhelpful or outright aggressive to those they dislike.  This is the central driver of political behaviour in the game.
  • There is a moral system (albeit one which is primitive and retribution based) whereby certain actions are looked down upon or approved of near universally.  As a design principle the game doesn’t explicitly stop the player from taking some nasty or irrational decisions, such as declaring war on an ally, but social pressure will.
  • Characters remember favours owed to each other and hold grudges.  This leads to interesting interactions with the moral system, for e.g. torture is immoral, but torturing your father’s murderer will be forgiven in the court of public opinion.

 

 

Responding to an offer of marriage Choosing sides in the squabbles between nobles
Your own happiness is increased when you reward those you like Just catching up on galactic events

Want to Comment?

Please share your feedback on Introduction and join in other discussions on the Star Dynasties reddit

Please follow and like: