TTF/OTFフォントを読み込むには

◆PROCESSING　逆引きリファレンス

　カテゴリー：文字関連処理

【概要】

プログラム作成時にデバッグ用の情報を表示するなら、print()命令が楽ちんです。

しかし描画領域に文字を表示しようとすると、意外と面倒な作業が必要となります。PROCESSINGで文字を扱うには

Windowsが扱えるTTFまたはOTF形式のフォントを準備する
フォントをPROCESSINGが扱えるvlw形式に変換する
vlw形式の文字データを、dataフォルダに格納する
プログラムで文字を読み込んで表示する

という手順が必要です。そして以前は、この手順でうまくいっていました。ええ・・・。

この辺りは、古い記事ですが「文字データを読み込むには」に書かせていただいております。

ところがWindows10環境では、どうにも上手く動作しません。

問題1：フォント作成画面に表示されない

Windows10にインターネットから入手したTTF形式（またはOTF形式）のフォントをインストールします。

しかしそれをPROCESSINGの標準ツールでvlw形式に変換しようとしても、フォント作成画面の一覧に表示されません。

以前は確かに英語名で表示されていたフォント（IPAフォント等）も、なぜか表示されなくなっています・・・。

PROCESSINGの公式ページを参照すると、PFontクラスのlistメソッドで、PROCESSINGが利用可能なフォント一覧が得られると書いてあります。

以下のようなプログラムです。

import java.util.Arrays;
import java.util.List;

void setup(){
  size(300,300);
  List<String> flist = Arrays.asList(PFont.list());
  
  for( String name : flist ){
    println( "[" + name + "]" );
  }
}
void draw(){
}

import java.util.Arrays;

import java.util.List;

void setup(){

size(300,300);

List<String> flist = Arrays.asList(PFont.list());

for( String name : flist ){

println( "[" + name + "]" );

}

void draw(){

}

＜実行結果＞

これを実行すると、ちゃんとインストールしたフォント名が表示されます。でもフォント作成画面には出てこない。もちろん英語の名前でも出てきません。※

※Windows7環境では問題なく表示されます

で、さらに調査・・・。

PROCESSINGのフォント作成画面では以下のようにしてフォント一覧を取得し、そのポストスクリプト名を表示しています。

  GraphicsEnvironment ge =
      GraphicsEnvironment.getLocalGraphicsEnvironment();
  Font[] fonts = ge.getAllFonts();

GraphicsEnvironment ge =

GraphicsEnvironment.getLocalGraphicsEnvironment();

Font[] fonts = ge.getAllFonts();

ですが、どうやらこのポストスクリプト名が、Windows7とWindows10で異なっているようなのです。以下のプログラムで確認すると

import java.awt.GraphicsEnvironment;
import java.awt.Font;

PFont font;
void setup(){ 
  GraphicsEnvironment ge =
      GraphicsEnvironment.getLocalGraphicsEnvironment();
  Font[] fonts = ge.getAllFonts();
  for( int i = 0; i < fonts.length; i++ ){
    println( 
      "[" + fonts[i] + "] PSNAME=[" 
      + fonts[i].getPSName() + "]" ); 
  }
} 
void draw(){
}

import java.awt.GraphicsEnvironment;

import java.awt.Font;

PFont font;

void setup(){

GraphicsEnvironment ge =

GraphicsEnvironment.getLocalGraphicsEnvironment();

Font[] fonts = ge.getAllFonts();

for( int i = 0; i < fonts.length; i++ ){

println(

"[" + fonts[i] + "] PSNAME=["

+ fonts[i].getPSName() + "]" );

}

void draw(){

}

梅ゴシックC4の場合

Windows10の結果
[java.awt.Font[family=Dialog,name=梅ゴシックC4,style=plain,size=1]] PSNAME=[Dialog.plain]

Windows7の結果
[java.awt.Font[family=梅ゴシックC4,name=梅ゴシックC4,style=plain,size=1]] PSNAME=[Ume-Gothic-C4]

おおう！Σ(ﾟДﾟ)・・・なんてことだ。

フォント作成画面をよく見ると、確かにDialog.plainという名前のフォントが見つかります。ですがこれを選択し、全ての文字種を指定して変換すると

Exception in thread “AWT-EventQueue-0” java.lang.OutOfMemoryError: Java heap space

で落ちます・・・orz。※
※Windows7環境では問題なく変換可能です

これは想像ですが、Windows10（Windows8にも）にはBahnschriftという名前のシステムフォントがインストールされており、このポストスクリプト名がDialog.plainであるため、システムフォントと区別がつかずに誤動作しているようです。

問題2：インストール済みフォントがcreateFont()で読めない

次の手段として、インストール済みのフォントをcreateFont命令で読み込んでみます。

void setup()
{
  size(200,200);
  //インストール済みフォント名を指定
  PFont font = createFont("梅ゴシックC4", 32, true);
  textFont( font );
  textAlign( LEFT, TOP );
}

void draw()
{
  text("アあ漢aB", 0, 0 );
}

void setup()

{

size(200,200);

//インストール済みフォント名を指定

PFont font = createFont("梅ゴシックC4", 32, true);

textFont( font );

textAlign( LEFT, TOP );

}

void draw()

{

text("アあ漢aB", 0, 0 );

}

＜実行結果＞
“梅ゴシックC4” is not available, so another font will be used. Use PFont.list() to show available fonts.

でもやっぱり、このようなエラーとなり失敗します。ダメダこりゃ・・・※

※こちらもWindows7環境では問題なく変換できました

というわけで、vlw形式のフォントを利用するのはあきらめて、TTFまたはOTF形式のフォントを直接読み込む方法を紹介したいと思います。

なお私と同じ現象ではまっている方の記事を見つけましたので、参考までにリンクをさせて頂きます。

Qiita 様：Processingで使えないフォントでも使いたい：@HitsujiRereさん

【詳細】

まずTTF形式またはOTF形式のフォントファイルを、dataフォルダに配置します。その上で、createFont命令にそのファイル名を与えて読み込ませます。
.

フォントを生成するPFont font = createFont( String fileName, int size, boolean smooth);

font：作成したフォント
fileName：TTFフォントファイル名
size：フォントサイズ
smooth：アンチエイリアス指定。trueならスムーズにする

読み込みと生成に少し時間がかかりますが、これでフォント作成画面に表示されないようなTTF形式またはOTF形式のフォントであっても、PROCESSINGで利用できるようになります。

全てのフォントで試したわけではありませんが、Windows10環境で従来の方法ではvlw形式のフォントが生成できなくて困っている人は、一度お試し下さい。

以下はTTFフォントファイルを直接読み込む例です。

void setup()
{
  size(200,200);
  //インストール済みフォント名ではなく、TTFファイル名を指定する
  PFont font = createFont("ume-tgc4.ttf", 32, true);
  textFont( font );
  textAlign( LEFT, TOP );
}

void draw()
{
  text("アあ漢aB", 0, 0 );
}

void setup()

{

size(200,200);

//インストール済みフォント名ではなく、TTFファイル名を指定する

PFont font = createFont("ume-tgc4.ttf", 32, true);

textFont( font );

textAlign( LEFT, TOP );

}

void draw()

{

text("アあ漢aB", 0, 0 );

}

【関連記事】

文字データを読み込むには

サンプルプログラム

あの映画のオープニングっぽいアレの例：

/**
 * PROCESSING TTFフォント読み込みSample
 * @auther MSLABO
 * @see http://www.sato-lab.jp/imfu2013/text06.pdf
 * @version 2.0 2020/06
 */
PFont  pFontData;
String msg =   "A New Hope\n\n"
             + "A long long time ago\n"
             + "In a galaxy far far away\n\n"
             + "It is a period of civil war\n"
             + "Rebel spaceships, striking\n"
             + "from a hidden base, have won\n"
             + "their first victory against\n"
             + "the evil Galactic Empire\n"
             ;
ArrayList<PVector> pointStar = new ArrayList<PVector>();             
float y = 100;
 
void setup(){
  size( 600, 400, P3D ); 
  
  //TTF文字データを読み込み
  pFontData = createFont("mplus-1p-regular.ttf", 24 );
  
  //利用する文字を指定
  textFont( pFontData ); 
  frameRate( 45 );
  textAlign( CENTER );
  
  //星の座標生成
  for( int i = 0; i < 100; i++ ){
    pointStar.add( new PVector( (int)random( width ), 
                                (int)random( height )));
  }
}
 
void draw(){
  //背景を黒、文字は薄い黄色
  background( 0 );
  
  //星を描く
  strokeWeight( 2 );
  stroke( 255 );
  for( PVector p: pointStar ){
    point( p.x, p.y );
  }  
  
  //文字を画面中央から上へ移動
  fill( 255,255,80 );
  translate( width/2, height/2 );
  rotateX( PI/4 );
  
  //文字を奥に押し上げる
  text( msg, 0, y );
  y--;
}

/**

* PROCESSING TTFフォント読み込みSample

* @auther MSLABO

* @see http://www.sato-lab.jp/imfu2013/text06.pdf

* @version 2.0 2020/06

PFont pFontData;

String msg = "A New Hope\n\n"

+ "A long long time ago\n"

+ "In a galaxy far far away\n\n"

+ "It is a period of civil war\n"

+ "Rebel spaceships, striking\n"

+ "from a hidden base, have won\n"

+ "their first victory against\n"

+ "the evil Galactic Empire\n"

;

ArrayList<PVector> pointStar = new ArrayList<PVector>();

float y = 100;

void setup(){

size( 600, 400, P3D );

//TTF文字データを読み込み

pFontData = createFont("mplus-1p-regular.ttf", 24 );

//利用する文字を指定

textFont( pFontData );

frameRate( 45 );

textAlign( CENTER );

//星の座標生成

for( int i = 0; i < 100; i++ ){

pointStar.add( new PVector( (int)random( width ),

(int)random( height )));

}

void draw(){

//背景を黒、文字は薄い黄色

background( 0 );

//星を描く

strokeWeight( 2 );

stroke( 255 );

for( PVector p: pointStar ){

point( p.x, p.y );

}

//文字を画面中央から上へ移動

fill( 255,255,80 );

translate( width/2, height/2 );

rotateX( PI/4 );

//文字を奥に押し上げる

text( msg, 0, y );

y--;

}

上記を実行すると、あの映画のオープニングのような場面が表示されます。

上記はProcessing 言語による情報メディア入門　様に掲載されていたプログラムを改編して掲載しています。また利用しているフォントデータはM+FONT 様にて配布されているものを利用させて頂きました。

＜出力サンプル＞

PROCESSING逆引きリファレンス一覧へ戻る

本ページで利用しているアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。

iconka.com 様
ICOOON MONO 様

◆PROCESSING 逆引きリファレンス

カテゴリー：文字関連処理