ココフォリアのカットインが「透過されない」「動かない」ときに見る5か所

セッション開始30分前に気づく類の事故です。

透過したはずのカットインを読み込んだら、背景が白い四角のまま。あるいは、画像は出るのに一枚絵のまま動かない。

原因のほとんどはファイル形式です。上から順に確認すれば大体片付くので、チェックリストとして置いておきます。

1. GIFを使っている

一番多いのがこれだと思います。「動く画像イコールGIF」という感覚で作ると、まずここに当たるかと。

GIFの透明度は1ビットしかありません。「完全に透明」か「完全に不透明」の2択で、中間がない。

半透明を含む画像、たとえば光のグロー、煙、ぼかしの効いた縁、フェードアウト。これらをGIFにすると、中間の部分が強制的にどちらかに振り分けられます。結果として、

• 縁がギザギザになる

• 暗い縁取りが残る

• 背景色が白や黒で抜けて見える

これは設定では直りません。フォーマットの仕様なので、書き出しオプションをどういじっても変わらない。

エフェクト系のカットインをGIFで作るのは無理があると思います。

2. PNGを使っている

「透過ならPNG」も正しい知識です。ただし通常のPNGは静止画。動きません。

必要なのは次のものです。

3. APNG（アニメーションPNG）にする

APNGは、PNGのフルアルファチャンネル、つまり256段階の透明度を保ったままアニメーションできる形式です。GIFの「動く」とPNGの「きれいに透ける」を両立している。

半透明のグローも、ぼかした筆跡も、フェードアウトも、そのまま出せます。エフェクト付きのカットインなら、実質これ一択です。

対応ブラウザは Chrome / Edge / Firefox / Safari。主要どころは揃っています。

4. ファイル容量が大きすぎないか

透過アニメーションはコマ数に比例して重くなります。削る順番はこれです。

1. 色数を落とす。256色に減色。エフェクト系なら劣化はほぼ気になりません

2. サイズを落とす。1280×720である必要はありません。帯状の演出なら640×360で足ります

3. コマ数を減らす。12枚でも、素早い演出なら十分見られます

「滑らかさ」を最優先にしたくなりますが、順番としては最後。カットインは1秒前後で流れていくので、コマ数より発色と透過のきれいさのほうが体感に効きます。

容量が1MBを超えると、ココフォリア側で圧縮の対象になります。圧縮のかかり方によっては、アニメーションの情報が落ちて一枚絵になります。

5. 発火条件が設定されていない

ファイルは正しいのに出ない場合。単純に発火条件が未設定か、想定と違う文字列になっているケースです。

ファイルを疑う前に、まずここを見たほうが早いこともあります。全角と半角の混在は、打った本人には見えません。

セッション前にやること

本番で一発勝負にしないための最低限。3つです。

• 実際のルームに読み込んで、背景が透けているかを目視する

• チャットに発火条件を打ち込んで、実際に再生されるかを確認する

• 複数仕込んだ場合、連続で叩いて挙動を見る

1つ目は特に。プレビュー画面では透過されて見えても、実際のルームでは違う、ということが起こり得ます。制作画面の背景色と本番の背景色は違うので、面倒でも実機で見てください。

カットインを自分で作る場合

配布されている素材パックは便利です。使えるなら使ったほうが早い。

自作が必要になるのは、その卓にしか存在しない文言を出したいときだけです。そのPCだけの技名、そのシナリオのNPC名、章タイトル。汎用素材には原理的に入っていません。

かといって、透過APNGを一から作るのは面倒です。動画編集ソフトを開いて、アルファチャンネル付きで書き出して、変換をかける。文言を1文字変えるたびにこれをやるのは現実的ではない。

そこを省略するために、文字を入れてエフェクトを選ぶだけで透過APNGが出せるツールを作りました。インストール不要。ブラウザでHTMLを開くだけです。

無料版があります。エフェクトは1種類、サイズは640×360のみ。ただし文言は自由に入れられて、透かしも入りません。透過APNGが自分の環境で動くかの検証にも使えます。

▶ カットインメーカー 無料版（¥0）
https://komagomadou.booth.pm/items/8638452

関連記事

ココフォリアの仕様は更新される場合があります。最終的な動作は、ご自身のルームで確認してください。