beatoraja用FullHDスキン【ModernChic】公開中です！
beatorajaスキンいじり
JSONdecide音ゲースキン

beatoraja自由研究～数値関連～

beatoraja自由研究～数値関連～ beatorajaスキンいじり
2019.11.02
この記事は約10分で読めます。

どももカサコンです。

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

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

数値関連の配置

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

  • 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：中央揃え）

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

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
github.com

配置はやっぱり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をコピーしました