beatoraja用FullHDスキン【ModernChic】公開中です!
beatorajaスキンいじり

beatoraja自由研究~画像の配置(特殊)~

beatoraja自由研究~画像の配置(特殊)~ beatorajaスキンいじり
この記事は約7分で読めます。
スポンサーリンク

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

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

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

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

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

完成図

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

部品ごとに分けた結果

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

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

とりあえずパーツを配置
{
     "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で左回りに出来ます。

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

スポンサーリンク
スポンサーリンク
よろしければシェアお願いします
タイトルとURLをコピーしました