Discuss Scratch

LifeofSpud
Scratcher
31 posts

Images are blurry

So, I have a text engine that uses fonts not in scratch, and it is rather blurry. The font is crystal clear in the costumes tab. Also, the more “shapey” letters are more blurry than others, like the “s”, “a”, “f”, and “x”.

The text engine in question: https://scratch.mit.edu/projects/964779020/fullscreen/
LifeofSpud
Scratcher
31 posts

Images are blurry

oops wrote wrote title, it should be “Letters are blurry”
pika_boo
Scratcher
100+ posts

Images are blurry

It looks fine to me.

However if you are talking about the tiny blurred out edges of some edges (that are barely noticeable), I'm guessing that could be because of anti-aliasing. Try making the pixel size of the costumes proportional to the actual pixel locations on the costume editor (by changing size and position), because scratch may see a some pixels on a letter “halfway” between two expected pixel positions, and automatically round the colour to grey.

Hope that helps!

Last edited by pika_boo (Feb. 13, 2024 11:07:04)

NamePending_
Scratcher
100+ posts

Images are blurry

Seems like you used a PNG of the font, and exported it to Scratch in bitmap. To get non-blurry text, you must go to Google Drawings, make a text box with every character in the font you want, then download it as an SVG. Then, import the SVG to Scratch (in vector), and take each letter costume and isolate them. Basically, you put the A in the font into a costume labeled “A”, and so on. I hope this helps.
Arctevious
Scratcher
500+ posts

Images are blurry

pika_boo wrote:

It looks fine to me.

However if you are talking about the tiny blurred out edges of some edges (that are barely noticeable), I'm guessing that could be because of anti-aliasing. Try making the pixel size of the costumes proportional to the actual pixel locations on the costume editor (by changing size and position), because scratch may see a some pixels on a letter “halfway” between two expected pixel positions, and automatically round the colour to grey.

Hope that helps!

NamePending_ wrote:

Seems like you used a PNG of the font, and exported it to Scratch in bitmap. To get non-blurry text, you must go to Google Drawings, make a text box with every character in the font you want, then download it as an SVG. Then, import the SVG to Scratch (in vector), and take each letter costume and isolate them. Basically, you put the A in the font into a costume labeled “A”, and so on. I hope this helps.
both are not neccissary, its as simple as drawing a (no-boarder, no-fill) box around the sprite, this will fix just about any clipping and fuzzies, and has been my solution for a year now. its simple and makes all my sprites crisp and sharp. (this dosent work in bitmap though, if you wish to make bitmap sprites, first make the drawing in bitmap, align it to the nearest pixel, then switch to vector and draw the same invisible box as mentioned.)

Last edited by Arctevious (Feb. 13, 2024 17:26:37)

LifeofSpud
Scratcher
31 posts

Images are blurry

Arctevious wrote:

pika_boo wrote:

It looks fine to me.

However if you are talking about the tiny blurred out edges of some edges (that are barely noticeable), I'm guessing that could be because of anti-aliasing. Try making the pixel size of the costumes proportional to the actual pixel locations on the costume editor (by changing size and position), because scratch may see a some pixels on a letter “halfway” between two expected pixel positions, and automatically round the colour to grey.

Hope that helps!

NamePending_ wrote:

Seems like you used a PNG of the font, and exported it to Scratch in bitmap. To get non-blurry text, you must go to Google Drawings, make a text box with every character in the font you want, then download it as an SVG. Then, import the SVG to Scratch (in vector), and take each letter costume and isolate them. Basically, you put the A in the font into a costume labeled “A”, and so on. I hope this helps.
both are not neccissary, its as simple as drawing a (no-boarder, no-fill) box around the sprite, this will fix just about any clipping and fuzzies, and has been my solution for a year now. its simple and makes all my sprites crisp and sharp. (this dosent work in bitmap though, if you wish to make bitmap sprites, first make the drawing in bitmap, align it to the nearest pixel, then switch to vector and draw the same invisible box as mentioned.)

I did try this before, BUT I think I made a mistake? Because the text is blurry. So here are my steps:

1. I set it to bitmap (first step)

2. I then align it to the nearest pixel (slightly blurry due to anti-aliasing, ), which also lowers the letter

3. I then switch to vector and add the box (more blurry than before).

Last edited by LifeofSpud (Feb. 14, 2024 02:51:10)

Arctevious
Scratcher
500+ posts

Images are blurry

i mentioned it's not really a bitmap trick… because bipmap distorts things your going to bring it with when switching to vector, where as drawing in vector keeps it as a value, though after taking a look at your project the distortion is very minimal and dosen't seem to be showing any major inconviniance.
pika_boo
Scratcher
100+ posts

Images are blurry

Yeah I was about to say the same thing, that changing it to bitmap would make it do the colour rounding
LifeofSpud
Scratcher
31 posts

Images are blurry

Arctevious wrote:

i mentioned it's not really a bitmap trick… because bipmap distorts things your going to bring it with when switching to vector, where as drawing in vector keeps it as a value, though after taking a look at your project the distortion is very minimal and dosen't seem to be showing any major inconviniance.

pika_boo wrote:

Yeah I was about to say the same thing, that changing it to bitmap would make it do the colour rounding

So the old one is ok?
1ms21
Scratcher
4 posts

Images are blurry

idk if if this is just me but why are some pfp's and some projects blurry?

Powered by DjangoBB