Types of Route Number Signs
There are 3 main levels of route number signs in the U.S.
- National - There are only a handful of these: U.S. routes, interstates and business routes. There are also a few miscellaneous ones for national park roads, national forest roads, etc.
State - Each state defines their own route signage, so there are 50 variations needed. Some are elaborate, some very simple and many in between. And in some states, like Texas, they have a lot of variations depending on what type of road it is designated (e.g., ranch road, farm to market).
County Road Sign
- County - There is a county-wide standard for what county road signs should look like, though this has not been universally adopted. For the sake of the simplicity, in the game, we assume all states have adopted this standard.
Designing Route Number Signs
When considering national, state and county road signs, we ended up with 68 variations. However, this is just the number of different "styles" of signs and each of these can have hundreds of different route numbers appearing on them. If we were to create a different image for every possible combination of style and number, we would need to create many thousands of images. Just creating the 68 styles would be time consuming enough for us.
Our solution to reduce the number of images was to use a Scalable Vector Graphic (SVG) for the style and then use the SVG layering ability to drawn text characters on top of it for the route numbers. The route numbers could be anywhere from 1 to 4 characters, so the font size and position would need to be adjusted depending on the number of characters. Fortunately, the SVG format gives some help in allowing us to do this, so it was less tricky than it could have been.
The other big consideration that the SVG helps us solve is web site responsiveness. Scaling images and especially fonts to all the device sizes out there is important for the game's playability.
Assigning to Routes
We used Google Maps to find the real-life route numbers and our internal route editing tools to encode them in the game. Interestingly, Google Maps has a similar problem in showing route numbers for states and counties, though they chose *not* to use different styles for each state like we do. When you look at Google Maps, round circles are state route numbers, while square route numbers are county roads: this is true for all states.
When we encoded the route numbers in our editing tools, we used a convention of combining the "style" (e.g., state) and the route number. For example, "i-95", "tx-2222", "ca-1", "county-34a". Our software would then parse the style from the number, choose the right style SVG and then render it with the text of the route number depending on how many character were in he route number. In order to have the number fit into the image boundary, we have to scale down the font size more for a 4 digit route number than for a single digit one.
We put quite a lot of effort into these route number signs even though they are not a major part of the game. However, we felt that in order to recreate a real sense of traveling in the game, a lot of these small and subtle details needed to be included.
If you have not tried our game before,