MINDHACK:ぷにぷに技術

皆さん、こんにちは。MINDHACK開発チーム・シナリオと技術と画面の諸々担当、CG大好き紅狐です。
CGつまりコンピュータグラフィックス。人類はもはやコンピュータなしでは生きてはゆけぬのだ。
本日のブログにもがっつりMINDHACK第5章のネタバレが含まれておりますので、ご注意ください。

突然ですが、『MINDHACK』の世界観を示す紹介文をご覧ください。

WORLD
『MINDHACK』は、現代社会とファンタジーを融合させた世界の物語です。
ギャングのヘッドを務めるウニ、カルト宗教の信者、
異星からやってきた怪生物、世界の破滅を目論む魔王……
素性も姿も多種多様な悪人たちを、精神を書き換えることによって無害な善人に更生させていきます。

「ギャングのヘッドを務めるウニ」 はいはい。
「カルト宗教の狂信者」 はいはいアイツね。
「異星からやってきた怪生物」 えっ!? このゲーム宇宙人出てくんの!?

魔王のことは一旦置いといて、ヒューゴです。
そう、宇宙服を着た異邦人のことを「異星から来た怪生物」呼ばわり! ……と見せかけて、彼の正体は本当に怪生物なのでした。

 

 

というわけで、本日はこの触手についての裏話。
第5章の開発中、ミニゲームやマインドハッキング中の演出を作っていたころのお話です。

 

ヒューゴの怪生物要素といえばやはり触手。というかこの人、もう触手。
どうしよっかな、触手。

マインドハッキング中の演出は、主人公が「触りたくない!」と言うくらいの不気味で異質なやつでなくてはいけません。

それに、人間っぽくない外見のキャラクターが多いこの作品で、ぱっと見で『明らかに異質な怪生物』であることを示すには工夫が必要です。
「ブラッディパエリアにイソギンチャクの舎弟がいた場合」と、「誰が見てもヤバイと感じる精神世界の異形」では、はっきりとビジュアルが異なっていてほしいですね。

さらに、やはり触手ならばうねうねしていてほしいが、とにかく数が多い。すべての触手を手描きアニメーションにするには、コストがかかりすぎます。

・普段のアートスタイルと異なる
・パッと見でうわっ!!ってなる
・うねうね動く(かつ、アートコストは削減)

この3つの要素を同時に叶えるにはどうしたらいいんだ?
導き出された答えはひとつ! よし、CGだ。CGは全てを解決する。というわけで作ります。

 

触手、つまり超単純化すれば「線」です。ヒューゴに寄生している生物は作中でも「線虫」と言われていました。
線は点の集合体。点をめちゃくちゃ大量につなげれば線になります。
で、線虫といえば多分イトミミズのように、大量に、塊で、うねうねしているはず。

そこで、画面の中央に点の集合体を配置し……


その点からさらに点を放出し、線を作ってみます。

これに陰影のディティールを追加すれば、うわってなるはず。

うわっ。なりました。
あと、ちょっと生物っぽさもほしい。
生きてるので、微妙に振動させてみましょう。

できた……。
いい感じに生物的なディティールもあり、思った以上に不気味な感じになりました。大満足です。

 

さて。同じ要領で、次はより広い面積を覆うものを作ってみましょう。

うーん、悪くない。悪くないけどもうちょっと触手っぽさがほしいか。
異質さは出したいものの、本来のキャラクター設定と似ている部分もほしいところです。

そこで、単品の触手素材も作ってみます。
アート的にこの線虫の太さ加減は「うどん」という指定なので、あまり細くしすぎると「そうめん」になってしまいそうです。ここではやや太めにして、うどん度を強めてみましょう。

まず画面の端に点を配置し、

右手にむかって、徐々に点が小さくなるように並べていきます。
真っ白にして、フチにだけアウトラインがつくようにすれば絵っぽさが出ますね。

できました。
これを良い感じに配置して、先ほどの画像になじませてみましょう。

どうでしょうか。不気味といえども美しくあってほしいので、質感は無機質に、すべすべ感を意識しています。

 

よしよし。
いい感じに異質さが出ました。これなら『異星からやってきた怪生物』を名乗っても胸を張っていけるでしょう。

特徴的な泡もつけたバージョンを作ってみましたが、これはちょっと触りたくなさが増しすぎるので没となった。

 

さて、おなじみの文字消しミニゲームの背景にこれを配置すれば完成です。

ああいいじゃないいいじゃない。
あとはいつも通りのマインドハックですからね。これでひと安心ですね。

 

アート担当ホでヴ「もっとぷにゅぷにゅにしたい」

 

なに?

 

アート担当ホでヴ「触ったらこうなってほしい!」

 

なるほど!?

触ると凹む……!?
なんかやればできそうな気がしますが、実は大きな問題がありました。
この触手、ご覧の通り、既に「うねつく」アニメーションがついています。これはパラパラ漫画のように絵を1フレームずつ切り替えて表示しているので、現状のしくみでは「うねつく」と「触ると凹む」を同時に表示することができないのです。
ど、どうしたもんか……

 

導き出された答えはひとつ! よし、CGだ。CGは全てを解決する。というわけで作ります。

「うねつく」触手のパラパラアニメーションを、3DCGの板に貼ります。
「触ると凹む」機能には、3DCGの板に仕掛けをいくつか仕込みます。ここに『マウスカーソルがこの仕掛けを触ったとき、板がゆがむ』という機能をプログラミングで実装しました。

 

 

ふたつの要素を司るのが別々の機能になり、両者を同時に実現できるようになりました! やったぜ!
どうですかホでヴさん。

アート担当ホでヴ「いいね!!」

アート担当ホでヴ「今ヌーって戻るけどもう少しポヨッてしたい!」

も、もう少しポヨッと……!?!?

ポヨッと……!!

ポヨッと……!!!! うおおお…………!!

どう!? ……こう……!? いやもう少しこうか……!?

 

どうだ!! 実際にゲームに組み込まれたぷにぷに触手ウインドウがこちら。
最終的に、ポヨッと感を追求するべく膝をつきあわせて画面を見ながら、数値0.1単位で微調整を行い無事完成となりました。
いやこれは確かにこのくらいポヨッとしてたほうがいいわ。やった甲斐がありました。

様々な技術を総動員して実現した思い入れのあるシーンです。一瞬のミニゲームではありますが、こだわりのぷにぽよ感を味わっていただけましたら幸いでございます。