beatoraja自由研究~数値関連~

beatoraja自由研究~数値関連~ beatorajaスキンいじり
この記事は約10分で読めます。
スポンサーリンク

どももカサコンです。

前回の記事ではとりあえず静的な画像を配置してなんとなく形っぽくなりました。
今回は数値や文字といった関係のものを配置していきたいと思います。
毎度ですが前回の記事は下のやつです。

今の状態

数値関連の配置

まずは数値関連の配置をしていくことにします。
とりあえず必要な情報としては以下のものでしょうか。

  • BPM(最低)
  • BPM(最高)
  • トータルノート数
  • トータル数
number.png

数値を扱うには上のような画像を準備します。
これは一文字が横38px、縦43pxで構成されていて全体の横幅は418pxです(38px11個分)

画像の読み込み

"source": [
     {"id":3, "path":"number.png"},
 ],

これまでの記事を見ていただければおなじみですが画像はJSONスキンであればsource定義に記述することで認識します。3というIDで追加してみました。

数値を扱うvalue定義

画像の切り出しにはimage定義を使いますが数値を扱う場合はvalue定義を使います。
こんな感じで使います。

"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},
 ],
iddestination定義で配置する際に指定するIDとなります
src使う画像の指定(source定義のIDを記述)
x開始x座標(左上)
y開始y座標(左上)
w開始x座標からどのくらいの横幅か?(1文字分ではないので注意)
h開始y座標からどのくらいの高さか?
divx数値の扱い方を指定(詳しくはこちら
digit桁数の指定
refどの数値を扱うかの指定(詳しくはこちらのnumber値を参考に)
align文字の揃え方(0:右揃え、1:左揃え、2:中央揃え)

今回使った定義以外のものもあるので詳しくはこちらをどうぞ。

配置はやっぱりdestination定義

数値を定義した後はdestinationに定義して配置をしていきます。
このあたりは画像とほぼ同じ感じですね。

"destination":[
     {"id":"maxbpm", "dst":[{"x":600, "y":325, "w":38, "h":43}]},
     {"id":"minbpm", "dst":[{"x":395, "y":325, "w":38, "h":43}]},
     {"id":"totalnotes", "dst":[{"x":1180, "y":325, "w":38, "h":43}]},
     {"id":"total", "dst":[{"x":1660, "y":325, "w":38, "h":43}]},
 ]

現状

これまで記述したJSONはこんな感じです。

{
     "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"},
     ],
     "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},
     ],
     "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":"genre", "loop":2000, "dst":[
             {"time":0, "x":75, "y":250, "w":1700},
             {"time":2000, "x":120, "acc":2}
         ]},
         {"id":"title", "dst":[
             {"x":75, "y":170, "w":1800, "r":242, "g":224, "b":200}
         ]},
         {"id":"artist", "loop":2000, "dst":[
             {"time":0, "x":75, "y":70, "w":1700},
             {"time":2000, "x":120, "acc":2}
         ]},
         {"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}]},
     ]
 }
BPMなどが表示された!

次回はいよいよ曲名などのテキスト部分を配置してみたいと思います。
それではでは~。

タイトルとURLをコピーしました