Bitmapfont kerning on webGL still uncorrected

[monteiz]

Version 3.60 (up to 3.80.1)

• Phaser Version: 3.60 (up to 3.80.1)

• Operating system: macos

• Browser:

Description

I've read that the kerning on webgl has been fixed but it is still broken.

Example Test Code

Additional Information

[photonstorm]

Add a Bitmap font for which it doesn't work to this issue.

[monteiz]

<font> <info size="342"/> <common base="@texB" pages="1" scaleW="1969" scaleH="1043" lineHeight="342"/> <pages> <page id="0" file="title.png"/> </pages> <chars count="20"> <char page="0" chnl="15" xoffset="-36" width="317" height="338" id="89" x="2" y="2" xadvance="218" yoffset="0"/> <!-- Y --> <char page="0" chnl="15" xoffset="-39" width="321" height="346" id="79" x="321" y="2" xadvance="225" yoffset="-5"/> <!-- O --> <char page="0" chnl="15" xoffset="-39" width="281" height="340" id="85" x="644" y="2" xadvance="186" yoffset="0"/> <!-- U --> <char page="0" chnl="15" xoffset="-39" width="290" height="346" id="67" x="927" y="2" xadvance="195" yoffset="-5"/> <!-- C --> <char page="0" chnl="15" xoffset="-37" width="311" height="338" id="65" x="1219" y="2" xadvance="216" yoffset="0"/> <!-- A --> <char page="0" chnl="15" xoffset="-39" width="291" height="338" id="78" x="1532" y="2" xadvance="196" yoffset="0"/> <!-- N --> <char page="0" chnl="15" xoffset="-38" width="401" height="338" id="87" x="2" y="350" xadvance="306" yoffset="0"/> <!-- W --> <char page="0" chnl="15" xoffset="-39" width="221" height="338" id="73" x="405" y="350" xadvance="126" yoffset="0"/> <!-- I --> <char page="0" chnl="15" xoffset="-39" width="271" height="338" id="66" x="628" y="350" xadvance="177" yoffset="0"/> <!-- B --> <char page="0" chnl="15" xoffset="-37" width="273" height="346" id="83" x="901" y="350" xadvance="178" yoffset="-5"/> <!-- S --> <char page="0" chnl="15" xoffset="-39" width="245" height="338" id="76" x="1176" y="350" xadvance="150" yoffset="0"/> <!-- L --> <char page="0" chnl="15" xoffset="-39" width="294" height="338" id="68" x="1423" y="350" xadvance="199" yoffset="0"/> <!-- D --> <char page="0" chnl="15" xoffset="-39" width="244" height="338" id="70" x="1719" y="350" xadvance="150" yoffset="0"/> <!-- F --> <char page="0" chnl="15" xoffset="-39" width="277" height="338" id="82" x="2" y="698" xadvance="181" yoffset="0"/> <!-- R --> <char page="0" chnl="15" xoffset="-39" width="250" height="338" id="69" x="281" y="698" xadvance="155" yoffset="0"/> <!-- E --> <char page="0" chnl="15" xoffset="-39" width="260" height="338" id="80" x="533" y="698" xadvance="165" yoffset="0"/> <!-- P --> <char page="0" chnl="15" xoffset="-39" width="279" height="338" id="84" x="795" y="698" xadvance="184" yoffset="0"/> <!-- T --> <char page="0" chnl="15" xoffset="-39" width="149" height="345" id="33" x="1076" y="698" xadvance="54" yoffset="-4"/> <!-- ! --> <char page="0" chnl="15" xoffset="-39" width="282" height="338" id="72" x="1227" y="698" xadvance="188" yoffset="0"/> <!-- H --> <char page="0" chnl="15" xoffset="-39" width="313" height="338" id="77" x="1511" y="698" xadvance="218" yoffset="0"/> <!-- M --> <char xoffset="0" page="0" chnl="15" width="0" height="0" id="32" x="0" y="0" xadvance="108" yoffset="0"/> <!-- space --> </chars> <kernings count="66"> <kerning first="89" second="79" amount="-6"/> <kerning first="79" second="85" amount="33"/> <kerning first="67" second="65" amount="0"/> <kerning first="65" second="78" amount="21"/> <kerning first="87" second="73" amount="18"/> <kerning first="73" second="78" amount="44"/> <kerning first="66" second="79" amount="21"/> <kerning first="79" second="78" amount="35"/> <kerning first="78" second="85" amount="47"/> <kerning first="85" second="83" amount="23"/> <kerning first="73" second="76" amount="44"/> <kerning first="76" second="68" amount="33"/> <kerning first="70" second="82" amount="36"/> <kerning first="82" second="69" amount="31"/> <kerning first="69" second="69" amount="39"/> <kerning first="69" second="83" amount="18"/> <kerning first="83" second="80" amount="34"/> <kerning first="80" second="73" amount="30"/> <kerning first="78" second="83" amount="27"/> <kerning first="84" second="79" amount="8"/> <kerning first="79" second="84" amount="8"/> <kerning first="84" second="65" amount="-12"/> <kerning first="65" second="76" amount="21"/> <kerning first="66" second="85" amount="33"/> <kerning first="85" second="76" amount="47"/> <kerning first="76" second="76" amount="33"/> <kerning first="76" second="83" amount="12"/> <kerning first="83" second="69" amount="34"/> <kerning first="69" second="89" amount="10"/> <kerning first="89" second="69" amount="19"/> <kerning first="69" second="33" amount="33"/> <kerning first="80" second="69" amount="34"/> <kerning first="69" second="82" amount="39"/> <kerning first="82" second="70" amount="31"/> <kerning first="70" second="69" amount="36"/> <kerning first="69" second="67" amount="25"/> <kerning first="67" second="84" amount="11"/> <kerning first="84" second="33" amount="25"/> <kerning first="83" second="87" amount="7"/> <kerning first="73" second="83" amount="23"/> <kerning first="83" second="72" amount="34"/> <kerning first="72" second="33" amount="42"/> <kerning first="65" second="67" amount="1"/> <kerning first="67" second="69" amount="28"/> <kerning first="78" second="65" amount="21"/> <kerning first="65" second="73" amount="16"/> <kerning first="76" second="69" amount="33"/> <kerning first="69" second="68" amount="39"/> <kerning first="73" second="84" amount="27"/> <kerning first="79" second="79" amount="21"/> <kerning first="79" second="77" amount="35"/> <kerning first="77" second="33" amount="42"/> <kerning first="83" second="67" amount="20"/> <kerning first="67" second="79" amount="14"/> <kerning first="79" second="82" amount="35"/> <kerning first="65" second="87" amount="-18"/> <kerning first="87" second="69" amount="23"/> <kerning first="83" second="79" amount="20"/> <kerning first="77" second="69" amount="48"/> <kerning first="66" second="82" amount="35"/> <kerning first="82" second="73" amount="27"/> <kerning first="76" second="73" amount="29"/> <kerning first="73" second="65" amount="16"/> <kerning first="78" second="84" amount="31"/> <kerning first="66" second="69" amount="35"/> <kerning first="69" second="84" amount="22"/> </kernings> </font>

[monteiz]

These fiddles illustrate the difference between CANVAS and WEBGL rendering:

WEBGL: https://jsfiddle.net/d5341sga/2/
CANVAS: https://jsfiddle.net/zbs9e7wL/2/

Note: the examples above are using Phaser 3.80.1

[zekeatchan]

After extensive testing, there does seem to be some issue with kerning on WebGL.

BitmapText results (Left: Phaser, Right: PixiJS)

Will have a closer look at this issue.

Thanks for bringing this to our attention.

[zekeatchan]

This issue is resolved.

Fixed all kerning issues in WebGL bitmap text rendering. This includes adjustments to glyph positioning and spacing, ensuring accurate and visually pleasing text display across all WebGL contexts.

BitmapText results (Above: Phaser, Below: PixiJS)

This will be part of the next release. If you get time to build and test it for yourself we would appreciate that.