1週間ゲームジャム お題「逆」に参加しました。

1週間ゲームジャム お題「逆」に参加しました。

成果

こんな感じのゲームを制作しました。

内容としては左右逆の画像を当てるシンプルなゲームです f:id:Brave345:20200303102204p:plain

作成したゲームはこちら

unityroom.com

今回初めての参加でしたがある程度じぶんのやりたいことが出来たので、 よかったかなーと思ってます。

今回自分がやりかったことして、今まで勉強してきたシェーダー関連をゲームに組み込むことでしたがそれなりにできました。

今回作成したパネルのシェーダーはこんな感じ

f:id:Brave345:20200303150259p:plain

これらの記事を組み合わせて作成しました。 bravememo.hatenablog.com

bravememo.hatenablog.com

bravememo.hatenablog.com

反省

スクリプトの組み方が雑になってしまったことです。(大量のManagerクラス生産)もう少し設計を考えてやるべきでした。

・タイムやスコアを実装するならランキング機能とリトライ機能は早めにつけるべきだと感じました。

ランキングはつけるだけでプレイヤーのモチベーション増加するというのをほかの方のゲームをプレイして感じました。

リトライ機能は自分でプレイしていてタイムの更新を狙ってる際に、ミスをした時にすぐにやり直しできないのがすごく不便でしたのでリトライ機能は地味ながら重要だと思います。

・今回はあまり新しい技術に挑戦できず、いままで知識だけで制作してたため、次回はもう少し新しい挑戦をしていきたいと思いました。

小学生並みの感想ですね。語彙ホシイ

おわりに

久しぶりに好き放題にゲーム開発ができてとても楽しかったです!

次回も余力があれば挑戦してきたいです。

unityroom.com

今回作成したシェーダ-や背景はBoothで公開しています braveshop.booth.pm

【Unity】ShaderGraphで画像の向きを反転させるシェーダーを作成する

はじめに

今回は画像の向きを反転させるシェーダーを作成していきます。

環境は Unity 2019.3.0f3

Universal Render Pipeline(テンプレートのプロジェクトです)

UnlitGraph を使用しています。

ノード作成

UVノードのXとYに対してOne Minusノードを繋ぎ向きを反転させています。

あとはプロパティの反転用のフラグを用意してBranchノードで通常か反転かの分岐処理を入れてSampleTexture2DのUVノードで繋げば完成です。

f:id:Brave345:20200227093244p:plain

完成

上下反転フラグにチェックを入れた場合

f:id:Brave345:20200227093301p:plain

左右反転フラグにチェックを入れた場合

f:id:Brave345:20200227093315p:plain

【Unity】ShaderGraphで画像のエッジを検出する

はじめに

今回は画像のエッジを検出するシェーダーを作成していきます。

環境は Unity 2019.3.0f3

Universal Render Pipeline(テンプレートのプロジェクトです)

UnlitGraph を使用しています。

ノード作成

こちらの記事を参考にさせていただきました。

qiita.com

f:id:Brave345:20200226150439p:plain

Samples Texture2DのカラーをDDXYノードにつなげればエッジを検出できます。

あとはPowerノードで余計なものを消し、Lengthノードで色を白黒に変換すれば完成です。

【Unity】ShaderGraphでソフトパーティクルシェーダーを作成する

はじめに

今回は不透明オブジェクトとの境目が曖昧になるソフトパーティクルシェーダーを作成していきます。

環境は Unity 2019.3.0f3

Universal Render Pipeline(テンプレートのプロジェクトです)

UnlitGraph を使用しています。

初期設定

Masterノードを以下のように設定します。

f:id:Brave345:20200226141349p:plain

以下のように プロパティを設定します。 NearとFarのMaxは自分の好きな値で大丈夫です。

f:id:Brave345:20200226141337p:plain

深度バッファを使用するための設定をします。

Universal Render PipelineのSettingファイルを開きDepth Textureにチェックを入れます。

f:id:Brave345:20200226141304p:plain

テンプレートプロジェクトの状態ならUniversalRP-HighQualityファイルを設定すればOKです。

ノード作成

ソフトパーティクル部分

Screen PostionのModeをRawNeに,Scene DepthのSmapliをEyeに設定します。

f:id:Brave345:20200226141456p:plain

この部分は公式が解説しております。

www.youtube.com

アルファ

ソフトパーティクル部分のアルファ値と他のアルファ値を乗算してるだけです。

f:id:Brave345:20200226141518p:plain

メインカラー

アルファと同じような感じでパーティクルカラーとプロパティのカラーとテクスチャのカラーを乗算してるだけです。

f:id:Brave345:20200226141557p:plain

完成図

アルファ

f:id:Brave345:20200226141630p:plain

Additve

おまけとしてAdditve版も載せておきます。 内容としてはほぼ同じで最後に最終カラーと最終アルファを乗算したものをColorノードにつないでます。

f:id:Brave345:20200226141646p:plain

比較

ソフトパーティクルありとなしで比較してみる。

こっちが無効Ver

f:id:Brave345:20200226141714p:plain

こっちが有効Ver

Farに0.35を入れた状態です。

f:id:Brave345:20200226141724p:plain

地面との境目が自然になりましたね。

BOOTHで今回作成したものを公開しています braveshop.booth.pm

【Unity】ShaderGraphで円形グラデーションを作る

バージョン

バージョン Unity 2019.3.0f3

シェーダーグラフはUnlit Graphで作成します。

円形グラデーション作成

Polar CoordinatesノードからYを抽出しそれをRemapノードで-0.5から0.5を0~1の間に値を変換します。

あとは変換した値をSampleGradentノードのTimeに繋げば完成です。

カラーは左端と右端を同じ色にするといい感じになります。

f:id:Brave345:20200218101201p:plain

一応Polar CoordinatesノードからYを抽出しなくてもatanを使用することでも実現できます。

参考サイト

https://cyangamedev.wordpress.com/2019/05/13/polar-coordinates/

ちなみにこれでRotateノード回転させてもいい感じに回転してくれません。なにかいい方法はないですかね…

方法を見つけました

bravememo.hatenablog.com