【Unity】Dotweenを使ってMaterialのTiling,Offsetを操作する

制作意欲

「家に帰ったら直ぐにゲーム制作に取り掛かろう」と帰るまでは制作意欲が高いのに帰宅した途端Youtubeの動画視聴で時間を潰してしまう皆さんこんにちは。もっぱら色んな配信者のゲーム実況動画を見ているのですが、つい先日は某〇ーバーイーツを題材にしたホラーゲームを有名どころの実況者や有名声優含め各配信者が示し合わせたかのように一斉に取り上げていて、ゲーム内容よりそっちの方がホラーだなと感じました。そこまで出来の良いゲームだとは思えないのですがね、どちらかと言えば卵転がすゲームの続編の方が見たいです。

何となくですがインディー系のホラーゲームはゲーム実況者専用のジャンルになりつつある気がします。つまり一般の人は実況動画を観て終わる、みたいな。

作る側からすると(売上が伸びないので)手を伸ばしづらいジャンルのように思えて、そういえば某ホラーペンギンゲームも「ゲーム実況されても売れない」と呟いていたし、中々厳しいですね。

いろんなジャンルのインディゲームが売れるようになれば良いのですが。

TilingとOffset

さて、3DオブジェクトのMaterialには大抵Tiling(タイリング・繰り返し)とOffset(開始点)を編集する項目が設定されています。

これらはMeshRendererなどに適用するTextureの設定で、例えば壁面などのMeshの大きさが場所によって変わる場合でもTextureが伸縮されず外観に違いがでないようにする為に使用されます。

先月のunity1weekではこの設定を利用したパズルゲームを作成しました。

RenderTextureのTilingとOffsetを変えることで一枚絵をバラバラに分割したようなパズルが作れます。

www.karvan1230.com

上のリンクで作成しているゲームでは各パネルでTilingとOffsetの値は固定ですが、これをスクリプトで動的に変更できればもっと複雑な表現ができます。

みんな大好きDotween

Dotweenはオブジェクトの移動、回転、伸縮等のTweenを行う際に利用されるアセットですが、実はMaterialに対するTweenも用意されています。

• 色を変更する：DOColor,DOGradientColor
• 透明度を変更する：DOFade
• シェーダーのプロパティ値を変更する:DOFloat,DOVector

これに加えて

• タイリングを変更する：DOTiling
• オフセットを変更する：DOOffset

があります。

ここで特定のカメラで撮影された映像が映るRenderTextureを用意し、それをMaterialとしたQuadをゲーム空間に設定

このQuadの大きさが変わるに合わせて、DOTilingとDOOffsetでRenderTextureのタイリングと開始点が変わるようにします。

これを実行してみると・・・

部屋の中を映す窓が小さくなっていくような絵となります。

もうちょっと応用して二つぞれぞれ別の映像が映るQuadで同様の処理を行うようにすると・・・

中々不可思議な絵を作る事ができました。

ゲーム内で取り入れると面白い演出が作れそうですね。

【Unity】Unity Recorderを使ってゲーム画面を記録する

論争

「エヴァってロボットアニメなんですよ」という発言が論争を巻き起こしているというニュースを見てそんな論争があったことを始めて知った皆さんこんにちは。エヴァヲタは論争が好きですね。論争というよりマウント取りのような気もしますが。

 Unity Recorder

巷にあふれるインディゲームを紹介するIndie Live Expoという配信イベントがあるのですが、このイベントでは個人製作のゲームでも紹介して頂けるという事で、それなら私も制作中の脱出ゲームを紹介してもらおう→プロモーション動画(15秒)が必要→と言う訳でゲーム画面をキャプチャした動画を作らないといけません。

indie.live-expo.games

これまではScreenToGifというフリーソフトを使って画面をキャプチャし動画を作成していたのですが、このソフトでは音声は録音できないため動画のみを作成し、後で別の動画編集ソフトで音声を追加する必要がありました。

今回も従来と同じ手法で作ろうかと思ったのですが、Unity2019からゲーム画面を記録する「Unity Recorder」というPackageが公開されているので折角ならこれを使ってみよう、と思い立ち導入することにしました。

ちなみにこのPackageはあくまでUnityエディタ上のゲーム画面を記録するPackageなので他のゲームアプリのキャプチャには使用できません。

導入は簡単でメニューのWindow→Package Managerを選択し、起動したPackage Managerの画面から「Unity Recorder」を選んでInstallボタンを押すだけ。

Installが完了したら上部メニューのWindow→General→Recorder→Recorder WindowでUnity Recorderを開く事ができます。

ゲーム画面を記録する

Unity Recorderを開いたら「+Add New Recorders」をクリックして最初に録画方法を選びます。

• Animation Clip : 任意のゲームオブジェクトの動きを記録
• Movie : Game画面などをMp4,WebM動画で記録
• Image Sequence : 各フレームを連番画像で記録
• GIF Animation : Game画面などをGIF動画で記録
• Audio : ゲーム中の音だけを記録

Movieの場合は音声も録音するかどうか選ぶことができます。また、ゲーム画面だけでなく指定したRenderTextureに描画される画像をキャプチャすることもできます。

Unity RecorderのSTART RECORDINGボタンを押すか、Unity Recorderが開いた状態でUnityエディタのPlayボタンを押してゲームを再生すると録画が開始されます。

停止する場合はエディタの再生を停止するかUnity RecorderのSTOP RECORDINGボタンを押すと停止します。

録画の一時停止はできないのでゲーム再生中にSTOP RECORDINGボタンを押し、後にSTART RECORDINGボタンを押した場合はそれぞれ別の動画として記録されます。

START RECORDINGボタンを押して開始→ゲームを停止すると指定フォルダに動画が作成されている

このように気軽に録画することができますが、キャプチャとエンコードを同時に行っているらしく録画中は結構重たい動作となります。 

 まぁ音声が同時に録音できるというのはかなりのメリットだと思います、SEとかも録音されるので後の動画編集がかなり楽です。

で、実際にUnity Recorderで録画し、Indie Live Expo用に編集した動画(15秒)は以下の通り

youtu.be

サンプリングレートの関係か実際のプレイと比べて若干動作が早めとなっていますが、画面自体は結構奇麗に録画されていると思います。

さぁ、後は資料を作って投稿するだけ。そう、資料を作って・・・

【雑記】2021年度の活動目標

新年度

4月になり新年度を迎えて新入学や新生活やらの話題が飛び交っている中で何一つ変わらない日常を過ごしている皆さんこんにちは。ゆとり教育はとっくに終わったと思っていたのですが最近では入社式に親が同伴するらしいですね、小学生か。そりゃ「うっせぇわ」みたいな歌が流行るはずです。まぁダウンロードしたけれども、日に2,3回は聴いているけれども。

社会への反抗からいきなり飲み会の席のマナーの話に代わるのがアホっぽくて好き。ちなみに串焼きの串を勝手に外すと怒られるケースもあるので注意が必要です。

現在の活動

このブログでネタがない時に度々進捗を取り上げていますが、一人称視点の3D脱出ゲームを現在制作中です。タイトルは「W.T.」。

ループする館内に配置された数々のパズルを解きながら、主人公の目的と館の正体を探っていくゲームとなっています。プラットフォームはPCでSteam辺りでリリースしたいと思っています。

動画の通り基本的に白一色でゲーム画面を構成しています。ただ白色だけでは視認性が悪いのでゲームのコアとなるパズルに関する物には色がついています。

館内には主人公が書いたと思われる手記や主人公宛の手紙等が散らばっているので、それを探して読み進めることでストーリーが進行します。

現在の進捗度は50%あたりでしょうか。ストーリー構成は最後まで出来上がっているのですが、パズルのネタ探しに頭を悩ませています。なんせストーリー上50個程度のパズルが必要なんですが、現在のところ25個しか完成してないし、館内の部屋も半分ぐらいしか出来上がってません。

これに加えて

一つのゲームを作りづけるとどうしても行き詰ってくるので、息抜きも兼ねて今年の年明けからカジュアルゲームも作り始めました。猫が主人公となるので自分の中では「猫ゲー」と呼んでいます。

2,3個のカジュアルゲームをムービーシーンで繋いでいく形式でボリューム的にはプレイ時間が10～20分ぐらいになる予定。

ボリュームが小さいのでWebGL版をunityroomで発表できればなぁ、出来れば毎年GW辺りで開催されているroom6gamejamにあわせて投稿したい(レギュレーションとしてunity1weekには投稿できないので)と思っています。

とは言え、現在はムービーシーンの一部しか出来ていないけど。

活動目標

というわけで現状を踏まえて2021年度の活動目標として

•  脱出ゲーム：7月ぐらいまでに完成→Steamでリリースする
• 猫ゲー：room6gamejam向けの作品としてunityroomに投稿する

加えて

• IndieGame Incubatorに応募する(4/18まで)
• Indie Live Expoに「W.T.」をエントリーする(4/19まで)
• 講談社のゲームクリエイターズラボ二期生に応募する
• インディーゲームの展示会に出展する

以上6項目を立てたいと思います。何個達成するでしょうか。

まぁ、IndieGame IncubatorとIndie Live Expoに関しては締め切りが近々なので早々に達成しそうですが肝心のゲーム制作が予定通り進むかどうかはちょっと弱気。

【Unity】3Dオブジェクトの上にuGUIを表示させる

寒の戻り

講談社が主催しているゲームクリエイター向けのDiscordに参加したけれど会話についていけずにただ眺めているだけの皆さんこんにちは。とりあえず自己紹介と作品紹介は頑張って投稿しました、反応はあまりないけど。

ただ、Discordに投稿された記事を眺めていると「こんなにもゲーム作りに情熱を注いでいる人がいるんだ」と層の厚さに驚くばかりで、交わされている会話内容も技術的な物から広報プラン的な内容まで多岐に渡っていて勉強になります。

私的にはちょっと腑抜けた状態というか、毎回unity1weekに参加する時には作品を制作→投稿するだけでなく、ブログで制作期間中の振り返り記事や作品の中で使用したアセットや技術的手法についての記事を書くまでを一区切りと考えているので、その作業全てが終わってしまった現在は「寒の戻り」とでもいうか、ゲーム制作熱がちょっとした小康状態となっているので、これからまた心を燃やしてモチベーションを上げていきたいと思います。

オリジナリティ

そのDiscordで気になった話題があって、それは「制作中のゲームの画面デザインが某有名ゲームに類似している事についてパブリッシャー等々から指摘されることが多い、どうしたら良いか」という相談、寄せられた意見としては「某有名ゲームのフォロワー(に見える)的作品は数多いから変えたほうが良い」というものが多かったのですが、私的には「それで製作者の個性が表現されるのであればそのままで良い」と考えます。

某ゲームに似てるからといってデザインを変えたところで、結局何かしらのゲームと類似点を指摘されるのは避けられないし、何より「真似してやろう」と思って作っているわけでもないのだから、似ているからと言って作品の中に製作者のオリジナリティが無いとか、否定されるべきとか、という批判は的外れで考慮する問題ではない、と思うからです。

製作者が「これが自分のゲームです」と胸を張って言えるのなら、既存のゲームに似てる似てないといった問題を考慮し過ぎる必要はないと思います。

(それでソフトの売上が上がるとかは別問題だけど)

一人称視点

現在、一人称視点で移動する3Dの脱出ゲームを作っています。

3Dゲームなのでドアや棚などのオブジェクトは3Dのゲーム空間内に配置されるのですが、プレイヤーに視点の先にあるドアノブをクリックしてドアを開ける、といった動作をさせたい場合、ドアノブ近辺に「ここら辺をクリックしてね」的なアイコンを表示させてクリックを促します。

この処理を単純に考えると、プレイヤー側の視界となるCollider内にドアノブに設置したColliderが入ってきた時にドアノブのColliderの位置にアイコンを表示させれば良いとなりますが、そのまま素直に3D空間内にSprite等のアイコンを表示させると

• アイコンがカメラの方を向いていない(歪んで表示される)
• アイコンの大きさが一定でない(離れると小さく見えずらい)

といった問題が発生します。

この為、制作中のゲームでは3Dオブジェクトが映っているスクリーン位置にuGUIのImageを表示する、といった処理を行っています。

Camera.WorldToScreenPoint

CameraコンポーネントのWorldToScreenPointメソッドはワールド空間のpositionをスクリーン空間座標に変換することができます。
スクリーン空間座標は画面の左下端を(0,0)として右上端は(pixelWidth -1,pixelHeight -1)となる座標です。

試しにクリックした先の3Dオブジェクトの上にTextMeshを移動させる処理を作ってみます。

クリックしたオブジェクトの位置(position)はRayCastを使って取得できるので、その位置をWorldToScreenPointでスクリーン空間座標に変換してその位置へTextMesh(下のソースのIconObj)を移動させます。

上のソースを実際に動かしてみると

うまい具合にオブジェクトの位置へ移動させることができました。

【Unity】RenderTextureを使って動くパズルを作る

Instagram

ゲーム制作の進捗具合をInstagramでも投稿しようとアカウントを作ったけれどPCで投稿しようと思ったら案外面倒くさくて断念した皆さんこんにちは。なんで一回デバッグモードにせなあかんねん。

それから検索画面を開くと何故か女性のグラビアが大量に並ぶのですが何故でしょうか？特にそういったワードで検索した覚えはないんですがね。まぁ有難いけれど、タップして見ちゃうけれども。

たまには素直に喜ぶ

Unity1weekの評価期間が終わり結果が発表されました。私の「Supra animus quo」は予想外に高い評価を頂いて驚いています、ありがとうございます。

評価点やランキングは随時変わっていくのですが、結果発表日(3/14 23:00頃)のランキングでは絵作り、サウンド、雰囲気の3部門で3位内に入り、総合でも3位となりました。

他の項目もTop50内のランキングに入っており、私のUnity1week投稿作品の中では最上位の結果となりました、素直に嬉しいです。

◇楽しさ

◇操作性

◇斬新さ

制作中はパズルゲームなのにパズル数は少ない(計7つ)し全体的に地味な作品なので「斬新さ」辺りでランキングに入ればなぁ、と思っていたのですがコメント欄を拝見すると作品の雰囲気と演出面を高く評価して頂けたようで本当に有難い限りです。

今後もこれを継続できるように頑張ります。

 動くパズル

Unityでゲーム制作をしている大抵の方なら察しがついているかと思いますが、今回の作品のメインとなっている絵が動くパズルはRenderTextureを使って実装しています。

RenderTextureはカメラで撮影した映像をTextureとして使える機能で、主に鏡的なオブジェクトやミニマップなどで使われるケースが多いです。

作り方は簡単でCameraのTextureTarget欄に映像を出力したいRenderTextureを指定

このRenderTextureをTextureとして使用するMaterialをQuadなどの平面オブジェクトに設定するだけです。(シェーダーはStandardで構いません)

ここで注意が必要なのは、映像を表示する平面オブジェクトのアスペクト比はカメラ(=スクリーン)のアスペクト比(3/30訂正)RenderTextureのSize設定に合わせないと歪んだ映像が表示されるという事、スクリーン指定Sizeの設定が16:9なのに正方形の平面にRenderTextureを設定してしまうと全体が圧縮されたような画像となってしまいます。

ここから本題

この状態からパズルを作るとしたら、現在一枚の平面に映されている映像を複数枚のパネルに分割して映るようにできれば良いわけです。

例えば画像を4分割したパズルを作る場合、左上のパネルにはRenderTextureの画像の左上1/4部分だけが映ればよい。

 これを逆に左上のパネルを基準として考えると、RenderTextureを4倍に引き伸ばした映像の左上部分を映せばよい、となります。

なのでMaterialのTiling(繰り返し)とOffset(開始点)を左上用に編集します。

TilingをX,Yどちらも0.5とすることでRenderTextureを4倍に引き延ばし、OffsetはRenderTextureの位置として(0,0.5)を指定、これで左上部分だけを切り出したパネルが完成します。

後は同じ手順でOffsetを変更して残りのパネルを作ります。

これで4分割されたパネルが完成。このパネルをバラバラの位置へ移動させておけばパズルとして成り立ちます。

課題

「Supra animus quo」では8分割,16分割したパズルもありますがこれも同じ要領です。Tilingで引き伸ばしてOffsetで位置を指定するだけ。

ただ、今回はWebGL向けということで画面のアスペクト比を固定として作る事ができましたが、これをスマートフォン向けで作る場合は各端末で画面のアスペクト比が異なるため、このままでは上手くいかないと思います。

 スクリプト側で画面のアスペクト比に応じてMaterialの設定を変えるか、平面オブジェクトのサイズ(アスペクト比)を変えてあげれば同じように作れますが、ゲーム画面全体のデザインに齟齬が生まれてくると思うので、もう一工夫が必要です。

(3/30 訂正)

画面のアスペクト比によらずRenderTextureのSize設定に依存するみたいです。

試しに画面のアスペクト比3:2の設定で、Sizeが(800,450)の RenderTextureを表示しても問題ありませんでした。

【雑記】Unity1weekを振り返る

映画

会社の同僚が急遽有給休暇を取ったので何事かと思ったら、「シン・エヴァンゲリオンを観る為」だと知ってビックリした皆さんこんにちは。私も今回の映画でスッキリ終わってくれるなら観に行くつもりですが、どうなんでしょう？また全員が拍手して終わる、とかないよな。

Unity1Week

いつの間にか評価期間が二週間となったので未だに終わってはいないのですが、開発者の視点からすると作品の投稿を終えてアップデートする予定もないので最早終了した気分です。

unityroom.com

この手のイベントは主に開発者同士が批評しあうので、どうしても褒め合いの様相を呈するのですが、今回私の作品に寄せられたコメントを拝見すると、(私からすると)それ以上に最大級の褒め言葉がズラズラと並んでいるので、有難いと言うより逆に怖いです、どうしよう。いえ、ありがとうございます。

下のリンクから遊べるので未だプレイしていない方は是非遊んでください。簡単なパズルゲームです。

unityroom.com

振り返る

今回の作品で登場するパズルは単純なアイデアから生まれたのですが、なぜか前述のように沢山の方が「凄い、凄い」と褒めてくるので、ここでその技術な解説(ネタ晴らし)をすると「なぁんだ・・・」とか思われそう、よってネタ晴らしは評価期間が終わった次の更新で行う事にしました。今回は開発期間の振り返りです。

■0日目(～2/21)

直前に線を描画するアセットLinefyを購入していた為、それを生かしたゲームをアレコレと構想する。

元々unity1weekに投稿する作品はお題から作品を構想するのではなく、作りたいと思ったゲームをお題に合わせる形で作っていくので、お題の発表前に上の動画のようにLinefyで描かれたグリッド上をオブジェクトが移動するゲームを構想する。

グリッドの交点で方向を変更しながら障害物やら敵やらを避ける、グリッドの交点がBGMのリズムに合わせて流れてくるようにするとリズムゲーっぽくて面白そう、とかそんなことを考える。

■1日目(2/22)

お題が発表され今回は「回」になったことを知る。

「回」だから何かしら回っていれば良いんでしょう、と開き直って自機が自転しながらグリッド上を動くゲームを作りだす・・・

が、

どうやってもGROOVE COASTERの劣化版にしかならない事に気づく、グリッドの交点がリズムに乗って流れてくるとかそのまんまじゃないか。

というわけで練り直し。とはいっても時間はないので、作成中の脱出ゲームの方で使おうと思っていたパズルのネタを引っ張り出して実装してみる。

そしてこれが案外うまくいった

 

■2日目(2/23)

思っていた通りにパズルは作れそうだが、普通のパズルゲームみたいにステージ制にするのは辞めようと誓う。

なぜならステージ制にするとある程度数を作らないといけないし、ステージ選択のUIも用意する必要があるし、同じ事の繰り返しでユーザも途中で飽きるだろうし、何よりもう一度書くけど数を作らないといけない＝面倒くさい。

なので美術館の絵画のようにパズルが並んでいて、それをLinefyで描かれた線で繋ぎ、その線に沿ってプレイヤーが進んでいく、という形を思いつく。我ながら天才。これならそこそこの数で済むし。

というわけでこの日はオープニングのイベント部分を作って満足して終了

■3～5日目(2/24～2/26)

パズル制作に没頭する、とは言え平日なので一日にパズル一つしか作れない。各パズルのロジックは共通だけどカメラ位置とかオブジェクトの配置等の微調整に結構時間が取られる。でもまぁ、パズルを作ってしまえば後は線で結ぶだけだしぃと、この時までは開発期間内(2/22～2/28)に開発が終わると踏んで気楽だった。

■6日目(2/27)

土曜日なのに会議をするという自社からの嫌がらせを受ける。会議とはいっても9割は暇だったので合間に今回の作品についてアレコレ考えていると、悪魔的なささやきが脳裏をよぎる。

パズル毎に場面(シーン)が展開するようにしよう。

それまでは広い空間に並んでいるだけだったパズルを、パズル毎に海だったり平原だったりの場所に配して、パズルを解く毎に場面が展開するようにしたら面白いんじゃないか、そんな考えが頭をよぎり、会議そっちのけで構想を巡らす。当然期間内に開発が終わらないことになるけど。

■7日目(2/28)

公式では開発期間最終日。

当然間に合うわけはなくパズルを配置する舞台づくりとその間を移動するロジックづくりに精を出す。バグ多発、一つ解消したら次のバグが生まれてくるとか嫌になる。

■8～10日目(3/1～3/3)

平日なので殆ど時間がとれないが何とか一通りパズルの間を移動できるようになる。

大変だったのは後半の方のテストをしようと思っても、ゲームを一から進めないといけないので目的の場所に辿り着くまで時間が掛かる事、オープニングのパズルとか何回やっただろうか。

10日目(3/3)の夜にエンディングまで完成するもWEBGLのビルドが全然終わらず投稿は翌日に持ち越しとなる。

■11日目(3/4)

会社から帰宅して速攻unityroomに投稿する。ありがとうございました。

まとめ

振り返ると開発途中で思いついた色々なアイデアが運よく融合できて良かったなぁ、という事と、相変わらず期間内に開発が終わらない、という反省点が残ります。

特に開発途中でアレコレ思いついて当初の構想と異なる作品ができるのはいつもの事なんですが、それが今回は(コメント欄等を拝見すると)良い方向に転がったのではないでしょうか。

未だ評価期間は終わっておらず最終的な評価は分かりませんが、これがラッキーパンチにならないよう、今後も精進していきたいと思います。

【雑記】終わりそうで終わらない一週間

助成制度

日本ゲーム文化振興財団に助成制度がある事を知り、さっそく応募要件を調べたら当の昔に助成の対象外だったことを知ってショックを受けた皆さんこんにちは。年齢差別良くない。

Unity1Week

前回の記事でも触れましたがunityroomというサイトでunity1weekというイベントが開催されています。

unityroom.com

今回は前回の開催から期間が短く、また何かしらのイベントと連動しているわけでもないので参加者は少ないのかな、と思っていたのですが意に反して前回と同じぐらいの作品数が投稿されているようです。

イベントのスケジュールして現在(3/2)は開発期間が終わり評価期間のようですが、私はいつもの通り開発期間継続中なので、unityのSceneビューと睨めっこしならがら片手間にこの記事を書いている状況です。ビルドも出来ていません、どうしよう。

こんな気分

本来なら今回の作品で用いた手法についてアレコレと解説した記事を書く予定だったのですが、なんせバグを一つ潰したと思ったら別のバグが発覚して、それを直した影響で一部が作り直しになったりと、例の金融系システムも真っ青な魑魅魍魎っぷりなので・・・いや、これはみ〇ほの方が酷いか、そんな感じなのですが、取りあえずは完成したい。

頑張ります。