どももカサコンです。
前回の記事ではBPMやTOTALなどの数値関連の表示をしてみました。
今回は曲名やジャンル名、アーティスト名といったテキスト関連について書いてみたいと思います。
いつもの流れですが前回の記事はこちらです。
JSON or Luaスキンに使えるビットマップフォント
詳しくは下のリンクを見ていただければ良いのですがJSONまたはLuaスキンではHieroというソフトを使うことでビットマップフォントを扱うことが出来るようです。
ここでは先程のリンクを見て実際にフォントを使ってみた様子を書いてみたいと思います。やってみようかなという方は参考になればと思います。
まずはHieroを使ってフォントを作る
Hieroをダウンロードしてrunnable-hiero.jarを起動してフォントを作成してみます。
Fontにビットマップ化したいフォントを選択してSizeは適宜のものを。
RenderingでJavaを選択するとEffectsの項目が変化します。
Sample textには使用する文字を記述するのですが参考サイトでも書いてあるように相当重くなってしまうので最後に触れたほうが良さそうです。
距離フィールドフォントを作ってみる
距離フィールドフォントを作るには右のEffectsで初期選択されているColorの項目を削除してDistance fieldの項目を追加します。
Distance fieldを追加するとColor,Scale,Spreadの値を変更できるようになります。
Scaleの値を大きくすることで滑らかな画像にすることが出来ますが表示に時間がかかってしまうのでこれも最終段階で変更したほうがよさそうです。
Spreadは使用するフォントの最も太い線の半分にすると良いそうです。
とりあえず4にしてみます。
右下にあるPaddingの項目は先程のSpreadを2倍以上の値を入力すると文字欠けしないで済むようなので2倍の8を入力します。
更にその下のX,Yの値はPaddingの値を-2倍の値を入力するとよいそうです。
SpreadとPadding、X、Yの値を設定した後でScale値とSample Textを記述すると無駄なく作業が行えそうです。
Glyphsの値が変化しなくなったのを確認して左上のFileからSave BMFont Files(text)を選んでfntファイルを保存します。保存するとfntファイルの他に画像ファイルも保存されます。
通常のフォントを作ってみる
通常のフォントであればエフェクトを色々と追加出来るのでお試しで文字にグラデーションと文字の枠線を追加してみることにします。
すでにEffectsにはColorが適用されているのでそれを削除してからGradientとOutlineを追加して設定していきます。
各値は端折りますがOutlineはGradientよりも上に設定するときれいに表示されるようです。下の画像を見てもらえればわかるかと思います。
後は距離フィールドと同じようにしてfntファイルと画像ファイルを保存します。
保存されたファイルは使う予定のスキンフォルダに追加してしまいましょう。
今回はGPaper（今作っているスキン名）フォルダにbasicフォルダ（通常フォント用）とkyoriフォルダ（距離フィールド用）に分けて追加してみました。もちろん分けなくても大丈夫です。
フォントの追加はfontプロパティで
早速JSONファイルにフォントを追加してみたいと思います。
フォントを追加するにはfontプロパティにidとpathを使って紐付けます。
"font": [
{"id":0, "path":"basic/genju.fnt"}
{"id":1, "path":"kyori/yasashisa.fnt", "type":1}
],
- id（textプロパティで指定する際に使われるもの）
- path（フォントファイルの場所。スキンのフォルダからのパス）
- type（フォントの種類 ※距離フィールドは1を指定する必要あり）
使う文字の指定はtextプロパティで
曲名だったりアーティスト名などを設定するにはtextプロパティに記述します。
詳しくは参考サイトもしくは下のリンクから。
"text":[
{"id":"title", "font":1, "size":70, "ref":12, "outlineColor":"000000ff", "outlineWidth":0.5},
{"id":"genre", "font":0, "size":32, "ref":13},
{"id":"artist", "font":0, "size":32, "ref":14},
],
記述例では曲名を1のID・・・つまり距離フィールドで作ったフォントを指定してジャンルとアーティストは0のID、通常フォントで指定しています。
refの値で何のテキストを出力するのかを指定できます。
詳しくは下のStringを参考にしてみてください。
フォントを配置する
textプロパティで指定したテキストは毎度おなじみdestinationプロパティに記述して配置していきます。
"destination":[
{"id":"title", "dst":[
{"x":75, "y":170, "w":1800, "r":242, "g":224, "b":200}
]},
{"id":"genre", "dst":[
{"x":75, "y":250, "w":1700},
]},
{"id":"artist", "dst":[
{"x":75, "y":70, "w":1700}
]},
]
一つ戸惑ったところは文字色の指定はtextプロパティでするのではなくdestinationプロパティに記述することです。
タイトル部分ではrとgとbに値が設定されていますがこれが文字色の指定です。よく見かける赤緑青の数値ですね。
後はスキンを表示してみてうまく動いているかを確認してみます。
どうだろう。
うまく配置出来ました！
文字色についてもテキスト部分の色が肌色っぽい色に変わっていますね。
textプロパティで出来ること
textプロパティでは上で書いたこと以外の他にもいろいろな処理を行うことが出来ます。一通り使ってみたので紹介してみたいと思います。
はみ出した場合の処理を指定できるoverflow値
textプロパティでoverflowの値を指定することで文字がdestinationのw値を超えた場合の処理を指定できます。0がそのまま。1でw値に収まるように縮小。2で切り詰められます。
“overflow”:0でそのまま
"text":[
{"id":"title", "font":1, "size":70, "ref":12, "outlineColor":"000000ff", "outlineWidth":0.5, "overflow":0}
],
“overflow”:1で縮小
"text":[
{"id":"title", "font":1, "size":70, "ref":12, "outlineColor":"000000ff", "outlineWidth":0.5, "overflow":1}
],
文字を回り込ませるwrapping値
wrapping値をtrueとすることでw値を超えた場合に改行して回り込ませることができるようです。falseで無効。
"text":[
{"id":"title", "font":1, "size":70, "ref":12, "outlineColor":"000000ff", "outlineWidth":0.5, "wrapping":"true"},
],
影の距離を指定できるshadowOffsetXとshadowOffsetY
これらの値を設定することでテキストに影をつけることが出来るようになります。
shadowOffsetXは横、shadowOffsetYは縦で値を大きくするほど影が遠くなります。
色の指定はshadowColorで出来るようです。
通常フォントでshadowOffsetを指定した場合はテキストの少し暗くした色のものを配置して擬似的に影を表現することが出来ます。
"text":[
{"id":"genre", "font":0, "size":32, "ref":13, "shadowOffsetX":2, "shadowOffsetY":2}
],
通常形式と距離フィールド形式の違い
距離フィールド形式ではグラデーションなどのエフェクトをかけることが出来ませんが配置した際に文字サイズを大きくしても汚く見えづらいのが特徴ということでこのようなことをしてみました。
"text":[
{"id":"title", "font":1, "size":32, "ref":12},
{"id":"genre", "font":0, "size":32, "ref":13, "shadowOffsetX":2, "shadowOffsetY":2},
{"id":"artist", "font":0, "size":32, "ref":14},
],
"text":[
{"id":"title", "font":1, "size":70, "ref":12},
{"id":"genre", "font":0, "size":70, "ref":13, "shadowOffsetX":2, "shadowOffsetY":2},
{"id":"artist", "font":0, "size":70, "ref":14},
],
どうでしょう？
距離フィールド形式のものは拡大しても違和感を感じづらいですが確かに通常フォントのものは拡大するとなんとなく拡大している感が出ていますね。
とまぁいろいろなテキスト表示について調べてみました。
次はバナー画像とノートグラフを配置してみたいと思います。
そろそろ選曲画面も完成形に近づいてきました。
これまでの
{
"type":6,
"name":"GPaper",
"w":1920,
"h":1080,
"fadeout":500,
"scene":3000,
"input":500,
"source": [
{"id":1, "path":"bg.png"},
{"id":2, "path":"parts01.png"},
{"id":3, "path":"number.png"},
],
"font": [
{"id":0, "path":"basic/genju.fnt"}
{"id":1, "path":"kyori/yasashisa.fnt", "type":1}
],
"image":[
{"id":"bg", "src":1, "x":0, "y":0, "w":1920, "h":1080},
{"id":"banner_spase", "src":2, "x":0, "y":0, "w":600, "h":480},
{"id":"notes-graph_spase", "src":2, "x":0, "y":480, "w":1326, "h":490},
{"id":"music-info-logo", "src":2, "x":600, "y":210, "w":473, "h":85},
{"id":"arrow-base", "src":2, "x":600, "y":0, "w":726, "h":210},
{"id":"arrow-move", "src":2, "x":1350, "y":0, "w":850, "h":210 },
{"id":"gear_s", "src":2, "x":2198, "y":0, "w":190, "h":190},
{"id":"gear_b", "src":2, "x":1350, "y":337, "w":586, "h":586},
{"id":"bpm-logo", "src":2, "x":1350, "y":210, "w":290, "h":55},
{"id":"from", "src":2, "x":600, "y":294, "w":38, "h":43},
{"id":"totalnotes-logo", "src":2, "x":1652, "y":210, "w":379, "h":55},
{"id":"total-logo", "src":2, "x":2056, "y":210, "w":290, "h":55},
{"id":"thumbtack", "src":2, "x":1100, "y":210, "w":75, "h":85},
],
"value":[
{"id":"maxbpm", "src":3, "x":0, "y":0, "w":380, "h":43, "divx":10, "digit":4, "ref":90, "align":2},
{"id":"minbpm", "src":3, "x":0, "y":0, "w":380, "h":43, "divx":10, "digit":4, "ref":91, "align":2},
{"id":"totalnotes", "src":3, "x":0, "y":0, "w":380, "h":43, "divx":10, "digit":4, "ref":74, "align":2},
{"id":"total", "src":3, "x":0, "y":0, "w":380, "h":43, "divx":10, "digit":4, "ref":368, "align":2},
],
"text":[
{"id":"title", "font":1, "size":70, "ref":12, "wrapping":"false", "overflow":1, "outlineColor":"000000ff", "outlineWidth":0.5},
{"id":"genre", "font":0, "size":32, "ref":13, "wrapping":"false", "overflow":0, "shadowOffsetX":2, "shadowOffsetY":2},
{"id":"artist", "font":0, "size":32, "ref":14, "wrapping":"false", "overflow":0},
],
"destination":[
{"id":"bg", "dst":[{"x":0, "y":0, "w":1920, "h":1080}]},
{"id":"arrow-base", "dst":[{"x":366, "y":866, "w":726, "h":210}]},
{"id":"arrow-move", "dst":[
{"time":0, "x":498, "y":866, "w":850, "h":210},
{"time":4000, "x":1090, "acc":2}
]},
{"id":"music-info-logo", "dst":[{"x":1340, "y":933, "w":473, "h":85}]},
{"id":"gear_s", "dst":[
{"time":0, "angle":0, "x":-95, "y":-95, "w":190, "h":190},
{"time":5000, "angle":-360}
]},
{"id":"gear_b", "dst":[
{"time":0, "angle":0, "x":1627, "y":-293, "w":586, "h":586},
{"time":5000, "angle":360}
]},
{"id":"banner_spase", "dst":[{"x":12, "y":421, "w":600, "h":480}]},
{"id":"notes-graph_spase", "dst":[{"x":595, "y":421, "w":1326, "h":485}]},
{"id":"bpm-logo", "dst":[{"x":90, "y":317, "w":290, "h":55}]},
{"id":"maxbpm", "dst":[{"x":600, "y":325, "w":38, "h":43}]},
{"id":"minbpm", "dst":[{"x":395, "y":325, "w":38, "h":43}]},
{"id":"from", "dst":[{"x":550, "y":325, "w":38, "h":43}]},
{"id":"totalnotes-logo", "dst":[{"x":780, "y":317, "w":379, "h":55}]},
{"id":"totalnotes", "dst":[{"x":1180, "y":325, "w":38, "h":43}]},
{"id":"total-logo", "dst":[{"x":1370, "y":317, "w":290, "h":55}]},
{"id":"total", "dst":[{"x":1660, "y":325, "w":38, "h":43}]},
{"id":"thumbtack", "dst":[{"x":280, "y":810, "w":75, "h":85}]},
{"id":"thumbtack", "dst":[{"x":1200, "y":825, "w":75, "h":85}]},
{"id":"title", "dst":[
{"x":75, "y":170, "w":1800, "r":242, "g":224, "b":200}
]},
{"id":"genre", "loop":2000, "dst":[
{"time":0, "x":75, "y":250, "w":1700},
{"time":2000, "x":120, "acc":2}
]},
{"id":"artist", "loop":2000, "dst":[
{"time":0, "x":75, "y":70, "w":1700},
{"time":2000, "x":120, "acc":2}
]},
]
}
