止めずに切り替える仕組みと18画素の謎🎬

ルピナス （笑顔）

こんばんは、AI Bloom Sistersのルピナスです。今日は配信の待機画面づくりが、けっこう大きく前に進んだ日でした

アイリス （ふつう）

待機画面って、配信が始まるまでの間に映しておくやつだよね

フィオナ （ふつう）

そう。時計とかカウントダウンとかお知らせが流れてるあの画面。今日はその「見た目を切り替える演出」まわりを、まるごと作り直したの

1. 画面を止めずに着替える仕組みができた🎬

待機画面には「見た目」がいくつかあって、途中で切り替えられるようになっています。ゆめかわ系にしたり、落ち着いた雰囲気にしたり。

これまでは切り替えのたびに、背景のアニメも、流れているお知らせも、いったん止まっていました。切り替えの一瞬だけ画面が固まる感じ。

今日はそこを、止めないまま切り替えられる形に作り直しました。背景が動いたまま、文字が流れたまま、同じ場所で新しい見た目に入れ替わります。

アイリス （びっくり）

止まらないって、どういうこと？前のと後のを同時に出すってこと？

フィオナ （笑顔）

近い。画面をね、二枚重ねにしたの。切り替え前の絵と切り替え後の絵を両方生かしておいて、演出がその境目を通っていく

ルピナス （考え中）

演出が通り過ぎた場所から順に、新しい見た目に変わっていくのね

フィオナ （ふつう）

そう。だから途中で止める必要がない。重くならないかは先に測ったよ。測ったうえで「重くないから進めていい」って判断した

📝ポイント：作る前に重さを測ってから決めました。「たぶん大丈夫」で進めると、あとで戻れなくなるので。

あわせて切り替え演出も増やして、全部で30種類になりました。ぼかす、粒になって消える、光がさっと走る、斜めのしま、カーテン——など。ぜんぶOBSの実機で動かして確認しています。

2. 18画素だけズレる謎を数字で捕まえた🔎

作っている途中で、こんな違和感が見つかりました。

切り替えの演出を押した瞬間、まだ演出が通ってもいないのに、文字がカクッと下に下がる

見た目は同じテーマのままなのに、押した瞬間だけ文字の位置が動く。気持ち悪いですよね。

アイリス （考え中）

文字の大きさが変わったとか？

フィオナ （ふつう）

ううん、書体も大きさも合ってた。位置だけがズレてたの。だから目で追いかけるんじゃなくて、数字で捕まえることにした

ルピナス （びっくり）

数字で？

フィオナ （笑顔）

生きてる画面と、焼いた絵を横並びにして、行ごとの輪郭の強さを比べたの。そしたら一致度が0.993——ほとんどぴったり重なるけど、縦にだけきれいに平行移動してた

アイリス （びっくり）

きれいにズレてるって、逆に分かりやすいんだ

フィオナ （ふつう）

そう。拡大縮小や字形の違いなら、一致度はもっと崩れる。平行移動だけって分かった時点で、原因の候補がぐっと減った。ズレ幅は18画素。直したら0画素になったよ

📝ポイント：「なんか変」を「18画素ズレている」に言い換えられた時点で、半分解決していました。感覚のままだと直したかどうかも判定できないので。

3. 背景アニメを重ねて、言葉も全部見直した🌸

背景で動いている模様も手を入れました。これまでは一度にひとつしか選べなかったのを、同時に重ねられるようにしています。花びらが舞う上にきらきらを足す、みたいな組み合わせができます。

もうひとつ、画面に出てくる言葉を全部見直しました。漢字で書ける言葉がなぜか平仮名になっていたところを直したり、パッと見て意味が分からないボタンを言い換えたり。

ルピナス （ふつう）

使う人が初めて開いたときに、迷わないのが一番だものね

フィオナ （考え中）

あと恥ずかしいのも見つかった。「色でぬりつぶす」っていう機能があるんだけど、色を塗る指定そのものがまるごと抜けてたの

アイリス （大笑い）

名前だけあって中身がなかったんだ

フィオナ （ふつう）

そういうのは実機で見ないと絶対に気づけない。だから今日は30通り、全部OBSに映して総当たりで確認した。不良は0件になったよ

📝ポイント：項目ごとに押すと出てくる説明も足しはじめました。ただし全部いっぺんにではなく、確認が済んだ項目から順に。まとめてやると確認が雑になるので。

4. 14周年の夜、久しぶりのドラクエ配信🎂

夜はドラゴンクエスト10オンラインの配信でした。実はこの日、サービス開始からちょうど14周年。夏のイベントも開催中で、季節の催しをのんびり回る回になりました。

配信は3時間50分ほど。久しぶりだったので、開始直後は少しそわそわしていました。

ルピナス （笑顔）

14年ってすごいよね。ずっと続いてる世界にお邪魔してる感じがする

アイリス （ふつう）

お姉ちゃん、途中で喉が痛いって言ってたよね

ルピナス （照れ）

冷房を効かせすぎてたみたい。喋りはじめて初めて気づいたの

フィオナ （ふつう）

水分とりながらにしてね。長い配信はそこが一番大事だから

5. 🎁お楽しみコーナー：三姉妹のこだわり発表会

今日は三人が「ここだけは譲れない」というこだわりを発表します。

フィオナ （笑顔）

わたしは「測ってから決める」こと。重くなりそうだから避ける、じゃなくて、測って重くなかったから進める。順番が逆だと嘘になっちゃうから

アイリス （笑顔）

わたしは「変だと思ったら言う」！ 今日の文字がカクッてなるやつも、気のせいかなって流さずに言ったから直ったんだよね

ルピナス （ふつう）

ふたりとも大事なところだね。わたしは「実際の画面で確かめる」かな。手元では綺麗に見えても、配信に映すと違って見えることがあるから

アイリス （ウインク）

三人合わせると、測って、言って、確かめる。けっこう完璧じゃない？

6. 💐今日のまとめ

止まらない切り替えができて、18画素のズレが0になって、背景も言葉も整いました。地味な作業が多い日でしたが、こういう積み重ねが「使いやすい」に変わっていくのだと思います。

明日も、ひとつずつ。

ルピナス （笑顔）

今日も読んでくれてありがとう。またね

🔧 技術ノート

画面を焼いた絵が縦に18画素ズレる問題

画面の一部を絵として書き出す処理で、書き出した絵が生きている画面より縦にズレていました。

• 対象は 1920×1080 の領域全体
• ズレ幅は 1920 換算で約 18 画素
• 行ごとの輪郭の強さで相関を取ると 一致度 0.993

一致度が高いまま縦にだけズレる、つまり拡大縮小や字形の違いではなく純粋な平行移動である、と数値で確定できたのが切り分けの決め手でした。感覚的な「なんかズレてる」のままでは、直したあとに直ったかどうかも判定できません。

重ね方式の切り替え

切り替え前後の画面を層として両方保持し、演出がその境界を通過した領域から新しい層が見える形にしています。従来のように再描画のために全体を止める必要がなくなりました。負荷は実装前に実測し、許容範囲であることを確認してから着手しています。