ココフォリアの演出が、ちょっとした素材で変わる

ココフォリアでオンラインTRPGのセッションをするとき、シーンに演出素材を使うと雰囲気がぐっと変わります。光が揺れる、星がきらめく、ハートがチカチカする——そういったAPNGのアニメーション素材をシーンに重ねると、テキストだけのやり取りとは違う体験になります。

でも、そういった素材を自分で作ろうとすると、Photoshopやアニメーション制作ツールの操作を覚える必要があります。「ハートがチカチカするだけの素材なのに」という気持ちと、「ソフトの使い方を調べる手間」のギャップが大きいと感じていました。

パラメータを入れるだけでAPNGが完成する

チカチカ点滅APNG素材メーカーは、図形・色・速度・フェードを選ぶだけで透過APNGを生成します。ブラウザの Canvas API を使ってフレームを生成し、APNG形式にまとめてダウンロードできるようにしました。

APNG生成の処理には、オープンソースのライブラリ（pako・UPNG.js）を使っています。これらを組み合わせることで、フレームを束ねてAPNGファイルとして出力する部分をブラウザ内だけで実現できました。サーバーへのアップロードが不要なので、素材を作るたびに待ち時間が発生しません。

「シンプルな演出を手軽に」という設計方針

凝った演出を作りたい場合は、専用のアニメーションソフトの方が向いています。このツールが目指したのはその手前——「ちょっとした演出をすぐ用意したい」という場面です。シンプルな点滅素材を5分以内に用意できる、そのための道具として使ってもらえたらと思っています。