2007年09月25日
デバイスフォントにアンチエイリアス(改)
Flash ではデバイスフォント にアンチエイリアスがかかりません を BitmapData.draw すると Windows ではアンチエイリアスがかからずにギザギザになってしまいます。
それを解決するための方法として F-site | デバイスフォントにアンチエイリアス という技が紹介されていますが、もっと単純に実現できたので紹介します。
サンプルはこれ。一番上の行は編集可能です。日本語もいけます。
ポイントは、new BitmapData するときの第3引数(transparent)を false にしておくこと。それだけ。true なら2行目のようにギザギザ、false なら3行目。私の環境(Windows XP)では右の図のように表示されました。
(追記) Mac だとどちらでもアンチエイリアスかかってるようです。また、両方ともアンチエイリアスかからない Windows XP 環境もありました(原因は不明)。環境によって挙動が異なるようで、あまり実用的ではなさそうですね…。
弊害で BitmapData が不透明になってしまうけど、同じサイズの BitmapData を作成して、copyChannel で R の値を Alpha に、Alpha の値を RGB に振り分ければ透明化できますよね。
あまり知られていないのか、当たり前すぎて誰も書いていないのか分からないのですが、はまったのでエントリにしておきました。Flash 8+AS2 でも動くようです。Mac でもアンチエイリアスかかってる…よね?
sIFR のようなツールはフォントを埋め込まないと使えなかったけど、デバイスフォントでいいならこの技が使えそうですね。
ソースは以下に。
package {
import flash.display.*;
import flash.text.*;
public class AntialiasingTest extends Sprite {
private const WIDTH:int = 400;
private const HEIGHT:int = 50;
public function AntialiasingTest() {
stage.scaleMode = "noScale";
stage.align = "TL";
var tf:TextFormat = new TextFormat();
tf.size = HEIGHT * 0.9;
var textField:TextField = new TextField();
textField.defaultTextFormat = tf;
textField.autoSize = "left";
textField.type = "input";
textField.text = "Hello, AS 3.0!";
addChild(textField);
var bmp1:Bitmap = new Bitmap(new BitmapData(WIDTH, HEIGHT));
bmp1.scaleX = bmp1.scaleY = 2;
bmp1.y = HEIGHT;
addChild(bmp1);
var bmp2:Bitmap = new Bitmap(new BitmapData(WIDTH, HEIGHT, false));
bmp2.scaleX = bmp2.scaleY = 2;
bmp2.y = HEIGHT * 3;
addChild(bmp2);
addEventListener("enterFrame", function(event:*):void {
bmp1.bitmapData.fillRect(bmp1.bitmapData.rect, 0xffffff);
bmp1.bitmapData.draw(textField);
bmp2.bitmapData.fillRect(bmp2.bitmapData.rect, 0xffffff);
bmp2.bitmapData.draw(textField);
});
}
}
}