前回の記事では曲名やアーティスト名と言った不特定なテキストの配置について調べてみました。
結構形になってきましたが今回はbeatoraja特有の機能であるノート分布グラフの配置などをしてみたいと思います。
前回の記事はこちらです。
グラフを定義できるjudgegraph
ノート分布を表示できるグラフを定義するにはjudgegraph定義を使用します。
jsonスキンに以下の記述をしてみます。
"judgegraph": [
{"id":"notes-graph", "type" : 0}
]
そしてdestination定義にいつものように配置してみます。
{"id":"notes-graph", "dst":[
{"x":660, "y":460, "w":1200, "h":380}
]}
このように記述することでnotes-graphというID名でグラフを定義することができます。
typeという値がありますがこれはグラフの種類を設定できます。
詳しくは下のリンクを。
ノート分布を表示するtype0
typeに0を指定するとシンプルなノート分布グラフを定義することができます。
通常ノートは白色でLNは青色、皿は赤色でBSSは緑色で表示されグラフの山が高くなっている所ほど密度が高くなっていることを表しています。
判定毎にノート分布を表示するtype1
typeに1を指定すると判定毎に色分けしてノート分布グラフを表示することができます。
上の画像では灰色になっていますがこれはまだ曲をプレイしていない為で判定が何もされていないために起こります。つまりこの定義はリザルト画面で活躍出来ることが考えられますね。
判定タイミング毎にノート分布を表示するtype2
typeに2を指定するとSLOW,FASTといった判定タイミングでノート分布を表示することができます。画像では灰色になってしまってますがこれはｒｙ
BPM変化を視覚化出来るbpmgraph定義
これだけでも決定画面に彩りがついていい感じなのですがbpmgraph定義を使うことでソフラン曲などのBPM変化を視覚化することができます。
使い方は簡単でbpmgraph定義に以下を記述していつものようにdestination定義に置くだけです。
"bpmgraph": [
{"id":"bpmgraph"}
]
{"id":"bpmgraph", "op":[177,-1177], "dst":[
{"x":660, "y":460, "w":1200, "h":380}
]},
{"id":"bpmgraph", "op":[1177], "dst":[
{"x":660, "y":460, "w":1200, "h":380}
]},
judgegraph定義で表示したグラフの上に置くことでBPM変化を視覚化することができます。上の画像では中盤あたりで2回BPMが落ちて終盤にもBPMが落ちていることが分かります。
ちなみにdestination定義にはopの値に177, -1177と1177という2つの値を使っていますがこれはBPM変化をする曲の時のみに表示を行うために設定しています。
177はBPMが変化する曲の時にONになり1177はストップ定義がされている時にONとなります。
バナーを表示するには
BMSに定義されているバナー画像を表示するにはdestinationに以下のように記述するだけで表示をすることができるようです。
{"id":-100, "dst":[
{"x":80, "y":455, "w":510, "h":380}
]},
-100というのは定義された値でありバナー画像を表示したい場合はこのIDを指定します。
一気に見た目が良くなりましたね。
やっぱり画像が持つ力って素晴らしいですね。
これまでの
{
"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},
],
"judgegraph": [
{"id":"notes-graph", "type" : 0}
],
"bpmgraph": [
{"id":"bpmgraph"}
],
"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}
]},
{"id":"notes-graph", "dst":[
{"x":660, "y":460, "w":1200, "h":380}
]},
{"id":"bpmgraph", "op":[177,-1177], "dst":[
{"x":660, "y":460, "w":1200, "h":380}
]},
{"id":"bpmgraph", "op":[1177], "dst":[
{"x":660, "y":460, "w":1200, "h":380}
]},
{"id":-100, "dst":[
{"x":80, "y":455, "w":510, "h":380}
]},
]
}
beatorajaの練習用として決定画面を作ってみましたが個人的には満足出来るものが作れました。この調子で他の画面にも手を出して行きたいと思っています。
とりあえずここまで読んでくださった方ありがとうございます。
もしスキン作成で何かしら参考になってもらえたら嬉しい限りです。
それでは。
