調査内容報告

美咲フォントは色々な形式のファイルが用意されていますが、今回はとても容量の小さい PNG 版(54KB) を利用しました。

　美咲ゴシック PNG 版

調べてみたところ PNG 内各文字は、JIS X 0208 という文字コードで定められた順番に配置されているようです。

　参考) JIS X 0208 文字コード表
　http://ash.jp/code/codetbl2.htm

これら文字を Haxe(javascript or Action Script 3.0)からどのように表示するか、ちょっとスマートな方法は思いつかなかったため少々無理やりな方法を採りました。JIS X 0208 内文字がどういう順番に配置されているのかを予め定義しておく、という方法です。

まず以下の二つのファイルを作成しました。美咲フォント PNG 内文字と配置順はまったく同じになっています。

　改行区切り JIS X 0208 文字一式
　http://www.dango-itimi.com/blog/swf/186/1.txt

　一行にまとめた JIS X 0208 文字一式
　http://www.dango-itimi.com/blog/swf/186/2.txt

今回サンプルでは 2.txt 内の一行を以下の JIS0208.TEXT 変数にコピー＆ペーストで記述しておきました。

package com.dango_itimi.font;
class JIS0208 {

	private var map:Hash<Int>;

	public function new(?mapCreation:Bool = true){

		if(mapCreation)
			createMap();
	}
	public function createMap(){

		map = new Hash();
		for(i in 0...TEXT.length)
			map.set(TEXT.charAt(i), i);
	}
	public function getIndex(character:String):Int{

		return (map.exists(character)) ? map.get(character) : -1;
	}
	public function getIndexSet(text:String):Array<Int>{

		var indexSet:Array<Int> = [];
		for(i in 0...text.length)
			indexSet.push(getIndex(text.charAt(i)));

		return indexSet;
	}

	public static var TEXT:String = "JIS X 0208 文字一式を記入";

}

JIS0208.getIndexSet メソッド内引数に文字列を指定すると、文字列内 各1文字1文字が 美咲フォント PNG 内のどの位置にあるのかが分かります。
指定する文字列は全て全角にする必要があるため、文字列内 半角英数記号を全角に変換する処理 StringUtil.convertOneByteToTwoByte を別途作成しました。

package com.dango_itimi.utils;
class StringUtil {

	public static function convertOneByteToTwoByte(before:String):String{

		var after = "";
		for(i in 0...before.length){

			after += ~/[!-~]/g.replace(
				before.charAt(i),
				String.fromCharCode(before.charCodeAt(i) + 0xFEE0)
			);
		}
		return after;
	}
}

その他もろもろ、今回のサンプルで作成したフォント関連の処理は github にアップロードしています。

■ dango-itimi haxelib
https://github.com/siratama/haxelib

■ 言語問わず用 フォント関連処理配置ディレクトリ
https://github.com/siratama/haxelib/tree/master/src/core/com/dango_itimi/font

■ AS3 用 フォント関連処理配置ディレクトリ
https://github.com/siratama/haxelib/tree/master/src/as3/com/dango_itimi/as3/font

■ CreateJS 用 フォント関連処理配置ディレクトリ
https://github.com/siratama/haxelib/tree/master/src/createjs/com/dango_itimi/createjs/font

■ AS3 & CreateJS 両用 フォント関連処理配置ディレクトリ
https://github.com/siratama/haxelib/tree/master/src/as3_and_createjs/com/dango_itimi/as3_and_createjs/font

利用記述例は以下となります。

var text = "おはようございます。今日の天気は晴れ!aaaaaaaabbbbbbbbb ";

var fontJIS:FontJIS = Type.createInstance(fontJisClass, [MisakiFontSpriteSheet, MisakiGothic]);
var fontSet = fontJIS.createFontSet(text);

var px:Int = 0;
for(font in fontSet){

	font.x = px;
	px += fontJIS.fontSpriteSheet.fontWidth;
	fontLayer.addChild(font);
}

fontJisClass には FontJISForJS or FontJISForFlash のどちらかを設定します。

MisakiGothic クラスは、Flash CS ライブラリ内に 美咲ゴシック PNG を配置しリンケージ設定を行なった後、Flash To Haxe Converter で生成された Bitmap or BitmapData を親に持つ extern クラスです。

注意点としまして、現在は半角から全角に文字を変換する処理は完全ではないため、変数 text に指定する文字によってはエラーが発生してしまいます。例えば文字列内に 半角スペース があると html5 canvas 版ではエラーが発生することを確認しています。後に対処予定です。