Unityを利用した空間スキャンライン表現

概要

Unityのシェーダーを利用して、以下のような光のラインが走る表現(スキャンライン)を作る方法を解説します。  

空間スキャンライン表現

空間スキャンライン表現

 

サンプルアセットをWebEditorで確認する

サンプルアセットをWebEditorで確認するLaunch the WebEditor

※STYLYに登録していれば、本TIPSで作成したサンプルアセットをWebEditorで確認することができます。 アカウント未登録の場合、新規登録を行ってから再度、本ボタンをクリックしてください。

アカウント登録はこちらから Click here

 

サンプル

GitHubサンプル https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/WorldScanlineShader_Sample   サンプル空間 http://gallery.styly.cc/r-ngtm/c42952b6-e559-11e8-b34d-4783bb2170d0    

空間スキャンラインの作り方

ここでは、空間スキャンラインを作る方法を解説いたします。  

x座標を色として使う

Unityのシェーダーでは、画面に映っているオブジェクトの画素が空間中のどの位置にあるかという、座標をとることができます。 例えば、空間のx座標をオブジェクトの色として使うと以下のような見た目になります。

オブジェクトの色にx座標を適用

オブジェクトの色にx座標を適用

x座標が0.0より小さい部分は黒色に、 1.0より大きい部分は白色に、0.0 ~ 1.0の部分は灰色になります。   UnityのShaderLabで書いた場合は以下になります。

 

光の線を作る

0.0 ≦ x座標 ≦ 0.1を満たすときはオブジェクトの色を白く、それ以外は黒くします。

0≦x≦0.1の部分を白くする

0≦x≦0.1の部分を白くする

  UnityのShaderLabで書いた場合は以下になります

 

光の残像を加える

これに光の残像を加えます。

光の残像を加える

光の残像を加える

  UnityのShaderLabで書いた場合

 

光の線を動かす

光の線の繰り返しを作り、これを時間で動かします。

線を時間で動かす

線を時間で動かす

  UnityのShaderLabで書いた場合

 

色をつけて完成

最後に色を乗算することで今回の空間スキャンライン表現の完成です。

色を付ける

色を付ける

 

実際にUnityで作る

シェーダーファイルの作成

Create/Shader/Unlit Shaderを選択し、シェーダーファイルを作成します。

シェーダーファイルの作成

シェーダーファイルの作成

シェーダーファイル名はWorldScanlineとします。

作成したシェーダーファイル

作成したシェーダーファイル

シェーダーの編集

WorldScanlineシェーダーを開き、中身を以下のように書き換えます。

 

マテリアル作成

シェーダーファイルを右クリック選択し、Create/Material を選択してマテリアルを作成します。

マテリアル作成

マテリアル作成

 

作成したマテリアル

作成したマテリアル

 

マテリアルを箱に張り付ける

HierarhchyのCreate/Cubeを選択し、Cube(箱)を作成します。

Cubeオブジェクトの作成

Cubeオブジェクトの作成

 

作成したCubeオブジェクト

作成したCubeオブジェクト

  作成したCubeオブジェクトに先ほど作成したマテリアルをドラッグ&ドロップし、Cubeにマテリアルをくっつけます。

マテリアルを箱オブジェクトに適用

マテリアルを箱オブジェクトに適用

  スキャンラインマテリアルを適用した状態でゲームを再生すると、以下のようにラインが流れる箱になります。

マテリアル適用結果

マテリアル適用結果

 

SciFiな感じの板を作る

以下のようなSciFiな雰囲気ただよう板の作り方を解説します。

板状に並べた立方体に対するスキャンライン表現

板状に並べた立方体に対するスキャンライン表現

    まずは、Cubeをたくさん並べて以下のような板を作ります。

立方体を並べる

立方体を並べる

  マテリアルのパラメータを以下のように設定し、それぞれのCubeに適用します。

マテリアルのパラメータ設定

マテリアルのパラメータ設定

  マテリアルを適用すると以下のような見た目になります。

スキャンラインシェーダーを適用した結果

スキャンラインシェーダーを適用した結果

 

 

UnityからSTYLYにアセットをアップロードする方法

UnityからSTYLYへデータをアップロードする方法については下記リンクの記事をご覧ください。 https://styly.cc/ja/manual/unity-asset-uploader/