Dynamic Billboarded Integer Rendering

A few months ago I was working on Aliens and implementing a new scoring system. I ran into an issue: I needed a way to dynamically render a number (basically a point value) on a billboarded quad. It had to be dynamic because the value of each item would change based on a multiplier, which could also change at any time. I could have done it as a UI element instead of actual geometry, but that didn’t feel right for the game. I was committed to having the scores be billboarded quads in the scene.

My first thought was to simply render a number to a texture and apply that texture to the quads. This would work great if I needed few unique numbers. I could render the current numbers to a few textures, or create a large texture with multiple numbers and map the numbers to different quads. I quickly realized that this wouldn’t work for Aliens; if different items were worth different amounts, and your multiplier was frequently changing, the quantity of different numbers that were required would be changing as well. Since the quads fade in and out, the player could destroy an object worth 500 points, get a multiplier, and then destroy the same type of object which is now worth 1000 points. Both quads would be on the screen at the same time. It could get hairy fast.

I needed the whole process to be dynamic, so that I could feed an integer to the shader and have it render. I wrestled with it for a few days until I came up with the solution I ended up using: If I could get both the number of digits in a number, and any one digit based on the position inside the quad, I could render that number. The results were exactly what I wanted: Dynamic numbers on geometry in the scene, in a font that matched the rest of the game.

So how does it work? I’ve got some shader code below that shows the process. Several pieces of data are passed in: the number itself, the number of digits, the age of the quad, a scale and a color. The number, scale and color are self-explanatory. The number of digits is used in several places. It could have been calculated in the shader, but it seemed better to calculate it once when the quad was created. The age of the quad is used to fade it in and out, as well as make it float upwards. The numbers are pulled from a greyscale texture:

Below is my vertex shader code. The first block of code does the billboarding and scaling. The overall scale and Y position are based on age. This allows the quad to grow and move upwards over time. The width is based on the number of digits that we need to render; the quad auto-adjusts to fit the number. The BigUV output parameter scales the overall UV by the number of digits, which is used in the pixel shader to determine which digit a particular pixel represents. There are constants mixed in which adjust the height and alpha (to achieve the exact look I wanted).

1
2
3
4
5
6
7
8
9
10
11
12
13

// Calculate the position
scale *= 1.0f + age;
output.Position = mul(float4(0, 0, 0, 1), mul(World, View));
output.Position.x += input.Position.x * scale * numDigits;
output.Position.y += input.Position.y * scale * 1.5f + (15.0f * age) + 5.0f;
output.Position = mul(output.Position, Projection);

// Pass the UVs through
output.UV = input.UV;
output.BigUV = input.UV.x * numDigits;

// Adjust the alpha based on age
output.Alpha = saturate(5.0f - abs(age * 10.0f - 5.0f));

The pixel shader code below determines which place the current pixel represents and which digit from the digit texture it needs to sample.

1
2
3
4
5
6
7
8
9
10
11
12
13

// Get the current digit
float place = numDigits - floor(input.BigUV);
float digit = floor((number % pow(10, place)) / pow(10, place - 1));

// Calculate the correct U coord
float u = input.BigUV.x - floor(input.BigUV.x);
u *= 0.1f;
u += digit * 0.1f;
input.UV.x = u;

// Return the correct color
color.a = input.Alpha;
return tex2D(digitSampler, input.UV) * color;

That’s about it! I haven’t really done any optimization, and my math may be a little verbose, but it works pretty well. I’ve been meaning to make a post about this for a while, but I haven’t been working on Aliens since development started on Blocks. Once Blocks wraps up, I’ll probably revisit this (and start refactoring most of Aliens). I made a simple info-graphic on the overall process, which may or may not help visualize what’s going on.

-Chris

I'm at Tap & Mallet (381 Gregory St., Rochester) w/ 5 others. http://4sq.com/5n0t7p

What Ev