【お試し企画】Isometricな2Dの世界で3Dモデルを動かしたい

貧乏性

年のせいなのか普段の食生活のせいなのか国産の高級牛肉を食べると何故かお腹が痛くなる可哀想な皆さんこんにちは。高級肉の油に胃が馴染まないのか根が貧乏なのか、値段の高い食事をした数時間後には決まってお腹が痛くなります。もしかすると無意識のうちに懐具合を心配して胃が痛んでいるのかもしれない。庶民育ちは大変ですね。

集英社GameBBQ

集英社が主催するゲームクリエイターズCAMPのゲーム企画コンテスト「GameBBQ」
先日発表があり私の応募した企画は無事に一次審査を通過することができました。ありがとうございます。
「〇〇日に一次審査通過者を発表します」的なアナウンスなく、急にメールが届いたのでちょっとビックリしましたが吉報で良かったです。とりあえず30分ぐらいメールを読み返してはニヤニヤしていました、まぁ、審査は次もあるので油断禁物なんですが。

Isometric2.5D

先日までUnityのアセットストアにてホラー系アセットのセールが行われていたので、その中で気になったアセットを購入しました。

assetstore.unity.com

クォータービュー視点で描かれた2D背景アセットで手書き風のきれいな田舎町を舞台としたゲームが作れそう。
とはいえ、これまで3Dモデルを使ったゲームしか作ってこなかったので2Dキャラクターのアセットなど持っていないし、ストアで販売されている素材も少ないので、使い道をどうするかちょっと悩んだ結果、このクォータービュー視点で描かれた2D(Isometric)背景の上に3Dモデルを重ねる、という手法を試してみることにしました。

Isometricなタイルを並べて地面やオブジェクト(木や家、障害物等)を表現して、そこに3Dオブジェクトを映した映像を重ねれる事が出来ればこまで持っている3Dモデルの資産をゲームとして利用できそう。
3Dモデルの映像はRenderTextureを使用して平面オブジェクトに表示して、これに以前このブログで紹介したクロマキーシェーダーを利用すれば、3Dモデルだけを抜き出した映像を表示することができます。

この背景に

この映像を重ねます。

実際に動かしてみると・・・

ん？・・・

単純に重ねるだけだと背景のオブジェクトと3Dモデルのキャラクターの前後関係に齟齬が出るようです。

対応策

やはり2Dでも奥行方向(Z方向)の関係性を保つにはある程度それを意識して配置する必要があるようです。
なのでそれに合わせて3Dモデルを映した映像もZ方向の順序性に沿うように映像を映す平面を分割して配置することにしました。

こんな感じ、映像(を映す平面)を細かく均等に分割して、画面下に表示させる映像ほど手前に、画面上に行くにしたがって奥の方に配置します。

これでどうだ！

おお、なんかいい感じ

ん？・・・

ちょっと分かりづらいですが、キャラクターが壁にのめりこんでいます。未だ未だ工夫が必要なようです。

【雑記】ゲーム企画コンテストに応募するまでの激闘を振り返る

正直者のレビュー

出っ張りカメラが話題のPixel6でケースをつければ出っ張りも消えるだろうと思っていたら、ケースをつけても出っ張ったままでビックリな皆さんこんにちは。動作はサクサクで軽いのですが物理的な重さが結構あります。また、携帯を持つ手がどうしても凸部カメラの箇所を触ってしまうのでレンズが直ぐに汚れそう。

あと、キャリアにはDocomo回線を使ったMVNOを使っているのですがSIMカードを挿しただけではネットワークにつながらず、APN設定してやっと使えるようになりました。面倒くさかった。

疲れた

10月末が講談社のゲーム企画コンテスト(ゲームクリエイターズラボ)の締め切りで、集英社の同様の企画(GAME BBQ)も一足先に9月末締め切りだったので、これでひとまずゲーム企画のコンテストラッシュも終了です。

game-creators.camp

creatorslab.kodansha.co.jp

どちらも無事に企画書とデモ版のプレイ動画を添えて投稿することができたのですが、思えば7月から約4か月、自作ゲームの製作もunity1weekへの参加もすべて停止して、この2つのコンテストに応募する為の企画書(とデモ版)の作成に力を注いでいたので、それが終わった現在は魂が抜けたよう状態となっています。

本来なら停止していた自作ゲームの製作を再開するべきなのですが、燃え尽き症候群とでも言うべきなのかモチベーションがまったく上がらずUnityを起動すらしていません。
なので、これといった進捗もないので今回はこれまでの4か月間を振り返ってみたいと思います。

構想と試作の初夏(7月)

講談社に続いて集英社でもインディゲームの企画コンテストが開かれる事を知り、俄然やる気を出した夏の初め。去年から作成中の脱出ゲームの進捗があまり芳しくないにも関わらずそれを中止して応募用のゲーム企画の構想を練り始める。

取り合えず、おそらく関係ないけれど各社のイメージから企画するゲームのジャンルを決める。

• 集英社：シューティングやアクション系のゲーム
• 講談社：インディゲームらしい斬新さ重視のゲーム

講談社は1期生の合格メンバーを見るに企画の規模や派手さよりも斬新さを重視している気がしたので、地味なゲームながらもunity1weekで色んな方々に褒めて頂いた「Supra animus quo」をベースに企画を立てることにする。

unityroom.com

一方、集英社の方は「GAME BBQ」以外で「集英社支援タイトル」となっているゲームタイトルを見るにゲーム画面やキャラクターデザイン等のレベルが高く、ゲーム紹介を読んでも良い意味でインディゲームらしくないものが多い印象。

ある程度おさまりの良いグラフィックや斬新過ぎないゲーム性を用意しないと箸にも棒にも引っ掛からないと思われるので、既存の某インディゲームを参考にしながら企画を練ること決めた。あくまで参考にするだけでパクリじゃないから大丈夫。

この為、集英社側の企画は実装方法の検討も含めて一から積み上げないといけなくなる。その時の試作版がコレ

レベルデザインに苦しむ猛暑(8月)

ベースが決まっていて、且つ、締め切りが後ろの講談社向けの企画は一旦置いておいて集英社向け企画のデモ版作成に力を入れる。
前月(7月)に技術的な検証用の試作版を2,3作っていたので、それを一つに纏め上げれば良い、と高を括っていたが、ゲームの舞台造りに苦しむ羽目になった。

「砂漠の中の遺跡」を舞台にしようと考えていたが、ただ茶色の真っ平な平面にアセットストアで購入した遺跡のモデルを置いたところで全然ワクワクしないし、何より一つのアセットだけではデモ版とは言えゲームのステージとして全然もの足らない。
ステージ構成(デザイン)がちっとも頭に浮かんでこなくて自分のデザイン能力の無さに絶望を覚える。レベルデザインってやっぱり職人芸だと思う。

もう、こんな感じですよ

締め切りという名の恐怖(9月)

たかがデモ版の1ステージを作るだけなのにレベルデザインに苦しんで気が付けば9月。締め切りがどんどん迫ってくる。
集英社向け企画が終われば講談社向けの企画を作らないといけないので、9月の中旬には集英社向けの企画書を書き上げないといけない。
この為、本当は「実際にプレイできる」デモ版を作る予定だったが、間に合いそうにないので「本当にデモだけの」デモ版を作ることにする。

平日は会社から帰宅すると2時ぐらいまで、休日はほぼ一日中デモ版の制作に充てるが、それでも終わりが見えず頭を抱えていた。
ブログの記事を書くのさえ停止しようかと思ったほど。

こんな心境

しかし9月は幸運にもシルバーウィークがあったので、その期間を利用して全集中の呼吸で集英社向けの企画書を完成させる事ができました。
連休がなければ締め切りに間に合ってなかったかもしれなません。

締め切りという名の恐怖(2度目)(10月)

集英社向けの企画に応募完了したのも束の間、すぐさま講談社向けの企画に取り掛かる。
当初は「企画のベースがあるから大丈夫」「パズルゲームとジャンルは決まっているから大丈夫」とか思っていたが、集英社向けの企画作成に思った以上の時間が割かれてしまい全然余裕のない状態。
プロモーション動画に乗せるためのパズルとムービーシーンを幾つか作らないといけないのに間に合いそうにない。

「1週間に一つ以上のパズルとムービー」の作成を目標に深夜作業の日々、こちらもブログの更新を停止しようかと思ったほど切羽詰まった状況でした。

何度こう思ったことか

そんなこんなで苦戦しながらも、締め切り前日に全てのパズルとムービーを作り終わって企画書としてまとめることができました。ありがとうございます。

投稿し終わった後の心境

振り返って

取り合えずどちらの企画にも応募完了することができてホッと胸を撫でおろしています。
結果がどうなるかはわかりませんが、現状の私でできうる最大限の努力はしたつもりです。

ただ惜しむらくは、集英社向けの企画も講談社向けの企画もジャンルは違っても金銭的な支援がないと完成できそうにないゲームなので、大賞を逃してしまうとゲーム企画そのものが立ち消えになってしますことです。
どちらも苦労して企画書という形にして思い入れもあるだけに出来れば日の目を見てほしいのですが、こればかりは天に祈るのみです。

こうなることを願って・・・

【Unity】タイムラインに設定したイベントをスクリプトでキャッチする

予約購入

総選挙よりも予約購入したPixel6が楽しみな皆さんこんにちは。選挙期間中ということもあって案の定Twitterのトレンドは政治豚の下品なハッシュタグで汚染されていてウンザリですが、新しいスマホが届き次第ウキウキで写真を投稿してマウントを取りたいと思います。

タイムライン

ゲームを制作する途中で発生する数々の悩み事の一つに「ムービーシーンを制御するスクリプトが複雑になりがち」という悩みがあって、例えば以前Unity1Weekで投稿した「The two met」という作品などはゲーム本体よりもムービーシーンの制作の方に時間を取られて、それを制御するスクリプトは見事なぐらいのスパゲッティソース、見返すと無駄に長くて自分の技術力のなさにウンザリします。

unityroom.com

Unityではそういった悩みを改善するために「タイムライン」という機能を有しており、ゲーム内の演出必要な「オブジェクトの表示/非表示」「サウンドの再生/停止」「アニメーションクリップの再生」「カメラの切り替え」等々の処理を任意のタイミングで行えるようにエディタ上で設定→再生で確認を行うことができるのですが、オブジェクトのTween等の処理には対応していないため個人的にはイマイチ痒い所に手が届かない機能でした。

しかしながら、調べてみると「Signal Receiver」というコンポーネントを使用すればタイムライン上に設定したイベントをスクリプト側でキャッチできるらしい。
イベントさえキャッチできれば、後はスクリプト内でオブジェクトのTween等の処理を行えばよいので随分と使い勝手が良くなります。スパゲッティソースを作る羽目にならずにすみそうです。

手順

最初にプロジェクト内の好き場所に「Signal」というリソースを作成します。
プロジェクトウィンドウ内で右クリック→CreateからSignalを選択します。

次にイベントをキャッチしたいオブジェクト側に「Signal Receiver」コンポーネントを追加します。
「Signal Receiver」はSignalの項目で設定したSignalリソースからイベント発行を受け取り、Reactionの項目に設定したスクリプトの関数へイベントを受け渡します。

Signalの項目で最初に作ったSignalリソースを選択し、Reactionの+ボタンを押下、このシグナルによって実行したいスクリプトの関数を選択します。

次にタイムラインでAddボタンを押し、「Add Signal Track」を選択してシグナルイベントを発行するトラックを作成、GameObjectには「Signal Receiver」コンポーネントを追加したオブジェクトを指定します。

最後にSignalリソースをタイムラインのシグナルトラックへドロップして発生させたいタイミングに設定します。

試してみる

今回はSignalリソースを二つ作成し、一つは「キャラクター(猫)の移動Tween開始」のタイミング用に使用し、もう一つは「オブジェクトのサイズ変更Tweenの開始」のタイミング用に使用しました。

それぞれのシグナルで以下のスクリプトが呼ばれます。

今まではこれを一つのコルーチン内で行っていたので、随分とソースコードが簡略化されたと思います。
実行結果はこんな感じ

【Unity】クロマキーシャーダとRenderTextureで何か作る

急に秋

ついこの間まで半袖で過ごしていたのに急激な気温低下で慌てて冬物の衣服を取り出した皆さんこんにちは。天気予報で「だんだんと秋の気配が濃くなって・・・」みたいなセリフを聞くことなく急に晩秋の気候に様変わりして、近年は春と秋の期間がどんどん短くなっているような気がします。まぁ、寒かろうが暑かろうが休日ニートな人間にはあまり関係ないのですがね。

RenderTexture

前回の記事でもRenderTextureを使ったギミックを作ったように、ここ最近はゲーム制作ではRenderTextureを利用する事が多いのですが、通常、カメラの映像をRenderTextureに映す場合に「オブジェクトだけを映して背景は透過させたい」といった用途で使うことはできません。

カメラ側のClearFlags指定を「Depth Only」としても

RenderTextureで映した画像は背景が黒塗りで表示されます。

なので、前回のギミックのようにRenderTextureの映像とメインカメラの映像の境目を分からなくさせたい場合にはメインカメラの映像の映像と同じ背景を用意する必要がありました。

クロマキーシャーダ

Unity関連で大手ブログの「凹みTips」さんがクロマキー機能を持ったシャーダを公開しています。

tips.hecomi.com

これは「クロマキーシャーダ」という名前の通りTexture内の任意の色相・彩度・明度の範囲を透過させて表示するシェーダです。
ということは、背景を一色で塗潰したカメラ映像をRenderTextureに映して、RenderTextureを使うMaterialにこのシェーダを指定すれば「オブジェクトだけを映して背景が透過した」RenderTextureの画像が作れることになります。「凹みTips」さん有難うございます。

カメラ側の指定を「Solid Color」にして青色(0x0000FF)を指定

映像を映すQuadのMaterialのシェーダに「ChromaKey/Standard/Transparent」を指定し、Textureに上のカメラ映像を映したRenderTextureを指定、最後に透過させるColorに青色(0x0000FF)を設定します。

これでオブジェクトだけが映る映像が作れました。パチパチ

何か作る

背景が透過しているのでメインカメラ側のオブジェクトの上に置いても違和感なく合成することができます。

この状態でRenderTexture側のカメラに何かしらエフェクトを掛けると面白い映像になります。

試しに動く映像で重ねて見ても特に違和感はないです。

下の動画はどれがRenderTextureの映像なのか分かりやすいよう、Cube内だけ表示するようにマスキングしています。

【小ネタ】RenderTextureを利用してループする世界を作る

金欠体制

メトロイドの新作が面白そうだけどSwitchを買う余裕のない皆さんこんにちは。この前PCを新調したばかりなのにOculus Quest2も買ったし、携帯も買い替える予定だし、ルーターも買い換えたいしで端的にお金が足りません。ゼルダの新作が出る前には購入したいのですがゲーム制作で大金の援助を受けるとか、そんな幸運が降ってこない限りちょっと無理そうです。

ループする世界

ここ最近は講談社のゲーム企画コンテストに向けたプロトタイプ版を作成しているのですが、その作業中に思いついたギミックを作ってみました。

ちょっと分かりづらいかも知れませんが、走る騎士がループして元の位置へ戻る直前に同じ騎士の姿が後方に見ることが出来ます。

これは二体の騎士が動いているのではなく、同じ騎士が違う位置に見えているギミックとなっています。

このタネを説明すると、後方側(画面左側)に見える騎士が本物で、前方(画面右側)に見える騎士は後方側をカメラで映した映像の騎士です。

つまり画面右側の映像は実際の映像(MainCameraの映像)ではなく、後方側の映像がRenderTextureを利用した平面に写されているだけです。

Sceneビューで見るとこんな感じ

この状態でRenderTextureとの境目位置にあるゲートに騎士が接触したら、騎士を後ろのゲート位置へ移動させるとループする状態が出来上がります。

ループするオブジェクトが一体だけだと分かりづらいので三体ぐらい並べてループさせると中々面白い映像になります。

まぁ、このギミックがゲームの中で何に使えるかというと微妙ですが・・・

【アセット紹介】文字を3Dメッシュ化する Modular 3D Text

副作用

ワクチン接種(2回目)の副作用で高熱と頭痛に悩まされている皆さんこんにちは。1回目は腕が痛くなっただけなんですがね、2回目でこんなに副作用が出るとは思いもしませんでした。これで3回目も受ける事になったら副作用はもっと激しくなるのでしょうか?反ワクチンではありませんが、ちょっと副作用が怖くなりました。

アセット紹介

そんな訳で体調がすこぶる不良なので今回は軽くアセット紹介

以前から気にはなっていたのですが、最近アセットストアで割引されているのを見つけたので購入したアセットです。

assetstore.unity.com

アセット名の通りにテキストを3Dメッシュ化するためのアセットで、指定した文字列の各文字を個別のオブジェクトとして生成することができます。

導入法

導入は簡単でHierarchy上で右クリックメニューから3D Object→Modular 3D Text→Textを選びます。

シーン内に「Text(M3D)」オブジェクトが生成されます。Hierarchyを確認すると各文字がそれぞれ個別にオブジェクトとして生成されていることがわかります。

「Text(M3D)」には「3D Text」のコンポーネントがアタッチされており、このコンポーネントの設定を変更する事で生成する文字列やサイズ、色等々を変更します。

設定はエディタ上でリアルタイムに更新されるので編集は非常に簡単です。フォントは約50種類用意されています。TTFファイルから新規に3Dフォントを作成することもできます。

エフェクト／アニメーション

シーン内にTextを表示するだけならTextMeshProでも良いのですが、こちらのアセットの場合は各文字が個別にオブジェクト化しているので文字列に対してエフェクトやアニメーションをつけることができます。

プリセットとして簡単なエフェクト／アニメーションが用意されているので、「3D Text」のコンポーネントのModulesの設定に追加するだけでそれらのエフェクト／アニメーションを使うことができます。

使用例はサンプルシーンで確認することができます。

使いこなすことが出来れば色々と面白い演出が作れそうですね。

【Unity】小ネタ：複数マテリアルの一部をスクリプトで変更する

息を吐くように愚痴を言う

朝夕がめっきり涼しくなって秋の気配が濃くなってきましたが昼間は暑かったりして未だにポロシャツを着ている皆さんこんにちは。季節的には着ていたら可笑しいそうです。後輩に指摘されました。余計なお世話です。
シルバーウィークも終わり、11月にならないと祝日が無いばかりか、3連休も年内はない事を知り、且つ、PMには「年内は稼働をあげて(＝残業して)作業してください」と宣告されて、例の100日後に〇〇する47歳の如く、モチベーションがゼロ底辺を彷徨う状況となっています。ええ、残業しても残業代はもらえないし。

一応、集英社のゲーム企画応募の方はプロモーション動画も企画書も完成して応募する事ができたのですが、次に待っている講談社向けの企画について作業する情熱が中々燃え上がってきません。
心を燃やせ、と言われても早々燃えないです。きっとゴミだったら燃えないゴミの方に分別されると思います。

間違い探し

とか言いながらも締め切りは差し迫っているので、作業を進める為、プロモーション用にパズルゲームを作っている最中です。

こんな感じの間違い探し(直し)ゲーム
左のジオラマと違うところをクリックして同じ状況に修正させるのですが、修正する「間違い」の中にはオーソドックスに「色違い」も存在します。

「色違い」だとmaterialのcolorを変更すれば良さそうですが、そうすると同じmaterialを使っている他のモデルにも影響が出るので、colorの変更は行わずmaterialそのものを変更する事になります。

textureを使用しているmaterialならtextureを変えれたmaterialを用意すれば良さそうですが、そうでなく下のように複数の色のmaterialで構成されているモデルの場合、狙った箇所だけmaterialを変更する必要が出てきます。

当初は

gameObject.GetComponent<Renderer>().materials[1] = mat;

上のコードのように配列中のIndexを指定して、ORANGEのmaterialを別の色のmaterialに変更すれば良いと思ったがこれでは動作しませんでした。
調べた結果、以下のように配列ごと入れ替えると動作します。

Material[] tmp = gameObject.GetComponent<Renderer>().materials;
tmp[1] = mat;
gameObject.GetComponent<Renderer>().materials = tmp;

これで実行すると

こんな感じ、上手い具合に狙った個所の色だけが変わるようになりました。