前回はスキン一覧に選択肢が出せたところまでやりましたが今回はどのスキンでも必ず使うことになる画像の配置をやってみたいと思います。
あ。前回の記事はコチラです。
完成図を作ってみる
画像を配置するには当然ですが画像が必要なのでまずは簡単に完成図を作ってみました。
デザインセンスがない僕ですが包み隠さずさらけ出しますよ！
いかがでしょうか？
素材サイトから素晴らしい画像を使わせていただきましたがこの活かしきれてなささｗ
予定では上の矢印的なやつを右側にスライドさせ、両端下の歯車的なものを回転させる感じで考えています。一応練習の体でやっているのでいろいろな動きを要求するように考えてみました。
中央部の白いところは選択曲のバナーとノート密度がおければいいかなーと。
まずは背景から
完成図が出来たところでまずは背景画像をおいてみることにします。
CSVで書く場合
上のサイトですべて確認が出来ますがざっくりといいます。
LR2でも使われている画像配置のやり方は#SRC_IMAGE定義（画像の切り出し）と#DST_IMAGE定義（画像の配置）で行います。
流れとしてはこんな感じです。
- #IMAGE定義で画像ファイルを登録する。
- #SRC_IMAGE定義で画像ファイルの切り出しをする。
- #DST_IMAGE定義で切り出した画像を配置する。
IMAGE定義で画像ファイルを登録する
登録した画像は上から順番に0,1,2,3とIDが振られます。
| #IMAGE | bg.png | //gr0 |
SRC定義は登録した画像のどこの範囲を使うのかを指定する
細かいところは省きますがgrの数値はIMAGE定義で振られたIDを指定します。
| //SRC定義 | (NULL) | gr | x | y | w | h | div_x | div_y | cycle | timer | op1 | op2 | op3 |
| #SRC_IMAGE | 0 | 0 | 0 | 0 | 640 | 480 | 1 | 1 | 0 | 0 | 0 | 0 | 0 |
DST定義はSRC定義で指定した範囲をどこに置くのかを指定する
SRC定義の後にDST定義をすることで画像を配置することが出来ます。
| //DST定義 | (NULL) | time | x | y | w | h | acc | a | r | g | b | blend | filter | angle | center | loop | timer | op1 | op2 | op3 |
| #DST_IMAGE | 0 | 0 | 0 | 0 | 640 | 480 | 0 | 255 | 255 | 255 | 255 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
JSONで書く場合
JSON形式で画像を配置する方法も流れはCSVでのやり方と非常に似ています。
- source定義でID名と画像パスを指定する
- image定義で画像の切り出しをする
- 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定義で切り取り左上の端に貼り付けるということをやってみたいと思います。
以下の定義がヘッダ情報に記述されていると仮定します。
{
"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月時点なので仕様は変わると思いますが。
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で使われていた定義も多いので想像はしやすそうですね。
