ティラノスクリプトでフォントを変える方法

結論

以下のステップを踏みます。

1. フォントファイルを用意する

変更したいフォントのフォントファイルを用意します。拡張子は .otf.woff.ttf.svg になるかと思います。

2. フォントファイルを配置する

「1.」で用意したファイルを任意の場所に置きます。デフォルトでは data/others 配下に置くことになっているようです*1

例えば MyFont.otf というファイルならば data/others/MyFont.otf という場所に置きます。

3. CSSファイルを修正する

フォントを定義するためにCSSファイルを修正します。tyrano/css/font.css というファイルがそれになります。

デフォルトでは以下のようにコメントアウトされています。

/*ウェブフォントを使用する場合はここに定義を追加して下さい*/

/*
    
@font-face {
   font-family:"mfrules";
   src:url("../../data/others/Mf_Break_The_Rules.eot?") format("eot"),
   url("../../data/others/Mf_Break_The_Rules.woff") format("woff"),
   url("../../data/others/Mf_Break_The_Rules.ttf") format("truetype"),
   url("../../data/others/Mf_Break_The_Rules.svg#MfBreakTheRules") format("svg");
   font-weight:normal;font-style:normal;
}

*/

これを、コメントアウトを外した上で、次のように編集します。data/others/MyFont.otf を使うという前提です。

@font-face {
  font-family: "MyFont";
  src: url("../../data/others/MyFont.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

デフォルトの記述にあるように、フォントはカンマ区切りで複数個を定義することができます。最後のフォントの末尾にはセミコロン ; を書きます。

4. (補足)CSSファイル中の「format」には何を指定するか

上記のCSSファイルの記述中には format("opentype") という指定がなされています。ここに何を指定するかは、一般的なCSSでの書式と同一です。

詳しくはドキュメントを参照してみて下さい。端的に言うと、以下の指定ができます(ドキュメントから引用)。利用したいフォントに合わせた format を指定します*2

利用可能な形式は、"woff", "woff2", "truetype", "opentype", "embedded-opentype", "svg" です。

5. 設定ファイルを編集する。

フォントを定義したら、それを利用するために設定ファイルを編集します。設定ファイルの場所は data/system/Config.tjs です。ファイルの下の方にある userFace でフォントを指定します。

デフォルトでは以下のようにコメントアウトされています。

// ◆ 文字の書体
// デフォルトのフォント名を指定します。
// この設定はシステム変数に記録されて、次回起動時に引き継がれるので、
// userFace の設定を変更し、適用したい場合はシステム変数ファイル
// カンマで区切って複数のフォントを指定することができます。その場合は、最初
// の方に書いたフォントが存在すれば、優先されます。
;userFace = Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif, Arial; 

これを有効化し、先頭に*3フォント名を追記します。フォント名は、CSSにおいて font-family で定めた名前です。つまり、以下のようになります。

userFace = MyFont, Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif, Arial; 

6. ゲームを起動してフォントの変更を確認する

以上のようにすることで、フォントが変更されているはずです。ゲームを起動して確かめます。

下記の例では、Google Fonts の Note Sans JP を使ってみました。

*1:後述するCSSを修正することで任意の場所に置けます

*2:例えば .otf ならば "opentype"

*3:厳密には、フォントが存在した際に利用したい順番の場所に

Powered by はてなブログ