31:文字を表示する(実践編)

◆PROCESSINGで始めるゲーム作りとコンピュータ

Thunder 31:文字を表示する(実践編)

今日の話題

 

15:vlwフォントを表示する

前回の記事では実行結果ウィンドウに文字を表示するために、PROCESSINGが利用可能なフォントデータを用意しました。

今回は用意したvlw形式のフォントデータを、プログラムで扱う方法について解説します。

用意したフォントデータを実行結果ウィンドウに表示するためには、大まかに以下の手順でプログラミングを行います。

  • フォントデータを読み込む
  • 利用するフォントデータを指定する
  • 好きな文章を表示する

PROCESSINGではフォントデータも画像データと同じく「リソースファイル」として扱います。リソースファイルについては「25:画像を表示する」で説明させて頂きましたので、忘ちゃった方は参照してみて下さい。

ですので変換したvlw形式のフォントは、スケッチファイル(プログラムソース)を格納するフォルダに data という名前のフォルダを作成し、その下に格納されいているものとして処理されます。

例えば「sampleGame.pde」という名前のスケッチファイルが
C:\processing-3\src\sampleGame
というフォルダに格納されているなら

そのフォントデータは
C:\processing-3\src\sampleGame\data
の下に ある事が前提となります。

以下の記事では、IPAフォント( IPAGothic-48.vlw )を利用する前提で執筆しています。IPAフォント以外を利用する方は、フォントファイル名を適時読み替えてください。

vlw形式のフォントデータを用意する方法については、前回の記事「29:文字を表示する(準備編)」を参照して下さい。

フォントデータを読み込むには、loadFont() 命令を利用します。

loadFont():フォントデータを読み込む

●種類
PROCESSINGの命令

●代表書式
font = loadFont ( fileName ) ;

●引数
fileName : vlw形式のフォントファイル名

●戻り値
PFont型のフォントデータ

●使用例
PFont  f  =  loadFont( “IPAGothic-48.vlw” ) ;  //IPAフォントを読む

.
fileName にフォントファイル名を指定します。ファイル名は拡張子まで含めた名前にしてください。

loadFont() 命令は PFont型の値を戻します。PFont型とは、PROCESSINGがフォントデータを管理するために利用する専用の型です。

今までも整数なら int型、小数点なら float型など、扱うデータに応じてそれぞれの型を利用してきましたが、フォントデータを扱う場合には PFont型を用います。

※本当は PImageと同じく、PFontも「型」ではなくて「クラス」なのですが、初心者の方は「型」だと覚えておいても良いでしょう。

loadfont(画像URL:illust-AC 様:kacco さん)

注意としては、前回の記事でも触れましたが日本語を含むフォントデータの読み込みには結構時間がかかる事です。

ですのでフォントデータを読み込む処理は、画像データを読み込む場合と同様に初期化関数( setup )の中で行うようにします。

PROCESSINGでは、複数のフォントデータ(書体)を使い分けることが可能です。

漫画でも、主人公が技を決めた時やアクションシーンなどで、強調された文字が使われますよね。あれと同じです。PROCESSINGでも状況に応じていろいろな書体を使い分けることができるのです。

%e6%93%ac%e9%9f%b3(画像URL:小樽総合デザイン事務局 様)

どのフォントデータを使うのかは、 textFont() 命令を使って指定します。

たとえ1種類しかフォントデータを使わない場合でも、どのフォントデータを使うか指定するものだと覚えておいて下さい。

textfont(画像URL:illust-AC 様:moe さん、くりまんさん)

textFont() 命令は以下の形式で利用します。

textFont():利用するフォントデータを指定する

●種類
PROCESSINGの命令

●代表書式
textFont ( font, size ) ;

●引数
font: loadFont() で読み込んだPFont型の変数
size: 文字サイズ

●戻り値
なし

●使用例
textFont( font, 32 ) ;  //32ピクセルの大きさで font を使う

.
textFont() 命令では、利用するフォントデータと共に文字サイズも指定します。

sizeに16と指定すれば 16ピクセル、32と指定すれば32ピクセルの大きさで文字が表示されます。

ここまでで準備は完了。あとは文章を表示するだけですね(笑)。

textFont() 命令で指定したフォントと大きさで文章を表示するには、text() 命令を使います。

text():文章を表示する

●種類
PROCESSINGの命令

●代表書式
text(  String  textData,  int  x,  int  y ) ;

●引数
textData: 表示したい文字列
x : 文字列を表示する横座標
y : 文字列を表示する縦座標

●戻り値
なし

●使用例
text( “HOGE”, 0, 128 ) ;  //( 0, 128 ) に “HOGE” と表示する

.

Sample06-1

<出力結果>
sample06-1
上記サンプルを実行すると、画面下側に1文字が32ピクセルの大きさで、それっぽい文章(笑)が表示されます。

 

16:アライメントを変更する

上記サンプルで
text(  “勇者は鋼鉄の剣を構えた”,  0,  height  ) ;
と書かれた場所が、実際に文章を表示している命令になります。

横位置には0を指定しているので左端から、縦位置は height なので画面の高さと同じ位置から、文章を表示します。

・・・・と説明を読んだ人の中に「あれ?」と思った方はみえるでしょうか?。

そうなんです。左端の0は良いとして、縦位置が height から文章を表示するという説明に違和感があります。

縦位置が height だと、下図のように文章が実行結果ウィンドウの下に位置する事になり、なにも表示されなくなりそうです。

textalain%e8%a7%a3%e8%aa%acでも試してみるとわかりますが、ちゃんと文章が表示されます(よく見ると、文字の下が少し欠けている筈です。ここがポイントです)。

実は文章(テキスト)に関しては、基点となるアンカーポイントが、デフォルトでテキストの左上ではなく「左やや下」になっているのです。

textalign%e8%a7%a3%e8%aa%ac2(画像URL:GAHAG | 著作権フリー写真・イラスト素材集 様 hector gomez)

アンカーポイントについては「26:画像を動かす」で解説をさせて頂きました。

画像の場合は描画原点の事をアンカーポイントと呼びましたが、テキストの場合は「アライメント」と呼びます。

先程の問題は、テキストのアライメントが初期状態で左やや下になっていたので、 ( 0,  height  ) に配置しても(文字の下側が少し欠けるだけで)なんとか表示できたのです。

textalign%e8%a7%a3%e8%aa%ac3

では、なぜ文字の下側が欠けてしまうのでしょうか?。それは、文字のアライメントが「左下」ではなく「左やや下」になっているからです。

この「やや下」という表現がポイントです(笑)。

テキストの表示に関しては、ちょっと複雑なルールがあります。これを理解するためには、文字に関するトップラインボトムラインベースラインについて知る必要があります。

ラインといってもスマホなどで利用するLINEではありません(笑)。

オジサマが若い頃は、綺麗なオネー様たちが横一列に並んで、足を上げて踊るラインダンスが一世を風靡しました。オジサマも、ちょっとドキドキしながら見た記憶があります・・・あ、どうでもいいですね、この話題は(汗)。

linedance(画像URL:宝塚歌劇倶楽部 様)

そんなラインではなくて、文字のラインとは「文字の書き始め」、「書き終わり」の位置の事です。言葉にするとわかりにくいでのすが、下図を見て下さい。
bottomlineトップラインとは、文字の上端の事です。ボトムラインとは下端の事です。この2つは理解しやすいですよね?。ではベースラインとは何でしょうか?。

ベースラインとは、ボトムライン(下端)から少しだけ上にいった場所(やや下)の事なのです。

なぜこんな規則があるのか・・・日本人には理解しにくい所ですが、コンピュータは英語文化圏の産物であり、外人さんはアルファベットを主に使います。

アルファベットには「i」のように上に点を打つものや、「q」や「j」のように下側に伸びている文字があります。

これをすべてトップラインまたはボトムラインに沿って並べると、文章を表示した時に、字がガタガタして見えるのです。

そこでアルファベットを横一線に並べた際に綺麗に見える線(ベースライン)を決め、ベースラインを基準に文字を並べるようにしました。

bottomline2これがベースラインです。

ところがこの考え方は、上や下に出っ張ることが少ない四角い文字を使う私達アジア文化圏の人には、あまり適さないのですよね・・・。

PROCESSINGも外人さんが考えたものですので、文字を表示するデフォルトのアライメントが、左端+ベースライン(やや下)になっているのです。

だから( 0,  height )に文字を表示した際に、文章の下端が欠けていたのです。

bottomline3日本語を扱う場合、画像とテキストで描画原点の位置が異なるのは扱いにくいですので、テキストのアライメントを左上(画像と同じ位置)に変更してみましょう。

テキストのアライメントは、textAlign() 命令で変更可能です。

textAlign():アライメントを変更する

●種類
PROCESSINGの命令

●代表書式
textAlign ( int  alignX ) ;
textAlign ( int  alignX, int  alignY ) ;

●引数
alignX :横の配置指定
alignY :縦の配置指定

●戻り値
なし

●使用例
textAlign ( LEFT, TOP ) ;  //アライメントを左上にする

.

Sample06-2

<出力結果>
sample06-2

どうでしょうか。こんどは下側が欠けること無く表示されましたよね?。

textAlign( LEFT, TOP ) ;
と書かれた場所が、アライメントを指定している命令になります。

LEFTとかTOPというのは、PROCESSINGがアライメント指定の為に用意している定数になります。

以下の定数が利用可能です。

●横位置を指定する定数

  • LEFT:左端
  • RIGHT:右端
  • CENTER:中央

●縦位置を指定する定数

  • TOP:上端
  • BOTTOM:下端
  • CENTER:中央
  • BASELINE:ベースライン

アライメントを変更したので、text() 命令で文章を表示している命令も変更されている事に注意してください。

text( “勇者は鋼鉄の剣を構えた”, 0, height );
と書かれていた箇所を

text( “勇者は鋼鉄の剣を構えた”, 0, height – fontSize );
に変更しています。

bottomline4表示位置を( 0,  height – fontSize ) にする事で、画面下端から文字の高さ分だけ上にいった所から表示をしています。

 

17:文字の色を変更する

文字の色がいつも黒なのは、ちょっとツマラナイ(汗)ですよね。今度は文字の色を変更してみましょう。

点や線の色を変更するには stroke() 命令を使いましたが、図形(円、四角形など)や文字の色を変更するには fill() 命令を使います。

fill():塗りつぶし色を指定する

●種類
PROCESSINGの命令

●代表書式
fill ( int  gray );
fill ( color   iro ) ;

●引数
gray :0 – 255 の範囲の濃淡値(グレースケール値)
iro : color型のRGB値

●戻り値
なし

●使用例
fill( color(255,0,0) ) ;  //赤色で塗りつぶすように指示する

.
fill() 命令は、命令を記述した以降に描かれる図形や文字を、指定された色で塗りつぶします。

色には 0 から 255 の範囲のグレースケール値か、color型の値を指定します。

color型については「24:図形を描いてみよう」で解説しました。PROCESSING独自の型で、色情報を管理するための型でしたね。

色情報はcolor() 命令を使って、RGBの3つの色を混ぜ合わせる事で作成します。

Sample06-3

<出力結果>
sample06-3
どんどんサンプルプログラムが長くなっていますが(汗)、いままで解説した命令ばかりですので、あせらずに上から順番に1つ1つ見ていけば理解できるはずです。

これでゲーム作成に必要なテクニックを、また1つ習得しました(笑)。あとは右端で文章が切れてしまう対応を行えばRPG風メッセージの完成です。

この対応は、今後具体的なゲームを作成していく中で紹介したいと思います。

Forest今日の言葉

・トップライン、ボトムライン、ベースライン

文字の上端がトップライン、最下端がボトムラインです。ベースラインとは最下端から少し上にいった位置で、アルファベットを綺麗に表示するために設けられた位置です。

・アライメント

テキストの描画原点の事です。

 

scroll今日の文法

・loadFont() 命令

vlw形式のフォントデータを読み込みます。

・textFont() 命令

読み込まれたフォントデータから、利用するものを選択します。

・text() 命令

文章を指定された位置に表示します。

・textAlign() 命令

文章の描画原点を指定します。

・fill () 命令

文字や図形(円、四角形など)を塗りつぶす色を指定します。

 

 今日のまとめ

  • 複数のフォントデータを読み込んで利用することが可能
  • どのフォントデータを使うかを指定する
  • 文字のサイズ、色、描画原点を変更できる

32:音を鳴らす(準備編) へ進む
30:文字を表示する(準備編) に戻る
目次へ戻る


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