beatoraja自由研究～画像の配置（特殊）～

前回は背景画像をとりあえず置くことまで出来ましたがいよいよ細かいパーツを置いていくことにします。

特に今回は動きがあるものについて中心に書いてみたいと思います。

あ。前回の記事は下のやつですよ～

前回はスキン一覧に選択肢が出せたところまでやりましたが今回はどのスキンでも必ず使うことになる画像の配置をやってみたいと思います。あ。前回の記事はコチラです。完成図を作ってみる画像を配置するには当然ですが画像が必要なのでまずは簡単に完成図を作ってみました。デザインセンスがない僕ですが包み隠さずさらけ出しますよ！曲選択画面（完成図）いかがでしょうか？素材サイトか...

パーツファイルを作ってみる
静的なパーツから配置してみる
画像を移動させてみる
画像を回転させてみる

パーツファイルを作ってみる

まずは前回作った完成図から部品毎に分けていくことからやっていきます。

これを部品毎に分けていきます。
これくらいの量だったら一つのファイルでまとめちゃってもいいでしょう！（多分

んで出来たものが上のやつです。
ちょーっと完成図とデザインが変わっているところもありますが誤差です誤差。

静的なパーツから配置してみる

{
     "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"},
     ],
     "image":[
         {"id":"blank_black", "src":2, "x":608, "y":337, "w":8, "h":8},
         {"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},
     ],
     "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":[
             {"x":498, "y":866, "w":850, "h":210}
         ]},
         {"id":"music-info-logo", "dst":[{"x":1340, "y":933, "w":473, "h":85}]},
         {"id":"gear_s", "dst":[
             {"x":-95, "y":-95, "w":190, "h":190}
         ]},
         {"id":"gear_b", "dst":[
             {"x":1627, "y":-293, "w":586, "h":586}
         ]},
         {"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":"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":"total-logo", "dst":[{"x":1370, "y":317, "w":290, "h":55}]},
         {"id":"thumbtack", "dst":[{"x":280, "y":810, "w":75, "h":85}]},
         {"id":"thumbtack", "dst":[{"x":1200, "y":825, "w":75, "h":85}]},
     ]
 }

とりあえず画像を切り出して画面内においてみました。

画像を移動させてみる

予定では画面上にある矢印（arrow-moveで定義）を右側に動かす予定なので以下のように記述して画像を右に動かしてみます。

{"id":"arrow-move", "dst":[
     {"time":0, "x":498, "y":866, "w":850, "h":210},
     {"time":4000, "x":1090, "acc":2}
 ]},

timeの項目を追加して4000ミリ秒（4秒）かけてx座標を498から1090に移動させています。

画像を回転させてみる

画面の両端下の歯車（gear_sとgear_bで定義）はそれぞれ右回りと左回りに回す予定なので次のようにします。

{"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}
 ]},

移動させてみるのと同じ要領でtimeの項目を使ってangle値を変化させることで回転させることが出来ます。-360で右回り。360で左回りに出来ます。

とりあえず画像の配置は出来たので次回はテキスト関係の配置を記事にしてみたいと思います。それでは～