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

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

バージョン内容リリース日4.0個別ページ2023/03/203.01表記の修正『SELECT』『PLAY』『RESULT』『COURSE』『DECIDE』バージョンの統一等2022/03/023詳細は後日beatoraja0.8.4必須2022/01/142.25曲以上のコース表示用インジケータ追加Chinese切り替えオプションの追加（中国語訳をしてくださ...

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

今まで変な書き方をしていた・・・！？

beatoraja自由研究～テキストの交互表示～

beatorajaに限らずLR2でもいけますがスキンでタイトルとアーティスト名が交互に表示されているのを見かけたことってないですか？タイトルとテキストが交互に表示上の画像のようなやつです。これがどのように実装されているのか気になったのでとりあえず小ネタとして残しておきます。なんてことない時間指定てっきり交互に表示する特殊な記述があるのかと思っていたの...

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

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

{"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でした。