font-game-engine icon indicating copy to clipboard operation
font-game-engine copied to clipboard

Anti-aliased images are hard to convert

Open FreddieRa opened this issue 3 years ago • 5 comments

Anti Aliasing

When exporting pngs of text Pixlr, it anti-alias the edges:

image

This is nice, but when I try and convert it in the online editor, I have 130+ colors to manually reassign:

image

To address this, I have implemented a "Guess" function which will take a threshold (how close two RBG colours should be in LAB space to be considered the same) and then will automatically assign all of the relevant colours:

image

I'm currently working on this in my own fork which is yet to be published, but any insight or suggested features before I open a PR would be appreciated.

Additional notes:

  • Undo is already working, and will bulk undo all of the colors changed in a single guess
  • LAB space does not include alpha values, so currently if two colors have different alpha values it assigns it a score of 10000 (higher than the max threshold value)
  • There are probably better algorithms for mono-chroming (totally a verb) an image, but this is designed to work explicitly with the 4 colours given

FreddieRa avatar Apr 02 '21 23:04 FreddieRa

Current changes can be seen here: https://github.com/mmulet/font-game-engine/compare/main...FreddieRa:main

FreddieRa avatar Apr 02 '21 23:04 FreddieRa

When I built fontemon, I used blender’s https://docs.blender.org/manual/en/latest/compositing/types/converter/color_ramp.html color ramp node in the composition to preprocess images with many colors.

Screenshot 2021-04-02 170336

mmulet avatar Apr 02 '21 23:04 mmulet

Ah okay, that of course works, this just makes the converter more of a one-stop-shop. I am however getting the issue of Unrecognized color 117,117,117,255 despite the fact that no colours show up in the input sidebar.

FreddieRa avatar Apr 03 '21 00:04 FreddieRa

Hard to say, but most likely, the currentColors array hasn't been updated correctly. Try running

   this.currentColors = getAllColorsFromAnImage(
      this.image.data,
      true
    ).inputColors;

after making your change

mmulet avatar Apr 03 '21 00:04 mmulet

Interesting, thank you, that fixed it. Now however I now get NetworkError when attempting to fetch resource. I'll open a separate issue.

FreddieRa avatar Apr 03 '21 00:04 FreddieRa