シェーダでトランジション(図形)

外周から回るトランジション  長方形を利用して外側から内側へ回りながら画面を黒くするシェーダを作成しました。 shader  作成したシェーダは以下の通りです。 [crayon-66212fe8a92b2105590619/]  uv座標(0~1)を(-1~1)へ変更し、これに分割数(div)を掛けることにより-分割数~分割数とします。 高さと幅が2となる長方形を作成します。画像に示すように正方形 […]

シェーダでトランジション(ノイズ)

 トランジションとは場面転換をする際に使用される演出効果のことです。このトランジションはグレースケールのルール画像からアルファ値を決定することで作成できます。この記事ではルール画像を使用せずに、シェーダによりアルファ値を決定し、UIのPanelにトランジション用のシェーダを設定したマテリアルをアタッチすることでトランジションを行います。このトランジションシェーダにシェーダでノイズ1、シェーダでノイ […]

シェーダで図形の描画

距離関数  シェーダを用いて図形を描画するには、距離関数が必要となります。この距離関数は図形ごとに異なる関数となります。図形ごとの距離関数とその関数によって描画される図形は以下の通りです。 円  円の距離関数です。radiusによって円の大きさを変更できます。。 楕円  楕円の距離関数です。rは縦横の幅をsizeで大きさを変更できます。 四角形  四角形の距離関数です。sizeによって縦横の幅を変 […]

素材追加(2019/3/29更新)

  • 2019.03.29

2D素材にゲージ用画像を追加しました。(2019/3/29) ダウンロードはこちらから 2D素材にゲージ用画像を追加しました。(2018/9/27) ダウンロードはこちらから 2D素材にシームレステクスチャ二点を追加しました。(2018/7/7) ダウンロードはこちらから 3Dモデル素材に植物6種を追加しました。(2018/6/3) ダウンロードはこちらから

HP残量によって色が変化するHPゲージ

Color.Lerpを使用する方法 二色を使用したゲージ  以下の白いHPゲージと背景画像を使用し、作成します。 Create→UI→Imageから背景用とゲージ用のImageを作成し、上画像をSource Imageへ設定します。 Script  以下のScriptを作成し、ゲージ用のImageへアッタッチします。Color.LerpによってHP残量に応じた色を求めています。この求めた色をIma […]

シェーダでノイズ3(セルノイズ)

このノイズは細胞のように、区分けされた結果が得られるノイズです セルラーノイズ  このノイズはあるピクセルから、ランダムに与えられた複数の点の中から一番近い点までの距離を出力するノイズです。 始めに、バリューノイズやパーリンノイズで行ったように、UV座標に定数を掛け、その値の小数部分を取り出すことで格子状に区切ります。 この格子ごとにランダムな点を決定します。次に、ピクセルから一番近いランダムな点 […]

シェーダでノイズ2(パーリンノイズ)

 パーリンノイズは単純なランダムノイズと異なり、滑らかなノイズが得られます。そのため、様々なテクスチャの生成や炎、雲及び地形などの自然物を表現する際によく使用されます。 一次元パーリンノイズ  始めに、xの少数部分を取り出します。これにより、整数の間で\(0\)から\(1\)未満の値を繰り返すようになります。したがって、下図で色分けされているように整数の間を一つの区間として区切ることができます。こ […]

RectTransformについてのメモ

  • 2019.02.03

RectTransform positionについて RectTransfrom.position Canvasの左下を原点とするワールド座標の位置。アンカーの場所に依存しない。Vector3を返す。 RectTransfrom.localPosition 親の中心を原点とする座標系の位置。 アンカーの場所に依存しない。 Vector3を返す。 RectTransfrom.anchoredPosi […]

シェーダでノイズ1

二次元ランダムノイズ  不規則な値を返す関数によってテクセルごとの色を決定します。ただし、使用する関数は入力した値に応じて決まった値を返す疑似ランダム関数を使用しています。 シェーダ  ramdom関数へuv座標を渡すことで不規則な値を得ています。この値を色として出力しています。Seedの値を変更すると異なる結果が得られます。Seedをfloatにすると、値によっては常に0となるようです。そのため […]

UI要素をScriptから作成

 Scriptでゲームオブジェクトを作成し、そのオブジェクトに必要なコンポーネントを追加することで、 新たにUI要素を作成します。しかし、この方法でUI要素を作成すると、デフォルトの画像を使用する際に問題が生じます。Editorで実行する場合に限れば以下のコードからデフォルトの画像を取得できます。 [crayon-66212fe8abc83237252487/] 当然、Build後には使用できませ […]

1 5 8