Construct 2 SpriteFont - Always glitchy for me?

Hi,

I keep having the following issue:

<img src="https://copy.com/TmDRx313xHXw/c2_spritefont_artifacts.jpg" border="0" />

As you can see there are strange artifacts around the letters.

Anything that the devs can give input on?

try this tool:

scirra.com/forum/sprite-font-generator_topic72160.html

Can't see the picture... I can't get on with the sprite font plugin either, but probs for different reasons...

I see it now... the sprite sheet you're using is wrong. The tool previously posted will help.

I don't like it, because I have to go in manually and set up all the letter spacing each and every time. Very frustrating. Only tool I've needed to do that for.

In tutorial section, posted yesterday I think, nice video on making spritefonts.

This solves the issue. Problem is most generated spritefonts as AnD4D says, require manually setting up letter spacing because it is always off a pixel here or there.

And when I saw image (gone now) it looks like that is your problem (you catching letter next to it. above it. or below it.

See "r" and "i" big space between - you need to manually set up letter spacing. "I" takes up less space which means more white space etc etc

I see it now... the sprite sheet you're using is wrong. The tool previously posted will help.

Could you explain what is wrong?

And when I saw image (gone now) it looks like that is your problem (you catching letter next to it. above it. or below it.

It's not catching the surrounding letters, because the bitmap image I'm using is in 1:1 scale. In other words, it's a visual glitch.

See "r" and "i" big space between - you need to manually set up letter spacing. "I" takes up less space which means more white space etc etc

What do you mean?

When you add it in to Construct, click on the SpriteFont, and look at the properties. Tweak these slightly (character width, etc).

Look at the h in your image above. It is picking up a line of pixels beside it. I assume it's a capital H, or maybe even a border.

Do you mind if we see a capx or a sprite sheet?

When you add it in to Construct, click on the SpriteFont, and look at the properties. Tweak these slightly (character width, etc).

Look at the h in your image above. It is picking up a line of pixels beside it. I assume it's a capital H, or maybe even a border.

I already explained that this is wrong.

It's not picking up pixels from other characters because the spritefont is upscaled from an original 1:1 scale bitmap image.

This is a glitch, not a SpriteFont configuration issue.

Do you mind if we see a capx or a sprite sheet?

Sure, here's a JPG copy of the original image:

<img src="https://copy.com/WT00FdgYYC4s/c2_spritefont_sheet.jpg" border="0" />

The sprite sheet image's resolution is 261x64px with each character having a 9x16px resolution, and the black background color is replaced with alpha transparency in Construct 2

Could it be that it's not power-of-two? I get that warning when importing sprite fonts.

I thought that the power-of-two-principle was more about performance enhancement when it comes to Construct 2, but it's a good guess. Maybe Ashley can confirm?

It looks like pixels from adjacent characters leaking through due to floating point scaling. Try using point sampling, pixel rounding and letterbox integer scale.

The power-of-two sizing isn't important for spritefonts.

Thanks for the reply Ash.

Pixel rounding makes no difference, but switching from letterbox scaling to letterbox integer scaling fixes the issue.

However, I was hoping to be able to use letterbox scaling without integer, since I don't want any letterboxing.

In other words, is there a way to fix the glitch when using integer scaling?

Thanks again.

I'm not sure I understand. Why would you want to fix the glitch when using integer scaling? Didn't you say it's fixed already that way?

I'm surprised that Bolosaur said letterbox integer scaling would solve the issue. It definitely doesn't for me. However activating pixel rounding did indeed fix it, but of course that results in jerky movement and scrolling. So it's not a viable solution.

In any case I would regard this as a glitch, since the spritefont is showing parts of a character it isn't supposed to. Not sure if this can be helped or if it's just the way the spritefont is achieved that naturally results in this unwanted behavior.

I assume arranging the characters differently in the spritesheet with empty space to the left and right might help. Or I will just have to go back for now to using a regular sprite and some events, which is easy enough. But definitely not as handy.

Edge fringing or "bleeding" is a normal result in computer graphics when using floating point positioning or scaling, and is not at all specific to Construct 2. It's important to ensure your sprite sheet has at least one transparent pixel between characters to ensure that bleeding does not occur.

Ashley

Sorry, my last post didn't make much sense. I meant to say that I'd like for the SpriteFont plugin to work with full fluid letterbox scaling rather than integer scaling. Integer scaling creates a lot of letterboxing, which unfortunately completely ruins the immersion that I'm trying to create with my project. At the same time I also need to be able to use a bitmap font since system fonts are too volatile.

Any chance of seeing a fix for this bug anytime soon?

EDIT:

Edge fringing or "bleeding" is a normal result in computer graphics when using floating point positioning or scaling, and is not at all specific to Construct 2. It's important to ensure your sprite sheet has at least one transparent pixel between characters to ensure that bleeding does not occur.

I've actually played around a lot with this glitch since it has existed for quite some time, and even attempted to add a ridiculous amount of spacing in the bitmap font sheet as you suggested, but unfortunately this doesn't fix the problem. The glitch will appear no matter what. :-/