[Plugin] Spritefont (28th August 2012)

  • <font color="red"><font size="4">NOTICE: This plugin is no longer being worked on.</font></font>

    Unfortunately I do not have expertise nor time to continue developing this plugin. Feel free to pick it up or develop your own.

    <font size="6">Sprite Font</font>

    Display text using a bitmap font.

    <font size="4">Download spritefont v8.zip</font><font size="2"><font color="red"> (Revision: 28th August 2012)</font></font>

    Extract the contents into Construct 2\exporters\html5\plugins

    Older releases:

    Spritefont v7 31th July 2012

    Spritefont v6 7th May 2012 release

    Download the example capx project showcasing Sprite Font

    Another example featuring two fonts

    <font size="3">Features</font>

    • load a font strip (an image containing series of characters)
    • monospaced font (Sprite Font splits the image into tiles of equal width)
    • instanced (you can have as many instances of the Sprite Font object that share the same font strip, but display different text at different locations)
    • once you add the Sprite Font object in editor, you will be prompted to load an image, the font strip.
    • once you've added the font strip, edit the Character Set property by entering a string of character that correspond to the letters in font strip.
    • be sure to enter proper Character width and Character height values as well (think of them as tiles of the tileset)
    • box width and box height represent the size of a text box containing the text (basically a grid). May change the wording later to avoid confusion.
    • WebGL support
    • "Force Point Sampling" property to force point sampling of text in WebGL rendering mode

    <font size="3">Actions</font>

    Set text (text) - Sets the text to be displayed.

    Append text (text) - Adds the text at end of existing text.

    Set word wrapping method (None, Break, By word) - Choose the text wrapping method: None, Break (wraps text into new line), By word (try to keep whole words; any words longer than 10 will be broken regardless)

    Set Resize Mode (None, Limited width, Limited height, Fixed size) - Determines how the bounding box is resized. None: don't resize automatically, Limited width: wrap at given width, unlimited lines; Limited height: limit number of lines, unlimited width; Fixed size: hard limit, only show text inside within given size)

    Set text scale(float) - Set the font size, e.g. 2 for double size, 0.5 for half size)

    Set text parameters - Set several parameters of the selected sprite font objects (text, text wrapping, resize mode, line length limit, line count limit, scale)

    Set text align (Left,Center,Right | Top,Middle,Bottom) - Sets the text alignment.

    Toggle debug - toggles debug mode (shows outline around text at the moment)

    Set horizontal spacing(pixels) - spacing between letters, can be negative

    Set vertical spacing(pixels) - spacing between lines, can be negative

    Set Effect(effect) - Set blending mode (effect)

    <font size="3">Conditions</font>

    Deprecated until I fix picking problem

    <font size="3">Expressions</font>

    charHeight - returns height of individual character

    charWidth - returns width of individual character

    getResizeMode - returns current resize mode

    getResizeWidth - returns current line length limit

    getResizeHeight - returns current line count limit

    getScale - returns current scale

    text - returns current text

    getHorizontalAlign - returns current text horizontal alignment

    getVerticalAlign - returns current text vertical alignment

    getHorizontalSpacing

    getVerticalSpacing

    <font color="red"><font size="4">TODO:</font></font>

    • if possible, render text in edittime
    • hotspots?
    • conditions (disabled the two compare text condition, present bug)

    Please report bugs and suggest features here in this thread!

    HOW-TO: Creating a Sprite Font compatible font strip

    1. Open your text editor and type out all letters that you want to use in a straight string.

    2. Open your image editor of choice, add text, paste the string.

    3. Select font, resize as needed.

    Make sure you resize in a way you can get a whole number as text width. For example, if you have 100 characters in the string and the whole font sprit is 1200 pixels wide, each font is 1200/100 = 12 pixels wide. Get the height in pixels as well, leave a little white space, however you want.

    Finally, save the image and import it to Construct 2 (by editing Sprite Font texture). Insert the character width and height there, in charset insert that string you pasted and - voila! You're set.

    <font size="3">TIPS</font>

    1. Sprite Font can also use tilesets, not just font strips, basically anything that is a grid of images.

    2. Sprite Font object uses the same texture for all its instances. Add another Sprite Font object and you can use another font!

    3. Sprite Font behaves just like Text object. Don't like how Text object behaves? Frustrated at font woes? Create your own font strip and use the Sprite Font!

    4. Some characters may need to be escaped with \ before them in a string. To be on the safe side, stick to alphanumeric characters!

    5. Don't like how letters are placed so widely? Use horizontal spacing to get them tighter!

  • Is there a link for the spritefont.zip file, or did I miss it?

    EDIT: Never mind, apparently we crossed posts. <img src="smileys/smiley4.gif" border="0" align="middle" />

  • Thumbs up from me here Mipey.

    <img src="smileys/smiley1.gif" border="0" align="middle" />

  • Okay, I'm in process of rewriting the plugin, the next update will totally break the existing implementation, but will be totally awesome! Well, kind of. Totally.

    The functionality will be pretty much the same as that of Text Object (with some extras, of course).

    Just a heads up.

  • Nice Mipey. Thanks for the info I'll wait for the new plugin before adding spritefont to my game.

    Thanks <img src="smileys/smiley1.gif" border="0" align="middle" />

  • Nice job, Mipey. This is something i need for a current project.

    And nice post format. <img src="smileys/smiley17.gif" border="0" align="middle" />

  • <font size="6"><font color=red>Major update!</font></font>

    As promised, I have rewritten the Sprite Font plugin. Now it contains all ACEs of the Text object and a few more!

    I consider this release to be beta release, however it is (almmost fully) functional. Please see the provided capx example project to see how to use the plugin.

    A few shortcomings so far:

    • no layout preview (all you get is green bounding box, sorry. Will try to get it to work.)
    • no mini icon (can't figure this out...)
    • lacks text alignment options (left, right, center) - will implement soon.

    Please let me know if you find any bugs.

    Enjoy! <img src="smileys/smiley1.gif" border="0" align="middle" />

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • It looks great, well done, however I see a few problems with it.

    1. scaling up looks really and blurry. If I want to use a pixelly font I guess I have to adjust it in photoshop.

    2. I see artefacts around the edges of the boxes when scaling up

    3. Characters like ' seem impossible to use without something like 'this is a text '.

    Otherwise, superb! C2 at the moment does not have good font support.

  • 1. and 2. can be solved with importing a large font and then scaling it down. There is a memory use implication, however, may want to use a size of 2 texture and fit all font glyphs within.

    3. the ' character is not included in the imported font strip and definition string, I kind of forgot about it. <img src="smileys/smiley1.gif" border="0" align="middle" />

    Thanks for the encouragement!

  • OK, sounds good.

    When talking about ', I was sort of referring to the fact that every character has to be the same width, making problems for . , : etc. I suppose it isn't that much of an issue, however, looking at the characters in the post editor which are also all the same width... ;)

  • This is great :)

    Exactly how should the characters be arranged? numbers first? letters first? what about symbols like , < > $ & ?

  • However you want, as long as font strip and the string match index by index.

  • Ahh, right, in the properties? Got you. :)

  • Works like a charm! Tomorrow, I'm replacing all text boxes with this. Goodbye Arial!

  • <font size="4"><font color=red>Update!</font></font>

    What's new:

    • Text alignment - Left, Right, Center, Top, Middle, Bottom. Note that it trims any white space on sides, so don't bother offsetting the text with spaces.
    • Toggle tebug action (shows text box outlines, handy!)
    • fixed a few nasty bugs I hadn't caught before.

    Next I'll be working on picking issues (for conditions) and a hotspot system (so that text can rotate the way you want it to, not around corner).

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)