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

beatoraja自由研究～画像の配置～

beatoraja自由研究～画像の配置～ beatorajaスキンいじり
2019.10.03
この記事は約10分で読めます。

前回はスキン一覧に選択肢が出せたところまでやりましたが今回はどのスキンでも必ず使うことになる画像の配置をやってみたいと思います。

あ。前回の記事はコチラです。

beatoraja自由研究～スキンの読み方書き方～
beatoraja自由研究～スキンの読み方書き方～
どもも。カサコンです。 ここ最近（でもないけど）BMSはLR2からbeatorajaでプレイすることが多くなってきた私ですが自分のいつもの悪い癖が出てきてしまったようで。。。 beatorajaのスキンってどうやって動いているんだろう？ と気になってしまったので自由研究にしてはちょいと遅いですが調べてみたことを色々と書いてみたいと思います。備忘録にもなるし ...
www.kasacontent.com
2019.09.28

完成図を作ってみる

画像を配置するには当然ですが画像が必要なのでまずは簡単に完成図を作ってみました。
デザインセンスがない僕ですが包み隠さずさらけ出しますよ！

曲選択画面（完成図）

いかがでしょうか？
素材サイトから素晴らしい画像を使わせていただきましたがこの活かしきれてなささｗ

予定では上の矢印的なやつを右側にスライドさせ、両端下の歯車的なものを回転させる感じで考えています。一応練習の体でやっているのでいろいろな動きを要求するように考えてみました。
中央部の白いところは選択曲のバナーとノート密度がおければいいかなーと。

まずは背景から

完成図が出来たところでまずは背景画像をおいてみることにします。

背景画像

CSVで書く場合

上のサイトですべて確認が出来ますがざっくりといいます。

LR2SkinHELP 第九版
right-stick.sub.jp

LR2でも使われている画像配置のやり方は#SRC_IMAGE定義（画像の切り出し）と#DST_IMAGE定義（画像の配置）で行います。
流れとしてはこんな感じです。

  1. #IMAGE定義で画像ファイルを登録する。
  2. #SRC_IMAGE定義で画像ファイルの切り出しをする。
  3. #DST_IMAGE定義で切り出した画像を配置する。

IMAGE定義で画像ファイルを登録する

登録した画像は上から順番に0,1,2,3とIDが振られます。

#IMAGEbg.png//gr0

SRC定義は登録した画像のどこの範囲を使うのかを指定する

細かいところは省きますがgrの数値はIMAGE定義で振られたIDを指定します。

//SRC定義(NULL)grxywhdiv_xdiv_ycycletimerop1op2op3
#SRC_IMAGE00006404801100000

DST定義はSRC定義で指定した範囲をどこに置くのかを指定する

SRC定義の後にDST定義をすることで画像を配置することが出来ます。

//DST定義(NULL)timexywhaccargbblendfilteranglecenterlooptimerop1op2op3
#DST_IMAGE00006404800255255255255100000000

JSONで書く場合

JSON形式で画像を配置する方法も流れはCSVでのやり方と非常に似ています。

  1. source定義でID名と画像パスを指定する
  2. image定義で画像の切り出しをする
  3. destination定義で切り出した画像を配置する

前回記述した部分は省いています。 

{
    "source": [
        {"id":1, "path":"bg.png"},
    ],
    "image": [
        {"id":"bg", "src":1, "x":0, "y":0, "w":1920, "h":1080},
    ],
    "destination": [
        {"id":"bg", "dst":[
            {"x":0, "y":0, "w":1920, "h":1080}
        ]},
    ]
}

source定義

source定義はCSV形式で言うところの#IMAGE定義のようなものです。
source定義でbg.pngという画像ファイルを1というIDで登録しています。

image定義

image定義はCSV形式で言うところの#SRC_IMAGE定義のようなものです。
image定義のsrcという部分にsource定義で指定したIDを入れることで一つのパーツとして使うことが出来るようになります。上の例で使っている定義はこんな感じです。

id登録するパーツ名
src切り出す画像ファイルID（source定義で指定する）
x切り出し開始点のx座標（左端を0として）
y切り出し開始点のy座標（上端を0として）
w切り出す画像の横幅
h切り出す画像の高さ

destination定義

ここまで書けばなんとなく察しがつきますがdestination定義はCSV形式で言うところの#DST_IMAGE定義のようなものです。

image定義で指定したIDをdestinationのIDに入れることでパーツをどこに配置するかを指定することが出来ます。上の例で使っている定義はこんな感じです。

id配置するパーツID（image定義で指定）
dstアニメーションに関する定義はdstの中に定義します
xパーツをどこに配置するかのx座標（左を0として）
yパーツをどこに配置するかのy座標（下を0として）詳しくはもう少し下で。
w配置するパーツの横幅
h配置するパーツの高さ
画像を貼り付けることが出来ました。

destination定義の注意点

destination定義に触っていて気になったことがあったのでここに書いておこうと思います。

具体的な例として下の画像の赤い部分をimage定義で切り取り左上の端に貼り付けるということをやってみたいと思います。

sample.png

以下の定義がヘッダ情報に記述されていると仮定します。 

{
     "type":6,
     "name":"GPaper",
     "w":1920,
     "h":1080,
     "fadeout":500,
     "scene":3000,
     "input":500,
 }

想像より左下

{
     "source": [
         {"id":1, "path":"sample.png"},
     ],
     "image":[
         {"id":"red", "src":1, "x":100, "y":100, "w":200, "h":200},
     ],
     "destination":[
         {"id":"red", "dst":[{"x":0, "y":0, "w":200, "h":200}]},
     ]
 }

さっきと同じようにsource定義で画像ファイルを登録してimage定義で画像を切り出します。赤い部分を切り取るため開始x軸とy軸を100、w（幅）とh（高さ）を200にしています。

そしてdestination定義で切り出した画像を貼り付けます。
左上の端に配置したいのでxとyを0に指定しました。
すると。

あれ。左下の端に貼り付けられてます。

そうなのです。destination定義ではyの値は下端が0となっており切り出した画像は左下を基準点として処理されるようです。

左上端に貼り付けるなら

つまり左上端に貼り付けようとするとこんな感じになります。

 {
     "source": [
         {"id":1, "path":"sample.png"},
     ],
     "image":[
         {"id":"red", "src":1, "x":100, "y":100, "w":200, "h":200},
     ],
     "destination":[
         {"id":"red", "dst":[{"x":0, "y":880, "w":200, "h":200}]},
     ]
 }

左下が基準点になるので全体の高さ（1080）から貼り付ける画像の高さ（200）を引いた値を指定することで実現が出来ます。
言葉で書くとめちゃくちゃ分かりづらいですが慣れるとなんてことないです。

右下端に配置

 {
     "source": [
         {"id":1, "path":"sample.png"},
     ],
     "image":[
         {"id":"red", "src":1, "x":100, "y":100, "w":200, "h":200},
     ],
     "destination":[
         {"id":"red", "dst":[{"x":1720, "y":0, "w":200, "h":200}]},
     ]
 }

同じく右下端に配置するなら全体の幅（1920）から貼り付ける画像の幅（200）を引いた値を指定すればOKです。

右上端なら

  {
     "source": [
         {"id":1, "path":"sample.png"},
     ],
     "image":[
         {"id":"red", "src":1, "x":100, "y":100, "w":200, "h":200},
     ],
     "destination":[
         {"id":"red", "dst":[{"x":1720, "y":880, "w":200, "h":200}]},
     ]
 }

最初はなかなか思った場所に画像が貼り付けられなかったので四苦八苦してしまいましたが原理がわかるとどうってことないですね。

どんな定義が使えるのか

今回指定した定義の他にも様々な定義を使うことが出来ます。
詳しくは下のサイトから確認できますがざっと抜き出すとこのくらいの定義が使えるようです。2019年10月時点なので仕様は変わると思いますが。

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
 
public static class Source {
     public String id;
     public String path;
 }
public static class Image {
     public String id;
     public String src;
     public int x;
     public int y;
     public int w;
     public int h;
     public int divx = 1;
     public int divy = 1;
     public int timer;
     public int cycle;
     public int len;
     public int ref;
     public int act;
     public int click = 0;
 }
public static class Destination {
     public String id;
     public int blend;
     public int filter;
     public int timer;
     public int loop;
     public int center;
     public int offset;
     public int[] offsets = new int[0];
     public int stretch = -1;
     public int[] op = new int[0];
     public String draw;
     public Animation[] dst = new Animation[0];
     public Rect mouseRect;
 }
public static class Animation {
     public int time = Integer.MIN_VALUE;
     public int x = Integer.MIN_VALUE;
     public int y = Integer.MIN_VALUE;
     public int w = Integer.MIN_VALUE;
     public int h = Integer.MIN_VALUE;
     public int acc = Integer.MIN_VALUE;
     public int a = Integer.MIN_VALUE;
     public int r = Integer.MIN_VALUE;
     public int g = Integer.MIN_VALUE;
     public int b = Integer.MIN_VALUE;
     public int angle = Integer.MIN_VALUE;
 }

CSVで使われていた定義も多いので想像はしやすそうですね。

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