【超小ネタ】Scaleの値をマイナスにするとどうなるか知ってる？

真夏の長雨

「だからお前ら外に出るなって言ってるだろう！」と天が怒っているかのような季節にそぐわぬ長雨で折角の夏季休暇を殆ど部屋の中で過ごした皆さんこんにちは。私は5月に注文した新PCが丁度納品されて来たのでセットアップやら旧PCからのデータ以降やら色んな会員サービスの新PCからのログイン＆二段階認証やらで右往左往していました。「このアカウントに新しい場所からログインしようとしています・・・」という文面を読むのはもう飽きました。セキュリティ上、仕方がないのは分かりますが面倒くさ過ぎ。

夏季休暇中の作業

そんなこんなでバタバタしていましが一応時間だけはたっぷりあったので、夏季休暇中は集英社のゲーム企画コンテストに応募する用のゲーム作成に勤しんでいました。
ゲーム作成といってもプレイ動画を撮る為のデモ版なので実際に遊ぶことは出来ませんが

これで4分の1ぐらいでしょうか。締め切りが9/30なのでそれまでに完成できるよう頑張ります。

超小ネタ

上記のデモゲームを作っているときに気づいたのですが3Dモデルのtransformのscale値をマイナスにするとどうなるか知ってますか？

それぞれの方向で反転します。

これが何に使えるのかなぁ、と考えたのですが"間違い探し"ぐらいでしょうか。

これをオリジナルとして、オブジェクトを全てX方向反転するとこんな感じ。

オブジェクトを全てZ方向反転するとこんな感じ。

オリジナルと並べると間違い探しゲームになります。

あとは・・・鏡を作ると時にRenderTextureを使うかと思いますが、そのままだと左右反転しないので鏡のモデル自体をX方向反転する必要があります。

これぐらいかな？

【Unity】アセット紹介：Volumetric Fog & Mist2を使ってフォグエフェクトを作る

突然の知らせ

5月に注文して9月中旬頃に納入される予定だったPCが今月に入って突然「今週届きます」の知らせが届いてちょっと焦っている皆さんこんにちは。現在使っているPCの中を全然整理できてないので暫くは二台運用する事になりそう。とりあえずサイドテーブルを購入しました。

Volumetric Fog & Mist2

UnityではFogエフェクトを使いたい場合、Lightingの設定から簡単につけることができますが、これはカメラからの距離に応じてオブジェクトに色を重ねるエフェクトなので存在感のあるFog(霧)を作るのはなかなか難しいです。
今回紹介する「Volumetric Fog & Mist2」はそんなリアルで現実感のあるFogを簡単に作ることができるエフェクトアセットです。

これはカメラエフェクトのアセットなのでシーン内に実際のFogが作られるわけでなく、カメラの映像にFogのエフェクトを掛けて使用するアセットであることに注意が必要です。
シーン内で複数台のカメラを切り替えて使いたい場合などは各カメラそれぞれにFogエフェクトを設定する必要がありますし、逆に複数台のカメラの映像を重ねて使っている場合はどのカメラにFogエフェクトを設定すべきが考慮する必要があります。

導入は簡単

前述の注意点を除けば導入はすごく単純でFogエフェクトを設定したカメラに「VolumetricFog&Mist」のコンポーネントをアタッチするだけです。

Fog設定の細かい設定はProfileが何種類か用意されているので、その中から好みの設定を選択して使うこともできます。

VolumetricFogの設定前

VolumetricFogの設定直後

前述のようにこのアセットはカメラエフェクトのアセットなので、上の図のような画面はSceneタブ画面でなくGameタブ画面で確認することが来ます。(Sceneタブ画面ではFogは表示されない)

Fog Area

上の図では霧の向こうに建物が見えるのでどこまでも霧が掛かっているように思えますが、実際は「VolumetricFog」コンポーネントで設定された領域内だけにFogエフェクトが掛けられている状態となっています。よって、そのエリアから離れた場所(建物の手前)ではFogエフェクトは一切かかっていません。

建物の手前のエリアはこんな感じ

この為、例えば建物の周りにFogを発生させたい(Fogエフェクトを掛けたい)場合は、「Fog Area」の設定で「Center」の座標に建物座標を指定するか、「Follow GameObject」に建物のオブジェクトを指定する事になります。

この「Fog Area」の設定で建物のオブジェクトを指定すると

こんな感じに変わります。

Fog Geometory

上の図では建物の周りにFogが掛かっているのを確認できますが、Fogに厚みを感じません。
Fog事態の大きさ等の設定を変えるには「Fog Geometory」の項目を変更します。

初期の「Fog Geometory」設定

厚みを変えるには「Hight」の項目を大きくします。また、Fogの領域の広さやFogの強さは「Density」や「Noise Strength」の項目を変更します。

変更後の「Fog Geometory」設定。このように設定を変えると

全体的にFogが掛かった状態になりました。

これに「Fog Color」の指定でFogに砂漠のような色を付けてみると

砂煙で覆われたかのような画面を作ることが出来ます。

Dynamic Fog

ここまでの設定を行った状態でカメラ位置を最初の遠景の位置に戻してみると

こんな感じに変わってる。建物の周りにFogが掛かっているのは確認できますが、そこまでの領域にはFogがなくて少し寂しい感じがします。

新しいFogを追加したい場合は、カメラに「Dynamic Fog」コンポーネントを追加して新しいFogを表示します。

この「Dynamic Fog」で建物までの間のFogエフェクトを追加して、最後にカメラを遠景の位置から建物まで移動させて見ると

結構いい感じにFogエフェクトが掛かったゲーム画面が出来たと思います。

来週は夏休み期間につき更新はお休みです。

【備忘録】UnityアセットのKoreographerで音ゲーを作る

小学生理論

取りあえず自分の周りの不都合な出来事はオリンピックの所為にしとけば良いと思っている皆さんこんにちは。きっと私の給料が上がらないも彼女ができないのも四連休後の月曜日がひどく憂鬱なのもオリンピックの所為に違いありません。まぁ、でも「オリンピックは開催されるのにロックフェスは～、子供の運動会は～、週末の飲み会は～」とか言っている割に平然と繁華街に出かけて夏休みの旅行プランとか計画している人は記憶障害か何かだと思います。自分以外の誰かが我慢して閉じこもれば良いって事なんでしょうね。

Koreographerというアセット

Unityのアセットで「Koreographer」という結構高額なアセットがあります。これは音楽と同期してイベントを発行してくれる、というアセットで、このブログでもずっと以前に取り上げています。

www.karvan1230.com

イベントの設定は音源の波形が表示された専用のエディタを使用するのですが、こちらは音源のBPMに合わせたグリッド線に沿って設定するので、一定のリズムでイベント発行させたい場合にはかなり使い勝手が良いものとなっています。

白い線がグリッドで1ビートの間隔を表しています。上の図では4ビート(1小節)単位に太い線が引かれています。

逆に時間を指定してのイベント発行(曲開始から〇秒後にイベント発行等)には対応していないので、一般的なノーツが振ってくるような音ゲーを作ろうとした場合、画面をタップして欲しいタイミング＝音が鳴るタイミングは設定できても、そこから〇秒前に遡ったノーツを生成するタイミングを設定するのには非常に不向きです。

以前、このアセットを使用したゲームを制作した時にはBPMから1ビートの時間を計算し、そこから逆算してイベント発行タイミングを設定していたので一曲分フルで設定しようとするとかなり面倒で手間のかかる作業でした。

今回はその手間を省いて「画面をタップして欲しいタイミング＝音が鳴るタイミング」を設定するだけで〇秒前に遡ったノーツを生成するタイミングを計る手順を確立したので、(忘れないように)備忘録として記事に書きたいと思います。Koreographerとか興味ない方はごめんなさい。

事前処理

結論から先に書くと、「Update内でノーツを生成するタイミングを計る」という事になるのですが、これを行うために事前の処理が必要となります。

上の図の赤い線の箇所が「画面をタップして欲しいタイミング」でイベント発行時の引数にはInt型の値を設定しています。

これらのイベントの設定は楽曲毎にKoreographerで作成されるKoreographerphyというコンポーネント内にイベント毎にKoreographyEventクラスとして情報が保持されているので、Start関数等の初期処理でこのKoreographyEventクラスを全てList等に取得しておきます。

Updateでの処理

KoreographyEventクラスにはイベントの発行位置をStartSampleプロパティに保持しています。

これは上のエディタ画面の「Start Sample Location」の値で「曲開始からの時間」にサンプリングレート(KoreographyのSampleRateプロパティ)を掛け合わせた値を示しています。(以降、サンプルタイムと呼ぶ)

この仕様に合わせて、ノーツを生成する為のオフセット時間にサンプリングレートを掛けた値をオフセット値として求めて

Update内で現在のサンプルタイムにオフセット値を加算した値とKoreographyEventクラスのStartSampleプロパティを比較することでノーツを生成するタイミングをチェックします。

説明はちょっと分かりづらいですが、ソースを見れば単純なロジックで実装できることが分かると思います。

使用例

Koreographerには上記の手法で作成された音ゲーがサンプルとして付属していますが、見栄え的には出来が良くないので自前で作ってみました。
飛んでいる鳥の前に障害物が出現、それを避ける場所にターゲットが表示されるのでノーツがそこへ移動したら画面をタップして鳥を移動させます。

gifファイルで音が出せないので、右横の〇が色が変わるタイミングが「音が鳴るタイミング」だと思ってください。
ノーツが移動するタイミイグ ＝ 〇の色が変わるタイミングになっていると思います。

やっぱり面倒くさいな・・・・

【Unity】ベジェ曲線を求めて放物線を描く

決意と怠惰

今日こそは家に帰ったら速攻でゲーム制作に取り掛かるぞ、と決心したものの夕飯を食べて一息ついたら何故かPSのコントローラーを握っている皆さんこんにちは。最近、UBI製ゼルダの伝説とでも言うべき「イモータルズ フィニクス ライジング」というゲームを購入して見事に土日が潰れました。キャラクター同士の会話内容はちっとも分からないんですが、とにかく探索が楽し過ぎてメインストーリーを進めずに寄り道ばかりしています。熊さん強すぎ。

ベジェ曲線

下の図のように移動する鳥が移動方向斜め前にあるリングの中を通る動作を作りたい場合、通常なら目的地のリングに向かって一直線に飛ばせばよいのですが、それだとちょっと面白くない。もう少し動きを加えて放物線を描きながらリングを通過させたい。

そういった場合の放物線(曲線)の計算方法は色々あるかと思うのですが、その中でもメジャーな手法としてベジェ曲線を使った手法があります。

ベジェ曲線とはコンピュータ上で滑らかな曲線を表現できる計算方法で、最も単純な「2次ベジェ曲線」の場合だと曲線の始点と終点、その間にある中継点を指定するだけで曲線を作る事ができます。

Google先生に尋ねると色々な解説が各所で掲載されているので詳細はそちらを参考にしてもうとして、この「2次ベジェ曲線」をUnity上で計算する場合はVector3のLerpを使います。

上記の関数の引数tは始点と終点の距離を1とした時の距離でこの値を0～1に変えることで曲線上にある点を求めることが出来ます。
ここで重要なのは中継点の位置で、始点と終点の中間地点から上(Y軸)へ距離を取った地点を中継点とすると

こんな感じの曲線が求められます。

もちろんこの曲線上を移動するようにしても問題ないのですが、この場合、最初に鳥はリングに向かって斜め方向に飛び、リングに到達すると進行方向(Z軸方向)に一旦向きを直して移動することになり、ちょっとぎこちない動作になります。

垂線を求める

スムーズに方向を変えるような曲線にしたい場合は、中継点を中間地点の上(Y軸)に置くのではなく、始点から終点へ向かうベクトルの(XZ平面の)垂線上に置くことが必要になります。

こうした指定したベクトルの垂線を求めたい場合にはVector3のProjectを使います。

Vector3.ProjectはUnityのリファレンスによれば「ベクトルを別のベクトルに投影します。」と書かれています。
つまり、上の式のProjectionは「vectorベクトルの垂線」と「onNormalベクトル」の交点を表すと考えることができます。

なので、投影ベクトルのProjectionから投影元のvectorの差分ベクトルを求めればonNormalベクトルの垂線ベクトルを求めることが出来ます。

後は中間点からこのベクトルに沿って距離を取った地点を中継点に置けばスムーズに方向を変える曲線を求めることが出来ます。

上から見るとこんな感じ

 仕上げ

垂線ベクトルに沿った点を求めることができたので、その地点から上(Y軸)へ距離を取った地点を最終的な中継点としてベジェ曲線を求めました。

ちょっと見ずらい・・・
後ろから見るとこんな感じ

この求めた曲線に沿って鳥を移動させます。

こんな感じ。一直線に進むよりも結構ダイナミックな動きになったと思います。

 

【進捗報告】アレコレ手を出し過ぎて頭が痛い

夏が始まる

最近、通勤途中にすれ違う女性からちょくちょく視線を感じるので髪切ったせいかなぁ、モテ期がとうとう・・・とか思っていたら、首に掛けた扇風機のお陰だと気づいた皆さんこんにちは。首掛け扇風機ってもっと普及していると思っていたのですが以外に見かけませんね。この蒸し暑い中、マスクをつけて歩くのに扇風機がないとかどんな苦行だよ。

脱出ゲームを作っている

このブログの中でも度々紹介していますが、去年の夏頃からPC向けの脱出ゲームを作っています。開発期間はもう一年近くになりますが未だ進捗度は50～60%ぐらい。
完成までの道のりは長そうですが、先日のIndie Live Expoでは「2021年11月リリース」と紹介してもらったのでそれ迄には完成させたいと思っています。

直近の作業としては、上の動画にあるようにエレベーターを追加し、それに乗る事で新ステージへ移動する(別シーンへ遷移する)ようにしました。

これまでは一つのシーン内で各ステージを作っていたのですが、オブジェクトがドンドン増えていくと負荷も増えていくし、シーンビュー内もごちゃごちゃして分からりづらくなるしで、作業が辛くなっていたので思い切って新しいシーンを作る事にしました。
使っているフレームワーク(アセット)の仕様上、シーン遷移を挟むとどうしても「Loading画面」が表示されてしまうのですが、それが出来るだけ不自然に見えないようにプレイヤーにはエレベーターに乗ってもらう事にしました。ほんとはシームレスに遷移するのが理想なんですが。

 また、当然ながら新パズルも作っています。

こういう問題や

こういう問題

こういった問題。これはパズルと言うより数学の問題に近いですが、そこはユーザに優しく救済ルートも用意しています。

まぁ、指示の通り箱を開けたらどうなるかはお楽しみ。

 カジュアルゲームを作っている

そんな感じで11月リリース目標で脱出ゲームを作っている中、直近のunity1weekに投稿した作品(The two met)がそこそこ好評だったので調子に乗ってスマフォ向けのカジュアルゲームとして開発しています。

unity1weekではフラットな画面で二個の球を操作するゲームでしたが、製品版ではそれに加えて上の動画のようにペンギンを主人公にしたステージとクォータービューで立体的に見えるステージを用意する予定です。

当初はこの夏の間に開発してリリースする予定だったのですが後述の理由によりちょっと無理そう。

 集英社の企画に挑戦する

前回のブログでも紹介しましたが、現在、集英社の方でインディーゲーム企画の募集が行われています。

game-creators.camp

大賞は賞金100万円と開発資金援助なので狙いに行かない理由はありません。
今年の初めにunity1weekで投稿した作品(Supra animus quo)が思いのほか高評価で色んな方が褒めてくるので、これをベースにストーリーパートを加えたゲームを企画しようと思っています。

まぁ企画書だけでも応募可能なのですが、なんせ説明するのが難しいゲームなのでプロトタイプ版でも実際にゲームを作って審査員に遊んでもらってアピールするか、プレイ動画を見せてアピールする以外に賞レースに勝ち残れないと思っています。

締切が9/30までなので、それまでにデモ版がプレイ動画を作成しないといけません。それにSTG系のゲームも別企画として応募したい。もちろんプレイ動画を添えて。

脱出ゲームも作り、カジュアルゲームも作り、コンテスト用のゲームも作る・・・アレコレ手を出し過ぎて頭が痛い、という話でした。

【Unity】お手軽なCinemachineのVirtualCamera切替

出費過多

いつまでたってもiPadのDaznが「しばらくお待ちください。」エラーのまま改善されないのでiPadAirに買い直して、ついでに保護フィルムとカバーケースを購入していたら、アセットストアの半額セールにつられて衝動買いを抑えらえずにいて、尚且つ五年使ったスマホのバッテリーがいよいよ限界らしく機種変更をしないといけないし、腕時計も調子が悪いし云々で出費過多な皆さんこんにちは。

コロナ禍で外に出掛けることが少なくなり一時期出費は抑えられていたのですが、気が付けば貯金が減っていきます。先日はPCも購入したし(未だ納品されない)、どうしよう。

集英社ゲーム企画コンテスト

講談社に続き集英社の方でもインディーゲームを対象としたオリジナルゲームコンテストが開催されています。

www.koubo.co.jp

募集期間：～2021/09/30 23:59 まで
応募内容：JPEGかPDFで企画書を提出(任意でゲーム動画かデモ版を提出可)
賞・特典：大賞100万円 優秀賞10万円

応募者は事前に「集英社ゲームクリエイターズCAMP」に登録する必要があります。また、大賞作品には開発資金も提供されるようです。

こういった大手企業からのインディーゲームに対する支援企画がどんどん立ち上がってくるのは大変有難い事ですね。
きっと講談社と同じように応募が殺到すると思いますが私もチャレンジしたいと思います。

VirtualCameraの切り替え

前回の記事ではBlend List Cameraを使ってVirtualCameraの切替を行いましたが、CinemachineにおけるVirtual Cameraの切り替えは優先順位付けにより行われるのでBlend List Cameraを使わずとも優先順位(=Priorityプロパティ)を変更するだけでVirtualCameraの切り替えを行う事ができます。
しかもCinemachineは優秀なのでVirtualCameraの切替をスムーズな形で行ってくれます。

 「スムーズな」というのは例えばカメラA→カメラBに切り替えを行った場合、カット割りのようにカメラAの映像→カメラBの映像を切り替えるのではなく、カメラAの映像からカメラBの映像の間を補完しながら映像を切り替えてくれます。

なのでユーザ側から見ればカメラがA→B切り替わったとは感じず、一台のカメラがAの位置からBの位置へ移動したように見えます。

TriggerEnterで切り替える

具体例として下の図ような移動する鳥を追いかけるCameraAと地面を写すCameraBの切り替えを作ってみます。

最初はCameraBが地面を捉えた画像を表示し、

移動する鳥がフレームインしたらCameraAへ切り替えます。

切替のタイミングは前方に設置したBoxCollider内に鳥のオブジェクトが侵入した瞬間とするのでTriggerEnter内でCameraAのPriorityを高い値に変更します。

実行結果

作っている最中にちょっと欲が出たので、鳥の移動が終了したら鳥を前方から映すCameraCに切り替わるようにもしました。

 

実行結果はこんな感じ。
スクリプトではVirtualCameraのPriorityを変更してるだけですが、かなり良い感じにカメラが遷移してくれます。

【Unity】Cinemachine Blend List Cameraでカメラを順に切り替える

バックアップは大事

Unityのアップデートをしたら何故かプロジェクト内のプレハブの設定が全て初期化されて絶望の淵に立った皆さんこんにちは。
ややこしいのはフレームワークとして購入したアセットのプレハブも同様に設定値やらオブジェクトの指定やらが吹き飛んだ事で、アセットストアから再インストールしようとしても「現在は最新バージョンになってます」的なメッセージが表示されてインストールできないし、フレームワークとして使っているから一旦アンインストールするとか怖くてできないし、修復しようにも正しい設定値が分からないしで、本当に目の前が真っ暗になったのですが、サブHDDの方にバックアップがある事を思い出して何とか元に戻すことができました。バックアップは大事。

カメラの切替

Unityではシーン内のオブジェクトの動作は一旦カメラで撮影してその映像を画面に表示する、という形式のため、場面を大きく変える、違う角度から物をみる、といった時にはそれに応じてカメラを切り替える必要があります。

ただ場面に応じてカメラを逐一用意するとなるとリソースを無駄に食うし、スクリプトで切り替え処理を作るのも面倒くさい。
そういった場合にはCinemachineを利用してVirtual Cameraの切り替えをTimeline等で行う方が効率が良いと思います。
Cinemachineはunity標準のカメラ制御用のアセットでPackageMangerからインストールすることができます。
使い方についても色々なサイトで紹介されているので、それを参考にすれば導入は難しくないと思います。

【Unity】CinemachineのVirtual Camera切替をコントロールする - テラシュールブログ

【Unity】【Cinemachine】Virtual Cameraをブレンドしながら切り替える方法まとめ - LIGHT11

Blend List Camera

複雑なカメラ割やカットシーンを多投する場合はTimelineを組んで作成した方がよさそうですが、例えばステージクリア時の演出など一回限りのカメラワーク再生で良い場合は「Cinemachine Blend List Camera」を使う方が便利です。
Cinemachine Blend List Camera コンポーネントは、指定したVirtual Cameraの切り替えを指定通り行ってくれるコンポーネントです。但し、そのVirtual CameraはCinemachine Blend List Cameraの子オブジェクトとなっている必要があります。

メニューから、Cinemachine > Create Blend List Camera を選択すると

 Cinemachine Blend Camera コンポーネントが付与された親オブジェクトと、その子オブジェクトとしてVirtualCameraが付与された2つのオブジェクトが出来ます。

子オブジェクトのVirtualCameraをそれぞれ表示したい位置に設置し、角度やsize等を設定します。

Cinemachine Blend Camera側では切り替えの設定を行います。

[Hold]カメラを有効する時間
[sec]次のカメラに切り替わる時間
カメラ切り替わり時のEasingもプルダウンから指定できます。

設定が終われば実行するだけですがBlend List Cameraはこのコンポーネントが有効化されたときに一度限り再生されます。
この為、スクリプトで再生したいタイミングでBlend List Cameraを有効にする必要があります。
有効化はオブジェクトをアクティブにするかコンポーネントのenabledをtrueにします。

using Cinemachine;

CinemachineBlendListCamera _blendListCamera;

{
    …
    // 再生タイミング
    _blendListCamera.enabled = true;
    …
}

実行結果

実際の動作はこんな感じになります。

動画ではカメラが移動してズームイン/アウトしていますが、これらはCinemachine側で行ってくれます。
同じような処理を自力でスクリプトを組むとなると少し面倒なのでこれは便利ですね。