◆PROCESSING 逆引きリファレンス
カテゴリー：文字関連処理
文字データを読み込むには
【解説】
注意以下の記事は、Windows7環境での動作を前提として書かれています。2020/06現在、Windows10環境では期待通り動作しません。Windows10環境で任意のフォントを利用したい方は「TTF/OTFフォントを読み込むには」記事を参照してください。
プログラム製作時にデバッグ用の情報を表示する程度なら、print()命令が楽ちんです。
しかしプログラム利用者（ゲームプレーヤーなど）に文字で何かを表示しようとすると、意外と面倒な作業が必要です。PROCESSINGで文字を扱うには、以下の様な手順が必要になります。
1）Windowsが扱えるTTFまたはOTF形式の文字データ（フォント）を準備する
2）上記文字データをPROCESSINGが扱えるvlw形式に変換する
3）vlw形式の文字データを、指定の場所に格納する
4）プログラムで文字を読み込んで表示する
1）Windowsが扱えるTTFまたはOTF形式の文字データを準備する
Windowsが標準で持っている文字データを利用する場合は、この準備は必要ありません。2)に進んで頂いてOKです。
Windowsの標準フォント以外を利用したい場合は、例えば Collis 様のサイトなどにフリーライセンスの文字がまとめられていますので、「個人・商用サイトで無料利用可」となっているものをダウンロードします。
文字データとしては TTFまたはOTF形式の物が利用できるようです（私はTTF形式のものを利用しました）。ダウンロードできたら、フォントデータをWindowsにインストールします。
2）上記文字データをPROCESSINGが扱えるvlw形式に変換する
入手した文字データをPROCESSINGが扱えるvlw形式に変換します。createFont()命令を利用してプログラムで文字を変換する事も可能なようです。
しかし正規リファレンスには、PROCESSINGが備えているツールを使って文字データを変換する事が推奨されています。ですので、ここでは推奨されている方法を紹介したいと思います。
A)PROCESSINGの標準エディターを起動します。
B)標準エディターのメニューから「Tools」を選択します（下図の赤枠）
C)表示されるメニューから「Create Font・・・」を選択します。Create Font Windowが表示されます。
D)Create Font Windowで、vlw形式に変換するフォント名を選択し、「Characters」ボタンを押下します。Character Selector Windowが開きます。
メニューに目的のフォント名が表示されない方は、一旦標準エディターを閉じて、1)の手順でダウンロードしたフォントデータをWindowsにインストールした後に、再度標準エディターを開きなおしてみてください。
E)Character Selector Windowから、「All Characters」を選択し、OKボタンを押します。Windowが閉じて、Create Font Windowに戻ります。
F)Filename欄のファイル名を確認後、OKボタンを押下します。vlwへの変換が始まります。
変換が終わると、自動的にCreate Font Windowが閉じます。
またB)の作業を開始する前（Aの段階）で、一度空っぽのスケッチ（プログラムソース）を保存しておくことを推奨します。そうするとF)で作成される vlw 形式のフォントが、A)で保存したスケッチフォルダのdataフォルダ配下に出来上がる為です。
できあがったファイルを探す手間がありません。
私はうっかりA)からB)へと連続で操作してしまい、Windowsのユーザディレクトリに文字が出来上がってしまったので、「どこに、できたんだー（汗）」と探すのに手間取りました。
3）vlw形式の文字データを、指定の場所に格納する
できあがったフォントファイルを、スケッチフォルダ（プログラムソース格納場所）のdataフォルダ配下に格納します。
上記2)のB)作業を開始する前（Aの段階）で、一度空っぽのスケッチ（プログラムソース）を保存してから作業を始められた方は、既にdataフォルダ配下にフォントが出来上がっている筈ですので、本作業は必要ありません。
4）プログラムで文字を読み込んで表示する
PROCESSINGでvlw形式の文字データをプログラムに読み込むには、loadFont()命令を利用します。
【構文】
loadFont( filename )
【パラメータ】
filename : String : フォントファイル名
ファイル名だけを指定した場合は、dataフォルダ配下に該当ファイルがあるものとして処理されます。他の場所にあるフォントファイルを指定したい場合は、filenameに絶対パスを指定します。
【戻り値】
成功：PFont型の文字データ
失敗：null
【注意】
インターネットなどに公開したり、不特定多数の人に配布するアプリケーションで使う文字は、公開可能なライセンスのものにしましょう。Windowsに標準搭載されているからといって、ライセンスを確認しないで利用すると・・・問題になるかもしれません。
日本語対応フォントを変換するには、それなりの時間がかかります。
Create Font WindowでOKボタンを押しても、なかなか変換が終わらない事がありますが、あせってOKボタンを何度も押さないように（笑）。
またloadFont()命令は draw()関数の中で使うべきではありません。フォントを読み込むのに時間がかかるためです。通常は setup()関数の中で読み込みます。
以下のサンプルを試していただければわかりますが、漢字に対応した日本語フォントは、読み込むのに非常に時間がかかります。アルファベットしか使わないなら、B)で「All Characters」ではなく「Default Characters」を選択するのがオススメです。
読み込んだフォントサイズより大きなサイズで文字を表示する事もできますが、文字が崩れることがあります。読み込んだ文字サイズより小さなサイズで表示させる事が推奨されています。
【関連記事】
第２章：文字を表示しよう
●文字を読み込んで表示する例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
PFont pFontData; void setup(){ //文字データを読み込みます pFontData = loadFont("IPAPGothic-48.vlw"); //利用する文字を指定 textFont( pFontData ); } void draw(){ //文字の色を黒にする fill( 0,0,0 ); //大きさ24pixlで左上に表示 textSize( 24 ); text( "あ", 0, 24 ); //大きさ48pixlで、その下に表示 textSize( 48 ); text( "い", 0,72 ); } |
あらかじめdataフォルダに”IPAGotic-48.vlw”という名前のフォントファイルが存在する事が前提となります。
IPAGoticフォントはIPA 様が配布されている個人・商用サイトで無料利用可能な文字です。
デフォルトでは、文字の表示原点は左下である事に注意してください。
＜出力サンプル＞
●応用例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
PFont pFontData; String msg = "A New Hope\n\nA long long time ago\nIn a galaxy far far away\n\nIt is a period of civil war\nRebel spaceships, striking\nfrom a hidden base, have won\ntheir first victory against\nthe evil Galactic Empire."; float y=100; void setup(){ //文字データを読み込みます pFontData = loadFont("IPAPGothic-48.vlw"); //利用する文字を指定する textFont( pFontData ); //画面の大きさ、更新間隔、文字原点指定 size( 892, 512, P3D ); frameRate(45); textAlign(CENTER); } void draw(){ //背景を黒、文字は薄い黄色 background(0); fill( 200,200,80); //文字を画面中央に配置し斜めにする translate(width/2,height/2); rotateX(PI/4); //文字を奥に押し上げる text( msg, 0, y ); y--; } |
あらかじめdataフォルダに”IPAGotic-48.vlw”という名前のフォントファイルが存在する事が前提となります。
IPAGoticフォントはIPA 様が配布されている個人・商用サイトで無料利用可能な文字です。
上記を実行すると、スターウォーズのオープニングのような表示が行えます。
（参考：Processing 言語による情報メディア入門 様）
＜出力サンプル＞
本ページで利用しているアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。