2022-10-04

【アセット紹介】ポストエフェクトの種類を増やす「SC Post Effects Pack｣

横並び

どうして大手Vtuberの方々は同じ時期に同じゲームを横並びに実況するんだろう、と疑問に思う皆さんこんにちは。ここ2,3週は某水鉄砲ゲームばかりで、これからは某インディメーカーのホラーゲームばかりになるんでしょうか？あれだけ人数がいるのですから、一人ぐらいは埋もれたインディゲームやレトロゲームなどを取り上げてくれる方がいると有難いです。

SC Post Effects Pack

UnityからPostProcess Stack V2(以降 PPSv2)がリリースされて以降、ポストエフェクトを利用する機会が増えた方もいると思います。
今回紹介する「SC Post Effects Pack｣はそのPPSv2の拡張するAssetとなります。

標準として公開されているPPSv2に34種類のエフェクトを追加するアセットで、BUILT-INでもURPでも使用できます。(HDRPは不可)
34種類ということでかなり数が多いのですが、各エフェクトの効果をなまず(@namazuchin)さんのブログで画像付きで紹介されているので参照してください。

blog.ynr.jp

導入法

PPSv2の拡張Assetなので、前提としてPPSv2が必須となります。
なのでこのAssetの導入前にPackageManagerからPPSv2をImportしておきます。(こちらは無料です)

そして「SC Post Effects Pack｣をアセットストからImportしたら、最初にPPSv2を導入する手順を行います。

が、ちょっとややこしいので順に説明します。

1.PostProcess用のLayerを追加

Inspectorウィンドウで Layer を選択して「Add Layer…」からレイヤーを追加します。好きな名前でよいのですが、ここでは分かりやすいように「PostProcessing」と名づけます。

2.カメラに「Post-Process Layer」コンポーネントを追加

PPSv2を適用したいカメラ(主にMainCamera)に「Add Component」で「Post-Process Layer」コンポーネントを追加します。
そして、「Post-Process Layer」コンポーネントの Layerに1.の手順で追加したLayer「PostProcessing」を指定します。

3.「Post-Process Volume」オブジェトを作成

メニューの「GameObject」から「3D Object」->「Post-Process Volume」を選択し、「Post-Process Volume」オブジェクトをシーン内に追加します。

作成した「Post-Process Volume」オブジェクトのLayerには1.の手順で追加した「PostProcessing」を指定します。

4.「Post-Process Volume」オブジェトの設定

最後にPost-Process Volume コンポーネントにて「IsGlobal」にチェックを入れ、「Profile」で「New」ボタンを押してエフェクトの詳細を記録するProfileを作成します。

このProfileにはこれから追加する各エフェクトの詳細設定が記録されるため、同じ効果を他のシーンでも導入したい場合は、このProfileを指定すれば同じ詳細設定が各エフェクトに適用されます。

後は「Add Effect」から追加したいエフェクトを選び追加していきます。

標準のPPSv2のエフェクトに加えて「SC Post Effects」のエフェクトが追加されているので好きなエフェクトを選んで下さい。

Unity1Weekで使ったエフェクト

今回のUnity1Weekでは絵作りとして少し古めのPCゲームを意識したので、レトロな画面になるエフェクトを使いました。

最初にエフェクト無しの状態がこれ

これにScanlines(走査線)のエフェクトを付与すると

今は亡きブラウン管で映されたような画面となり、レトロ感がでます。

次にDitheringでチェッカーパターンの黒のドットを配置するエフェクトを追加。

大昔は使える色数が少なかったのでこのようにドットを並べて色の濃淡を表現していました。

最後にEdgeDirection(エッジ検出)でエッジを付けます。

このAssetのエッジ検出が秀逸なのはエッジ検出の手法に従来の良くある「深度を基準に検出する」「法線ベクトルを基準に検出する」「深度と法線ベクトルを基準に検出する」に加えて「輝度を基準に検出する」手法も選ぶことができる点にあります。
(他にソーベルフィルタを使ったエッジ検出もあります）

「輝度を基準に検出する」手法により影の部分もエッジとして検出できるので、全てに縁取り線が描かれた漫画チックな絵柄ができます。

ここまでくると元の画像と比べて随分と変わったことが分かると思います。
80年代後半のPCゲームっぽい絵柄になったと思うのですがどうでしょうか？

2022-09-27

【雑記】unity1weekを反省する

Unity Unity1Week

シルバーウィーク

とりあえず「連休中どこに行った？」という質問には耳を塞いでいる皆さんこんにちは。三連勤が三連休で挟まれるという珍しいシルバーウィークでしたが、前半の三連休は西日本が、後半の三連休は東日本側が台風被害に見舞われるという、これもまた珍しい一週間でした。
幸いにも私の住んでいる場所ではそれほど被害が出なかったのですが、場所によっては停電、断水等が続いているようで、一刻も早い復旧を祈っています。

Unity1Week

シルバーウィークの最終日にunity1weekの結果が発表されました。
私の投稿した作品は残念ながらそれほど評価を得られず、部門別ではランクインしたものの、総合ではランキング外となってしまいました。

◆部門別

楽しさ:3.31
絵作り:4.262(39位)
サウンド:3.81
操作性:3.071
雰囲気:4.214(36位)
斬新さ:3.452

「楽しさ」「操作性」の評価が芳しくなかったのが原因ですが、個人的には「雰囲気」「斬新さ」の項目が思うほど評価が伸びず、世間は甘くないなぁ、という感想です。

作った物

画面内に表示される[文字]をクリック＆ドラッグして進める脱出ゲームです。

80年代後半あたりのPCアドベンチャーゲームを意識してデザインしてみましたが、寄せられたコメントを拝見すると特にその点に関しての指摘が無かったのでうまく伝わらなかったのかもしれません。

内容はチュートリアルを含めて3ステージ＋ほぼイベントのみのステージとエンディングで、実際に遊んでみるとボリューム不足に感じると思います。ここら辺も評価が伸びなかった原因でしょうか。

まぁ、作業期間的にこれで手一杯だったので仕方ないといえば仕方ないのですが、各ステージ(特に公園のステージ)はもうちょっと凝った作りに出来たかなぁ、という反省もあります。

反省点

unity1weekでは毎度のように遅刻での提出となるのですが、今回はその中でも恐らく最長の遅刻になってしまいました。

元々unity1weekではお題に合わせてゲームを構想するのではなく、その時に作りたい物をお題に合わせる形でデザインしていくのですが、その中で今回の作品でどうしても作りたかった仕組み(システム)とお題とのすり合わせがマッチするまで時間が掛かったこと、作りたかった仕組みの実装に意外と時間が掛かったことが原因だと思っています。

作りたかった仕組み(システム)とは、下のようなTextベースのファイル(シナリオファイル)に沿ってゲーム内のオブジェトやUIを制御する、といった仕組みでこちらの方はまぁうまく実装できたと思います。

今後の資産としも生かせそうなので、次にunity1weekに参加する際には今回作ったシステムをベースにして作品を作ろうかと思っています。

最後に

投稿した作品のリンクとプレイ動画を下に載せます。
出来れば遊んでいただきたいのですが、それが億劫な方は動画でも見て頂けると幸いです。

unityroom.com

youtu.be

2022-09-13

【雑記】Unity1Weekが終わらない

スプラトゥーン3

ゲーム開発者なのにスプラトゥーンのような有名どころのゲームを触ったことがない皆さんこんにちは。正直に告白するとスマブラもFFもポケモンも遊んだことがありません。なので好きなポケモンとか答えられないし、『エアリス生存ルート』とか話題に上がっても意味が分らないし、FF7のリメイク版CMとか一切共感できませんでした。勝手に「誰しも遊んだことがあるはず」的な扱いされても困ります。

Unity1Week

先週はUnity1Weekでした。決められたお題に沿ったゲームを一週間で作成して投稿する、というイベントです。

unityroom.com

私もゲーム開発者の端くれとして参加しようと意気込んだのですが。。。開発期間は日曜が締め切りでしたね。
今週から二週間が評価期間となり、早速投稿された作品がTwitter等で話題になっていますが、私の方はというと

。

ええ、、、現在も絶賛開発中です

こんな感じですよ。

まぁ、何を作ってるのかというと

Click&Dragのゲームで、今回のお題が「ためる」ということなので、どこかしらに何かしらを「ためる」ことで脱出するゲームとなっています。

Click&Dragのゲームは前々から構想はあって事前に調査もしていたつもりですが、先週は基本部分のシステム開発で手一杯でした。

なんとか評価期間内には完成させたいですね。

2022-09-06

【小ネタ】影を落とすだけのオブジェトと影を受け取るだけのオブジェト

Unity

国葬

例の国葬の日が休日にならないと最近知ってガッカリしている皆さんこんにちは。どうやら休日にすると喪に服すことを強いる事になるから休日としないらしいのですが、意識低い系の一般国民としては何でもよいので休みが欲しいです。そうでないなら日程を前倒しして早々に終わらせて下さい。意識高い系地球市民の方々の騒音が鬱陶しくて仕方ありません。

Unity1week

例によって例のごとくunityroomで一週間ゲームジャムが始まりました。

unityroom.com

今回はお題が「ためる」となっています。
前回は制作途中で参加を断念したので今回は何とか作り切って参加したいのですが、ん～・・・動詞のお題は難しいですね。ゲームの方向性がどうしても狭い範囲に絞られる気がします。
私の場合はその時作りたいゲームをお題に寄せる形で構想を練るのですが、今回はどうしようか悩みどころです。

影だけ描画

Unityで3Dモデルの影の描画はデフォルトで行われるので通常はあまり意識しませんが、影に特殊な効果を乗せようとした場合はシェーダーを改造する必要があり骨が折れます。

幸いGoogle等で検索すると影用のシェーダーがいくつか公開されているので勉強がてら色々と参考にさせて頂いています。

今回はその中でメッシュに沿って影だけを描画するシェーダーが公開されていたのでそのご紹介。

github.com

レポジトリ中のShadowDrawer.shaderファイルのみを手元のプロジェクトアセット以下にD&DすればOKです。

中央のオブジェトに対してShadowDrawer.shaderを採用したMaterialを適用すると

自身が作る影の部分だけが描画されています。

影だけ落とす

このオブジェトに対して影を落とすような板を設置します。

このままだとカメラに映らないので、板に対してメッシュを描画せずに影だけを落とすように設定します。

こちらはMesh RendererのCast Shadowsの設定を「Shadows Only」にするのみです。

そうするとこんな感じになります。

これだと良くわからないので、影を作っている平板を細い板に変えてオブジェトの前に並べてみます。

そうすると

これを動かしてみると

で、このShadowDrawer.shaderでは影の色を変更できるので、背景に何かしろの色を付けて、影の色を白系に変えると

逆に影がかかる部分が光っているように見えます。

これを先ほどと同様に動かしてみると

ゲーム中の演出に使えそうですね。もしくは「これは何でしょう？」的なゲームにできるかも

2022-08-30

【Unity】UIをDrag&Dropで操作する

新生

うっかり買ってしまった信長の野望にハマってしまい寝不足な皆さんこんにちは。今回の新作は寡兵で大軍を打ち破って一発逆転、という展開が難しいため敵の兵力をいかに目減りさせて局面を有利に運ぶか、が重要となっているのですが、これが面白くて時間を忘れて遊んでしまいます。あと、COMがやたら好戦的でモタモタしているとあっという間に大勢力を築いてしまうのも気が抜けなくて面白いです。

UIのクリック検知

UnityではボタンやテキストボックスなどのUI機能としてuGUIが搭載されています。
uGUIのButtonコンポーネントを使えばボタンに対するクリックを検知してイベントを発行してくれますが、Buttonコンポーネント以外のUI(テキストやイメージ等)に関してクリックを検知したい場合はIPointerClickHandlerを使う必要があります。
IPointerClickHandlerは先頭に「I」が付いているのでお察しの通りコンポーネントではなくインターフェースなので、IPointerClickHandlerを継承したクラスを作成して使用することになります。

public class ClickEventTest : MonoBehaviour, IPointerClickHandler {

	// クリックイベント
	public void OnPointerClick(PointerEventData pointerData){
		// クリック時の処理を実装
		
	}
}

上のようなスクリプトをクリックを検知したいUIオブジェトにアタッチすることで、そのUIに対するクリックイベントをキャッチします。

下の動画ではTextMeshProUGUIに対するクリックイベントを検知し、そのタイミングで別のオブジェトを下に動かしています。

Drag&Dropしたい

クリックを検知できるのならDrag&Dropのイベントも検知して操作したいところです。
まず、Dragのイベントを検知するにはIDragHandler,　IBeginDragHandler,　IEndDragHandlerを使用します。
これらはIPointerClickHandler同様、どれもインターフェイスとなっており、それぞれ「Drag中」「Drag開始時」「Drag終了時」の操作時にイベントをキャッチする仕組みとなっています。

public class DragObj : MonoBehaviour,IDragHandler,IBeginDragHandler,IEndDragHandler
{
    public void OnBeginDrag(PointerEventData eventData)
    {
    }
 
    public void OnDrag(PointerEventData eventData)
    {
        // Drag中は位置を更新する
        transform.position = eventData.position;
    }
 
    public void OnEndDrag(PointerEventData eventData)
    {
    }
}

イベント発行時に引数として渡されるPointerEventDataにマウスポインタの位置が渡されてくるので、その位置を参照することでDrag操作を行います。

Drop処理

Drop時の処理はOnEndDrag(Drag終了時イベント)で行います。

この時、他のUIと重ねっているか判定したい場合はそれぞれのUIにCollider2Dを設定してOnTriggerEnter2Dで判定します。
この時「IsTrigger」のチェックがONになっている事と、接触判定するUIオブジェトのどちらかにRigidbody2Dのコンポーネントがアタッチされている事を忘れないでください。

    bool isOverlap = false;
    
    void OnTriggerEnter2D(Collider2D other)
    {
        isOverlap = true;
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        if(isOverlap)
        {
            // 重なっている時のDrop動作
        }
    }

下の動画では「カギ」というTextを「カギ穴」というTextへDrag&Drop→OnEndDrag内でTextを「オープン」という表記に変更、ドアを開ける操作をしています。

ちなみにIDragHandler,IBeginDragHandler,IEndDragHandlerはこの3つで1セットとして動作します。

OnTriggerEnterを使うのにOnTriggerStayやOnTriggerExitを実装する必要はありませんが、DragHandlerはそれとは異なり、IBeginDragHandlerやIEndDragHandlerのみ実装しただけではドラッグ開始終了の検知ができないようです。

2022-08-23

【Unity】壁に隠れた箇所をディザリング透過で表示する

Unity

診断結果

Twitterで「あなたの〇〇診断結果」的な結果をわざわざツイートする人の気持ちが分からない皆さんこんにちは。見も知らぬ人間の面白診断の結果なんて当人以外興味がないと思うんですが、世間から何かしらリアクションがもらえると思って呟いているんでしょうか？ちなみに私のアイドル化した時の担当カラーは"スカイ"だそうです。

壁の向こう

カメラ位置が定点的なゲームでは、プレイヤーの操作するキャラクターが壁などの周囲のオブジェクトに隠されて操作不能になってしまうことは避けたい事案です。

この為オブジェクトの配置には注意が必要ですが、どうしても避けられない場合はキャラクターが隠された箇所にそのシルエットを表示してプレイヤーが操作できるする対処が取られます。

このブログでもそうした時にシルエットを表示する方法について紹介しています。

www.karvan1230.com

ディザリング透過

一方でオブジェクトの半透明の表現手法としてディザ抜きと呼ばれる手法があります。

これはガラス窓などで使用されるMaterialのTransparency（透明度）を変更する透過法とは異なり、網目の細かい網戸越しに背景を見るような感じで、不透明で描画するピクセルを一定間隔とする(穴を空ける)ことで、半透明であるかのように見せかける手法です。

綺麗な半透明とはなりませんが、あくまで不透明描画なのでTransparencyを使った手法よりもパフォーマンスが稼げるというメリットがあります。

このディザ抜きシェーダに関する説明やシェーダーのソースは以下のリンクで紹介されています

light11.hatenadiary.com

knasa.hateblo.jp

隠れた箇所だけ透過させる

上のリンクでは壁全体、オブジェクト全体のディザリング透過が実装されていますが、できればキャラクターが隠れた箇所だけを半透明化させたい所です。

その為、今回はシルエットを表示した時と同じようにステンシルバッファを利用して不透明描画する箇所とディザ抜きをする箇所を分けることにしました。

シルエットを表示する手法では壁側のシェーダーがステンシルバッファにマスク値を設定し、キャラクター側のシェーダーがそれを参照してマスク値の箇所を黒く塗りつぶしていましたが、今回はその逆の手順となります。

最初にキャラクター側のシェーダーでステンシルバッファにマスク値「1」を設定します。

次に壁側の不透明描画する箇所ではステンシルバッファがマスク値(=1)となっていない箇所だけを描画します。

最後に壁側に対してステンシルバッファがマスク値(=1)となっている箇所だけをディザ抜きで描画するようにします。

同時に重ねるとこんな感じ

氷の壁の向こうのペンギンが透けて見えると思います。

動作例

実際にゲーム内で動作させた結果は以下の通り、GIF化したのでディザ抜きの箇所が不ぞろいに見えますが実際は上の図のように網目が均等に見えます。

今回の動作例では不透明描画するシェーダーとディザ抜きをするシェーダーをそれぞれ用意し、それをそれぞれ適用したオブジェクトを重ねて使っています。(つまり同じ個所にシェーダーの異なる障害物のオブジェトが二つある)

一つのシェーダーでPassを使えば同時に出来そうですが、ちょっとそれを作成する時間がありませんでした。

2022-08-16

【Unity】アセット紹介：柔軟性の高い基本的な形状モデルを素早く作る「Quick Primitive」

夏休み終了

休日期間が余りに暇すぎてPart1を観てないのに「KingdomⅡ」を観に行った皆さんこんにちは。原作の漫画も途中で脱落した組なのですが、それなりにキャラクターを覚えていたので何とかストーリーは理解することができました。どうやらPartⅢからが本番みたいですね。あと佐藤浩市は日本映画のどこにでも現れるなぁ。