iOSでFTGLESを使ってテキストを描画する

FTGLESについて、日本語での情報があまり無いようなので書いてみました。*1


FTGLESはFTGLOpenGL ES向けに移植したもので、TrueTypeフォントOpenTypeフォントなどをOpenGL ES上でレンダリングすることができます。FTGLもFTGLESも、FreeType2を使ってフォントファイルを読んでいるので、FreeType2が扱えるフォントファイルを使用することができます。*2


ライセンスはFTGLESがMIT License、FreeType2が(BSD Licenseに近い)FreeType License*3なので、AppStoreで配布するのに問題は無いと思います。


FTGLESは今のところOpenGL ES 1.1のみをサポートしていますが、ES 2.0への対応も進行中のようです。元のFTGLがOpenGLの固定機能に依存しているので、ES 2.0へ対応するにはかなりの修正が必要になっているのではないかと思います。


今回作ったもの

ビルド手順と使用方法

配布元のページに書いてある通りですが、重要なところだけ抜粋しました。

1. libFTGLES.a を作る
git clone https://github.com/cdave1/ftgles.git
git clone https://github.com/cdave1/freetype2-ios.git
cd freetype2-ios/
bash install.sh
cd ../ftgles
ln -s ../freetype2-ios freetype2
cd Xcode
bash install.sh

install.sh内で -sdk iphoneos4.3 とSDKが指定されているので、古いSDKでビルドする場合は書き換える必要があります。また、僕の環境では freetype2-ios のビルドで llvm-gcc-4.2 が無いというエラーが出たので、freetype2.xcodeproj を開いて gcc-4.2 に変更しました。

libFTGLES.a ができたら、自分のXcodeプロジェクトに追加します。

2. ヘッダ検索パスの設定

自分のXcodeプロジェクトのヘッダ検索パスを設定します。


この例では、自分のプロジェクト直下に ftgles という名前でフォルダを作り、そこで前述の freetype2-ios、ftgles をビルドしています。

3. 使い方
// ftglesのヘッダファイルをインクルードする。
#include "FTGL/ftgles.h"
// フォントファイルからFTFontオブジェクトを作成し、サイズを設定する。
FTFont *font = new FTTextureFont("/path/to/myfont.ttf");
font->FaceSize(72);
// レンダリング
glColor4f(1.0f, 1.0f, 1.0f, 1.0f);
font->Render([@"水瀬伊織" UTF8String]);

より詳しい使い方は FTGLのチュートリアル を見てください。

レンダリングモードについて

FTGLESには次の4つのレンダリングモードがあります。*4

  • Texture Font
    • 文字毎にテクスチャを作成する。テクスチャはキャッシュされるので高速。
  • Buffer Font
    • 一行毎にテクスチャを作成する。そのため、同じ文字列を繰り返しレンダリングする場合は Texture Font よりもさらに高速。
  • Polygon Font
    • フォントの字形を3Dオブジェクトとしてレンダリングするので、拡大縮小や回転等をしても画質が保たれる。
  • Outline Font
    • Polygon Fontと同様だが、アウトラインのみを描画する。


Texture Font

Buffer Font

Polygon Font

Outline Font


Texture Font と Buffer Font は見た目はほとんど同じです。上の例だと Polygon Font はあまり綺麗ではありませんが、次のように拡大などをすると Polygon Font の利点がわかります。



また、Polygon Font の場合はマルチサンプリングアンチエイリアス(MSAA)を使用するとジャギーが取れて綺麗になりますが、今回は使用していません。iOSでのMSAAは マルチサンプリングアンチエイリアシング(MSAA)を試してみた が参考になると思います。Outline Font の場合は glEnable(GL_LINE_SMOOTH) をすれば綺麗になるはずと思うのですが、変化はありませんでした。ちょっと調べたところ、実機では GL_LINE_SMOOTH は効かないという記述をいくつか見かけました。後日もう少し詳しく調べてみたいと思います。

システムのフォントファイルにアクセスしたいけど…

FTGLESを使うにはフォントファイルのパスが必要なのでUIFontでフォントを取得してもダメなんですが、次のようにすると一応フォントファイルに直接アクセスできるようです。でもこれって審査通るんですかね?

new FTTextureFont("/System/Library/Fonts/Cache/HiraginoKakuGothicProNW6.otf");

システムのフォントファイルに直接アクセスしてはダメだと、再配布が許可されているフリーフォントをバンドルして使うくらいしかできなくなってしまうのでFTGLESはあまり役に立たないものになってしまいますね。


システムのヒラギノ角ゴProN W6を使用

作ったもの

今回作ったもののソースコード: http://kuramo.ch/iosdev/FTGLES.zip

(FTGLESとIPAフォントを含んでいるので約46MBあります)


ピンチ操作で拡大縮小します。なぞると回転します。ダブルタップで拡大率と回転がリセットされます。

*1:「FTGLES」OpenGL ESでTrueTypeフォントをレンダリングするためのライブラリ で軽く触れられているくらいでしょうか

*2:ただし、TrueTypeコレクション(.ttc)についてはFTGL/FTGLESのAPI上でインデックスを指定することができないので、コレクション内の最初のフォントしか使用することができません。(JavieではFTGLを改造してインデックスを指定できるようにしています)

*3:正確にはFreeType LicenseとGPLのデュアルライセンスですが、AppStoreで配布するならGPLは選択できません

*4:FTGLにはさらにいくつかのレンダリングモードがありますがFTGLESには実装されていません