まめもやしすてむ(仮)

へっぽこ学生の雑記

Processing.jsでフォントを読み込む

結果

  1. 埋め込みたいフォントのTTFファイルを用意する.
  2. Processingのプログラム冒頭に /@pjs font="TTFファイルへのパス";/ を記述する.
  3. setup内で loadFont("TTFファイルへのパス",サイズ)をPFont型変数に入れる.
 /*@pjs font="./hoge.ttf";*/

PFont fuga;
void setup(){
  fuga=loadFont("./hoge.ttf"); 
}

詳しく

 /*@pjs font="./hoge.ttf";*/

この一文でProcessing.jsにフォントを読ませる.この場合はProcessingの.pdeファイル(あるいはHTMLファイル)と同階層にあるTTFフォント「hoge.ttf」を読み込ませている.
Processing内にはない構文なのでコメントアウトは外さないように.
複数のフォントを読ませたい場合は以下の通り.

 /*@pjs font="./hoge.ttf","./piyo.ttf";*/

PFont fuga,foo;
void setup(){
  fuga=loadFont("./hoge.ttf");
  foo =loadFont("./piyo.ttf"); 
}

経緯

ギアチューンをWEBツール化するにあたってまず最初につまずいた点. Processing単体で動かす場合はツールを用いてProcessing用のフォントファイルを作成し,それをloadFontで読ませるだけで済んだのだが,Processing.jsではうまく動かなかった.
色々ggったところ,

  • Processing.jsではloadFontは使えない.
  • 代わりにcleateFontを使う.
  • ファイル名ではなくフォント名で読み込む.

…等と出てきた.素直に従ってやってみたものの成功せず.
さらに調べ進めてようやく冒頭の一文を見つけ出し,loadFontが有効なことを知りトライするも失敗.ダメ元でフォント名を指定していたのをTTFファイル名にしてみたら動いたという次第.

最初に出てきたのは何だったんだ
バージョンとかも書いてなかったし信用してはいけなかったか.
ついでに調べた結果は全部英語でした.ガンバッタ.

ちなみに

フォント名で指定し,なおかつそのフォントが自分のPCにインストールされている場合,自分の環境からだと正しく表示され気づけないので注意だ.