【シムズ３】 ゲーム内のフォントを変えてみる ♣ 基礎知識編／実践編／失敗例

設定ファイル編集・基礎知識編

実は私が説明するまでもなくｗ、使用できるスタイルの設定は、設定ファイル上部に説明があります。
英語を翻訳してみたら大体どんな効果になるのか判ると思いますし、ほとんど CSS なので、ネットで検索してみるのもいいです。
が、* の付いたタグは独自設定だそうですので、検索しても出てきませんｗ

とりあえず、CSS 知らない方でも設定できるよう、よく使いそうなものを説明してみたいと思います。
CSS の書き方とは違う場合もあるので、それについても。

基本構造

設定ファイルの上部にある書き方から引用してコメントを日本語に変えてみましたｗ
継承のところがちょっと違いますけど、まんま CSS ですね～。

// スタイルの設定例：
    // 基本フォント設定
    MainFont (0x134ad5f){
        font-family: "Helvetica Neue", arial;
        font-size:   10px;
    }
 
    // 以下のように書くと MainFont の設定が継承されるそうです
    DialogTitle (0xacbf4564) : MainFont{
        font-size:   14px;
        font-style:  italic;
        color:       #ff00ff;
        font-effect: outline 2 2 #0000ff #000000
    }

• こちらで編集するのは { } の間のみです。
  { } の間でフォントはどれを使うか、サイズはどれくらいか、などのスタイルを決めています。
  それぞれの設定の終わりにある ;（セミコロン）は必ず付けると覚えておいてください。最後だけ抜いても大丈夫なんですけど、ややこしいし忘れるとうまく処理されないので、常に付ける癖をつけておいたほうがいいです。

• { } の外の MainFont (0x134ad5f) などは、スタイル設定を識別する名前なので、絶対に編集してはいけません。

• そして継承ですけど、DialogTitle (0xacbf4564) : MainFont は以下に書いた場合と同じ挙動をします。
  MainFont の設定を先に読み込みつつ、DialogTitle 用の設定を行なっているという感じですか。
  重複した設定を何度も何度も書くのは面倒くさいですからね。後で変えたくなった場合なんて特に！

      DialogTitle (0xacbf4564) {
          font-family: "Helvetica Neue", arial;
          font-size:   14px;
          font-style:  italic;
          color:       #ff00ff;
          font-effect: outline 2 2 #0000ff #000000
      }

うーん、これだけ踏まえておけば大丈夫ですかね？

あと、「//」が先頭に書かれた行は、いわゆるコメントです。
同じ行の「//」以降は何が書かれていても無視されます。CSS とは表記が違うのでご注意。

実際に使われているスタイルのブロック

おおまかに分けて、９つあるみたいです。

• DefaultStyle
• 本文： Sims3Regular～
• ボールド： Sims3Bold～
• ボールド斜体： Sims3BoldOblique～
• 極太： Sims3Black～
• 古い設定…でもまだ一部で使ってるらしい？： Sims3BoldCopy～
• 手書き（アドベンチャー・ジャーナル等）： Sims3HandWritten～、Sims3HandFreestyle～
• ConsoleStyle
• シムポートの本： Passport～

そしてそれぞれの下に、フォントサイズで分けた設定が続きます。
ポップアップでの表示はこれ、パイメニューはこれ、みたいに設定されていないので、この設定ファイルを見ただけではどこに対応しているのかさっぱり判りません。

細かく指定したい場合、いじっては確認、を繰り返すほかないかも…。
UI.package にはレイアウト用のファイルもあるようですが、膨大すぎて解析できません！ｗ

日本語設定では、ボールド斜体も極太も、ただのボールドと同じになってますね。
Sims3BoldOblique には一応斜体になるように設定されてましたけど、日本語環境で斜体になってる文って見たことないですよね？ きっと対応フォントがないと表示されないんでしょう。

アドベンチャー・ジャーナルも日本語では通常フォントで表示されますよね。
これ見て初めて、英語環境では手書きフォントが使われてることを知りましたよ…！
シムズ２でもそうでしたけど、シムって実はフォントまでこだわってるのに、それが日本語では反映されてないのがすごく悲しい…。文字って大事よ！（フリゲーでも MS Pゴシックだったら遊ぶ気しない…）

使用頻度が高そうなスタイルの記述方法

ここからはそれぞれのブロック内に書くスタイルの記述方法を簡単に説明していきます。

フォントの大きさを変える

CSS と同じです～。

例

font-size: 8.25pt;
font-size: 18px;
font-size: larger;

設定できる値も CSS と同じみたいです。
が、デフォルト設定で使用されているのは pt と px なので、この２つだけと考えておくといいと思います。
Windows では pt と px 同値の大きさが異なるのでご注意ください（例： 12pt = 16px）。

アンチエイリアス（スムージング）の設定

フォントの輪郭を滑らかにする処理です。

例

font-smooth: always;  // アンチエイリアスをかける
font-smooth: never;   // アンチエイリアスをかけない
font-smooth: auto;    // 通常上に同じ。たぶんフォントサイズで切り替わるのだと思う（いや、分からないけど）

デフォルト設定では常にかかっています。
いっそのことかけないほうが読みやすい場合もあるかもしれません。

例えば、MS Pゴシック。
←うほー、読みやすい～～！！！
ClearType は効かないのでメイリオでオフにするとギザギザになりますし、可読性を優先した場合、これに落ち着くんじゃないかと(笑)。

MS Pゴシックには太字ファイルはないので、ボールド部分には『Ｇ７キュートポップＢ』というフリーフォントを使用してみましたｗ

フォントの太さを変える

例

font-weight: normal;  // 通常の太さ（400 で指定したのと同じ）
font-weight: bold;    // 太くする（700 で指定したのと同じ）
font-weight: 500;     // 100～900 で指定もできます

この設定が実際に反映されるには、対応しているフォントが必要です。
ブラウザ等一般的なソフトのように、シムズ３にはフォントを無理やり太く描写する機能は付いていないようなのです。

つまり太字用（bold）フォントが関連付けられているものでないと、ボールド指定しても表示は元のフォントの太さのままになります。
対応したフォントであってももちろん、レギュラーとボールド両方のフォントを package に登録していないと反映されません。

例えば Migu 1C に変えた場合、

（左）normal では細くて見にくかったので、（右）600 に変えてみたらすごく読みやすくなりました！
600 は、実際には bold と設定した場合と同じでしたけどね
ブラウザの Opera ではレギュラーとボールドの間の太さで表示されてたので勘違いしちゃいました（Firefox でも Google Chrome でも IE でも反映されてなかったので Opera が特殊だったようだ）。

そんなわけで、個人的にはアンチエイリアスかける場合は全部ボールド設定（またはボールド並の太さのフォント）にしておけばいいんじゃないかと思う次第。というか、デフォルトの日本語フォント自身が太字を持ってませんでしたｗ それでもレギュラーウェイトよりもちょっと太めのウェイトを使用しているようです。

文章の行間を調整する

CSS での行間設定は line-height ですが、シムでは line-spacing となっています。

例

line-spacing: normal;  // 初期値
line-spacing: 22;

初期値にしておくとフォントが元々持つ行間になるのだと思われます。
デフォルト設定では、値に単位はついていませんでしたが、おそらく px だと思います。Windows では pt と px 同値の大きさが異なるのでご注意ください（例： 12pt = 16px）。

フォントサイズより大きい値にしておかないと、行間が詰まりすぎてしまいますのでご注意。
CSS だと私は 1.7 とかの相対値に設定するのが好きなのですが、シムでそうすると、文章が重なって何も読めない状態になりましたｗ（画像参照）

字間を調整する

例

letter-spacing: normal;  // 初期値
letter-spacing: 2;
letter-spacing: -1;

-1 で試したら反映されたので、単位なしで大丈夫だと思われます。行間と同じくおそらく px。

縦方向の表示位置を変える

vertical-align または text-valign のどちらかで設定します。後者は CSS にはないよね？ 手持ちの「Web標準の教科書」って本にも載ってなかったし。

例

vertical-align: top;      // 初期値
vertical-align: middle;
vertical-align: bottom;
text-valign:    top;      // 初期値
text-valign:    middle;
text-valign:    bottom;

例えば、シムオロジーの特質にカーソルを載せたときに現れる説明の場合。
特質名の位置がそれぞれ変わってますね。

このように文字を表示する縦の範囲があらかじめ決められている箇所だけに反映されます。
その下の説明みたいに、文字数に応じて縦の範囲が変わる所は反映されないはず（確か）。

Migu 1C は行間が空いているため、位置が少し下がって表示されてしまいますので、vertical-align: middle; を設定してやるといい感じに表示される所も。詳しくは実践編にて後述します。

設定ファイル編集・実践編

ここからは実際に私がやってみたことを紹介します～。

アドベンチャー・ジャーナルのフォントを変えてみる

基礎知識編でも書きましたが、英語環境ではアドベンチャー・ジャーナルで手書き（正確にはカリグラフィー）フォントが使われてることを知りました。
こうなったら私も手書きに変えるしかない！ と思い、いじってみました(笑)。
使用したのはあくあPフォント。

（クリックで大きいサイズ）

編集箇所

Sims3HandWritten_18pt(0x03cc88e0): Sims3Regular12pt{
    font-smooth:always;
    font-size:18px;
}

変更後

Sims3HandWritten_18pt(0x03cc88e0): Sims3Regular12pt{
    font-family:"aqua_pfont";
    font-smooth:always;
    font-size:20px;
}

若干小さく見えたため、文字サイズを Sims3HandWritten すべて 2px 増やしました。

他にも色々試してみたよ！（こっちは文字サイズ変更なし）

この記事ほぼ書き終わりにはなぞめフォントを思い出して、試してみたら上記のように感じたので、最終的にはなぞめフォントにしました！
あくあフォントにしたという前提で書いといてなんですが でも実際にマーカスさんの旅行中で使用したので嘘はついてない…はず！(笑)

スクラップブックの見出し(?)フォントを変えてみる

スクラップブックでもスクリプト系の手書きフォントが使われているそうです。→Sims Wiki による画像
たった数文字のためにファイルサイズの大きな日本語フォントを新しく追加するのもあれなので、ここもあくあフォントに設定しておきました。

編集箇所

Sims3HandFreestyle_18pt(0x0afe2f00) : Sims3Regular12pt{
    font-smooth:always;
    font-size:18pt;
}

変更後

Sims3HandFreestyle_18pt(0x0afe2f00) : Sims3Regular12pt{
    font-family:"aqua_pfont";
    font-smooth:always;
    font-size:18pt;
}

画像のように使われているフォントサイズは、Sims3HandFreestyle_34pt の設定でした。ほかにも使われてる所あるのかな？

シムポートの本のフォントを変えてみる

ここは奇跡的に(?)、英数字は英語フォントが使われ、日本語部分はデフォルトの日本語フォントが使われていますよね！
他の箇所の日本語フォントより字間が何故か狭いけど。

ともかく、編集箇所は下のほうの Passport10(0x0c7c8a80) から始まるブロックです。
ここは継承が使われずひとつずつ設定されているので、全部変える必要があります。通常の太さが４種、ボールドも４種。

編集箇所

Passport10(0x0c7c8a80){
    font-family:"Eurostile LT Std";
    font-size:10pt;
    font-smooth:always;
}
  ・
  ・  レギュラーウェイト設定が続き、ボールド用設定が現れる
  ・
Passport10Bold(0x0c8029ff){
    font-family:"Eurostile LT Std Bold";
    font-size:10pt;
    font-smooth:always;
}
  ・
  ・  ボールド用設定が続く

変更後

Passport12(0x0c80299a){
    font-family:"Migu 1C";
    font-size:12pt;
    font-smooth:always;
    font-weight:bold;  // 太くしないと読みにくかったので
    line-spacing: 22;  // 行間指定なしだと広すぎたので
}
Passport10(0x0c7c8a80) : Passport12{
    font-size:10pt;
    line-spacing: 18;
}
Passport14(0x0c8029a3) : Passport12{
    font-size:14pt;
}
Passport16(0x0c8029ab) : Passport12{
    font-size:16pt;
}

レギュラーウェイトだけ変えました。
ここでそのまま全部載せると縦に伸びすぎるので継承利用してみたけど、↑この書き方でちゃんと狙い通りに表示されてました！
ここで指定されている欧文フォントは、実際にはボールド設定部分のみで現れていて、可愛いしそのままでいいと思ったので変更しませんでした。おかげで日本語に限って太さ逆転しちゃいましたけどｗ

これをヒントに、その後、英数字はそのままで日本語フォントを好きなものに変える方法が判ったので、詳しくは「さらに応用編」で！

文章表示位置の調整

「縦方向の表示位置を変える」の項でも書きましたが、Migu 1C は行間が空いているために若干位置ずれが起きてしまいます。
個人的に気になるところの修正場所をピックアップしてみました。あちら立てればこちらが立たぬ、が起きてしまうので悩ましいですが…。
行間が空いていないフォントではこれを調整する必要は全くありません。
っていうか空いていないもののほうが多いので、M⁺ 派生フォントにご注意、と言うほうが正しいかも。

使用するのは、vertical-align または text-valign です。

セーブやオプションを出すメニュー

編集箇所

Sims3Bold10pt(0x062eae06): Sims3Bold12pt{
    font-size:10pt;
    line-spacing: 18;
}

変更後

Sims3Bold10pt(0x062eae06): Sims3Bold12pt{
    font-size:10pt;
    line-spacing: 18;
    vertical-align: middle;
}

逆に、全体的に middle にしておいて、気になる一部だけ top にするという手もあり。設定するところ増えちゃいますけど。

願望、ムードレット、特質のタイトル(?)

アイコンの右の「心地良い」って所。
画像では middle の設定になってます。

編集箇所

Sims3Bold11pt(0x062eae08): Sims3Bold12pt{
    font-size:11pt;
    line-spacing: 20;
}

これは top がおすすめ。
ほかの場所では、季節&環境オプションの「一年の長さ:28日」でも使われています。
ここを中央にしたい、願望等のタイトル(?)も中央揃えになっても気にならない、という方は middle にしましょう。

気になるけど、この設定ファイルでは調整できない所（私が見つけられなかっただけなのかもしれないけど）

• 専門職や自営業の場合に表示される「仕事の経験」が途中で切れてしまう。
  
  なんとかならないかと 8pt、9pt あたりを変えて試してみたんですけど、一切変化なしでした…orz
  表示範囲（ボックスの大きさ）の指定はされていないのかもしれない。

• 一行入力フォーム内の文字位置がちょっと下にずれている。
  

• オプションの「月相」、「人口調整設定」、「その他の人口設定」が少し下にずれている（画像は「人口調節設定」のみ）。
  
  「一年の長さ:28日」の設定項目とは違って、そこを middle にしても変化しません。
  これも多分表示範囲の指定はされていないんでしょう。なんで設定バラバラにしてるのか謎すぎて気持ち悪いｗ

細かいこと言い出したらキリがないので、この辺で…。
オプションはたまにしか見ないからいいけど、「仕事の経験」が気になる～。直すにはレイアウト用ファイルを編集しないといけないんだろうな。

というわけで、M⁺ 系使うなら、この辺は妥協しないといけないと思います…。
等幅の Migu 1M と Migu 2M は行間狭くされていて問題なく表示されるので、M⁺ 系ならこれがおすすめですかね～。
私はしばらくプレイしたもののやっぱり気になってしまったので、Migu 1C の行間を Migu 1M と同じに変えさせていただきました
FontForge の使い方がちょっと解ったので、好きな欧文フォントと日本語フォントをマージしてみたくなったりｗ フォント作ってみたい～(笑)。

失敗例

文字化け

思ったとおりに変化しない場合、チェックしてみてください。

英数字は表示されるけど、日本語が線になっているよ！

font-effect: outline 2 2 #0000ff #000000;       // 左（サンプルにあった設定そのまま）
font-effect: outline 2 2 transparent #000000;   // 真ん中
font-effect: outline 1 1 transparent #000000;   // 右