📹

箱庭諸島の課題とその手段となる動画素材作成ツールを構築した

2024/07/03に公開

CSS

箱庭諸島の課題とは？

完全新規プレイヤーがなかなか増えない。なぜ増えない？
→全く知らない人が箱庭諸島を見るとどんな感じなんだ…？
→これ初見で何やってるか理解できる人絶対いなくない？
つまり、
全く知らない人が見ると動いてないように見えるので、知りたくてもどんなゲームかわからないまま去る
こういうこと(だと思ってる)

どんなゲームかなんて説明書読めよ！とも思うのだが、やろうと思ってないゲームの説明書なんて読まない。
~~3DSソフトのパッケージ版初めて買って中開けたら説明書が入ってないの見た時はびっくりした…してない？~~

ゲームはCMを見たり、雑誌でゲーム内容を見たり、かっこいいきれいなPV、実況動画を見てちょっとでもいいからやってみたい！となるのが普通。
箱庭諸島にはそれがない。現在は基本的に口コミで参加者を増やしている。

じゃあ作ろうぜ、の前にいい過去例がないか探す

いきなりPVを作るなんてことはできないので、一応他のサイトとかで~~パクれる~~案がないか探してみる。
でも「箱庭諸島なんてゲームあったね～」と絶滅したことにされてる時代。調べたところでそんなものはなかった。

……と言いたいところだが実は1回だけあったんだな～これが。

4Gamerに取り上げられた記事。
この記事が出てから1日ほどで島数は約100島ほど増加していたのを確認済み。私も一時登録してた。
オワコン箱庭諸島を今宣伝しても目に付けば人はちゃんと増えるぞ、が立証された。私にとってはかなり朗報だった。

ただこれは大手が記事で取り上げたからであって、個人サイトが取り上げられることはまずない。
長期運営を見据えることを考えると、やはり自力で継続的に提供できる手段を持つ方がいいと考えた。

現在の課題を洗い出す

8周年の時の配信で出した、将来への3大課題の1つに以下を挙げていた。

(ログの大幅拡張は今回は取り扱わない)
画像には動画がないことの弊害を書いている。さらに動画化自体の課題が以下。

・動画にするには画像をたくさん取ってくっつけて編集する必要がある
　→動画作成コストがかなり高い割に見た目は地味
・内部的な島の情報は、通常その島のプレイヤーしか見ることができない仕様
　→(特に戦争系では)防衛施設等の位置が割れてしまうのでかなり不利になる。
　→ゲームが終わるまで開発画面ありの動画が出せない。ターン制なのも相まって配信は絶望的。

要は相性が悪すぎるうえに面倒すぎてスルーしていた。
効果がいつどのくらい出るかわからないことに大量の時間費やしたくないし。

ここで少し脱線するが、宣伝方法に関して聞いた話がある。

かつて私が入り浸っていた某箱庭サイトは当時最大手と言われても過言ではなく、その管理人にユーザーを増やすのに何をしていたのか直接質問した。
唯一聞けたのは、中高生がよく利用しているチャットに中高生と偽って入室し、「最近ここの箱庭諸島ってゲームが流行ってんだけどさ～みんなもやってみない？」みたいなステマをし続けていたらしいこと。
これはあくまで一例で、当時だからできる手段を色々やって築き上げたものだから教えるつもりはない。で終わった。

ちなみに当時の私はさらにその後、「最近Vtuberが増えてきてるし、私がVtuberになって口コミで増やす予定」と言ってたのだが、「そんなので増えるわけがない。有名Vtuberに頼み込んで宣伝してもらったほうが何十倍もいい」
と言われた(うろ覚えだけどもおおよそ合っているはず)

~~正直その通りなのだが、なんか決めつけられている感じがして少し腹が立ったことは覚えている()~~

課題は洗い出した。手段は？

話を戻す。課題を出して、目標を立てた(画像の中に書いてあるやつ)
次はどのような手段かを考える。

最初動画化するためのログ設計は進めていた。結論は技術的負債がありすぎて断念。
だってそれぞれの箱庭で作成者が違うから細かいところ全部バラバラだし、s-jis,euc-jp,utf-8,~~33-4~~と主要な文字コードをコンプしててそれを吸収する云々とかきつすぎだろ！
ログの大幅拡張を今回取り扱わなかった理由はここ。

なので動画コンテンツ化に特化する方針にした。
実は洗い出す前から課題感はあったので、叩き台あったほうがいいよなと思いひとまず視点動画を先んじて作っていた。

2つだけでもまあきっついきっつい。
ゲーム終了前に動画を出したら情報公開でアウトになるので、都度都度その時の気持ちをメモって最後にまとめて記載する必要がある。

私自身は視点動画が大変だったので、もうひとつ全体リプレイを作成してみた。

行動ログがないので詳しい情報は見れないのだが、まあ動いてるものが見れればいいだろうで作った。
いざ形にして見てみると、上位陣の島がどういう感じで最初から推移しているのかが可視化できるのは思ってたより新鮮だった。

またバックアップファイルから島を生成するだけで神視点動画が作れるので、作成コストが思ったより少ない。
これを定常的な動画コンテンツ化にしようと踏み切った。

できる限り作成するためのコストを減らす

まず手動でやっていたこと
最初スクショを取っていたのだが、全部島を画面に映すにも画面領域や画質に限界があった。
なのでhtml2canvasで要素内を丸ごと画像化して保存する方法を選択した。
人間の手が入らないので均一なサイズで画像が用意でき、4K以上のサイズでも保存が可能になった。
島の種類とトップページの画像を用意したあとは、AviUtlで集めた画像を1つずつ並べて、ターン間にクロスフェード置いてBGM差し込んで動画出力。
なお画像も微妙に気になるところは都度都度手動で位置を調整していた。

この動画編集が年1ならなら許せるが、1ヶ月1回のペースでやるのがまあ面倒。切り抜き師に金払って頼んでる人の気持ちがちょっとわかった。
このままでは継続が難しいので、AviUtlでやっていた画像関連は全てスクリプト側で完結させる。

完全に動画のための専用のツールを一から設計し、マップの配置等々はhtmlとcssをフル活用。
島数に合わせて文字数のサイズも調整できるようにした(手動の時は一時しのぎで作ってた)
それを同じくhtml2canvasで出力。位置を変えたい場合は全てcssで調整することになる。いや～grid便利だね。

次に画像の保存。seleniumを使用して保存するのだがちょっと手こずった。~~perlでもseleniumは使えるんﾀﾞﾖ。~~
seleniumのprefsにprompt_for_downloadをfalseにし、headlessモードでもダウンロードできるように設定する。ディレクトリも指定。
html側はダウンロード用のボタンにhtml2canvasで作った画像を設定して、seleniumからボタンをクリックしてダウンロードして保存。
バックアップファイルはseleniumから操作できるようにバックアップファイル名だけのファイルを作成。そこで中身を書き換えながらバックアップファイル名を変えて画面更新することで、表示するターンを順繰りに変えて画像を自動で保存するようにした。
万が一画像に失敗した箇所が見つかっても、150枚なら10分あれば全画像を撮り直すことができる。強い。

あとは画像をsetTimeoutを使って要素の後ろに画像を足しながら手前の画像を1枚ずつ消して流す。
クロスフェードはopacityとtransitionで再現。
これを頭からOBSでそのまま画面録画する。動画編集ソフトを使わずに動画が完成した。

安定した動画コンテンツの供給が可能に

それで作ったものがこちら。VideoProcVloggerでBGMだけを後付けして終わり。簡単!!
今は終わりになにもないので寂しいことになってるが、入れようと思えばcss,jsが使えるのでいくらでも拡張性がある。

なお上の動画は私の箱庭じゃないので、管理人に依頼してバックアップデータと島を表示する処理のコードを貰った。それを手元で再現している。
これを完全手動で再現しようとすると、
開発期間：6時間更新×島数(今回は最大18島)+トップページ、を29回スクショ
戦闘期間：12時間毎×島数+トップページ、を50回～70回スクショ
動画素材の画像を用意するのに約1ヶ月ちょっと。毎日撮る。
さらに撮った画像を1つずつ動画編集ソフトで配置して…
と考えただけで鬱になる。また外から見ているので島の詳細も見えない。

が、管理人の協力とツールのおかげで、ゲームが終わってからおよそ1時間で作成できるようになった。
本来本人しかわからない資金や島の地形も全て見えるので、こんなプレイングしてたんだ～とわかるようになった。
そして盛り上がりが冷める前に動画公開しました！ができる。これがいい。
普通に編集するとどうしても少しずつ進めることになり、1週間はかかってしまうので、公開してもそこまで盛り上がらなくなる。

この手段は適切だったか？

……あれ？全く知らない人のために動画を作ろうとしたんじゃなかったっけ？
と思ったそこのあなた。勘のいいｶﾞｷは(ry

でも初心者向けの動画はまた別ものだと思っている。

トナメ何やってるの？→この動画見て。因業何やってるの？→この動画見て。
やはり説明書を見て想像するのと実際の流れを見てもらうのは雲泥の差がある。
そもそも既にいる箱庭プレイヤーですらやったことのない箱庭はハードルが高い現状がある。どういう流れかを手軽に確認できる環境を構築できるようにしただけでも大進歩だと思う。

大進歩して、やっとスタートラインに立ったところ。ここからさ…

ちなみに最初の叩き台として作っていた視点動画だが、有志1名が視点動画を自主的に投稿している。
ちゃんとした視点動画が今までなかったのもあり、同時視聴を実施した際は大いに盛り上がった。
~~私の視点動画は宣伝して何もなく終わったけど~~箱庭民同士で視聴するには有用なコンテンツになりえるようだ。

今まで箱庭諸島の動画化は相性悪すぎて無理だと思っていたが、やれば案外できるんだなって。
他にも動画にする方法があるかもしれないので模索し続ける。