読者です 読者をやめる 読者になる 読者になる

BIT/O

ツクールやゲーム・WEB・デザインなど

ツクールMV:フォントを変えたい方へ

ツクールMV的 ちょっと長めのフォントの話

f:id:bitorchard:20161101235224j:plain

もくじ

 

フォントは世界を変える

ツクールMVにはデフォルトで、M+ 1m regularフォント(デザイン 森下浩司氏)が収録されています。このフォントが採用されたのには、ライセンスの自由さ、収録文字の豊かさ、字形の汎用性の高さなどいくつかの理由が含まれているのかと思います。

※ツクール2000時代のMS Gothicから、ツクールVXのUmePlus Gothic(梅フォントとM+の混成)となり、VX AceのVLゴシック(さざなみゴシックとM+の混成)を経て、現在のM+フォント単独での収録となった。*1

ツクールMVでは作成しているゲームの世界観などに基づいてフォントを変更できるよう、スタイルシートCSS)ファイルで比較的簡単に切り替えをすることができます。

特にRPGサウンドノベルでは、[メッセージ]を表示する機会が多く、そのゲームの構成する重要なデザイン要素としてプレイヤーの目に触れるものなので、フォントひとつで、そのゲームの印象・世界観を大きく変えることになります。

 

▼デフォルトフォントから「あくあフォント」に変えた例(カオス&ソード

f:id:bitorchard:20161030224213p:plain

 

フォントにおける書体

フォントにおける書体をざっくり大別すると、「ゴシック体」「明朝体」に分かれるのではないかと思います。

ゴシック体(サンセリフ書体)

f:id:bitorchard:20161029185532p:plainツクールMVにデフォルトで収録されている M+ フォントやメイリオヒラギノ角ゴなどが、ゴシック体にあたります。細部を除けば、文字の線幅が均一に構成されたどっしりとした書体です。公共施設などで多くみられる角が丸いものや、線幅が細くすっきりとした印象のものまで幅広くあります。*2

f:id:bitorchard:20161029185533p:plain明朝体(セリフ書体)

MS Minchoやヒラギノ明朝など、日本らしさも感じられる緩急を持ったしなやかな書体です。楷書の名残りで横方向の線の右端にうろこ(セリフ)という飾りがつけられているのが特徴です。

 

その他の書体

f:id:bitorchard:20161029185534p:plainこの他にも、フリーハンドで書いた風の手書き風文字、楷書体・行書体・教科書体や勘亭流などの毛筆体、ゴシック体に躍動感・やわらかさを込めたポップ体、解像度の制限で生まれたドット風書体、映画の字幕で用いられるシネマ書体など数の多くのフォントが存在しています。

 

フォントを手に入れる

ツクールMVに対応しているフォントの形式は「.ttf」という形式のフォントデータです。

ネットを経由し有料・無料さまざまなフォントを手軽に入手できる時代ですが、まず最初にフォントの権利関係は若干フクザツなので注意が必要ということを覚えておいたほうが良いです。

作ったゲームが利用者自身のパソコン内に留まらない場合は、非商用でも私的利用の範囲を超えることになります。

また、権利関係の都合上のパソコンにデフォルトでインストールされているフォントを安易にツクールMVに用いるのは止めたほうが無難かと思います。

フォントの権利関係で特に注意すべき点

  • ゲームに使ってよいか<再配布の可否>(頒布権・公衆送信権など)
  • 販売するゲームに使ってよいか(商用利用における頒布権・公衆送信権など)
  • 作者名を出さなければならないか(氏名表示権)
  • フォントを改造・合成・圧縮<サブセット化>してもよいか(同一性保持権)

 

また、あらかじめライセンス体系が決まっているものもありますので、フクザツですがそちらも理解しておいたほうが良さげです。

(※これらを権利関係をクリアしているフリーの日本語フォントは少ない)

ライセンス体系の例

詳しくは、各ライセンスの文書をご確認ください。また次のサイトの記事が参考になります。

ちなみに、ツクールMVで使われている M+ フォントは、

これらのフォントはフリー(自由な)ソフトウエアです。
あらゆる改変の有無に関わらず、また商業的な利用であっても、自由にご利用、複製、再配布することができますが、全て無保証とさせていただきます。*3

という大らかなライセンスなので安心して使えます。

ゲームに使えるフォント

あらかじめ、ゲームに使えるフォントについて調べられた記事がいくつかあったので紹介します。ツクールMVをはじめウディタ、Unity、サイトのWebフォントなどにも応用できます。

 

フォントの保存場所・変更方法

前置き(?)が長くなりましたが、ツクールMVにおけるフォントの具体的な変更方法について手順をご紹介します。

1. ゲームのプロジェクトフォルダを開く

ゲームのプロジェクトフォルダを開きます(Windowsでは、おそらく C:\Users\<ユーザ名>\Documents\Games\<プロジェクト名>)。一番カンタンな方法は、ツクールMVのツールバーから、「ゲーム」→「フォルダを開く」で、開くことができます。

f:id:bitorchard:20161029204256j:plain

2. フォントフォルダ(fonts)を探す

プロジェクトフォルダ内で「fonts」フォルダを探し、開きます。

f:id:bitorchard:20161029210542j:plain

中には、フォントとフォントを指定するためのCSSファイルがあるはずです。

f:id:bitorchard:20161029211743j:plain

 

3. フォントフォルダに変更したいフォントデータを入れる。

使いたいフォント(.ttf形式)のファイルをこのフォルダに入れます。

f:id:bitorchard:20161029231404j:plain

 

4. 定義ファイル(CSS)を開いて、フォントのファイル名を指定している箇所を書き換えます。

これを…

▼初期状態

@font-face {
    font-family: GameFont;
    src: url("mplus-1m-regular.ttf");
}

.IIV::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
    width: 5px;
}

こんなカンジに!

▼PixcelMplusを使用した例

@font-face {
    font-family: GameFont;
    src: url("PixelMplus10-Regular.ttf");
}

.IIV::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
    width: 5px;
}

そうすると実際のゲーム画面が…

f:id:bitorchard:20161029232739j:plain

こんなカンジに!!

f:id:bitorchard:20161029232742j:plain

 

ちなみにローカル(ユーザのパソコンに入ってる)フォント
使えることは使えます・・・が

▼ローカルの游ゴシックを使用した例

@font-face {
    font-family: GameFont;
    src: local("Yu Gothic Medium");
}

.IIV::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
    width: 5px;
}

f:id:bitorchard:20161029232741j:plain

指定したフォントが入ってないと
バグるのでコレは使わないほうがいいですね
(;´・ω・)

 

また、外部のサービスを使う方法もありますが・・・

Google Fonts + 日本語 早期アクセスの Rounded M+ 1c を使用した例

@font-face {
    font-family: GameFont;
    src: url("https://fonts.gstatic.com/ea/roundedmplus1c/v1/RoundedMplus1c-ExtraBold.ttf");
}

.IIV::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
    width: 5px;
}

f:id:bitorchard:20161030001542j:plain

オフラインで使用できない、コンテストなどの規定で外部接続ができない制約にひっかかるなどの問題点があり、あまり現実的ではありません。

ただ、試しにフォントを適用するという時は、フォントファイルを用意しなくてよいので、手軽で良いかもしれません。

 

フォントの容量を小さくする<サブセット化>

ツクールMVのデフォルトフォントのファイルサイズは、約1.46MBあります。
モバイル対応などを考えると少しでも容量を圧縮したいところです。

そこでフォントファイルの文字数を削って容量を圧縮する「サブセット化」について説明します。

幸いにもサブセット化するための「サブセットフォントメーカー」というフリーソフトが、Windows/Macともあります。

ソフトをインストールして立ち上げると以下のような画面が出ます。

f:id:bitorchard:20161030232715j:plain

  1. 変換前のファイルを選択します。
  2. 変換後のファイルを命名します(変換前と違うファイル名が望ましい)
  3. フォントに格納する文字を入れます。
  4. 文字組方向を決めます。
    ツクールMVは基本横方向しかないので「横書き」を選択します。

ちなみに試しに、格納文字列を「世」「界」「観」のみでサブセット化した結果、フォントファイルはわずか 2KB になりましたw

 

なお

f:id:bitorchard:20161030235133j:plain

ぁゎゎ・゚・(;´゚д゚)ゞ・゚・ぁゎゎ・・

 

こうなってしまうので、英数字、ひらがな、カタカナ、基本記号程度は最初から入れておいたほうが賢明です。ちなみ基本文字のコピペは下記のサイトが便利です。

ちなみに、英数字、ひらがな、カタカナ、基本記号だけでサブセット化するとこうなります。

f:id:bitorchard:20161030234533p:plain

漢字が入っていないので、その部分だけ謎の明朝体になってしまいますので、サブセット化する際は使った漢字も格納するようにしてください。

最終的に公開する際、フォントに格納する文字は、あらかじめExcelなどのスプレッドシートで管理するか、プロジェクトデータのJSONファイルから抜き出す方法などが考えられます。

(追記)最近では「文章データをすべて取得して書き出すプラグイン」もあるようです。便利な世の中になりました・・・(´ω`)

shirakamisauto.hatenablog.com

※注意:フォントによってはサブセット化を許可していない場合があるのでご注意ください。

 

文章を装飾する(制御文字・プラグイン

1. ツクールMVデフォルト(制御文字)でできること

文字の色を変える

制御文字 \C[0] ~ \C[31] で、文章の途中で色を変えることができます。
デフォルトの設定では、カラーリングは

  • [0]
  • [1]薄い青色
  • [2]薄い紅色
  • [3]薄い緑色
  • [4]薄い水色
  • [5]薄い藤紫色
  • [6]薄い山吹色
  • [7]灰色
  • [8]薄灰色
  • [9]青色
  • [10]紅色
  • [11]緑色
  • [12]水色
  • [13]藤紫色
  • [14]山吹色
  • [15]黒色
  • [16]青藤色
  • [17]黄色
  • [18]赤色
  • [19]濃灰色
  • [20]土色
  • [21]黄土色
  • [22]群青色
  • [23]天色
  • [24]派手な緑色
  • [25]長春
  • [26]派手な青色
  • [27]派手な桃色
  • [28]青緑
  • [29]派手な青緑
  • [30]紫色
  • [31]薄い紫色

となっています。

f:id:bitorchard:20161030004459j:plain

文字の大きさを変える

制御文字 \{ で文字を大きくすることができ、
制御文字 \} で小さくすることができます。

f:id:bitorchard:20161030130653j:plain

アイコンを表示させる

制御文字 \I[0] ~ \I[319] で文章中にアイコンを表示することができます。
文章の中でまず \i[] と書き、カッコ内で「右クリック」→「アイコンセットビューア」を押すとアイコンの[画像の選択]ウィンドウが開くのでそこから表示したいアイコンを選びます。

f:id:bitorchard:20161030131443j:plain

選択するとカッコ内に数字が入ります。

f:id:bitorchard:20161030131454j:plain

その他の制御文字

この他にも、変数アクター名を表示させたり、文字の表示速度を制御したりなどいくつかの制御文字があります。詳細は、[文章の表示] でマウスを放置するとヘルプが出るので、こちらをご参照ください。

f:id:bitorchard:20161030133508j:plain

2. プラグインを使う

プラグインを使うことでより幅広い表現が可能となります。

YEP_MessageCore.js(MV準公式プラグイン

テキストコードの拡張や名前表示のウィンドウ、メッセージウィンドウサイズの最適化など、RPGツクールMVのデフォルトメッセージ機能に様々な追加機能を提供します。(ツクールMV公式サイトより)

このプラグインでできることは・・・

f:id:bitorchard:20161030174318j:plain

  • 名前欄の別窓表示(制御文字 \n<●●●> で別窓。●●●には名前を入れます)
  • メッセージウィンドウ幅の変更
  • メッセージウィンドウの行数変更
  • 文字サイズの変更
  • フォントの変更
  • 文字のふち線の変更

などなど・・・たくさんあります( ゚Д゚)ビックリ

フォントの変更については、先述の定義ファイル(CSS)で、

@font-face {
font-family: GameFont;
src: url("mplus-1m-regular.ttf");
} @font-face {
font-family: DotFont;
src: url("PixelMplus12-Regular.ttf");
} .IIV::-webkit-media-controls-play-button, video::-webkit-media-controls-start-playback-button { opacity: 0; pointer-events: none; width: 5px; }

このようなカンジで定義を追加すると複数使えます。

YED - Word Wrapping(MV準公式プラグイン

f:id:bitorchard:20161030191059p:plain

このプラグインを導入すると、メッセージウィンドウの幅に合わせて自動的に文章を改行してくれます。

<wrap>で単語間で自動改行、<breakword>で単語を無視して文字間で自動改行。日本語は単語間にスペースが無く単語と認識されないので、<wrap><breakword>とする必要があります。

TextDecoration.js(サンプルゲーム nina に収録)

このプラグインを使うとテキストの装飾(ふち線)を変更することができます
適用範囲はメッセージだけではなく、タイトルやメニューの文字にも及びます。
色、透明度、表示モードプラグインのパラメータが変えられます。

▼ふち線を緑色にした例

f:id:bitorchard:20161030203859p:plain

▼表示モードをふち線から影に変更した例

f:id:bitorchard:20161030204245p:plain

▼透明度(Alpha)を0にした例

f:id:bitorchard:20161030204416p:plain

Rubi_riru.js(ルビ振り)- ガラス細工の夢幻 プラグイン

文中の漢字などにルビ(よみがな)を設定することができます。

f:id:bitorchard:20161030210746p:plain

プラグインを有効にして、制御文字 \r[漢字等,よみがな]  と入力するか、プラグインファイルに直接リストを作成して自動処理させる方法があります。

ウィンドウ毎(タイトル、メニュー、メッセージ別で)フォントは変えられない?

( ゚Д゚)

 

数日後

 

※フォントをロードするプラグインは別に必要です。
※ここまで読んでいただいた方ならお分かりとは思いますが、フォントファイルは重いので取り扱いには十分にご注意ください。

3. メッセージウィンドウのデザイン

メッセージウィンドウのデザインについては、過去記事に書いていますのでそちらをご参照ください。

 

少し長くなりましたが、これで終わりです。
プラグインなどについて便利なものがあればまた追記するかもしれません。

 

この記事は一部、筒井美希著「なるほどデザイン」(MdN)を参考にしております。

 

*1:https://ja.wikipedia.org/wiki/RPG%E3%83%84%E3%82%AF%E3%83%BC%E3%83%ABVX

*2:和文におけるゴシック体と欧文におけるゴシック体は雰囲気が異なる。いわゆる「ブラックレター」と呼ばれるもの

*3:http://mplus-fonts.osdn.jp/about.html#license