Tips, Shader, STYLY, 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/RotationMask_Sample

 

サンプル空間

http://gallery.styly.cc/r-ngtm/a5365271-dc9a-11e8-b34d-4783bb2170d0

 

回転マスクの解説

テクスチャを回転させる

まずは、以下のような回転する画像を作ります。

画像を回転させる

画像を回転させる

 

テクスチャにマスクをかける

マスク画像の色が白い部分は表示させ黒い部分は非表示にします

回転マスク 概要

回転マスク 概要

 

マスク結果

以下のような結果が得られます。

回転テクスチャにマスクをかけた結果

回転テクスチャにマスクをかけた結果

 

テクスチャを変更することで多彩な表現が作れるでしょう。

テクスチャの他の組み合わせ

テクスチャの他の組み合わせ

これらのテクスチャはGitHubのサンプルプロジェクトにあるものを利用しています。

 

Unity上で回転マスク表現をつくる

さっそく、回転マスク表現をUnity上で作っていきます

 

使用するテクスチャ

今回は以下の2枚のテクスチャを使用します。

ダウンロードして、プロジェクトファイルへ追加してください。

ベーステクスチャ

ベーステクスチャ

 

マスク用テクスチャ

マスク用テクスチャ

板の作成

HierarchyウィンドウのCreateメニューからPlaneを選択し、板を作成します

Planeオブジェクトの作成

Planeオブジェクトの作成

 

作成したPlaneオブジェクト

作成したPlaneオブジェクト

シェーダーの作成

テクスチャのマスク加工を行うために、Unityに備わっているシェーダー機能を利用します。

ProjectタブのCreateボタンを選択し、Shader/Unlit Shaderを選択してシェーダーファイルを作成します。

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

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

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

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

 

作成したシェーダーファイルを開き、以下のシェーダーコードを貼り付けて保存します。

 

マテリアルの作成

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

マテリアルの作成

マテリアルの作成

作成したマテリアル

作成したマテリアル

 

マテリアルへテクスチャ登録

作成したマテリアルにテクスチャとマスク用テクスチャを登録します。

先ほど作成したマテリアルをクリックして選択状態にします。

マテリアルをクリック

マテリアルをクリック

 

 

他のアセットをクリックした時にInspectorタブの表示が変更されないように

Inspectorタブの右上にある鍵アイコンをクリックして、ロック状態にしておきます。

鍵アイコンをクリックしてロック状態にする

鍵アイコンをクリックしてロック状態にする

 

Inspectorタブのロックがかかった状態

Inspectorタブのロックがかかった状態

 

テクスチャをドラッグ&ドロップしてテクスチャをマテリアルへ登録します

テクスチャのマテリアルへの登録

テクスチャのマテリアルへの登録

以上でマテリアルの設定は終わりです。

テクスチャ登録後のマテリアル

テクスチャ登録後のマテリアル

 

マテリアルをPlaneオブジェクトへ登録

ドラッグ&ドロップで先ほど作成した板(Planeオブジェクト)にマテリアルを登録します。

Planeオブジェクトへのマテリアル登録

Planeオブジェクトへのマテリアル登録

 

完成

これで回転マスクの完成です。

マテリアルの適用結果

マテリアルの適用結果

 

回転マスクの編集

色を変更

回転マスクの色を変更してみましょう。

 

マテリアルの色を選択し、色を変更します。

色のクリック

色のクリック

 

以下のように黄色を設定してみます。

黄色を設定

黄色を設定

 

回転マスクの板オブジェクトの全体に黄色がつきます。

色の変更結果

色の変更結果

 

UnityからSTYLYへアップロード

Unity上で作成したオブジェクトのSTYLYへのアップロード方法については下記リンクをご覧ください。

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

かもそば

・職業はUnityエンジニア(2018年現在) ・面白そうと思ったものにはすぐに手を出すが、飽きることが多い器用貧乏 ・カフェで作業するのが好き

Share this article

Shares
Facebook Twitter Google+ Pinterest hatebu

About STYLY

STYLYは、VR空間を駆使した新たな表現・体験を生み出せるクリエイティブプラットフォームです。 STYLYを活用することで、コンセプチュアルなショップ空間やインスタレーション、ギャラリーなど クリエイターのイマジネーションを際限なく表現した多彩な空間を構築できます。 またその空間を通じて、今までの現実では成し得なかった体験をインターネットの世界へシェアすることができます。
 

Unity

Unityで制作されたコンテンツをお持ちの方へ
Unityシーンアップロード機能を活用すれば簡単にVR化が可能に!

Click here

×