とあるVCI作成の裏話 ～あの男が1年間頑張ったのでご褒美にVCIを作成しました～

# はじめに
こちらの記事は[VCI Advent Calendar 2022](https://qiita.com/advent-calendar/2022/vci)のカレンダー2の第19日目の記事です。

これはとあるVCI作成の裏話なので、VCI作成の参考になるような話はほとんどありません。

# プロローグ
VCIを作るきっかけはいろいろあると思います。
あれが欲しいから、遊びたいから、攻撃したいから、らくしたいから、頼まれたから、なんでも良いと思います。

きっかけなんていつでも、どこにでも転がっているのですから。

それでは、時間を少し前に戻して話を始めましょう。

# 新しい機能の追加
2021年6月にある機能がバーチャルキャストに追加されました。

それは画像をTSOにアップロードすることで、VCI化できる機能でした。

一般ユーザーの私はこの機能を使って画像が簡単にVCIできることを喜びました。
他の方たちもこの画像VCIを楽しんでいたことと思います。

そう、あの男(?)をのぞいて。

# つねに面白いことを求めるあの男
男はどうやったら楽しくなるか、面白いかをいつも考えていた。
新しい機能である画像VCI化だけでは満足できず、これを使って何か楽しいことができないか考えたのでした。

画像VCI化機能公開から、しばらくたったある日のこと。

男の手により画像VCIを使いまくった新しいルームが公開されました。

「[みんなでジグソーパズルを完成させるルーム](https://room.virtualcast.jp/rooms/JS96qsVhGTJjlaLi)」そんな名前だった。

バーチャルキャスト内でジグソーパズルが楽しめるということで、人が集まり、新作の画像公開後すぐに完成されるという状況が続きました。

![2021071522042102_みんなでジグソーパズルで遊ぶルーム⑥_にゃふ.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545584/eea98737-38c8-33e0-ffc1-2280e3e47e84.jpeg)
（こちらの画像は2021/07/15 22:04にみんなでジグソーパズルで遊ぶルームで完成時の記念写真です）

私も土曜日の深夜に作りに行ったり、火曜日公開の翌日にタイムアタックしたりとたのしんでいました。

# たのしい日々は続かない
そんなたのしい時間から少したったある日、あの男からある話をされました。

男「あのルームはみんなでジグソーパズルを完成させるルームなんですよ」

私「せやな～」

男「すぐに完成されるとルームに来た人が遊べない状態になってしまうんですよ」

私「完成したら次の画像に変えれば良いんじゃないんですか？」

男「時間がかかるので、週1回火曜日に置くようにしているんですよ」

私「へぇ～、時間がかかるんですか、大変ですね～。( ﾟσωﾟ)
　　どれくらい？」

男「3時間くらい」

私「 (( ﾟДﾟ)！ふぁっ！
　　わかりました、タイムアタックは控えます」

# ちょっと説明
ジグソーパズル公開までの手順がこちらです。
- 画像入手
- 画像を176個のピースに分割（外部のWebサイトを使用）
- 以前に公開したジグソーパズルのピースをTSOから削除
- ジグソーパズルのピース176個をTSOにアップして画像VCIを作成
- ルームでピースの画像VCI 176個を1個づつ出してサイズを調整しながら並べる
- 新作公開ツイート

以上で3時間くらいだったそうです。

ジグソーパズルルームもしばらくやっていると、並べるのを手伝う方も居たそうで最後は2時間ほどになっていたとのことです。

毎週２～３時間を1年間継続するとか頭おか・・・、じゃなくてすごいです。
しかもジグソーパズルの準備にかかる時間で、ジグソーパズルを楽しむのは別の方なんですよね。
本当に頭お・・・、じゃなくて、すごいですね。

# 会話の続きです
私「？？？？ちょっと待って？ それVCI作ったら簡単になりませんか？」

男（注意：ここはアニメに出てくるヒキオタの口調を頭に浮かべて読んでください）
　「いやぁ、僕ぅ、VCIとかぁ、よくわからないんでぇ。
　　自分にできる範囲でできることを考えてやってるだけなんでぇ。
　　VCI化できますかね？」

私「できらぁ！」(｀・ω・´)ｂ

乗せられてしまいました、作業時間が少しでも短くなるVCIを考えましょう。

# そして時は過ぎ
そして1年たちました、（えっ？）

その間、男は毎週２～３時間かけてジグソーパズルを作り続けました。

私はというと、配信したり、ゲームやったり、エルデンリングやったりと遊んでいました。
ひゃっはー！ヾ(＠⌒ー⌒＠)ノ

そして1年の間、ジグソーパズルは私が行かなくてもすぐに完成される状態が続いていたのでした。

# なんでVCI作成を1年も放置したの？
私「ワンクリックで動作するソフトにしたいから調べたりしてたんですよ。」

それで？

私「汎用性を持たせていろいろ対応できるようにしたかったんですよ。」

それで？

私「なんならBoothとかで販売したい！」

結局？

私「ごめん、たまに思い出したけど、放置してた（笑）」

ですよね～。(´・ω・`)

1年も続いているジグソーパズル、なんとかしないといけない！

私「最小限で目的を達成するVCIをとりあえず作ってみる。」

いよいよ、VCI作成パートに入ります、あの男はどうなってしまうのか。

# ジグソーパズルVCIを作ろう（いまさら）
なんかこう出来そうな感じがあるんですが、イメージがぼんやりしているんですよね。
こんな時は考えるより、作ってみた方が早いです。

まずはUnity上でVCIジグソーパズルの画像データを置いてあれこれやってみます。
作ってダメなら考えればいいので、まずはベースを作って問題点の洗い出しです。

こんな感じで色々な形のピースがあるので、これをどうやって作るかが問題でした。
![puzzle01.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545584/2e4f431a-7232-54af-2f69-764744417fa0.png)

planeにテクスチャを貼り付けて、Itemのサイズを1個づつ調整すれば良いじゃない？

176個もありますね。( ﾉД`)ｼｸｼｸ…

枠がオレンジになっているピースの左の2個のサイズはこんな感じになります。
![キャプチャ71.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545584/03720834-c36c-236f-7a6a-63b9038cf615.png)
![キャプチャ72.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545584/b37385e2-a851-4ca6-19ed-8bec29f2803b.png)

これを全てのピース176個を1個づつサイズを確認しながら設定すればいいだけじゃないですか！

( ﾉД`)ｼｸｼｸ…

Unity上でサイズを設定して確認のために並べた結果がこちらです。
![puzzle00.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545584/b100ef4d-82d6-1692-043e-c5d4fe08cd41.png)

この作業が大変でしたが、ピースのずれや、テクスチャの割り当て間違いも見つかったので良しとしましょう。
リリース後に一部画像の間違いも見つかりましたが、1個だけだったのでヨシ。
あっ、2個だったかもしれないけどヨシ。

# 本当にこれで良いのか？
ジグソーパズルのピースはWebのサイトを使用して作成しています。
そのサイトで作るとピースの位置と形は同じで、画像だけが違うものができあがります。

という事は、これで大丈夫でしょう。（たぶん）
後で少し説明するよ。

VCI化して、部屋に出したときの読み込み時間、出した後で重くなったりしないか、を確認してみました。
出してしまえば物理演算も無いので問題なさそうです。
なにより、176個のVCIが1個になるのでめちゃくちゃ軽くなりました。

やったー。ヾ(≧▽≦)ﾉ

# Luaでちょこっと味付け
ついでにLuaを入れましょう。
今回のVCIで必要なことはこんな感じです、ざっくりですが。
- ピースをランダムで並べ替える
- ピースの初期配置は、以前にやっていたジグソーパズルルームと同じような感じ
- ピースのサイズは固定に変更
- ピースの裏表に画像が出ていますが、片面にすると簡単になりそうだったので両面表示のまま
- 完成図は動かせないように固定
- ピースを並べた後はLuaが動作しないようにする、凸者が来てもLuaは何もしないようにする

Unityの設定をしてしまえば、Luaでは初期配置くらいですね。
日頃VCIを作っている方には簡単なLuaだと思います。

ピースのサイズ調整作業に比べれば一瞬でできました。(｀・∀・´)ｴｯﾍﾝ!!

# ジグソーパズルVCI最大の問題点
やっと完成が見えてきたジグソーパズルVCIですが、頭の痛い問題がありました。

このVCIの最大の問題点はあの男にUnityを使った作業をやってもらうことになります。
なんせ半年かけて教えたVCI作成を綺麗に忘れた実績のある男です。
心配です。

実際にジグソーパズルVCIの画像を変更する手順
・ジグソーパズルVCIをUnityのVCI作成環境で読み込む
・新しい画像のジグソーパズルのピースの画像を全て、UnityのテクスチャフォルダにD&D

これだけですよ。

アバターでいう所の「洋服の色を変えるのにテクスチャ入れ替える作業」と同じになります。
Webで作成したピース画像は位置とサイズとファイル名が毎回同じなので、どどんとファイルの置き換えで変更で終了です。

ちょっぴり不安に思いながら、使用方法をメモ程度に書いてあの男へDMを送りました。

えっ、できた？
よかったー。

あの男のことをちょっとなめてました。

Unity使えてエライ！

![2022121801403398_なんかテストする部屋_にゃふ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545584/f9c00f46-d3f8-1648-62fc-1babc5363c59.jpeg)
ルームで作成したVCIを置くと、ピースをランダムで良い感じに配置してくれるVCIの完成です。
「[みんなでジグソーパズルを完成させるルーム](https://room.virtualcast.jp/rooms/JS96qsVhGTJjlaLi)」にはピースを設置する台があるので、固定座標にピースを並べるようにしています。

# VCI化で作業時間は改善されたのでしょうか？
VCI化によって作業手順はこうなりました。
- 画像入手
- ジグソーパズルピース作成（ここまでは同じ）
- Unityでテクスチャ張替え
- VCI出力
- TSOへアップロード
- ジグソーパズルルームでVCIを出す
- 新作公開ツイート

<font color='red'>VCIを使ってジグソーパズル設置までにかかった時間は約10分でした！</font>

2時間が10分になりました。
1時間50分がういたので、ちょっとした映画を見ることができそうですよ。

# エピローグ
その後のあの男はどうなったのでしょうか？

ジグソーパズルルームの運営方法が週に1度設置から、完成が早いときは旧作パズルを設置するようになりました。
これで、ほぼいつでもジグソーパズルができるようになったそうです。

あの男の空いた1時間50分がどうなったのかは誰も知らないし、知らない方が幸せでしょう。

そして風の噂ではVCIの完成をたいそう喜んでいたという事です。

めでたしめでたし？

# おわりに
このお話はほぼ実話ですが、多少脚色もされております。
話半分で読んでください。

あの男が誰かは皆さんわかると思いますが、秘密にしてください、お願いします。
照れ屋なのでほめると嫌がります、心の中でほめてあげてください。

それにしてもジグソーパズルを始めたときは、一年以上毎週作り続けるとは思っていませんでした。
本当にすごいです、びっくりです、早くVCI作れよ私、って気分です。

作成したVCIはあの男専用ということで一般公開はやめました。
VCIのお礼に何かって言われたんですが、一年間他の人が遊ぶために毎週２～３時間作業していた人から何かもらえるわけないですよね。

その分感謝してください。

違う！

こちらの感謝の気持ちがVCIでした、何もいらないのでおとなしくしてください、お願いします。

一年以上も毎週ジグソーパズルの準備お疲れさまでした、空いた時間でたくさん遊んでくださいね。

それでは、まったね～。:blush:

# クレジット
- 登場人物
あの男：秘密ということにしておいてください
私：にゃふ

- 登場ルーム
「[みんなでジグソーパズルを完成させるルーム](https://room.virtualcast.jp/rooms/JS96qsVhGTJjlaLi)」：しろさん作成
「にゃふの秘密の開発部屋」：にゃふ作成、非公開

- VCI
ジグソーパズル設置のお仕事を奪うVCI：今回作成したVCIの正式名称、非公開
ジグソーパズルVCIにサンプルで使用した画像：2022お正月のにゃふ屋