3年ぶりのクソアプリカレンダー参戦です。
3年前に同じくクソアプリカレンダーでエントリーした以下作品の続編です。
なぜ続編？
もっとちゃんと作りたかった・・・。
僕は「なぜ5秒で告白しなければいけなかったのか」の理由づけをしたかったんだ。
3年経ったので言い訳しない、今年は絶対作る！
シナリオを書く
「なぜ5秒で告白しなければいけなかったのか」のアンサーが必要なので原作シナリオが必要。
ということで書きました。
最近だと「カクヨム」というサイトが有名らしいのでカクヨムのアカウントを作って投稿。
文章量は約２万文字でした。
ラノベの標準は10万文字程度らしいので 1/5 の文量。
実際に書いてみるとやっぱり難しい！
ちなみに生成AIは使ってません。
ゲームキャラクターを作る
前回は2次元絵でしたが、いまどき静止画はつまらないよねと思い直し、VRoid Studio で制作。
ゲームのベルソナが好きなので眺める。じー。
結果はこんな感じ。
（「ポストエフェクトをあてた状態」というのはゲーム中の表示です。後述。）
VRoid Studio で作る際の個人的なメイクアップ？のポイントをいくつか紹介します。
髪のテクスチャを変える
デフォルトの髪のテクスチャは如何ともし難いです。
とはいえ、大変な手間をかけるわけでもなく結構雑で、以下を気にしてるだけです。
- 髪の根本と先端を暗くする
- 光沢部分は大胆かつ雑にグラデーションなしで塗る
顔のラインを誤魔化す
VRoid Studio のモデルの顔の輪郭は結構丸いです。
「ほほの高さ」というパラメータだと思い描いた感じにはならず、仕方なく髪で隠して誤魔化します。
アイラインのテクスチャを変える
二重の線と、下まつ毛を追加します。
目の丸みを強くする
初期設定だと割と横長になってるので、イメージ的には正方形に目が収まるイメージでパラメータを変更します。
表情の修正
VRMは表情の情報を持ってるのですが VRoid Studio のデフォルトだとギャグ漫画みたいな表情になるので、基本的にパラメータを弱めます。
影の硬さを上げる
中途半端なグラデーションは気持ち悪さが増すので、グラデーションなしにしてアニメ塗りにします。
細かな微調整
ざっくりとは以上で、あとはキャラに応じて細かな微調整です。
- あごの丸みを強くする
- 口を横長、口角を上げる
- 髪型の修正
- 衣装のテクスチャを修正
- 身長を変える
などなど。
はまらなければ1時間もかからないかもしれません。
ゲームシステムを作る
シナリオとキャラができたのでシステムを作ります。
ここは前回同様、JSONのシナリオ・設定を読み込んで紙芝居を再生するシステムです。
それ以外のポイントを説明します。
前提
Reactアプリです。使ったOSSは以下です。
"dependencies": {
"@pixiv/three-vrm": "^2.1.2",
"@react-three/drei": "^9.108.3",
"@react-three/fiber": "^8.16.8",
"@react-three/postprocessing": "^2.16.2",
"@types/three": "^0.164.1",
"crypto-js": "^4.2.0",
"gsap": "^3.12.5",
"postprocessing": "^6.35.6",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"three": "^0.164.1",
"valtio": "^1.13.2",
"video-canvas-screenshot": "^1.0.2"
}
ポストエフェクトをかける
新海誠作品が好きで、なんとか色味を近づけたくて新海誠作品のスクショのヒストグラムを眺めたりしつつ頑張ってみる。
個人的に新海誠作品は陰影が特徴的だと思ってたのですが、ヒストグラムを見ると緑や青がだいぶ強いんだなと気付いたり。
Before/Afterはこんな感じです。
- 環境光で赤い光をあてる（白がピンクっぽくなりますが）
- Bloomでぼやっとする
- HueSaturationでちょっとサチらせる
おしゃれなUI
開発期間が足りなくて諦めた部分もありますが・・・（言い訳）
ゲームのペルソナのUIを眺めつつ、CSSで無理なくできる範囲で実装。
ちなみに選択肢の横にいる男の画像はDalle-3で生成したものを若干手直ししたもの。
背景を作る
3次元背景は大変なのでDalle-3で生成した画像を平面のテクスチャで表示してるだけです。
あまり細かいこと考えてないです。
ロゴを作る
これは自作です。普通に作ります。
アニメーション
モーションはmixamoを使います。
FBX形式のファイルをダウンロードしてきて適用させますが、VRMにそのまま適用はできないので変換が必要です。変換ロジックはこちらを利用。
BGMを鳴らす
音楽が鳴るだけでグッとゲームっぽさが増します。
音楽はSunoで作成します。無料ユーザーなので基本はv3.5での生成結果です。
Sunoはほんとすごい。
喋らせる
全てのセリフを喋らせてもユーザーは全部を聞くわけではないと思うので一部分だけ喋らせます。イメージ的にはダンガンロンパ。
一部しか喋らないのでリップシンクは実装しません。
音声はにじボイスにしました。個人的に好みの声が多くてとても良かったです。
無料ユーザーなのでその範囲内で生成します。足りなければ課金しても良いレベルですが今回は無課金で事足りました。
スタッフロールを作る
自分しかいないんだけどね。スタッフロールは夢だよね。
プロモーションビデオを作る
タイムアウトで断念・・・
テストする
時間もないし（言い訳）、いろいろ残念な部分があります。
- スマホで動かない。途中でメモリが足りなくなってブラウザリロードが走る（500MB以上使います）
- たぶん、PCもそれなりのスペックがないと動かないかも
- VRM周りがよくわからないけど意図しない結果になる（表示位置がなぜか下の方になるシーンがある）
シナリオも、繋ぎというか伏線というか、自分の中には答えがあるのだけどユーザーに伝わらないだろうなという部分があり、わかりやすくしたいのだけど時間がない（言い訳）。
公開する
GitHub Pages で公開してます。リポジトリは Public なので全て丸見えです。
励みになりますのでぜひプレイの感想をください。
※ 「はじめから」を押してゲームを開始すると音楽がなるのでご注意ください
クソアプリカレンダーでの投稿なので当然クソアプリなポイントはあります。
もしゲームをプレイしてみようと思ってくださった場合は、プレイ後に見ていただけると・・・
ここがクソアプリ！
途中の選択肢はいっさい意味がありません。 選択肢を選ぶことで話のフラグ制御は可能なのですが必ず Good End になる一本道なゲームになってます。 そのことを知らないユーザーを飽きさせないようにする意味で選択肢を表示させています（マルチエンディングにする時間がなかっただけです）。おわりに
メディア化のお声がけ待ってます笑