HaxeFlixel / HaxeFlixel/flixel

Bitmap text scaling problem

Open
#1,880 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Haxe
Stars
2.2k
Forks
522
Avg merge
34m
Merged PRs (30d)
1

Description

  • Flixel version: 4.0.1
  • OpenFL version: 3.6.1
  • Lime version: 2.9.1
  • Affected targets:
    Windows, Android, iOS

Code snippet reproducing the issue:

package ;
import flixel.FlxG;
import flixel.FlxSprite;
import flixel.FlxState;
import flixel.graphics.frames.FlxBitmapFont;
import flixel.math.FlxPoint;
import flixel.system.scaleModes.PixelPerfectScaleMode;
import flixel.text.FlxBitmapText;
import flixel.text.FlxText;
import flixel.util.FlxColor;

class TestBitmapFont extends FlxState
{
    var text:flixel.text.FlxBitmapText;
    var text2:flixel.text.FlxBitmapText;

    override public function create():Void
    {
        FlxG.mouse.visible = true;

        //The problem happens with any scale mode
        FlxG.scaleMode = new PixelPerfectScaleMode();

        //The problem happens with any combination of these settings
        var ppPosition:Bool = false;
        var ppRender:Bool = false;
        var aa:Bool = false;

        FlxG.camera.antialiasing = aa;
        FlxG.camera.pixelPerfectRender = ppRender;

        //Any non-antialiased pixel font can be used here
        var font = FlxBitmapFont.fromAngelCode(AssetPaths.pixel_mid_32__png, AssetPaths.pixel_mid_32__fnt);
        text = new FlxBitmapText(font);
        text.setPosition(10, 100);
        text.autoSize = false;
        text.width = text.fieldWidth = 500;
        text.alignment = FlxTextAlign.LEFT;
        text.text = 'Medium font, scale : ${text.scale.x}';
        text.color = FlxColor.fromInt(0xffffc600);
        text.antialiasing = aa;
        text.pixelPerfectRender = ppRender;
        text.pixelPerfectPosition = ppPosition;
        add(text);

        //Any non-antialiased pixel font can be used here
        var fontB = FlxBitmapFont.fromAngelCode(AssetPaths.pixel_tiny_16__png, AssetPaths.pixel_tiny_16__fnt);
        text2 = new FlxBitmapText(fontB);
        text2.setPosition(600, 100);
        text2.autoSize = false;
        text2.width = text2.fieldWidth = 500;
        text2.alignment = FlxTextAlign.LEFT;
        text2.text = 'Small font, scale : ${text2.scale.x}';
        text2.color = FlxColor.fromInt(0xffff5d37);
        text.antialiasing = aa;
        text2.pixelPerfectRender = ppRender;
        text2.pixelPerfectPosition = ppPosition;
        add(text2);
    }

    override public function update(elapsed:Float)
    {
        super.update(elapsed);

        //Scaling controls
        if (FlxG.keys.justPressed.UP) {
            text.scale.set(text.scale.x + 0.2, text.scale.y + 0.2);
            text.text = 'Medium font, scale : ${text.scale.x}';
        }

        if (FlxG.keys.justPressed.DOWN) {
            text.scale.set(text.scale.x - 0.2, text.scale.y - 0.2);
            text.text = 'Medium font, scale : ${text.scale.x}';
        }

        if (FlxG.keys.justPressed.LEFT) {
            text2.scale.set(text2.scale.x - 0.2, text2.scale.y - 0.2);
            text2.text = 'Small font, scale : ${text2.scale.x}';
        }

        if (FlxG.keys.justPressed.RIGHT) {
            text2.scale.set(text2.scale.x + 0.2, text2.scale.y + 0.2);
            text2.text = 'Small font, scale : ${text2.scale.x}';
        }

        //Changing position sometimes introduces artifacts (??)
        if (FlxG.mouse.justPressed) {
            var pos = FlxG.mouse.getWorldPosition();
            text.setPosition(pos.x, pos.y);
            text2.setPosition(pos.x, pos.y + 50);
        }
    }
}

Observed behavior:
When any scaling happens, the text becomes non-consistent - some parts get unproportional scaling, i.e. vertical or horizontal lines are sometimes thicker / narrower than they should be:
bitmapfontscaling

Expected behavior:
All parts of the text should scale consistently.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the behavior with the provided TestBitmapFont example, then trace the FlxBitmapText and FlxBitmapFont rendering path under different scales and pixel-perfect settings. Done means bitmap text scales consistently without thicker or narrower lines across the listed targets and configurations.

Written by the indexing model from the issue text.

Assessment

Domain
computer-graphics, game-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.