見出し画像

プリッカソン#9 で『VR虹ノ咲さんなってみたアプリ』を作ってみた

ぐんそー


プリッカソン

「プリッカソン」は「プリティーシリーズ」の「ハッカソン」です。今回で9回目の開催となりました（すごい！本当にすごいんだ！）。
自分は3回目の参加です。前回のようすはこちらから。

ハッカソン（英語: hackathon 、別名:hack day ,hackfest ,codefest ）とはソフトウェア開発分野のプログラマやグラフィックデザイナー、ユーザインタフェース設計者、プロジェクトマネージャらが集中的に作業をするソフトウェア関連プロジェクトのイベントである。

プリッカソンの理念は公式ページから引用します。

「ものづくりは好きぷり？じゃあ、大丈夫ぷり！」
プリティシリーズ(プリティーリズム/プリパラ/プリチャン)を技術の面から支えていきたい，そんな思いから生まれたハッカソン．
プリパラ＆プリティーリズムと自分の技術を組み合わせて，面白いことをしていきましょう！
「マイチケの写真を撮って、画像処理でコーデのデータを管理するアプリを作るぷり！」
「プリパラのある店舗をマップアプリで見られるようにするガァル！」
「○○ちゃんの誕生日だから，お祝いの絵を書くなちゅ♪」

今回から「好きぷり？」の部分が「プログラミング」から「ものづくり」に変更になって「絵を書くなちゅ♪」が追加されたそうです。
プログラミングだけじゃなくて絵とかお話を描く人にも参加してもらえたらいいなって気持ちが込められているそうです。

余談だけど引用してたら誤字と表記ゆれを見つけてしまった。
ご検討よろしくおねがいします。

✕　プリティシリーズ(プリティーリズム/プリパラ/プリチャン)
○　プリティーシリーズ(プリティーリズム/プリパラ/プリチャン)
現在：プリパラ＆プリティーリズムと自分の技術を組み合わせて
提案：プリティーシリーズと自分の技術を組み合わせて

会場へ移動

今回も（自分視点では）すっかり恒例となっているNagatachi GRiDが会場でした。何やらこの会場、一日借りるのにうん十万円かかるとかなんとか…。
大型スクリーン、えもいスピーカー、バーカウンター、めっちゃはやいWi-Fiなどなど…納得の設備です。
株式会社ガイアックス、一番好きな株式会社です！

今回は「もくもくゾーン」と「わいわいゾーン」でゾーニングして各々が作業をできる工夫がありました。席移動も自由にできるので普段は「わいわいゾーン」で楽しく、進捗マジヤッベー時は「もくもくゾーン」で集中して…という立ち回りも可能でした。

10:00前後くらいに到着したが、朝の早い女児の手によって既に会場設営が9割完了していた。すごい。自分は前回の反省を生かしてペットボトルを5本を現地購入した結果、重量と移動に苦労して死んでました。

移動

プリチャン最新話

会場の準備、簡単な自己紹介、座席決め、作業準備が整ったところで恒例のプリティーシリーズ最新話上映会。
軽く実装したもののビルド待ちをしつつクッションゾーンに移動して鑑賞。

正直ダイヤモンドスマイルがなくなってしまうのが寂しかったのですが、新しいOPとEDがあまりにも良すぎて寂しさが吹き飛びました。特にOPはシリーズ歴代で最高の顔の良さではないかと思う。いやほんとに。天才。

VR虹ノ咲さんなってみたアプリ

虹ノ咲さん桃山好きすぎ問題が囁かれる昨今、自分でもあの部屋を体験すれば虹ノ咲さんの気持ちがわかるに違いない。

画像1

試しにこの環境の見積もりを探してみたら計算してツイートをしている方がいました。ざっくり100万くらいかかりそうです。

流石に100万用意するのは大変なのでスマホVRで擬似的に体験しましょう。
なってみなくちゃわからない、わからなかったらなってみよう。

スマホVR環境設定

今回はUnity 2019.1.10f1を使用しました。

最近のUnityはVR機能が組み込まれているので設定を少しだけ弄ればすぐにスマホVRの開発ができます。
ここで説明してもいいのですが、既に方法をまとめたサイトがいくつもあるのでそちらを参考にするのが良いかと思います。
Unityさえインストールしてあれば数分で終わるはずです。

虹ノ咲さんの部屋（疑似）

モデリングをやっている時間はどう考えてもないので、UnityのAssetStoreからFreeのモデルを持ってきて疑似的に虹ノ咲さんの部屋を再現します。

それっぽい部屋と8画面ディスプレイ横に設置されているスピーカーのようなものは見つけたので組み合わせてそれっぽい環境を作ります。
部屋のAssetに窓が付いていたので「部屋が暗い＝夜ってことにしよう」と星空のskyboxを使ってみたが「外が宇宙でびっくりした」というコメントをもらって確かにと思うなどした…スペース! スパイス! スペクタクル!

ディスプレイは色々モデルを探したものの枠の太さや幅など目的に合致するものがぱっと見つからなかったので自分で作成することに。
せっかくなので前々から気になってたUnity ProBuilderを使ってみる。

画像4

細部は気にしない方向でそれっぽくつくる。
ただの板にしか見えないけどコンテンツ埋め込んだ時にフレームが上になるように微妙に凹んでるの伝われ！

画像5

ディスプレイを乗せる机も高さだけ合わせてざっくり。本当の虹ノ咲デスクはもう少し形状が複雑。

最後にいい感じに配置して部屋を暗くします。

画像6

描画コンテンツ

描画コンテンツは中央縦置きディスプレイ3枚用の動画と残りのディスプレイ用の静止画5枚を用意します。

虹ノ咲さんの気持ちを考えると動画コンテンツに「ワン・ツー・スウィーツ」は欠かせないのですが、今回用意した動画が何故かスマホにビルドすると再生が途中で止まってしまうので「TOKIMEKIハート・ジュエル」を使用しました。「TOKIMEKIハート・ジュエル」のCG山は自分の顔の良さをわかってる動作をするのでこっちも好きです。

ディスプレイモデルの画面の大きさに合わせたPlaneにVideoPlayerコンポーネントを追加して、UnityにインポートしてVideoClipになった「TOKIMEKIハート・ジュエル」の動画をアタッチします。
同様に静止画もImageにアタッチしてディスプレイのモデルに合うようにいい感じに配置します。

どちらもShaderを「Unlit/texture」にすることで光の影響を受けずに元のコンテンツのままの明るさで表示されます。
実際のディスプレイのように発光はしませんが部屋を暗くしているので発光しているような感じになります。
本当はArea Lightとか使うと周囲がディスプレイの光の影響を受けてえもくなるっぽい。

すべて配置しおわったらこんな感じになります。

画像3

プリズムエフェクト＋心の声

桃山を見ている虹ノ咲さんならきっと心が煌めいているはずなので、ライブシーンの時に周りに出るキラッとしたエフェクトを被せたらきっとそれっぽい。UnityならAnimationを使えば再現できそうだけど、そんな時間はないので昔作った画像からエフェクト部分の素材だけ切り出して持参した。

画像が正方形に近くて真ん中が大きく空いているのでVR視点で邪魔にならない＆視界にはいる場所の調整に時間がかかった。画像の境界がどうしても見えてしまうので上下左右に並べてパワー解決。実は全然つながっていないけど視界の端のほうなので気がつくのは難しいはず。このエフェクトを桃山（が映っているディスプレイ）を見ている時に発生するように設定する。

画像7

ついでに数秒間桃山を見つめていると心の声が漏れるように。
セリフはランダムで4種類です。

「みらいちゃん…かわいい…」
「ふわふわのポニーテール…」
「触ってスリスリしたい…」
「ふわふわでいい匂いがしそう…」
※虹ノ咲さんが実際に発言した内容とは一部異なります

画像8

完成！

スマホをVRゴーグルにセットして虹ノ咲さんになってみよう！
今回はダンボール製の安価なVRゴーグルを使用しました。
値段なりのそこそこVR体験ができました。

成果発表会

プログラミングする人、システム開発する人、ゲーム作る人、絵を描く人、ガジェット開発しちゃう人などなど…今回も力作揃いでした。
ピザをつまみつつ和気あいあいとした雰囲気の発表でした。
以下、記事作成時にTwitterに動画があったものを紹介します。
当日の様子は#prickathonで検索できるので気になる人は是非

超えもい配信システム

発表者の画面を共有しつつ視聴者は自分のPCから「いいね」を送れるシステムが開発されて超すごかった。今回は全員（リモート参加者1名含む）がこのシステムを使用して成果発表をしていました。
以前まではスクリーンに接続する時にうまく繋がらない問題があったのですが、今回はこのシステムのおかげでスムーズでした。
検討段階だったリモート参加者の発表もこのシステム＋通話で急に実現できてしまったのがすごい。
残念ながら当日来られなかった人も成果物を見ることができたようで良かった。

圧倒的肯定感のある「そうなんだ」

前回のプリッカソンで開発された『音に反応して「そうなんだ」を返してくれる桃山』が今回も大活躍していた。

発表「以上です」
桃山「そ、そうなんだ…」
桃山「そうなんだ！」
発表「桃山も分かってきたらうれしいな」
発表「JavaScriptにそういうのが入ってるんですよ」
桃山「そうなんだ」
発表「そうなんですよ」
発表「今回はプログラミングをやってみようと思いまして…」
桃山「そうなんだ！」
桃山「そうなんだ」
発表「そうです」
発表「夜勤で徹夜だったのでコンディション良くなくて…」
桃山「そうなんだ！」

熟練者になってくると桃山と会話しながら発表を進められるようだ。見習っていきたい。
どうやら「そうなんだ桃山」に続いて「かわいい金森」も導入されるという噂もあるが…

懇親会＆打ち上げ

成果発表後はそのまま懇親会に突入して技術的なことやら雑談やらで盛り上がっていました。会場を出たあとに打ち上げ（任意のプリッカソンラーメン部）を行って帰宅しました。

最後に

通算3回目の参加となりましたが毎回新しい試みが行われていてプリッカソンがどんどん成長しているように感じました（何様感ありますが…）
今後も末永く開催されて参加者の皆さんと交流できることを楽しみにしています。

この記事が気に入ったらサポートをしてみませんか？