4-4日本語の使い方

日本語を使うには、少し特殊な操作が必要です。OSの種類（MAC or Windows）やOSのversionによってそれは異なるようです。ここでは、Windows10で確認できた方法を紹介します。

このページの内容

  1. コンピューターに登録されているフォントを確認する。
  2. 日本語を出力する手続き
  3. 位置の調整

コンピューターに登録されているフォントを確認する。

コンピューターに登録されているフォント（文字種）には様々なものがあります。ゴシックや明朝体といったものがそうです。プロセッシングでは、コンピューターにあらかじめ登録されているフォントを利用します。そのためまずは、コンピューターに登録されているフォントを確認します。
下記のコードで、コンピューターに登録されているフォントを確認できます。

size(400, 300);
String[] fontList = PFont.list();
printArray(fontList);

このコードを実行すると、下記のように登録されているフォントがコンソールに表示されます。

4-4-a.png

日本語を出力する手続き

日本語を出力する手続きは、下記にまとめました。
①フォントを作成する。
②作成したフォントをテキスト用に設定する
③テキストを出力する。

①の「フォントを作成する」処理では、createFont()という命令を使います。パラメーターは、使用するフォント、フォントのサイズです。使用するフォントには、コンピューターに登録されているフォントを使用します。

createFont(“使用するフォント” , フォントサイズ);

そして、createFontは下記のように使います。

PFont myFont = createFont("ＭＳ ゴシック", 32);

このコードは、作成したフォントをmyFontに格納するという処理です。myFontはPFontタイプのクラスです。クラスの説明は長くなるのでここでは省きます。フォントを作成するにはこうするのだと、とりあえずは覚えて頂きたく思います。

②の「作成したフォントをテキスト用に設定する」処理では、textFont()という命令を使います。パラメーターには、上記で作成したmyFontです。

textFont(PFontタイプのクラス（この場合、myFont）);

③の「テキストを出力する」処理では、text()という命令を使います。パラメーターは、出力する文字、x軸上の位置、y軸上の位置となります。

text("出力する文字",　x軸上の位置 , y軸上の位置);

覚えることが多いですね。下記が実際のコード例です。

size(400, 300);
  PFont myFont = createFont("ＭＳ ゴシック", 32);  //①フォントを作成する
  textFont(myFont);  //②テキストのフォントを設定する
  text("ゴシック", width/2, height/2);  //③テキストを出力する
  
  line(0,height/2,width,height/2);  //補助線
  line(width/2,0,width/2,height);  //補助線

結果は下記になります。
テキストの出力される位置ですがは、text()の第2パラメーターで指定した値がテキストの左端、第3パラメーターで指定した値がテキストの下端になります。（わかりやすくするために、line()で補助線を描いています）

4-4-b.png

位置の調整

文字を出力する位置を調整する方法を説明します。それにはtextAlign()という命令を使います。第一パラメーターはx軸上の位置を調整します。第二パラメーターにはy軸上の位置を調整します。第一パラメーターには「LEFT」と「CENTER」、「RIGHT」のいずれかを指定します。第二パラメーターには「TOP」と「BOTTOM」、「CENTER」、「BASELINE」のいずれかを指定します。「BASELINE」にすると、デフォルト値になります。

textAlign(LEFT or CENTER or RIGHT , TOP or BOTTOM or CENTER or BASELINE);

下記がコード例です。

size(400, 300);
  PFont myFont = createFont("ＭＳ ゴシック", 32);
  textFont(myFont);
  textAlign(CENTER, CENTER);  //x軸もy軸もCENTER（中央）に設定。
  text("ゴシック", width/2, height/2);
  
  line(0,height/2,width,height/2);  //補助性
  line(width/2,0,width/2,height);  //補助性

結果は下記になります。「ゴシック」という文字が、画面中央に表示されました。CENTER以外のパラメーターも試してみましょう。

4-4-c.png