Request for adjusting text shadow

[Adri1]

Currently, the text shadow looks like this, with a simple drop shadow to the bottom right:

But it should looks like this, to increase lisibility, like it is in Pokémon Emerlald, from where this font comes from: (image made manually) The shadow should be casted below, on the left and from the bottom right vertex of each pixel. (and also apply it to pkmnems font, not only to this one)

Image from Emerald :

So if anyone knows where to edit / knows how / can do it

[danieland]

Definitely agree the blurriness isn't helping readability at the moment - the code for it is here: https://github.com/pagefaultgames/pokerogue/blob/d2e455cdadbe250bf02ab44b4b885f2cc750429e/src/ui/text.ts#L56

These "setShadow" methods also have slightly misnamed variables attached to them as you're not really setting "shadowSize" but rather the x and y positions - shadow size would probably be more like the "blur" setting: https://newdocs.phaser.io/docs/3.80.0/focus/Phaser.GameObjects.TextStyle-setShadow

It's pretty simple to edit, I'd rather point you towards it though since I don't have designer-eyes sadly - but even setting "shadowSize" to 3 here instead of 6 is a massive improvement I think personally: https://github.com/pagefaultgames/pokerogue/blob/d2e455cdadbe250bf02ab44b4b885f2cc750429e/src/ui/text.ts#L89

Probably requires a little tinkering by someone who's good at design and such!

[Adri1]

Thanks! I'll try to dig myself then, but if anyone is passing by and knows how, feel free to submit your solution

[bennybroseph]

Unfortunately not every letter will look like the picture you edited if this change it made. I'd still like to see what the result is regardless as I too think the shadow currently makes text harder to see in some colors.

[Adri1]

I guess I'll wait until somebody with more skill than me can take over Blur option, well, blurs the shadow, but noting else and I can't find any way to have something shrap like in the edited image I made.

[zaccie]

Current code only used a single value for both x,y co-ordinates so I modified the code to support x,y co-ordinates having separate values if we wanted them, some examples shown:

[zaccie]

If it looks good to others ( i think anything is better than current) I can PR what I have for others to take a look also renamed the constants to be more appropriate from shadowSize to shadowXpos & shadowYpos

[bennybroseph]

Yes, a PR would be good. I'll say though as I knew this was the only coding solution that could be done, this could technically affect performance on devices that are already struggling since we are rendering text a third time to achieve this. Definitely like the look of it though. The best solution performance-wise is probably a whole new font that already looks like this though.

I misread. I would still like to see the PR with these changes, though I will admit I'm less excited lol. If someone also wants to add a second drop shadow, that will achieve the effect of this image and is the desired end effect.

[zaccie]

~Yes, a PR would be good. I'll say though as I knew this was the only coding solution that could be done, this could technically affect performance on devices that are already struggling since we are rendering text a third time to achieve this. Definitely like the look of it though. The best solution performance-wise is probably a whole new font that already looks like this though.~

I misread. I would still like to see the PR with these changes, though I will admit I'm less excited lol. If someone also wants to add a second drop shadow, that will achieve the effect of this image and is the desired end effect.

made a PR here: https://github.com/pagefaultgames/pokerogue/pull/1197 ~making the text look more like emeralds is hard because the font renderer doesnt seem to support making the drop shadow thicker~

i understand your comment more now yeah making it look more like emerald would require a second drop shadow I could look into possible other solutions but what I did is still likely an improvement in the meantime

[Adri1]

~Yes, a PR would be good. I'll say though as I knew this was the only coding solution that could be done, this could technically affect performance on devices that are already struggling since we are rendering text a third time to achieve this. Definitely like the look of it though. The best solution performance-wise is probably a whole new font that already looks like this though.~

I misread. I would still like to see the PR with these changes, though I will admit I'm less excited lol. If someone also wants to add a second drop shadow, that will achieve the effect of this image and is the desired end effect.

Actually, 3 shadows would be needed, not just 2 :

• The current one
• One to complete the right side
• One to complete the bottom side

Here is an example from the perspective of a single pixel:

I tried to add these shadows yesterday, either nothing at all is displayed or only one is considered.

I also tried to check for solutions, and one seem to consist in creating a new shader to phaser3 that would allow to cast multiple shadows. But this is beyond my skills