beatoraja自由研究～数値関連～

どももカサコンです。

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

前回は背景画像をとりあえず置くことまで出来ましたがいよいよ細かいパーツを置いていくことにします。特に今回は動きがあるものについて中心に書いてみたいと思います。あ。前回の記事は下のやつですよ～パーツファイルを作ってみるまずは前回作った完成図から部品毎に分けていくことからやっていきます。完成図これを部品毎に分けていきます。これくらいの量だったら一つの...

数値関連の配置
現状

数値関連の配置

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

BPM（最低）
BPM（最高）
トータルノート数
トータル数

数値を扱うには上のような画像を準備します。
これは一文字が横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},
 ],

id	destination定義で配置する際に指定するIDとなります
src	使う画像の指定(source定義のIDを記述)
x	開始x座標（左上）
y	開始y座標（左上）
w	開始x座標からどのくらいの横幅か？（1文字分ではないので注意）
h	開始y座標からどのくらいの高さか？
divx	数値の扱い方を指定（詳しくはこちら）
digit	桁数の指定
ref	どの数値を扱うかの指定（詳しくはこちらのnumber値を参考に）
align	文字の揃え方（0：右揃え、1：左揃え、2：中央揃え）

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

beatoraja/src/bms/player/beatoraja/skin/JSONSkinLoader.java at 14988abccf7d4639ae2fefc2f519e8b98ae0666b · exch-bms2/beatoraja

Cross-platform rhythm game based on Java and libGDX. - exch-bms2/beatoraja

配置はやっぱり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}]},
     ]
 }