Overlapping two sprites in TMPro

Hello everyone!
I’ve added a book to my game and the book has illustrations. In order to easily have absolute control over where the images are positioned in a page, I decided to use TMPro’s sprites and everything works perfectly (thanks TMPro!).

I now want to add a border (another image, not a solid color) to all the images in my books without having to modify the spritesheet with all the illustrations. Would that be possible?

What I tried:

  • Using a line height of 0 using the tag
  • Setting the baseline to 0 using
  • Playing with the values in the sprite asset
  • Adding a fallback Sprite Asset with the image border and changing the offset (this one kind of works, but breaks easily and feels too hacky)

Any help or ideas are appreciated!

You should be able to achieve the result you seek by editing the glyph metrics of the sprites.

For example, take the following two sprites that I just created for testing this.

6205788--681483--upload_2020-8-14_15-3-2.png

The <sprite=14> is the background and the <sprite=15> is the foreground where you would reference the background first followed by the foreground sprite.

Setting the Advance (AD) of the background sprite will result in the pen / drawing position of the next character or sprite being at the same place as our background.

Given the following text "<sprite=14><sprite=15> we get the following composition.

6205788--681489--upload_2020-8-14_15-7-9.png

The Advance of the second sprite is what drives the normal spacing between sequences of background and foreground sprites.

Similar results could have been achieved by setting up Glyph Adjustment Pairs (Kerning Pairs) for the sprites but that is not currently available for sprite assets.

Handling of alignment between Background and Foreground sprites.
Depending on the background size and foreground sprites, you may have to adjust the X Bearing (BX) and Y Bearing (BY) of the background sprite.

Here is an example where I replace the <sprite=15> by a normal character from LiberationSans SDF.

6205788--681492--upload_2020-8-14_15-9-52.png

As you can see, the 1 is drawn at the origin of the <sprite=14> where the alignment isn’t ideal. That is fine as we can also adjust the BX and BY of the background sprite to make sure it works with all characters.

6205788--681501--upload_2020-8-14_15-23-53.png

In the image above, I adjusted the BX to move the drawing position of the background sprite. Note this does not affect the origin or drawing position of the subsequent glyph which is always origin + advance which is zero in the case of the background sprite.

6205788--681504--upload_2020-8-14_15-26-8.png

Again depending on your background sprites and foreground, you may have to tweak the X Bearing and Y Bearing values but it should work. If your background and foreground sprites have the same width and height then simply setting the Advance of the background sprites to Zero will work.

Side note: When a glyph is drawn, the pen is placed at the origin. The pen is then moved / offset by the X and Y bearing and drawn for the given width and height of the character. This handling goes back to the days of plotters when the pen reference.

Thanks a lot! This is very close to something I tried on Friday.
I’ll try to apply it today.