Search the Community

The Issue Text object is getting cut-off / cropped at the top and sometimes on the bottom, when using a custom font with a narrow width. (screenshot attached) The fonts in question work correctly in every other environment, and even work with HTML canvas and the regular getContext method of adding text. So i'm fairly positive the issue is isolated to Phaser using HTML canvas. Possible Cause I think issue is most likely happening due to the way Phaser/PIXI calculates the height of text from the width of letters. Possibly using the width of the widest letter and assuming the height? I tried to work out what the source code is doing. Current Workaround The only workaround i've found is rebuilding the font and adding a wide margin to each letter (so the letter boundaries are more 'square'), then in Phaser splitting a Text object into individual Text objects for letters and calculating their position based on letter width, and manually subtracting a value to change the letter spacing. But even splitting and repositioning doesn't work that well (with any font, not just thin fonts) i have to calculate separate margins for even thinner letters like 'I', 'i', or 'l', or wide letters like 'm' and 'w'. I would rather not use BitmapText as i need to use different font sizes. Solutions Has anybody else encountered this issue? Found a solution or a better work-around? Thanks.