Giter Club home page Giter Club logo

font-custom's Introduction

Font Custom

hero image

Create new fonts with Aseprite and load them in to be used in your projects!

All you'll need is a font atlas (i.e. a grid-based arrangement of the characters you'd like to use) and a simple .json file that describe the properties of the font.

a demonstration

FAQ

  • Does this extension create fonts from my pixel art? (i.e., export to .ttf, .otf, etc)
    • No, unfortunately it does not create font files. It does, however, give you the option to use your custom font within Aseprite as if you were using the Edit > Insert Text menu option. If you'd like to create font files based on a pixel map, check out this itch.io project!
  • Why aren't special characters like Ð, Þ, Æ, or others working?
    • Unfortunately, for now, this extension can only handle the ASCII characters at the moment. I am investigating how we can modify the extension in the future to allow for (full) UTF-8, UTF-16 and UTF-32 compliant characters!
  • Are there other Aseprite extensions / scripts related to this?

How to Use Font Custom

  1. Download this extension by visiting the releases page!
  2. Create a pixel art font based on a grid with standard height and width. Don't worry about kerning, character widths, and etc; the next step will handle that. Save this file as .png, .ase, or .aseprite!

gif for font creation

  1. Create a properties file with the extension .json. The data has to be formatted in a special way, so I recommend using the example.json file you can find here as a stepping stool.

gif for property creation

  1. In Aseprite, simply install this extension (only have to do this once) and navigate to Edit > FX > Use Custom Font and follow the dialog prompts to include text with your custom font in your Aseprite project!

gif for using extension

Things to Know

  1. In your properties file, not every "object" is mandatory. All possible objects are listed below; mandatory objects have a * next to them. DO NOT include the asterix in the key-names in your properties file (use example.json as a template).

    • *alphabet - a list of all of the characters found in the font file. Due to technical reasons, the list of characters must match exactly the ordering found in the font file (left to right, top to bottom).
    • *sprite_path - a pointer to the sprite file that contains the font. Valid file extensions are .png, .ase, or .aseprite. If a relative file name is given, the extension will look for a font file in the same directory as the property file (recommended). However, you can also give it an absolute file name anywhere on your computer to locate the font file, if desired.
    • *atlas - an object containing information relevant to the construction of each character in the alphabet
      • *rows - how many rows of letters exist in the font file
      • *cols - how many columns of letters exist in the font file
      • *grid_width - in pixels, how wide is exactly one letter
      • *grid_height - in pixels, how tall is exactly one letter
      • common_width - in pixels, how wide should most characters be rendered (will default to grid_width if not specified)
      • character_widths - an object containing width information for particular letters (will default to grid_width if not specified)
        • every key in this object will be a single letter from the alphabet; every value in this object will be the number of pixels wide that this key should be rendered with
    • default_spacing - in pixels, the default amount of space to be left in between each letter when rendering (will default to 1 if not specified)
    • kerning - an object that specifies spacing between relationships of characters (will default to not use any kerning if not specified)
      • every key in this object will be a single letter from the alphabet; every value will be another object with the form:
        • *paired_with - a list of all of the characters, that when appearing after key, will have their spacing adjusted by the amount spacing
        • *spacing - in pixels, how much should the spacing be changed to accomodate the key : paired_with relationship (can be a negative value) when rendering
  2. If you encounter a bug, please report it as an Issue here on this repository! If you are code-saavy, you can also fork this repository and then submit a pull-request.

Credits

This extension was commissioned by dani boye on the Aseprite Discord server. He also provided the 6_by_9.png to use as an example font!

The json-parsing library, json.lua, was provided by rxi under the MIT License: https://github.com/rxi/json.lua

As an advocate of open-source software, feel free to suggest edits, or just fork this repository and make your own! The license on this software is open for commercial and private use. This extension will remain free forever; however, if you'd like to buy me a coffee, you can do so here:

ko-fi

font-custom's People

Contributors

fletchmakes avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

matt-tony

font-custom's Issues

Final code cleanup and review

Really take a good long, hard look at the code and make sure it's neat, tidy, and ready to ship. LOTS of manual testing should be used to ensure no crashes / un-intended error messages arise.

Support the BMFONT format

Might work on a pull request for this, but BMFONT is one of multiple standards for these kinds of fonts. Developed by AngelCode in the early 2000s, they commonly come in the ini-like format, since the binary format is much more unreliable. An example can be generated from either my BMFONT creator (similar style to this) at itch.io, the official tool from AngelCode or using this tool. The extension is usually .fnt.

They're supported by Unity with an extension, Godot by default and same with frameworks like LOVE.

A slight, much more minor appendix is the format .PCF used by Linux terminals, which while far far less common (Only used in some terminals for early X systems and in some more technical programs), has some good typefaces.

Known bugs:

  • ., ^ turn into a
  • $ turns into a white box
  • (, {, [, % don't allow the clicking of OK on the dialog
  • Ð, Þ, Æ, Œ, ð, þ, æ, œ are all "completed busted"

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.