Giter Club home page Giter Club logo

htmlbitmapfonts's Introduction

Starling extension for using bitmap fonts with simplified HTML tags for styling texts


HTMLTextField

HTMLTextField is a Starling TextField for using with simplified html notation

HTMLTextField now supports font scaling to adapt font size, it will choose the nearest biggest font size you have registered. (or smaller if no bigger found)


ACCEPTED TAGS:

  • bold : <b></b>;
  • italic : <i></i>;
  • underlined : <u></u>;
    you have to provide the underline texture with: HTMLBitmapFonts.underlineTexture = yourTexture for this to work.
  • size : <size="10"></size> or <s="10"></s>;
  • colors : don't forget '0x' or '#' !
  • solid :
    <color="0xFF0000"></color> or
    <c="0xFF0000"></c>;
  • gradient up / down :
    <color="0xFF0000,0xFFFFFF"></color> or
    <c="0xFF0000,0xFFFFFF"></c>;
  • gradient up-left/up-right/down-left/down-right :
    <color="0xFF0000,0xFFFFFF,0x000000,0x0000FF"></color> or
    <c="0xFF0000,0xFFFFFF,0x000000,0x0000FF"></c>
  • links : <l="your-url.com">text to click</l>;
  • you can use defaultLinkColor var to auto colorize the links.
  • you can define a function to navigate to url for just one textField with myTextField.navigateToURLFunction = function(url:String):void{...}
  • you can define a function to navigate to url for all textFields with the static function HTMLTextField.navigateToURLFunction = function(url:String):void{...}
  • by default the navigateToURLFunction function internaly uses the flash.net.navigateToURL function
  • dispatch Event : <f="string var to dispatch">text to click</f>;
  • you can use defaultLinkColor var to auto colorize the links.

HTMLTextField uses HTMLBitmapFonts instead of the tradtional BitmapFont.


Device fonts support:

  • You can use a list of fonts to use the device font by default using the static var HTMLTextField.$useDeviceFontsForFontNames.
  • You can define the default device font replacement by using the static var HTMLTextField.$useDeviceFontName, all fonts listed in HTMLTextField.$useDeviceFontsForFontNames will be kept.
  • You can define to use device fonts for all textFields by using the static var HTMLTextField.$useDeviceFonts.
  • You can define by textField to use device fonts by using the instance var myTextField.useDeviceFonts.

Usage:

To add a font for use with HTMLtextField you must add them to HTMLTextField with the static method HTMLTextField.registerBitmapFont this fonction accept as xml value the same XML as traditional BitmapFont.

They can be generated with tools like :

Personnaly i use AssetManager for loading fonts and i just modified it like this:
in loadQueue -> processXML :

// if I parse fontHTML -> load the font for HTMLTextFields
else if( rootNode == "fontHTML" )
{
	name 		= [email protected]();
	fileName 	= getName([email protected]());
	isBold 		= xml.info.@bold == 1;
	isItalic 	= xml.info.@italic == 1;

	log("Adding html bitmap font '" + name + "'" + " _bold: " + isBold + " _italic: " + isItalic );

	fontTexture = getTexture( fileName );
	HTMLTextField.registerBitmapFont( fontTexture, xml, xml.info.@size, isBold, isItalic, name.toLowerCase() );
	removeTexture( fileName, false );

	mLoadedHTMLFonts.push( name.toLowerCase() );
}

Other things:

  • You can add emotes to the text, just register the emotes shortcut and the texture associated.
    HTMLTextField.registerEmote( "{smiley}", mySmyleyTexture );
    you can configure offsets x and y, xAdvance, and margins for each emotes.
  • You can prevent auto carriage return by setting the autoCR var to false
  • You can autorize the text to extend automaticaly if the text not fit by setting the resizeField var to true
  • You can change the line spacing of the text by setting the lineSpacing var to something other than 0.
  • Added left centered and right centered horizontal alignements rules, use HTMLTextField.LEFT_CENTERED and HTMLTextField.RIGHT_CENTERED.
  • You can easily make shadows on the text by setting shadowX, shadowY and shadowColor vars.
  • You can limit the min font size when autoScale is true with the minFontSize var.
  • You can override the coloring behaviour for the emotes by using colorizeEmotes it's default to false.
  • You can set to ignore the emote in first and last position for the horizontal centering of the text by setting ignoreEmotesForAlign to true.

Warnings:

  • Only one font name can be used in the HTMLTextField, it can only change size, bold, italic, and color
  • All font styles must be on the same atlas as the textField is drawn on a QuadBatch
  • All emotes registered must be on the same atlas as the textField is drawn on a QuadBatch
  • The underline texture must be on the same atlas as the textField is drawn on a QuadBatch

htmlbitmapfonts's People

Contributors

binouze avatar

Stargazers

Ahmet Aytanozu avatar  avatar  avatar paling avatar Allen avatar Hattori Hanzō avatar  avatar Abraham Vazquez avatar qinjiayang avatar  avatar Łukasz Łazarecki avatar xucan avatar  avatar Martin Bjeld avatar Alex avatar Jakub Wagner avatar marcusjpotter avatar Sebastien Flory avatar William avatar  avatar

Watchers

Ilja Razinkov avatar freddy avatar  avatar  avatar  avatar Hattori Hanzō avatar Ahmet Aytanozu avatar

htmlbitmapfonts's Issues

Size property doesn't work !?

Hey, thanks for this awesome extension!

I've some issues concerning the fontSize of my HTMLTextField:

  • the fontSize property doesn't work.
  • the size as an xml property doesn't work.
  • all the stuff concerning the globalScale seems to be commented.

So how can I change the size of my TextField? At the moment it sounds that I'm limited to the one I generated with my Texture Atlas.
Also it seems that TextField is a little blurred.

new HTMLTextField(800, 800, 'Starling <color="#FF0000">does not cost a dime</color>. <s="10">Starling is a pure ActionScript 3</s> library', "Square721", 80, 0xFFFFFF);

Starling 2.0

Hello! Are there any plans to upgrade extension for starling 2.0? :)

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.