Wednesday, November 6, 2024
spot_img

Full UI Upscaling, Half 4: Easier Light-weight Fonts


So we’ve developed the theories, we’ve obtained mockups, we’ve obtained the mandatory structure… certainly it’s time to start out constructing the brand new UI structure, yeah? Not so quick!

It’s true we might begin now, however on the horizon I might already see the rising usefulness of one other supporting characteristic, and determined it was alternative to lastly automate Cogmind’s font scaling.

Cogmind has at all times included many fonts out there at many alternative sizes, all of those saved as bitmaps for pixel-perfect crispness. Every requires its personal picture file, and previously I’ve at all times manually upscaled them to make sure availability on the acceptable larger resolutions, which implies much more recordsdata.

Effectively with the appearance of map zooming, which itself wants 2x upscale variations of all fonts inside every set, and this complete UI upscale venture, which unlocks a mean 33% font dimension improve for everybody, we’re going to wish fairly a number of extra upscaled bitmap font recordsdata and going ahead it doesn’t actually make a lot sense to maintain doing this manually.

REX, Once more Once more

Okay if anybody’s maintaining rely this would be the fourth time I’ve revisited the engine for a serious replace since beginning map zoom and UI scaling work xD

Hello, REX.

I believed this might be a fast venture, but it surely really took a number of days to lastly end this characteristic as a result of I ended up rewriting quite a bit of the engine’s font dealing with code, encountering a number of difficult (hair-ripping) bugs alongside the way in which. The unique system had made loads of assumptions which might not maintain true, and I wished extra options on high of the autoscaling as properly, like solely producing upscaled fonts as soon as they’re really wanted (yay for quicker startup), and having all font units reusing the identical supply file share a single reference picture in reminiscence fairly than having a number of copies of the identical bitmap. Individually nothing too advanced, simply loads of modifications essential to the unique structure to make these options doable.

As soon as once more again within the good previous REX testing surroundings, I set to testing two new syntax choices for the font set configuration file:

  • “NewFontName [SourceFontName*2]” would create a complete new font set by upscaling an present one, on this case by an element of two. (A font “set” means a set of textual content, tiles, zoomed textual content and so forth, all categorized below a single title and chosen as an possibility by the consumer.)
  • ” is a pattern of syntax usable in any single subject for a bitmap font supply picture, as an alternative taking one other picture and upscaling it by the desired issue.
rex_font_config_scaling_tests

A pattern config file used throughout REX testing, in some circumstances with font units purely loaded from recordsdata, and in others partially or absolutely generated based mostly on present units or bitmaps.

This identical format is utilized by the rest constructed on the engine, so each Cogmind and REXPaint can profit from this, the latter of which I hope to additionally launch a brand new model earlier than lengthy!

cogmind_font_scaling_demo_4x8mini_to_8x16

A fast autoscaling check again in Cogmind, right here utilizing a 2x scale of a 4×8 font, subsequently turning it right into a 8×16 font for a 960p window. (This 4×8 font is technically distributed with Cogmind, however because it’s too small to be moderately thought of by gamers, or wanted in any respect, it’s not out there by default and should be activated manually.)

Cogmind Purposes

Cogmind’s final public launch, Beta 12, features a whole of 118 bitmaps font photos, and that was earlier than all of the map zooming and Beta 13 work, so with out this autoscaling characteristic that quantity would balloon considerably.

As of writing, Beta 13 has at the moment dropped that file rely to 80, this regardless of the zooming, 9 model new font varieties, and supporting much more giant choices derived from smaller ones.

I needed to spend some time going again by means of all these recordsdata to verify which had been unique recordsdata and which had been upscaled–in most circumstances there have been data, however I had to make sure, and did discover a number of outliers to which I made additional handbook modifications to their upscaled variations, or sourced from a number of totally different units. These required particular therapy, however in any other case it was very nice to chop down on the litter.

cogmind_beta13_font_config_comparison

Evaluating Cogmind’s unique font config file to the brand new one with automated upscaling enabled (and zoom help!).

As of the present Beta 13 prerelease, the present max font dimension included with Cogmind is 48, wanted for 5K shows, however with the brand new upscaled UI the max wanted for that decision shall be 64! Undoubtedly about time to get automated scaling…

New font sizes apart, this additionally saves time when new tiles are added and should be inserted all through the photographs, since tiles themselves are additionally a part of the font bitmaps. Tiles aren’t added fairly often, however a brand new batch is certainly being launched regularly over the following a number of variations.

Since I used to be working with fonts anyway, I additionally took benefit of this chance so as to add model new choices! In basic terminal roguelike type, some individuals like to change their show font after some time with a view to clean up the entire expertise, so along with others who merely need extra choices from which to pick out their favourite for readability or stylistic preferences, that’s one other good cause to ensure there’s a good number of types out there.

The primary two new typefaces are Tamsyn and Cherry, out there at a number of sizes.

cogmind_screenshot_sample_tamsyn_24

Pattern Cogmind screenshot utilizing dimension 24 Tamsyn.

 

cogmind_screenshot_sample_cherryshadow_14

Pattern Cogmind screenshot utilizing dimension 14 Cherry Shadow,  for which I added a slight drop shadow I believe seems fairly cool, particularly on a lightweight background like merchandise labels.

Whereas I used to be at it, I additionally made different font-related enhancements, like having Cogmind’s choices menu record fonts from largest to smallest to have the ability to extra simply regulate type by way of the menu with out altering map dimension. The unique method based mostly purely on how they’re listed within the config file didn’t make sense, and I’m undecided why I left it that approach for thus lengthy.

cogmind_options_menu_font_set_sorting

New sorting order for the font choices menu!

Pixel Corruption

Shortly after releasing a construct with autoscaled fonts to patrons, a wild bug appeared! Apparently some individuals had been seeing artifacts on the show…

cogmind_prerelease_bug_font_scaling_artifacts

Screenshot excerpt exhibiting visible oddities. (pattern offered by Luigi; you’ll should open it at full dimension to see a few of the proof)

At first we weren’t certain what it was, because it was solely affecting a number of individuals, and up to date SDL DLL optimizations aimed toward enhancing rendering pace had additionally been launched as properly. However bugs aren’t all that elusive in the event that they solely have an effect on some individuals and a discernible, repeatable sample emerges, which occurs to be the case right here. That these artifacts solely appeared for gamers utilizing very excessive resolutions prompt it may be a difficulty with font scaling, since all the high-resolution fonts are upscales.

So I arrange a bunch of checks to verify, and ultimately discovered that some giant fonts ended up with these artifacts when scaled, and in all circumstances had a scaling multiplier of not less than 3. How bizarre!

Anyway it’s now much more clear this has gotta be one thing with the scaling course of, proper, for which I had really simply plugged in SDL_gfx, a typical companion library for doing this type of factor. Cue stepping by means of its zoomSurface() perform, particularly zoomSurfaceRGBA(), and whereas evaluating the way it dealt with a 2x vs a 3x scale operation, I seen that there appears to be… a bug within the library?

SDL_gfx_suspicious_zooming_code

This code truncates the results of floating level arithmetic, which below the best mixture of variables causes the supposed optimizations based mostly on these values to generate artifacts.

I’m kinda stunned since this library has been in comparatively large use for over twenty years, and even continues to be used alongside subsequent SDL variations, however that code stays the identical. Perhaps most individuals have a tendency to make use of it with smoothing/antialiasing turned on (I had it off as a result of I would like crisp), or are utilizing much less tightly packed tilesets (and even separate recordsdata for his or her photos), all of which can assist conceal such a difficulty from discovery? Or possibly there’s one thing else at play.

I changed that complete optimized methodology with my very own brute pressure scaling resolution and *poof* the issue certainly disappeared. It’s solely not often known as anyway–as talked about earlier than fonts are solely scaled once they’re first wanted, not earlier than or ever once more afterward, so we don’t want to fret about efficiency. (And anybody who really does want to fret about efficiency ought to in all probability keep away from doing this in software program mode within the first place 😛 –that’s in all probability the place all the opposite potential bug finders went off to…)

That is the fourth in a multi-part sequence about constructing Cogmind’s absolutely upscaled semi-modal interface structure:

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisement -spot_img

Latest Articles