memo

ゲーム制作やデザインについての個人的メモ

【お知らせ】

おばけくんをひたすらクリックするだけのゲーム「おばけアタック!」を公開しました。
ティラノゲームフェス2017にも参加しています。1プレイ30秒程度なのでお気軽にプレイしてみてください!
プレイ&ダウンロードページ→http://novelgame.jp/games/show/508?fes=1

【ティラノスクリプト】Webフォントを使おう

個人的にノベルゲームの本文にメイリオを使うのはちょっと見づらいかも……と思っているので(メイリオは大好き)、Webフォントを積極的に活用していきたいです。

Webフォント - Wikipedia

Webフォントなら、プレイ環境によってフォントが違う!ということが防げるので、イメージやデザインの相違が少なくなります。

フォントファイル自体を自分のサーバーにアップロードしたり、ゲームの配布ファイルに同梱したりする方法もありますが、今回は予め用意されたフォントファイルを使って、CSSを書くだけで利用できるようにします。

googlefonts.github.io

Googleが提供しているWebフォントサービスは、GoogleAdobeが共同開発したフォント「Noto Sans Japanese」の他、有名どころのフリーフォントがWebフォントとして提供されています。M+フォントは最近めちゃくちゃお世話になっています。

早期アクセスということでまだまだ試験段階のようですが、個人で使用するには十分すぎる内容だと思います。

f:id:onigirimgmg:20170216105425p:plain

赤枠で囲まれた部分を使います。

それぞれティラノスクリプトのファイルにコピペします。

f:id:onigirimgmg:20170216110316p:plain index.html

f:id:onigirimgmg:20170216110420p:plain tyrano.css

Config.tjsのフォントの項目を書き換えます。

f:id:onigirimgmg:20170216110545p:plain

これで本文のフォントが「Noto Sans Japanese」に変更されました。

f:id:onigirimgmg:20170216110727p:plain メイリオ

f:id:onigirimgmg:20170216110643p:plain Noto Sans Japanese

まだ少し見づらいので、ついでに縁取りも設定しちゃいます。

f:id:onigirimgmg:20170216111756p:plain tyrano.css

.message_inner {
text-shadow: 0 2px 0 #000, 2px 0 0 #000, 0 -2px 0 #000, -2px 0 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}
.chara_name_area {
text-shadow: 0 2px 0 #000, 2px 0 0 #000, 0 -2px 0 #000, -2px 0 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

 text-shadow-CSS3リファレンス

f:id:onigirimgmg:20170216111135p:plain

だいぶ見やすくなりました。

この方法で設定したフォントは(当たり前ですが)インターネットに接続された状態じゃないと適用されないのでご注意ください。