30:文字を表示する(準備編)

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

Thunder 30:文字を表示する(準備編)

今日の話題

 

14:文字を変換する

これまで、なにか文章を表示するには print() (または println() 命令)を利用してきました。print()命令は、コンソール領域に文字や変数の内容を表示するには、非常に便利な命令です。

でもRPGなどでは、コンソール領域ではなくて実行結果ウィンドウの中に選択肢やキャラクターのセリフを表示したいですよね。

msgtextsample(画像URL:王国興亡記 様、scramble 様、Kazesawaフォント 様)

例えばこんな感じです(笑)。ほら、よくあるRPG風でしょ?。

こんな風に実行結果ウィンドウの中に文章を表示するためには、どうしたら良いでしょうか?。

そのためには、まず表示する文字データを入手してPROCESSINGが利用できる形式に変換する必要があります。

コンピュータでは、表示する文字データの事を「フォント」とか「フォントデータ」と呼びます。

フォントデータの詳細と入手先については、下記「コラム6:フォントデータを入手するには」を参照してください。

またTTFやOTFといったフォントデータの規格については「コラム7:フォントデータの種類」を参照してください。

以下の記事では下記サイト様から、TTF形式の「IPAフォント」を入手してあるものとして話を進めます。
IPAフォントダウンロードページ

IPAフォント以外を利用する方は、フォントデータの名前を適時読み替えて下さい。

上記サイト様よりTTF形式のフォントデータを入手したら、以下の手順に従ってPROCESSINGが利用可能なvlw形式のフォントに変換します。

(1)フォントをインストールする

フォントを手に入れたら、まずはあたなが使っているOSにインストールします。

フォントをインストールするには、手に入れたフォントファイル名( ipag.ttf など)をマウスで右クリックし、表示されるメニューから「インストール」を選んで下さい。

fontinstall

あるいはダウンロードしたフォントファイルを、  C:\Windows\Fonts 配下にコピーしてもOKです。

(2)標準エディタを起動する

PROCESSINGの標準エディタから、フォント作成画面を起動します。

が・・・フォント作成画面を起動する前に、標準エディタを起動したら直ぐにスケッチファイル(ソースファイル)を保存して下さい。

何もプログラムを書く必要はありません。保存する事に意味があります(笑)。

pro_fontcreate0
スケッチファイルを保存しなくても、フォントを変換する事は可能です。

でもその場合は、Windowsの非常に奥まった・・・どこだよ、そこ・・・みたいな場所に、変換されたファイルが出来上がってしまいます(汗)。

例えば以下の様な場所です。

C:\Users\ユーザ名\AppData\Local\Temp\untitled7691876550439017444sketches\sketch_160913a\data

スケッチファイルを保存してあると、スケッチファイルを保存したフォルダのdataフォルダ配下にフォントデータができるので、探す手間が省けてGoodです(笑)。

フォント作成画面は、標準エディタの「ツールバー」から「フォント作成」を選択する事で起動します。

pro_fontcreate

(3)変換対象フォントを選択する

フォント作成画面が起動したら、中央のリストから変換したい文字の名前を選びます。実行結果ウィンドウに日本語を表示したいのであれば、必ず日本語に対応した文字を選択しましょう。

IPAフォントをインストールした方は「IPAGothic」などと書かれた選択肢が、リストの中に表示されている筈です。

Windowsに標準搭載されているフォントを使うのであれば、「MS-Gothic(MS ゴシック)」や「Meiryo(メイリオ)」を選択して下さい。

pro_fontcreate21

選択したら「文字」と書かれたボタンを押します。

(4)変換する文字セットを選ぶ

「文字選択」と書かれたウィンドウが開くので、日本語を表示するのであれば「すべての文字」を選択して、OKボタンを押して下さい。

日本語対応フォントでもアルファベットしか使わない場合は、「デフォルトの文字」を選択しましょう。
pro_fontcreate3
日本語対応フォントで「すべての文字」を選択すると、該当ファイルの中にあるすべての文字を変換対象とするため、変換に時間がかかります。

また変換されたvlw形式のファイルサイズも大きくなります。当然ですが、そのファイルをプログラムから使う時にも時間がかかるようになります。

ですので、もしもアルファベットしか使わないのであれば「デフォルトの文字」を選択するようにして下さい。

(5)変換する

フォント作成画面に戻りますので、OKボタンを押します。

下の画像の青枠で囲った箇所が、変換した結果できあがるファイル名です。この名前を覚えておいて下さい。

pro_fontcreate22

日本語対応フォントで「すべての文字」を選択した場合、変換に結構時間がかかります。

変換中は、フォント作成画面が固まってしまったように感じられますが、あせってOKボタンを何度も押すと、何度も変換が行われて余計に時間がかかる事になります。

ここは気長に待ちましょう。焦らない、焦らない・・・(笑)。

無事に変換が完了すると、フォント作成画面が自動的に閉じます。

フォント作成画面のファイル名欄に書かれていたファイルが、スケッチファイルを保存したフォルダの data フォルダ配下に出来上がっている筈です。

次回は、作成したvlw形式のフォントを実行結果ウィンドウに表示する方法について解説したいと思います。

 

コラム6:フォントデータを入手するには

個人利用に限ったアプリケーションを作るのであれば、Windowsに標準搭載されているフォントから、PROCESSINGで使うvlw形式のフォントを作れば十分かもしれません。

でも作成したアプリケーションを広くネットで公開する場合や、他人に提供する場合はライセンス違反とならないように気をつける必要があります。

商用利用可能なフォントデータは、有償で販売されているものが主流です。

191781(画像URL:illust-AC 様:acworksさん)

「ええー、お金かかるのー」と思った方も見えるかもしれませんね(笑)。

でも、安心して下さい。世の中には親切な人が沢山みえるようで、ネットには無償で利用可能なフォントが沢山公開されています。

例えば以下のサイト様などに、まとめられています。

ただし無償利用可能なものでも、利用用途に制限がある場合があるので、公開元サイト様の注意書きを良く読んでから利用しましょう。

なお入手するフォントは、TTF形式のものにして下さい。

OTF形式のフォントからvlw形式のフォントを作成することも可能ですが、TTF形式の方が相性が良いようです。少なくとも私の環境では、OTF形式から作成したフォントは上手く表示する事ができませんでした(汗)。

TTFやOTFって何さ?と思われた方は、下記「コラム7:フォントデータの種類」を参照してみてください。

私は「IPA 独立行政法人 情報処理推進機構」様が公開しているIPAフォントを利用させて頂きました。

IPAフォントは、以下のサイト様からダウンロード可能です。
IPAフォントダウンロードページ

ipa%e3%82%b5%e3%82%a4%e3%83%88
上記サイトではTTC形式のファイルとTTF形式のファイルが公開されていますが、今回はTTF形式のものをダウンロードして下さい。

 

コラム7:フォントデータの種類

フォントデータにはいろいろな種類があります。あ、種類といっても「MS ゴシック」とか「メイリオ」といった種類ではなくて、文字の規格の事です。

文字の規格には、「ビットマップフォント」と「アウトラインフォント」があります。

大昔のコンピュータは、すべてビットマップフォントでした。オジサマが最初に手にしたパソコンもビットマップフォントを搭載していました。

ビットマップフォントとは、文字データを「絵」として書いたもので、各文字は細かな点々の集まり(画像データ)で出来上がっています。

bitmapfont(画像URL:モリサワ 様)

ビットマップフォントは

  • 扱いやすい
  • デザインされた大きさ通りに表示するなら、処理速度が早い

といった優れた特徴がある一方で

  • データ量が大きくなる(画像・・・ですからね:汗)
  • デザインされた大きさ以外にすると表示が崩れる

といった欠点も抱えていました。

そこで文字の塗りつぶし部分は除外して、文字の輪郭部分を抽出し、数式や座標で表現する方法が考案されました。これをアウトラインフォントと言います。

outlinefont(画像URL:OKIデータ 様)

アウトラインフォントには

  • データサイズが比較的小さくて済む
  • 文字を拡大縮小しても表示が崩れにくい

という特徴があります。

現在のパソコンでは、主にアウトラインフォントが利用されています。アウトラインフォントは、下記3種類に分類できます。

  • TrueType(トゥルータイプ)フォント
  • Postscript(ポストスクリプト)フォント
  • OpenType (オープンタイプ)フォント

3つもあるのでヤヤコシイのですが、下にいくほど新しい企画のフォントになります。いや、ほんと(フォント)に・・・(オヤジギャグですいません:汗)。

PROCESSINGではTrueTypeフォントを元に、PROCESSING独自のvlw形式のフォントファイルを作成して利用します。

●TrueType(TTF:トゥルータイプ)フォント

アウトラインフォントとしては最も古い規格のもので、Apple社とMicrosoft社が協力して開発しました。

二次ベジェ曲線と呼ばれる技術で文字の曲線部分が描かれています。二次ベジェ曲線は2つの制御点とアンカーポイントを持つのが特徴です。

2dbeze
元々はApple社とMicrosoft社が協力して開発したのですが、大人の事情(汗)により両社が独自開発した部分が加わる事で、MacとWindowsのTrueTypeフォントには互換性が無くなってしまいました。

歴史が長いだけあって、今でもWindowsやMACでは広く使われています。

●Postscript(ポストスクリプト)フォント

上記のTrueTyoeフォントに対抗して、PhotoshopやIllustratorなどのデザインツールで有名なAdobiシステムズ社により考案されたフォントです。

なんでも当時は「文字戦争」と呼ばれる争いが繰り広げられていたそうです。

「どの企業が、もっとも美しい文字を考案するか=デザインなどの現場で使いやすいプログラムを提供し、市場を独占できるか」が争われていたのですね。

ポストスクリプトフォントは、PhotoshopやIllustratorがデザイナーのみなさんにウケが良かった事もあり、商業印刷を中心として広く使われているようです。

●OpenType (OTF:オープンタイプ)フォント

TrueType(トゥルータイプ)フォントは優れた文字の規格でしたが、幾つかの欠点を抱えていました。

  • Apple社とMicrosoft社で互換性がない
  • 表現できる文字数が限られている
  • PCでは普及したが、商業印刷では敬遠された

このような中、もっと沢山の字を、もっと綺麗に印刷(表示)する為に、Apple社とMicrosoft社が再びタッグを組んで考案されたのが、OpenType (オープンタイプ)フォントです。

OpenType (オープンタイプ)フォントは、美しい文字を描画するために、三次ベジェ曲線と呼ばれる技術で文字の曲線部分が描かれています。

3dbeze

※上記コラムは右のサイト様を参考とさせて頂きました。(参考URL:DEXfont 様、ABOUT FONT 様)

 

Forest今日の言葉

・フォント

コンピュータで利用する文字データの事。TTF、OTFなどの規格ごとに沢山の種類が出回っています。MSゴシックとかMS明朝、ヒラギノなどが有名ですね。

 

scroll今日の文法

・なし

 

 今日のまとめ

  • PROCESSINGではvlw形式のフォントを使う
  • TTF形式のフォントを元に、vlw形式のフォントを作成する
  • vlw形式への変換はPROCESSINGの標準エディタを利用する

31:文字を表示する(実践編) へ進む
29:キーボードの入力を処理する へ戻る
目次へ戻る


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