tanaka&#39;s Programming Memo

ここでのポイントは以下の通り。

鳴らしたい音源データ(wavのみらしい)を、AtomCraftというツールを使って、ADX2用のデータ(キューシート)に変換します
Unityにインポートできるように指定をしてエクスポートします
Unityに、ADX2LEを指示に従ってインポートして、初期設定します
作成したキューシートをUnityのプロジェクトに読み込みます
必要に応じて、再生するためのスクリプトを書きます

必要なものをダウンロードする

「Audacity」無料の音声編集ソフト - 窓の杜

このページのダウンロードをクリックして、規約に目を通したらダウンロードをクリックして開発ツールを入手します。ダウンロードしたzipファイルは、ドキュメント内のToolsフォルダーなどの中に展開します。展開すると、criという名前のフォルダーが作成されて、その中にAtomCraftやUnityのプラグインをはじめ、必要なものがすべて入っています。

扱えるデータ

mp3やoggからを直接インポートはできないっぽいです。使いたい音源がmp3やoggなどの場合、オンラインのフォーマット変換ツールを利用するか、Audacityなどであらかじめwavに変換しておきます。

Audacityは無音部を切り取ったりできる便利ツールで重宝してます。

キューシートを作成する

Unityで作業を始める前に、AtomCraftを使って音源データを作成する必要があります。AtomCraftを起動します

criフォルダーから、tools > criatomex > win と辿っていくと、CriAtomCraftがあるので、起動します
スタートページが開いたら、新規作成をクリックして、新しくプロジェクトを作成します。名前はFirstADXなど
- 場所は、特に必要がなければそのままでよいでしょう。ユーザーのドキュメント内にCRIWAREというフォルダーが作成されて、その中にプロジェクト用のデータが設置されます
ワークユニットの追加ウィンドウが表示されます。とりあえずそのまま追加してOKです
- 注意。プロジェクトは名前などを内部で紐づけているようで、AtomCraft以外の環境で名前を変更したり、削除したり、移動すると予想外のことが発生するようです。AtomCraft上で操作するようにしてください

あとは、以下のチュートリアルに沿えばおおよそ大丈夫でした。

2点だけちょっと注意。

3のボリュームの一括確認方法がわからなかった
最後のエクスポート時、Unityで利用する場合は、Unity Assets出力へのチェックが必要

以上でビルドして、出力パスを開くをしておけばデータの生成は完了です。

Unityで音を鳴らす

Unityも公式チュートリアルを見ていきます。入門編の01と02はバージョンアップで少し楽になっていたので、以下でいけます。

先にダウンロードして展開したcriフォルダーから、unity > pluginフォルダーを開くと、criware_unity_pluginがあるので、これをUnityのProjectウィンドウにD&Dするなどしてインポートします
Windowメニューから、CRIWARE > Open CRI Atom Windowを選択します
ウィンドウが起動したら、Use Copy Assets Folderにチェックを入れます
Select Assets Rootボタンをクリックして、AtomCraftでビルドした時に開いた出力パスから、プロジェクトフォルダー > Public > Assets フォルダーのパスをコピーして、Unityの方に設定します
Update Assets of "CRI Atom Craft"ボタンをクリックします

以上で、必要なキューシートデータが、UnityのプロジェクトのStreamingAssetsフォルダーにコピーされます。

ここからは入門編03に沿って作業します。

音を鳴らしたいシーンや、システムシーンがあればそこに、指示に従ってGameObjectメニューからCriWareLibraryInitializerとCriWareErrorHandlerを読み込みます
- CriWareErrorHandlerは開発用なので、必須ではありません
指示に従って、空のゲームオブジェクトを作成して、Cri Atom スクリプトをアタッチします
出力したAtomCraftのキューシートデータのファイル名を設定していきます。例えば、効果音用のSeCueとBGM用のBgmCueを作成していたら、以下のような感じです

f:id:am1tanaka:20200116140219p:plain — Cri Atomの設定

効果音はすべてメモリにしたのでawbファイルはありません。よって空欄です。BGMは、いくつかのものをストリーミングにしたので、awbファイルも指定しています。

これらのファイル名は自力入力です。

音を鳴らす

入門編04に従って、音を鳴らしてみます。

先ほど開いたCRI Atom Windowを閉じていたらもう一度Windowメニューから開きます
UnityのPlayを開始します(Playしないとうまく動きません!!)
Reload Infoボタンを押して情報を取得します

以上で情報が取得できたらOKです。Playを停止します。

シーンにBGMを設定する

鳴らしたいBGMをウィンドウから選択したら、Create GameObject ボタンをクリックすると、BGM再生用のゲームオブジェクトがシーンに生成されます。

ここで作成されたオブジェクトを見ると、音の鳴らし方が分かります。

ここまでできたら、あとはやりたいことをチュートリアルやマニュアルから探せばOKでしょう。

音が鳴らない時(2020/1/31追記)

以下のようなエラーが発生する場合があります。これは、ストリーミングで出力したキューシートをCIR Atomウィンドウで自動生成した時に発生します。

[CRIWARE] Warning:W2010053100:An AWB file [CueSheet_0.awb] is not attached to an ACB handle.

原因は、自動的に生成したCRIWAREオブジェクトのAWBファイルの設定が空欄のままというものでした。手動でAWBファイルを入力することで、音が鳴るようになりました。

f:id:am1tanaka:20200131170817p:plain — AWBファイル

ライセンス表示

無償版サウンドミドルウェアCRI ADX2 LE – CRIWARE for GamesのADX2 LEを使ったアプリ・ゲームを配布する方へのあたりに、ライセンス表示の仕方や、UnityでADX2 LEのロゴを表示するためのサンプルがあります。便利！

まとめ

音データを作成して、鳴らすことができました。Unityのオーディオシステムが不要な場合は、以下をしておくとよさそうです。

ProjectSettingsのAudioで、Disable Unity Audioにチェックを入れると、Unityのオーディオを無効にできる

AtomCraftというツールを使ってwavからキューシートを生成することと、Unityにちょこちょこと初期化設定が必要ですが、1時間もあれば音を鳴らすまではいけると思います。ちょっと時間がある時にやっておくと良さそうです。

導入するだけで音周りの速度アップが期待できるのは大きいです。機能は大量にありますが、差し当たり以下のあたりを活用しようと思ってます。

同じ音の最大音数の制限(効果音でこれはとてもありがたい)
いくつかの音のランダム再生(足音などで便利)
イントロを飛ばしたループの設定

Sofdec2を使えば動画もよしなに行けそう。もしかしたらVoxelorerBirdで難航していた部分もこれで解決できるかも？

WebGLが無償で使えないというのはありますが、スマホ版のアプリには早速導入してみようと思います！

参考URL

2019-12-16

MK GlassとPro Texで氷を作る

Unityメモ Asset Store MK Glass ProTex

この記事は、Unityアセット冬のアドベントカレンダー 2019 Winter！の17日目の記事です。

assetstore.info

氷のブロックが作りたい！と思い、MK Glassを購入しました！

こんな感じで利用しています↓

この記事では、MK Glass - Refractive Shader | VFX Shaders | Unity Asset Storeと、テクスチャーをプロシージャルに生成するフリーアセットのProTexを使った氷ブロックの作り方と作例をご紹介します！

MK Glassとは

MKさんことMICHAEL KREMMELさんというと、MK Glowで有名かと思います。

同じ作者さんが作成した透明な物体用のシェーダーです。機能限定のフリー版もあります。

目に付く違いは、最適化、ライトの数、反射といったところでしょうか。基本機能はFree版にもちゃんとあります。

Pro Textとは

ざっくりというと、図形やノイズをグラフで組み合わせてテクスチャーを作成する今どきのプロシージャルなテクスチャー生成アセットです。

お気に入りのアセットで、前にブログに書きました。

インストールとデモ

MK Glassを購入して、お試し用のプロジェクトを作成してインポートしました。以下の場所にExampleSceneMKGlassというPDFがあるので開きます。Exampleのunitypackageをダウンロードするリンクが開くので、ダウンロードしてインポートします。

※Free版にはこのPDFはありません。

エラーの解消

2019/12/10現在、Unity2019.2.xで開くとMinDrawer.csがどうとかこうとかというエラーが発生しました。ポストプロセス用のものとUnityEngineに含まれるものが被っているとのことです。3行目に以下のようにusingを追加して、MinAttributeをPPMinAttributeに変えれば直ります。

using UnityEngine;
using UnityEngine.PostProcessing;
using PPMinAttribute = UnityEngine.PostProcessing.MinAttribute;

namespace UnityEditor.PostProcessing
{
    [CustomPropertyDrawer(typeof(PPMinAttribute))]
    sealed class MinDrawer : PropertyDrawer
    {
        public override void OnGUI(Rect position, SerializedProperty property, GUIContent label)
        {
            PPMinAttribute attribute = (PPMinAttribute)base.attribute;

            if (property.propertyType == SerializedPropertyType.Integer)
            {
                int v = EditorGUI.IntField(position, label, property.intValue);
                property.intValue = (int)Mathf.Max(v, attribute.min);
            }
            else if (property.propertyType == SerializedPropertyType.Float)
            {
                float v = EditorGUI.FloatField(position, label, property.floatValue);
                property.floatValue = Mathf.Max(v, attribute.min);
            }
            else
            {
                EditorGUI.LabelField(position, label.text, "Use Min with float or int.");
            }
        }
    }
}

デフォルトで入っているDemoシーンと、ダウンロードして読み込んだMKGlassExample0とMKGlassExample1の3種類のデモを見ることができます。

シンプルなデモシーンです。

オブジェクトの種類や、シェーダーの設定をリアルタイムに変更してみることができるデモです。

WASDで移動、マウスで見回しができるデモです。音が足りないようで、一歩歩くごとにWarningが表示されます・・・^^;

氷を作ってみる

できることはおおよそ分かったので、氷のブロックを作ってみます。あれこれいじれるMKGlassExample0シーンを利用しました。

新規にMaterialを作成して、IceBlockなどの名前にします
作成したIceBlockマテリアルをクリックして選択します
InspectorウィンドウのShader設定を、MK > Glass > Defaultの順にクリックして設定します

マテリアルは、Main Cameraにアタッチされているスクリプトで切り替えたりしているので、そこに作成したIceBlockマテリアルを設定します。

Hierarchyウィンドウで、Main Cameraをクリックして選択します
Projectウィンドウで、作成したIceBlockマテリアルをドラッグして、InspectorウィンドウのMK Glass Example 0 ControlコンポーネントにあるBase MaterialsのElement 0にドロップします

Playするとこんな感じになりました。見回してみるとすでにピカピカしてます。

左上のボタンをクリックすると設定バーが表示されます。凹凸がないので、現状で有効なのはSpecular(光の反射)とReflection(周囲の景色の反射)ぐらいです。

デコボコさせてみる

デコボコを作るには、Normalマップのテクスチャーを利用します。サンプルには、以下のような12個のNormalマップが入っています。

先ほど作成したIceBlockのNormal map欄の左の四角に、これらのNomalマップテクスチャーをドラッグ＆ドロップするとCubeがデコボコになります。

Playを停止して、Sceneウィンドウで確認するのが手っ取り早いです。

一通り見てみると分かるのですが、規則的な模様が入っているものがほとんどで、自然の氷っぽい表現のものはWall0_Nか、

wall01normalぐらいです。

ちょっと物足りない感じ。ということで、ProTexの出番です！

ProTexでデコボコを作る

ProTexをダウンロードしてインポートします。無料なので助かります！

ProjectウィンドウのCreateから、ProTex > ProTex Textureを選択して、ProTex Textureを作成して、名前をIceNormalなどにします

InspectorウィンドウのOpenボタンをクリックして、エディターを開きます

ノイズを利用します。ProTexでは、以下の5種類のノイズが作成できます。

今回の用途だとFBM Noiseがよさそうです。他のはクリックして選択したら[Delete]キーで削除します。

FBM Noiseのoutをドラッグして、Outputのnormalでボタンを離します

これで、ノイズを使ったNormalマップが作成できました。ProTexウィンドウを閉じます。

Inspectorウィンドウでテクスチャーを作成します。サイズは512x512も必要なさそうなので、少し小さくします。

Texture Size 256x256などに変更します。オブジェクトをどのぐらいの大きさで表示するかに応じて変更してください

Generate Normalをクリックして、画像として保存します

以上で、自作のNormalマップができました。これをIceBlockにアタッチします。

先ほどより、柔らかい感じの表面になりました。

イメージする感じに近づくようにProTexウィンドウでサイズなどを調整していきます。ProTexに変更を加えたら、先ほどGenerateしたテクスチャーを削除してから、テクスチャーサイズを再設定してGenerateし直します。

パラメーターを変更したら、Apply Changesをクリックするのを忘れずに！

作例

海の上に円盤状の氷を浮かべて、ペンギンを乗せてみました。

水面はDefinitive Stylized Water | VFX Shaders | Unity Asset Storeを利用しました。これもお気に入りのアセットで、使い方をこちらにまとめています。

ペンギンはSuriyunさんのPenguins | Characters | Unity Asset Storeを利用しました。

こちらは、Low Poly Series: Caverns | 3D Environments | Unity Asset Storeと組み合わせた例です。

クリスタルのシェーダーをMK Glassに変更しました。

まとめ

MK Glassで氷を作ってみました。設定はマテリアルをいじれば確認できるのでとても簡単です。これで得点用のクリスタルも作ったりしようと考えています。

今回のようにProTexでNormalマップを作れば、応用範囲は広がります。CC0のPBRテクスチャーサイトなどから入手するのもよさそうです。

こんな感じで活躍してます！

参考URL

2019-12-10

ラズパイ4にSambaを入れてファイルサーバーにする

ラズパイ Raspberrypi ファイルサーバー Samba

学校のファイルサーバーが不安定になることがあって、そんな時にささっと代替手段を用意したい。他にも、サーバーやWebの勉強の際に手軽にインストールができるサーバーが欲しいとか、Phaserを動かしてみたいとか、ルキグラの描画に使えそうとか、あれこれ野望が浮かび、ラズパイ４を購入しました！

購入したラズパイと、Sambaのインストール手順です。

2019/12/11 nanoの終了時にYキーを押す手順が抜けていたので追加。 2019/12/12 ラズパイが見えない時の対策を追加。

購入したもの

購入したのは、千石電商さんの秋葉原店にあったスターターパックです。電源やMicro HDMIケーブルなどを自分で選ぶのに不安があったのと、ヒートシンクやファンを揃えるのが面倒というのがありました。それらが揃っている優れたパックでした。

f:id:am1tanaka:20191208203742j:plain — ラズパイ4スターターパック32G

ケースは純正のものではなく、200円上乗せしてヒートシンクとファンが付いているやつにしました。熱対策は万全！SDカードは32GB。これで税込み11,630円。お手頃価格！

最初のインストール時に、スターターパック以外に以下が必要になります。

USBマウス
USBキーボード
HDMIが繋がるモニター

以上は手持ちのを使いました。

下準備

以下の公式ページを見ながら初回のインストール作業を済ませます。

projects.raspberrypi.org

インストールが終わったら、SSHを使えるようにします。レグポンさんの以下のページを参考にしました。

regpon.hatenablog.com

ウィンドウの上からターミナルをクリックして起動したら、以下を入力します。

sudo raspi-config

設定ウィンドウが開くので、5 Interfacing Options を選択します
P2 SSH を選択します
Yesを選択して、Okします

これでSSHは有効になりますが、外部から簡単に接続できるようにホスト名を設定しておきます。

ターミナルから以下を入力します

sudo nano /etc/hosts

最後の127.0.0.1で始まる行の最後を以下のように書き換えます。raspの部分は好きに書き換えてください

127.0.0.1    raspberrypi.local

[Ctrl]+[X]キーを押すと保存するか聞いてくるので、[Y]キー > [Enter]キーで保存します
続いて以下を入力します

sudo nano /etc/hostname

1行目を、先に入力した???.localのホスト名に書き換えます

raspberrypi.local

先ほどと同じく、[Ctrl]+[X]キーを押して、[Y]キー > [Enter]キーで保存して、エディターを閉じます
以下で、ラズパイを再起動します

sudo reboot

以上で外部から接続できるようになります。Windowsからの場合、PuTTYなどのSSHクライアントソフトで接続します。

www.putty.org

接続時に設定したホスト名(この例通りならraspberrypi.local)を入力すれば、ラズパイに接続して、IDとパスワードの入力を求められます。IDはpiで、パスワードはインストール時に設定したものを入力してください。

これ以降の作業は、Windowsなどの端末側から操作できます。

Sambaの設定

Sambaの設定の情報は、Raspberrypi公式マガジンのWebサイトのものが参考になりました。

magpi.raspberrypi.org

ここからは、PuTTYを使ってSSH接続をして操作しました。ログインは、ユーザーIDをpi、パスワードはインストール時に設定したものです。

Sambaのインストール

ターミナルを起動して、以下を入力してSambaのインストールをします

sudo apt update
sudo apt upgrade
sudo apt install samba

元のドキュメントにあったsamba-common-binはなくても大丈夫でした。

キー入力を求められるので、Yキーを押します

以上でインストールが始まるので、終わるまで待ちます。

共有フォルダーの作成

以下を入力して、Sambaで共有するフォルダーを作成します。

sudo mkdir /home/pi/shared

piのホームディレクトリー下にフォルダーを作ることで、そのまま権限の管理ができます。

pi以外のユーザーでやろうとすると権限周りの設定がややこしくなります。特に問題はなさそうなので、piのままでよいかと思います。

Sambaの設定を行う

まずは、以下を実行して、最初の設定のバックアップをとっておきます(最初の1回目でこれをやらずに設定ファイルの変更を間違えて、ラズパイの再インストールからやり直しました^^;)。

sudo cp /etc/samba/smb.conf /etc/samba/smb.conf_backup

以下で、設定ファイルを開きます。

sudo nano /etc/samba/smb.conf

ファイルの一番下に、以下を入力します。

path = /home/pi/shared
available = yes
valid users = pi
browsable = yes
writable = yes

詳細は、Samba.orgのドキュメントにありますが、一先ず上記のように追記すればOKです。

[Ctrl]+[X]キーを押したら、[Y]キー > [Enter]キーを押して、エディターを保存して閉じます。

念のため、以下を実行して、設定に間違いがないかを確認しまｓ。

testparm

色々と表示されますが、最後にLoaded services file OKと表示されれば問題ありません。違う表示が出たら設定を間違えた可能性があるので、smb.confをnanoエディターで開くところからやり直して、入力した文字に間違いがないか確認してください。

パスワードの作成

Samba用のパスワードを設定しておく方が安全でしょう。以下を実行します。

sudo smbpasswd -a pi

パスワードの入力を促されるので、ラズパイへのログイン用のものとは違うシンプルなパスワードを決めて入力してください。入力して[Enter]キーを押すと、もう一度確認を求められるので、同じパスワードを入力して[Enter]キーを押します。

以上できたら、Sambaサーバーを再起動するために、以下を入力します。

sudo service smbd restart

これでラズパイ側の設定は完了です。

Windows側の設定

この段階では、まだWindowsからラズパイが見えません。Windowsの設定が必要です。

検索バーにcontrolと入力して、コントロールパネルが見つかったらクリックします
プログラムの文字をクリックします
Windowsの機能の有効化または無効化をクリックします。管理者権限が必要です
下にスクロールして、SMB 1.0/CIFSファイル共有のサポートの左の+をクリックして開きます
SMB 1.0/CIFSクライアントにチェックします
OKをクリックしてウィンドウを閉じます

再起動が必要な場合は、再起動してください。以上完了したら、エクスプローラーのネットワークにラズパイのファイルサーバーが表示されます。

接続時には、IDとパスワードが必要になります。IDはpi、パスワードはSambaのインストール時に設定した簡単なパスワードです。

piとsharedの2つのフォルダーが見えるようになると思います。piのホームフォルダーが丸ごと見えるのでぎょっとしますが、読み取り専用なので悪さはできません。ラズパイ上で作業する時は、piではないユーザーを作った方がよさそうです(Linuxなので、管理者であるpiで通常の作業をしないのは当然ではありますが)。

macからのアクセス

macやiOS、Androidのデバイスからなら、そのままファイルサーバーにアクセスできるそうです。macの場合、FinderのNetworkを開けば見えるので、Windowsと同様に操作できます。

ラズパイが見えない時の対処(2019/12/12追記)

PuTTYなどのSSHクライアントからの接続失敗

SSHで????.localに接続しようとして失敗した時は、IPアドレスで接続して、設定を保存したらそれ以降は接続できるようになりました。

ネットワークにラズパイが出てこない

直に接続を試みます。Windows10で、[Windows]キー+[R]キーを押して、ファイル名を入力して実行するダイアログを表示して、以下を入力します(\は円記号)。

\\IPアドレス\pi

例えば、ラズパイのIPアドレスが192.168.1.2の場合は、\\192.168.1.2\piと入力します。ユーザーとパスワードの入力画面になったら、ユーザーをpi、パスワードはSambaで作成したパスワードを入力します。

これでダメな場合は、Sambaが動作しているかを確認します。ラズパイのターミナルで以下を実行します。

service smbd status

動作していない場合は、sudo service smbd restartで再開します。

また、有線で接続しているラズパイに、無線LANで接続しているPCから接続しようとした時に、ネットワークの場所が違っていたようで見つかりませんでした。どちらも同じルーター下の有線で接続したら見えるようになりました。

まとめ

以上で、外部ストレージを使わないラズパイ単体での簡易ファイルサーバーの出来上がりです。自分の用途は、ちょっとしたリソースの共有が目的なので30GBもあれば十分です。もっと大容量で、という場合は、外部ストレージの設定例もあちこちありました。日本語の情報はほぼ外部ストレージを利用するものでした。

ラズパイをカバンに入れておけば、LAN環境ですぐにファイルサーバーにできて重宝しそうです！

参考URL

2019-12-09

高さでグラデーションをかけるシェーダーをUnityで作ってみた

Unityメモ Shader

この記事は、シェーダーアドベントカレンダー Advent Calendar 2019の8日目の記事です。

ローポリでアンビエントオクルージョンが効かないような形だとのぺっとしてしまいます。頂点色を手動で設定するのは面倒だし、その程度のシェーダーなら自作できるかな？と思って作ってみたので公開します。

2019/12/9 シェーダー言語はCgは廃止の方向であり、HLSLの方を調べるのがよいでしょうと、さやちゃんぐbotさんから教えていただきましたので追記しました。

2019/12/12 Cg/GLSLについて、さやちゃんぐbotさんから追加で教えていただいたことについても追記しました。

高さグラデーションシェーダーHeightGradationShaderの使い方

まずは作成したシェーダーの使い方をご紹介します。

シェーダーの作成

UnityのProjectウィンドウから、Create > Shader > Unlitを選択して、Unlitシェーダーを作成します

f:id:am1tanaka:20191209131154p:plain — Unlitシェーダーを作成

名前はHeightGradationUnlitShaderなどでOKです
作成したシェーダーをダブルクリックしてエディターで開きます
元のスクリプトを消して、以下のスクリプトを貼り付けて保存してください

以上でシェーダーの準備完了です。あとはマテリアルに設定すれば動作します。

マテリアルの作成とオブジェクトへのアタッチ

マテリアルを作成して、シェーダーをUnlit > HeightGradationShaderに変更します

f:id:am1tanaka:20191209132103p:plain — シェーダーをマテリアルに設定

SphereでもCapsuleでもQuadでも、適当な3Dオブジェクトを作成して、作成したマテリアルをアタッチします

f:id:am1tanaka:20191209133058p:plain — デフォルト設定でアタッチした例

パラメーター

設定できるのは、テクスチャー、上端の高さと色、下端の高さと色です。

f:id:am1tanaka:20191209133511p:plain — パラメーターの調整

以上です。

このシェーダーはUnlitなので光の影響は受けません。フォグは有効です。

ざっくりと考え方

シェーダーは時々気が向くと触る程度で、記憶には何も残っていない初心者です。天神いなさんのこちらのブログを読みつつ作成しました。基本的な知識はほぼこれで得られました。

amagamina.jp

やりたかったことは以下の通りです。

オブジェクトの上端と下端の高さと色を設定する
オブジェクトの各頂点の高さから、設定に合わせた頂点色を計算して頂点カラーを設定する

以上から、必要な仕様は以下の通り。

float型の値を2つと、色を2つ、マテリアルから設定できるようにする
頂点の高さから、上端と下端に対する内分率を求める
上端の色と下端の色と求めた内分率から、頂点の色を決定
求めた頂点の色を適用する

実装の解説

ブログに従って、Unlitシェーダーから作成しました。

パラメーターの設定

マテリアルで設定するパラメーターはPropertiesで宣言します。高さはFloat、色はColorで宣言すればよいので、以下の通りです。

// 3:
    Properties
    {
        _MainTex("Texture", 2D) = "white" {}
        _TopY("TopY", float) = 0.5
        _TopColor("TopColor", Color) = (1, 1, 1, 1)
        _BottomY("BottomY", float) = -0.5
        _BottomColor("BottomColor", Color) = (0, 0, 0, 1)
    }

MainTexはもともとあったテクスチャの宣言で、それ以外が追加したパラメーターです。これでマテリアルから欲しいパラメーターを設定できるようになります。ここで使える変数型はこちら。

処理に必要なデータの定義

頂点シェーダーからフラグメントシェーダーに渡すデータを定義します。v2fというのがそれです。頂点色を渡したいので、vert_colorという名前のfloat4型のパラメーターを追加しました。

// 32:
            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vert_color : TEXCOORD2;
                float4 vertex : SV_POSITION;
            };

プロパティの値を受け取るための変数を定義します。プロパティの最初に書いたのと同じ名前の変数を定義すればOKです。高さの値は制度はそれほど必要ないのでhalfにしました。float、half、fixedのどれを使うかの基準はこちらにあります。

// 42:
            half _TopY;
            half _BottomY;
            float4 _TopColor;
            float4 _BottomColor;

頂点シェーダー

今回の肝はここです。追加したのは以下の52,53行目の2行です。

// 47:
            v2f vert(appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                half t = (v.vertex.y - _BottomY) / (_TopY - _BottomY);
                o.vert_color = lerp(_BottomColor, _TopColor, saturate(t));
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

頂点の座標はv.vertexで渡されます。これはモデル座標系、つまり親のオブジェクトを原点とした座標です。今回やりたかったのは、正にこの座標系での高さでの判定だったのでそのままこの値が使えます。

与えられた高さを、下端なら0、上端なら1になるように変換します。

y座標から下端を引いて、下端の高さが0になるようにする
求めた値を、上端-下端で割って、上端の高さが1になるようにする
saturateを使って、0未満は0に、1以上は1に丸め込む
lerpに下端の色、上端の色、求めた内分率を渡して、頂点に対応する色を求める

以上で求めた色を、宣言しておいたvert_colorに放り込んで頂点シェーダーは完了です。

saturateについて

saturateは組み込み関数です。最初はmaxとminで求めましたが、Clampぐらいあるだろうと調べて見つけました。UnityのシェーダーはCg/HLSLと名乗っているnVIDIAのCg言語とMicrosoftのHLSLを混ぜた怪しいやつなのですが、とりあえず同じようなものらしいので、どちらかのリファレンスに載ってるやつは使えるだろうということで試したら的中でした。

HLSLのリファレンスはこちら。

Cgの組み込みライブラリのリファレンスはこちら。

追記

CgとHLSLについて、さやちゃんぐbotさんからコメントいただきました！

ちょっぴり記事の内容を補足すると、現状Unityでシェーダーを扱うならもうCg言語は無視してもほぼ問題ないでしょう。
マイクロソフトが公開しているHLSLのリファレンスだけ見てればOKです。今後のSRP環境ではCGPROGRAMがHLSLPROGRAMに代わっていくことでしょう！
— さやちゃんぐbot (@songofsaya_) 2019年12月9日

HLSLの方で調べるのがよさそうです。この辺もやもやしてたのでスッキリしました^^

フラグメントシェーダー

フラグメントシェーダーは簡単です。受け取った色を、テクスチャーの色に掛けるだけです。以下の63行目がそれです。

// 58:
            fixed4 frag(v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv);
                // gradation
                col = col * i.vert_color;
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return col;
            }

これで出来上がり！！

Cgか、HLSLか、GLSLか(12/12追記)

今から始めるならどれだ、というのが悩みどころです。Unityは当初はCg言語を採用していたようですが、開発元のnVIDIAがCg言語の開発から手を引くと宣言してしまいました。Cgのリファレンスに「これからWindows向けにシェーダーをやるならHLSLがいいよ～」的に書いてあります。

この辺りの流れについて、さやちゃんぐbotさんの以下のスライドの11～14ページあたりで触れられています。

learning.unity3d.jp

しかし、ターゲットがスマホの場合はどうなんだ？となります。AndroidはGLSL、iOSは古いのはGLSLで最近のはMetalです。この辺りについては、Cg/HLSLでも問題が起きることがあるそうです。

モバイルを考えると話がややこしくなりますよね。開発時はHLSLで書いて、UnityがHLSLをGLSLにトランスパイルしてくれる。ただ、例えばOculusGoとかQuestでトラブった時に追いかけていくと、GLSLの仕様にぶつかったり…みたいな。
裏で何が起きていたか～みたいなの、今年WebGLスクールにいってわかった
— さやちゃんぐbot (@songofsaya_) 2019年12月9日

UnityはGLSLには対応はしてはいるけど、HLSLの方を主に据えているのでGLSLを使うには注意点があるっぽい。iOSはMetalだからGLSLで書いたとしても安泰ではありません。結局、オールラウンドな選択肢はないというのが現状のようです。開発リソースが小さい個人開発の場合は、Unityさんの仕組みに乗っかってHLSLベースで開発して、不具合が発生したらGLSLやらMetalやらと仕様を突き合わせて対応する、というのが現実的っぽいです。

まとめ

高さ限定という用途が制限されまくりの習作シェーダーの完成です。

必要なプロパティを定義
利用する機能を指定
受け渡したいデータを定義
頂点とフラグメントシェーダーを書く

という流れがおおよそ把握できたので、簡単なシェーダーなら自作できそうです。画面中心から同心円状にグラデーションをかけるのも作りたかったので、それもおおよそ見当つきました。

今回のは高さ限定でしたのでとてもシンプルでしたが、高さ以外の方向を基準にする場合は、基準となる向きベクトルをプロパティに追加 > 向きベクトルを単位ベクトルにする > 単位向きベクトルと座標の内積を求める > 求めた内積の値に対して、今回と同じ処理をする、でいけると思います。

何かのお役に立てば幸いです！

参考URL

2019-12-06

Unityの命名規則とエディター設定

Unityメモ命名規則

2023/8/18 あれこれ調べてprivate変数の前に_を付ける記法はまだ採用が少なかったので元に戻しました。

2023/8/17 情報が古くなったので一部改訂しました。

プライベート変数はキャメルケース ~~→ _からはじまるキャメルケース~~ 2023/8/18に取り消し
パブリック変数は原則としてプロパティーにすることを追記
変数は名詞、インターフェースは形容詞、関数は動詞からはじめる、boolは疑問形にする
イベントの命名ルールを追記

この記事は、Unity #2のカレンダー | Advent Calendar 2019 - Qiitaの7日目の記事です。

前日の記事は、@ma_shさんのGraphView完全理解した(2019年末版) - Qiitaでした。

GitHub - am1tanaka/Unity-Code-Style-Guide: A inspirational C# code style guide for Unity projects

色々な言語を渡り歩いていたことで、変数名やら関数名の書き方になんとなくルールはあるけどその時の気分でブレる、というのが最近の状況でした。Unityのアセットでも違うし・・・。

ぼちぼちちゃんとしようと思い、Unityではどんな感じなのかを調べてみました。併せて、Visual Studio Community(多分Codeとか他のエディターでも使える)で自動的に規則をチェックしてくれる設定ファイルも用意してみました。

目次
まず結論
命名規則とは
バイブルはUnity Communityに決めた！
Unityにおける命名規則
ファイル名の命名規則
- ファイル名やレイヤー名はスネークケース
コード規則を自動化するEditorConfig
- 改行コードの不一致の修正
- 規則をカスタマイズする
まとめ
参考・関連URL

まず結論

あれこれは後回しにして、今回まとめた内容です。

大文字と小文字のルール

Unityで作成するアセットやクラス名、メソッド名、プロパティー名など、原則としてはパスカルケース
- PascalCase (単語ごとに頭文字を大文字で書く)
メンバ変数、ローカル変数、パラメーター(引数)は、キャメルケース
- camelCase (パスカルケースの頭文字を小文字にした版)
インターフェースは頭文字をIにして、パスカルケースで続ける
- IMyInterface
Unity以外で作成する画像や音声データなどは、小文字のスネークケース
- snake_case (小文字のみで、単語の区切りはアンダースコア_)

Visual Studioなどで、自動的にやるには以下の手順を。

Unity用の.editorconfig | たなかゆうを開いて、.editorconfigという名前で、Unityのプロジェクトフォルダー直下に保存
Unityからプロジェクトを開いて、何かスクリプトを開く
プロジェクトメニューから、既存の項目の追加をクリック
コピーした.editorconfigファイルをダブルクリックして追加

以上で、エラー一覧ウィンドウのメッセージのところで、規則違反を確認できます。

名前に使う単語

変数名は名詞。ただし、bool型の場合はisやcanをつけて疑問形にtrueやfalseで答える形にする
関数名は動作を表す動詞ではじめる。これもbool型を返すものについてはIsやCanやHasなどを頭にもってきて疑問形にする
インターフェース名は形容詞
イベントのデリゲート名は、処理前なら進行形の動詞、処理後なら過去形の動詞を付ける
デリゲートをInvoke()するための関数はOnを頭につける

public変数について

原則としてpublicな変数は使わず、値を公開したい場合はプロパティーを使います。

// 読み出しだけなら => か自動実装書式が便利
int _myData;
public int MyData => _myData;

public int MyData2 {get; private set;}

// 読み書きなら自動実装書式
public int MyData3 {get; set;}

これらをまとめたサンプルを以下のリポジトリーで公開しています。

以下、お暇ならどうぞ。

命名規則とは

ファイル名やクラス名、変数名などをつける時の規則のことです。

一番の役割は問題を予防するためでしょう。Unityの場合であれば、ファイルやフォルダー名にはユーザーフォルダーも含めて日本語にしない！というのがあります。常に問題になるわけではありませんが、WebGLだとビルドに失敗する爆弾を抱えることになります。Unity1週間ゲームジャムの締め切り間際に時々、断末魔がTLに流れますが、そのような事態を防ぐことができます。

プログラミングの場合は、変数や関数がどのようなものか予想しやすくするということが挙げられます。ぱっとコードを見てなんとなくやっていることが予測できればバグの予防や保守性の向上に繋がります。また、変数や関数名を考えるのが苦手な人は多くて、そういう人たちには命名のヒントになります。

バイブルはUnity Communityに決めた！

まずは宗派を決めます。なるべくオフィシャルの近くで議論されているところがいいなぁということで、Unity Communityのものを柱にすることにしました。

~~http://wiki.unity3d.com/index.php/Csharp_Coding_Guidelines~~

調べると大体ここが出てくるので、総本山と見てよさげです(シングルトンのひな形などもあちこちで散見しますが、自分はUnity Communityのものを利用しています)。 → 2023/8/17現在、ページが消えてました。

和訳は @shun-shun123 さんがしてくださっています。

Create a C# style guide: Write cleaner code that scales | Unity

新しいドキュメントがUnity公式から公開されて、2023/8/17にこちらに乗り換えました。

Unityにおける命名規則

個人的には、かっこの位置とか細かいことは全く気にならない(違いに気づけない)ため、Visual Studioさんにお任せです。ということで、重要なのは命名規則のところです。以下に抜粋。

ハンガリアン記法は使わない
接頭語(, m, s_, etc)は~~使わない~~使うか使わないかを決めて、その方針を一貫させる
ローカルとメンバ変数を判断するときは"this"を使う
メンバ変数にはキャメルケースを使う(e.g myData)
パラメータにはキャメルケースを使う
ローカル変数にはキャメルケースを使う
関数、プロパティ、イベント、クラス名にはパスカルケースを使う(e.g MyData)
インタフェースの名前は"I"から始める
enums, classes, delegatesの先頭は文字で修飾しない

原則としては、マイクロソフトのC# プログラミングガイドに従おう、ということだそうです。こちら、とても参考になります。

docs.microsoft.com

そして日本の場合、

日本語や全角文字を使わない

も加えておくのが良いでしょう。せっかく規則を作るのだから、要らぬ混乱の元は断ち切っておくのが吉。

ハンガリアン記法、DirectXの頃は使ってたなぁ。その下の「接頭語は・・・」や「enums, classes, delegatesの先頭は・・・」もハンガリアン記法ですよね。昔は今みたいにコードの説明を自動的に表示してくれるなんてしてくれなかったので役立ちましたが、今どきの頭のよいエディターは全部表示してくれるから確かに要らない気がします。時代に合っていてよいですね。インターフェースのIが生き残っているのは趣深い。

パスカルケース

ざっくりとまとめると、基本的にはパスカルケースを採用しています。パスカルケースは、単語の頭文字が大文字であとは小文字で書く方法です。

// :
PascalCase

というような感じです。

キャメルケース

メンバ変数、ローカル変数、パラメータ（引数）にはキャメルケースを使います。キャメルケースとは、最初の文字が小文字のパスカルケースです。

// :
camelCase

となります。ルールはこれだけで、列挙子や定数、プロパティなども、ここに登場しないものはパスカルケースです。統一されていて守りやすい規則でいいですね！

staticと公開範囲はどっちが先？

// こんな順番のと
static public int staticFirst;

// こんな順番のがある
public static int staticSecond;

アセットの中身見てると、ちょいちょい前者の順番を見かけます。そう書いてもVisual Studioさんが逆にしちゃうのでもっぱら後者を使ってます。C# プログラミングガイドでも後者の順番でしたので後者でよさそうです。

docs.microsoft.com

ファイル名の命名規則

Unityで作成するファイルはビルドされてるのでこれでいいのですが、画像や音声など外部から読み込む可能性のあるファイルについては別規則の方がいいかも・・・という気がします。Linuxなどでファイル管理する場合、大文字小文字が入り乱れるのはなんとなく気持ち悪いし・・・。ということで、Unity以外のツールで作成するリソースについては、他の命名規則の方がいいかもしれない、ということで探したところ、クラスメソッドさんの以下の記事がよさそうです。

dev.classmethod.jp

命名規則の必要性などについても、しっかりと書かれております。

ファイル名やレイヤー名はスネークケース

スネークケースとは、単語をアンダースコア(_)でつなげる書き方のことです。上下にうねうねして見えるのが蛇っぽいからとかなんとか。

// :
snake_case

Linuxのファイルシステムは大文字と小文字を区別するため、大文字小文字を混ぜたファイル名のつけ方をすると、同じファイルのつもりが別のファイルになってしまっていたというような問題が発生します。さらにその状態で大文字小文字を区別しないWindowsとやり取りするとえらいことになります。ということで、識別がしやすい小文字に統一するのが一般的だと思います。そして、こちらでも日本語は封印されています。

単語の並べ順や単語数は、プロジェクト次第で決めることになると思います。リソース数が数十程度の小さなプロジェクトなら名称_目的や行動[_通し番号]で、あとはフォルダー分けするぐらいでしょうか。

haku_walk_00.png
haku_walk_01.png
block_albedo.png
block_normal.png

何千とか何万のリソースを使うプロジェクトでは、カテゴリーや種類なども含めたり、解像度によってリソースを切り替えたい場合などもそれ用の記載が必要になると思います。プロジェクトの規模や、扱うリソースの複雑さ次第で、適した命名ルールを決めていくことになると思います。綺麗に種類ごとに並ぶような命名方法が使いやすい方法だと思います。

コード規則を自動化するEditorConfig

規則を決めても、守られているかを人力でチェックするのは辛いです。これを自動化してくれるのがEditorConfigです。

editorconfig.org

docs.microsoft.com

仕様に従って作成した.editorconfigという名前のテキストファイルをプロジェクトフォルダーに入れておくことで、命名規則やかっこの位置などについてのチェックをしてくれます。Visual Studioをはじめ、コードエディターなら大体機能を持っていると思います。以下、Visual Studio 2019 Communityで作成した設定ファイルです。

この.editorconfigをUnityのプロジェクトフォルダーの直下に置いておけば、エラー一覧のメッセージに以下のように規則違反があれば表示されるようになります。

ただ置くだけでは機能しないかもしれません。その時は、以下の手順でプロジェクトに読み込みます。

プロジェクトメニューから、既存の項目の追加をクリックします
コピーした.editorconfigファイルをダブルクリックして追加します

以上でプロジェクトに設定が読み込まれて規則のチェックが動作すると思います。それでも表示されない場合は、エラー一覧ウィンドウのメッセージボタンの右にあるコンボボックスを確認してください。IntelliSenseが含まれていない場合は動作しないので、ビルド+IntelliSenseにしてください。

改行コードの不一致の修正

改行コードがLFやらCR+LFやら混在しているとUnityがwarningを出します。上記の.editorconfigでは改行コードをWindowsに統一する設定をしているので、警告が出たスクリプトをVisual Studioで閉じて開けば修正してくれます。

規則をカスタマイズする

この設定ファイルはざっくり作ったもので、運用はこれからなので抜けがあるかも知れません。.editorconfigを直接書き換えるか、Visual Studioで設定を編集することができます。

Unityからソースコードを開いて、ツールメニューからオプションを選んで、左のメニューからテキストエディター > C# > コードスタイルを開くと、設定を確認できます。

設定方法はコガネブログさんで紹介されています。

baba-s.hatenablog.com

まとめ

Unityで作成するアセットやファイル、クラス名、メソッド名などは、原則として頭文字を大文字で表すパスカルケースにします。

メンバ変数、ローカル変数、パラメーター(引数)のみは最初の文字が小文字で、それ以外は単語の頭文字を大文字にするキャメルケースにします。

Unity以外で作成する画像ファイルや音声ファイルについては、単語の区切りをアンダースコア(_)で区切って、小文字の英語と数字を使うスネークケースを採用することにしました。

.editorconfigはとても強力です。うっかり名前を付け間違えても教えてくれるので、チームで共有すると便利です。

この方針で運用してみて、何か出てきたら見直していこうと考えています。これまで微妙にブレていた方針が統一されてすっきりしました。

見落としや誤り、こっちの方がいいよ、というところがございましたらお知らせいただければありがたいです！

明日は、@su10さんの番です！！

参考・関連URL

2019-10-27

1週間ゲームジャム「さがす」に参加して(後記)

unity1week

秒速忍者-箱入り娘編- | フリーゲーム投稿サイト unityroom

ランキングが発表されました！なるほど～というのが沢山並んでいたり、あれ？あの作品は？というのがあったりでドラマがあります。

雑感

今回はランキングに拘らずなるべく最小手で参加を、という目的でした。結果としてはその通りになって総合30位には入りませんでした。しかし、楽しさと操作性で30位以内に入れました^^ ご評価下さった皆様、ありがとうございました！

f:id:am1tanaka:20191027202324p:plain — 楽しさ28位

f:id:am1tanaka:20191027202405p:plain — 操作性23位

ランキングに入るのは300を超える作品のうちの30位までです。偏差値でいえば62とか63。そんな中に、あの手数でランクインできたのは嬉しいことでした。特に楽しさの部門でのランク入りはゲームの本分なので喜んでおります。

みんなの評価

ランキングに入らなければ価値はないのか？そんなことはありません。皆さんの評価こそ大切だと思います。

f:id:am1tanaka:20191027202424p:plain — みんなの評価

このグラフが得られるのはUnity1週間ゲームジャムに参加する大きなメリットです。すべての項目で3.5超えを目指してみてください。達成できていれば、例えランクインしていなくても十分に良い成果だと思います。もし、下回っている項目があってもガッカリする必要はありません。取り組むべき課題が見つかったということなので喜ばしいことです。対策を心がけて、次の1週間ゲームジャムで目標を達成すればレベルアップができます。

参加の様子はこちらにまとめました。準備をして企画を工夫すれば、参加は難しくありません。日頃からアイディアを考えておいて、良いタイミングの開催の時にインパクトがあるものを叩きこんでみてください！次の目標が見つかるかもしれませんし、開発者のつながりを作るきっかけになるかも知れません。

次回に向けて(パート2)

次回はデジゲー博も終わってますし、1年生を本格参戦させる回なので自分も本腰を入れられる、かも知れません。前回のブログで一度まとめましたが、皆さんの作品を遊んで感じたことを改めまして整理。

音の同期はやっぱり強い
少しのパラメーターで種類を増やす
色を合わせる、消す
数で耐久性があるやつ
パワーアップの爽快感
企画が強ければポストプロセスはなくても大丈夫(しかし、自分の場合は画面作りが強くはないので、頼った方がいいか)

次回の自分の課題は、パワーアップやコンストラクションかなぁ。苦手なやつ。音を同期させる。画面はプリミティブで大丈夫。色要素も使えればいいんだけど、下手に混ぜるのも混乱してよくないのでこれはテーマ次第で。いつも弱い斬新さをちょっと意識したい。企画も含めた素振りをしておきたいです。

最後に

遊んで下さった皆様、素敵なアセットを開発して下さったクリエイターの皆様、ありがとうございました。ゲームを公開した皆様、お疲れさまでした。自分ではゲームの消化が捗らないのですが、ぱふもどきさんのライブ中継を拝見して大いに助かっています！今回もいいゲーム開発の素振りができました。このような場を作って下さったnaichiさん、ありがとうございました！

1週間ゲームジャム「さがす」に参加しました！

unity1week

f:id:am1tanaka:20191020173914p:plain

さきほど投稿が終わったので、前回さぼったブログを～。

今回公開したのはこちら。

秒速忍者-箱入り娘編- | フリーゲーム投稿サイト unityroom

マウスで忍者を操作します
忍者で箱を横切ると箱を叩ききれます
姫やBBAが隠れている箱があり、その箱を壊すと中から隠れていたキャラが飛び出してきます
姫をクリックすれば任務完了！殿様からの評価をもらえます
BBAを間違えてクリックすると、殿様の激昂を買って打ち首になるので気を付けてください！

といった感じです。ざっくりと開発の流れを振り返ります。

参加の経緯

今回参加のきっかけはこちらの発表をしたことでした。

教育者向けUnity道場のLTで、初発表にうってつけ的なこと話してきました。初参加者が増えるといいな^^ #unity1week
【Unity道場幕張スペシャル3】専門学校のゲームプログラマーコースにおけるUnity1週間ゲームジャムの活用事例 #unity #unity3d https://t.co/sz0eVEX9iO @SlideShareさんから
— たなかゆう (@am1tanaka) October 7, 2019

「素振り程度の感じでうっかり参加すると吉ですよ～」と発表した手前、そのぐらい力を抜いた参加を今回はできないか、ということでチャレンジしてみました。負担を分散するため一週間前から少しずつ動きはじめました。

フライング期間

フライングブログ1日目

今回は個人的にはデジゲー博の準備、学校はDATフェスタという学園祭の準備で全然時間が避けそうにありません。が、参加はしたい。ということで、徹底的に目的を絞った上でフライングで準備を進めて、なんとか参加することを目指します。あれこれ忘れそうなので作業メモを公開しつつ進めてみます。

昨日こそ丸一日使ってしまいましたが、今日も含めてほぼ作業しない日もあったので、これはうまくいったと自己評価しています。前日に投稿が完了するという、ずっとやりたかったこともできて満足。

当初掲げた目標です。

実作業1時間+進捗メモ執筆。企画などは移動時間を活用
ランキング入りは目指さない！！
参加者（特に初参加）のみなさんの作品をなるべく遊んで評価やコメントする
実験要素を一つ導入して、あとは徹底的にコンパクトに

最初のはほぼ完遂。二番目も力を入れすぎないために意識しました。三番目はこれからやります。最後のは途中で方針変更をしました。あとはアセットの棚卸しと発案素振りで終わり。この時はまだ手持ちのアセットを使う方針でした。

フライング2日目

アセットのテストをしたり、アイディアの具体化をする過程で、今回の最終的なテーマである「初級者が使える程度の技術でなんとかする」という方針が浮かびました。これにより、今回の参加の方向が決まりました。

フライング3日目

1年生の夏休み前にやった内容をリストアップした上で、企画を検討していました。この時は、以前から考えていたプリミティブな図形だけで感情表現をすることを考えてました。作業らしい作業はしてません。

フライング4日目

マルズラットを考えてました。タイトル案が好き。企画がいつものように無機質で無感情になっていったので、顔を出してテンションを挙げたのでした。床の解決策はすでに用意していたので、テーマ次第ではこれで作ったと思います。

フライング5日目