2014-03-10

Rendering Color Emoji using Glyph with DirectWrite 1.2

Windows 8.1でカラー絵文字を表示するサンプルでTranslateColorGlyphRunを使ってグリフベースで書く方法が存在してないのでサンプルを書いた。

void DrawGlyphRun(ID2D1RenderTarget* target, IDWriteFactory factory, IDWriteFont* fontFace, ID2D1Brush* defaultBrush, DWRITE_GLYPH_RUN* glyphRun)
{
bool isColor = false;
IDWriteColorGlyphRunEnumerator* colorLayer;
IDWriteFont2* fontFace2;
fontFace->QueryInterface(reinterpret_cast<IDWriteFontFace2**>(&fontFace2));
if (fontFace2->IsColorFont()) {
IDWriteFactory2* factory2;
factory->QueryIntarface(reinterpret_cast<IDWriteFactory2**>(&factory2));
if (SUCCEEDED(factory2->TranslateColorGlyphRun(0, 0, glyphRun, nullptr, DWRITE_MEASURING_MODE_NATURAL, nullptr, 0, &colorLayer))) {
isColor = true;
}
}
if (isColor) {
BOOL hasRun;
const DWRITE_COLOR_GLYPH_RUN* colorRun;
while (true) {
if (FAILED(colorLayer->MoveNext(&hasRun)) || !hasRun) {
break;
}
if (FAILED(colorLayer->GetCurrentRun(&colorRun))) {
break;
}
ID2DBrush* brush = nullptr;
if (colorRun->runColor.r == 0.0 && colorRun->runColor.g == 0.0 && colorRun->runColor.b == 0.0 && ColorRun->runColor.a == 0.0) {
target->CreateSolidColorBrush(colorRun->runColor, &brush);
}
target->DrawGlyphRun(point, glyphRun, brush ? brush : defaultBrush);
if (brush) {
brush->Release();
}
}
} else {
target->DrawGlyphRun(point, glyphRun, defaultBrush);
}
}
view raw colorglyph.cpp hosted with ❤ by GitHub


適当に書いたものなので動かないとは思うけど、使い方は参考になるはず。というか、Microsoft、TranslateColorGlyphRunを使ったサンプルくらい公開してよ。

2014-03-07

emoji hell

絵文字は昔Emoticonsとか言ってたのにいつの間に世界標準語でemojiと呼ばれるようになったんだが、このフォント仕様のカオスさが面白い。たまに調べることがあるので自分用にまとめてみた。

現在主流のプラットフォームだと大体はカラー絵文字をサポートしてるのだが、すべてでサポートする仕様が異なる。どのプラットフォームもOpenTypeに新しいテーブルを追加することでサポートするようになってる。

Windows 8.1

COLRテーブルとCPALテーブルを利用。
http://opentype.info/blog/2013/07/03/color-emoji-in-windows-8-1-the-future-of-color-fonts/

ただしカラー絵文字を描画するには、DirectWriteのID2D1RenderTarget::DrawTextまたは、ID2D1RenderTarget::DrawTextLayout必須 (えっDrawGlyphRunではサポートしないの?) なため、IE11でもサポートされず。

なお、Glyphベースで描画するには、DWRITE_COLOR_GLYPH_RUN使えばいいらしいが。

Apple iOS / OSX 10.7

sbixテーブルを利用。そのままPNGが入ってる
http://typographica.org/typeface-reviews/apple-color-emoji/

10.7から追加されたCTFontDrawGlyphsを使うことで描画可能。CGContextShowGlyphsWithAdvancesの使用からCTFontDrawGlyphsに変えることで対応可能。

Google Android

CBDTテーブルとCBLCテーブルを利用。PNGとか非圧縮のビットマップが格納可能
https://color-emoji.googlecode.com/git/specification/v1.html

ただし、FreeType 2.5でサポートが入ってるため (from Google)、FreeTypeでレンダリングするようなアプリだとOS問わずサポート可能 (ビルドオプションの変更は必要)