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

beatoraja自由研究~画像をゆっくり切り替える~

beatoraja自由研究~画像をゆっくり切り替える~ beatorajaスキンいじり
この記事は約4分で読めます。
スポンサーリンク

どもも。カサコンです。
ModernChicスキンを公開してから燃え尽き症候群なのかブログ更新が滞っているワタシです(いつも)

さて。さっそくですがスキンを作っていて気づいたこととかを書いていこうと思います。まずはこれ。画像をゆっくり切り替える方法についてです。

今まで変な書き方をしていた・・・!?

実は似たような事は上の記事でも書いていたりするのですが例えばModernChicではこのような画像を一定時間ごとに切り替えて表示させています。

対応するキーの説明画像
beatoraja自由研究~画像をゆっくり切り替える~
選曲画面に1つづつ一定時間表示させる

これまで同じ場所に画像を切り替えたいときにはこんな感じに記述していました。

{"id":"info-1", "src":5, "x":900, "y":1470, "w":500, "h":90},
{"id":"info-3", "src":5, "x":900, "y":1516, "w":500, "h":90},
{"id":"info-5", "src":5, "x":900, "y":1562, "w":500, "h":90},
{"id":"info-7", "src":5, "x":900, "y":1608, "w":500, "h":90},

{"id":"info-1", "loop":0, "dst":[
    {"time":0, "x":90, "y":800, "w":500, "h":90},
    {"time":1999, "a":255},
    {"time":2000, "a":0},
    {"time":8000, "a":0},
]},
{"id":"info-3", "loop":0, "dst":[
    {"time":2000, "x":90, "y":800, "w":500, "h":90},
    {"time":3999, "a":255},
    {"time":4000, "a":0},
    {"time":8000, "a":0},
]},
{"id":"info-5", "loop":0, "dst":[
    {"time":4000, "x":90, "y":800, "w":500, "h":90},
    {"time":5999, "a":255},
    {"time":6000, "a":0},
    {"time":8000, "a":0},
]},
{"id":"info-7", "loop":0, "dst":[
    {"time":6000, "x":90, "y":800, "w":500, "h":90},
    {"time":7999, "a":255},
    {"time":8000, "a":0},
]},

表示される時間を決めておいてそれぞれの画像に設定することで切り替えを実現していましたが・・・とても記述がながくなってしまうんですよね。

そこでこうしてみると同じような動きをたったこれだけで実現することが出来ます。

{"id":"info", "src":5, "x":900, "y":1470, "w":500, "h":360, "divy":4, "cycle":8000},

{"id":"info", "dst":[
    {"x":90, "y":777, "w":500, "h":90},
]},

画像の定義部分で予めすべての画像範囲を選択しておいてそれをdivxやdivyで切り分けたい数分指定します。後はcycleで時間(切り分ける画像全てが表示されるのに必要な)を指定すればOKです。上の例では4つの画像を全体で8秒(8000ミリ秒)表示させるため1つあたりに表示される時間は2秒(2000ミリ秒)になるという訳です。

これまでcycleはランプの点滅などに使うイメージが強かったのであまり思いつかなったのですがこんな使い方もありだなぁと思ったTipsでした。

スポンサーリンク
スポンサーリンク
よろしければシェアお願いします
ブログの更新が気になる方はこちらもご利用ください
KasaBlog
タイトルとURLをコピーしました