tanaka's Programming Memo

プログラミングについてのメモ。

MK GlassとPro Texで氷を作る

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

assetstore.info


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

assetstore.unity.com

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

f:id:am1tanaka:20191211231607p:plain
VoxelorerBirdの氷ブロック

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

f:id:am1tanaka:20191211230909g:plain
作例:氷に乗って迫りくるペンギン!

目次

MK Glassとは

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

assetstore.unity.com

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

assetstore.unity.com

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

f:id:am1tanaka:20171101153137j:plain
正規版とFree版の違い

Pro Textとは

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

assetstore.unity.com

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

am1tanaka.hatenablog.com

インストールとデモ

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

f:id:am1tanaka:20191211182102p:plain
Example

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

エラーの解消

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

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シーンと、ダウンロードして読み込んだMKGlassExample0MKGlassExample1の3種類のデモを見ることができます。

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

f:id:am1tanaka:20191211183259p:plain
Demo

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

f:id:am1tanaka:20191211183313p:plain
MKGlassExample0

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

f:id:am1tanaka:20191211183330p:plain
MKGlassExample1

氷を作ってみる

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

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

f:id:am1tanaka:20191211212142p:plain
Glassシェーダー

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

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

f:id:am1tanaka:20191211212222p:plain
マテリアルを設定

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

f:id:am1tanaka:20191211212252p:plain
デフォルトのままのGlassシェーダー

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

f:id:am1tanaka:20191211212714p:plain
パラメーターをいじる

デコボコさせてみる

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

f:id:am1tanaka:20191211213224p:plain
Normalマップテクスチャー

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

f:id:am1tanaka:20191211214810p:plain
Normalマップをアタッチ

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

f:id:am1tanaka:20191211214856p:plain
デコボコ具合の確認

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

f:id:am1tanaka:20191211215138p:plain
Wall0_N

wall01normalぐらいです。

f:id:am1tanaka:20191211215152p:plain
wall01normal

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

ProTexでデコボコを作る

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

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

f:id:am1tanaka:20191211220315p:plain
ProTex Texture

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

f:id:am1tanaka:20191211220413p:plain
ProTexテクスチャー

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

f:id:am1tanaka:20191211220648p:plain
ノイズ

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

  • FBM Noiseoutをドラッグして、Outputnormalでボタンを離します

f:id:am1tanaka:20191211220856p:plain
ノイズをNormalへ

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

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

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

f:id:am1tanaka:20191211221301p:plain
テクスチャーサイズを設定する

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

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

f:id:am1tanaka:20191211221436p:plain
自作のNormalマップによる氷

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

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

f:id:am1tanaka:20191211221919p:plain
パラメーターを変更したら、Apply Changesをクリックするのを忘れずに!

作例

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

f:id:am1tanaka:20191211230909g:plain
完成!

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

assetstore.unity.com

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

assetstore.unity.com

こちらは、Low Poly Series: Caverns - Asset Storeと組み合わせた例です。

f:id:am1tanaka:20191213211857p:plain
洞窟のクリスタル

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

assetstore.unity.com

まとめ

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

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

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

f:id:am1tanaka:20191211231607p:plain
VoxelorerBirdの氷ブロック

参考URL

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

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

購入したラズパイと、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]キーを押して、エディターを保存して閉じます。

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

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のインストール時に設定した簡単なパスワードです。

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

macからのアクセス

maciOSAndroidのデバイスからなら、そのままファイルサーバーにアクセスできるそうです。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

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

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

qiita.com


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

https://cdn-ak.f.st-hatena.com/images/fotolife/a/am1tanaka/20191209/20191209133511.png

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にしました。floathalffixedのどれを使うかの基準はこちらにあります。

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

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

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

追記

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

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言語を採用していたようですが、開発元のnVIDIACg言語の開発から手を引くと宣言してしまいました。Cgのリファレンスに「これからWindows向けにシェーダーをやるならHLSLがいいよ~」的に書いてあります。

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

learning.unity3d.jp

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

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

まとめ

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

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

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

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

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

参考URL

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

この記事は、Unity #2 Advent Calendar 2019 - Qiitaの7日目の記事です。

qiita.com

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

qiita.com


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

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

目次

まず結論

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

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

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

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

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

f:id:am1tanaka:20191205140427p:plain
命名規則違反の例

以下、お暇ならどうぞ。

命名規則とは

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

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

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

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

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

wiki.unity3d.com

調べると大体ここが出てくるので、総本山と見てよさげです(シングルトンのひな形などもあちこちで散見しますが、自分はUnity Communityのものを利用しています)。

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

qiita.com

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のプロジェクトフォルダーの直下に置いておけば、エラー一覧のメッセージに以下のように規則違反があれば表示されるようになります。

f:id:am1tanaka:20191205140427p:plain
命名規則違反の例

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

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

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

規則をカスタマイズする

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

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

f:id:am1tanaka:20191205203258p:plain
コードスタイルの設定

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

baba-s.hatenablog.com

まとめ

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

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

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

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

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

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

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

参考・関連URL

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

秒速忍者-箱入り娘編-

秒速忍者-箱入り娘編- | フリーゲーム投稿サイト 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さん、ありがとうございました!

関連URL

www.youtube.com

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

f:id:am1tanaka:20191020173914p:plain

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

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

秒速忍者-箱入り娘編-

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

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

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

目次

参加の経緯

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

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

フライング期間

フライングブログ1日目

am1tanaka.hatenablog.com

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

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

当初掲げた目標です。

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

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

フライング2日目

am1tanaka.hatenablog.com

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

フライング3日目

am1tanaka.hatenablog.com

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

フライング4日目

am1tanaka.hatenablog.com

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

フライング5日目

am1tanaka.hatenablog.com

台風を無事に生き延びてのブログ。前日は、一階が浸水する、屋根が飛ぶ、家が倒壊する、といったことを本気で想定して備えていました。とりあえずプロジェクトを作成して、必要なアセットの読み込み、ビルド、unityroomへの登録などを済ませてお題を待ちました。

そういえば、このブログを書き始めた時点ではUnity2019.1対応だったのが、ブログを書き終えて公開前のチェックをしたらUnity2019.2に対応してたのでした。

1週間ゲームジャム期間

初日!

お題が「さがす」に決定!先に考えていたマルズラットでもゴールの星を探すようにすればまあ行けるけど、とりあえず新企画の検討!

  • 「さ」が「す」になっているのを直していくとか、赤坂をさがすとか、言葉遊び系
  • 砲撃して相手の場所を探るような対戦ゲーム系
  • ランダムで適当に結果を出す診断系
  • スズメを探したり、コサギのガサガサのシミュレーションなどの生き物系
  • クラッチを元に、沢山のものを壊しまくって、あっという間に勝負を決める系

以上のようなのをつらつら考えているうちに、とにかく沢山パーティクルで散らしたれ、という最後のスクラッチアイディアが残りました。

プログラムの難易度は低い。沢山壊れるから気持ちよさそう。キャラを出してネタもできそう。

そんなことで決めました。

初日はメイン作業が押してしまったため、寝る前にちょこっとだけ作業。1時間ぐらいで以下のような原型を作って寝ました。

2日目

この日も殆ど進まず。姫のドットを置いただけでした。

3日目

3日目でようやくプログラミングっぽいことを。

今回、はじめてワンシーンでやってみました。ガチャガチャっと作るとやっぱり初期化が混乱しがちな印象ですが、遷移が速いのはいいですね。もう少しセンスよく上下左右にシーンを配するなどすると、かっこよくなりそう。今後の課題です。

4日目

ランキングを組み込んでました。

順位を表示したかったのでちょっと改造したり。ここまでゲーム動かしてないじゃん^^;

5日目

一気にゲーム部分が完成しました。

18時ぐらいから作業開始して、25時ぐらいまでやってたもよう。途中あれこれしながらだけど5時間ぐらいはやってたかな?

6日目

積み残していた、ネットランキングと画像ツイートの連携を中心に仕上げ。

この日の時点ではBBAを捕まえてもタイムロスだけでしたが、アップした動画を見て、なんか地味でネタ不足に感じたので、いっそゲームオーバーにすることにしました。タイムによってメッセージを変えたりも、この日に思いついて突っ込みました。

ということで、投稿予約!

最終日

今日です。積み残しは以下のやつ。

  • フルスクリーンにすると、アスペクト比が違うモニターで表示が崩れる問題
  • マウスを素早く動かすと、箱の切り残りが発生する
  • チュートリアルがない

マウスを素早く動かすのへの対応は、Physics2D-RaycastNonAlloc - Unity スクリプトリファレンスで瞬殺。

苦戦すると思っていたアスペクト比が違う時の対応ですが、今回利用していたPixelPerfectCameraで簡単に対応することができました!( Class PixelPerfectCamera | Package Manager UI website )

あとは、最後にゲームバランスを調整するために箱の数を減らしてカメラを調整した時に箱の大きさが相対的に大きくなってしまったので、それを修正して完成!

今回の1週間ゲームジャム、完了となりました。

アスペクト比が変わることへの対応

苦戦すると思っていたアスペクト比が違う時の対応ですが、今回利用していたPixelPerfectCameraで簡単に対応することができました!( Class PixelPerfectCamera | Package Manager UI website )

f:id:am1tanaka:20191020171130p:plain
Pixel Perfect Camera

これのCrop Frameの設定が最高で、チェックを入れておくとアスペクト比が異なる場合に、Cameraのビューポートを自動的に調整してReference Resolutionアスペクト比を維持して、画面外になる場所は黒くしてくれます。これでゲーム画面は対応完了です。

あとはUIですが、これはCanvasの下にPanelを置いて基準となる解像度にして、ボタンや文字などをそのPanelの子にすることで自動的に解決しました。

まずはお約束のCanvasCanvasScalerの設定をします。解像度を設定して、Expandにしておきます。

f:id:am1tanaka:20191020171759p:plain
Canvas Scaler

その下にPanelを置いて設定します。今回の基本解像度は960x540なので、Panelをそのサイズにしています。配置は画面中心にしています。子供の要素をこのPanelを基準にレイアウトすることで、アスペクト比や解像度が変わっても大丈夫です。

f:id:am1tanaka:20191020171610p:plain
Canvasの設定

次回に向けて

次回は1年生に積極的に参加してもらうタイミングなので、自分も参加予定だなぁと・・・。技術縛りがあったことで、企画側で何かインパクトを出さねばならない、というのを普段より意識しました。これはよい体験だったと感じたので、次回も意識したいところです。

改善点としては、土曜日に難航したツイート周りやアスペクト比への対応は、本来はゲームジャム期間前に準備できることでした。また、ツイートした時のキャッチーさが足りないのはいつものことですが、今回もダメな感じでした。ということで、一応、次回に向けて。

  • キャッチーな画面について研究
  • フレームワークを整理
  • 使えそうな技術のリサーチ

こんなところでしょうか。

まとめ

今回の最大の目的である、メインの作業であるデジゲー博の準備には殆ど影響なく参加できました。ここ最近、小難しいゲームが続いていたので、短時間でランキング競争ができる作品を作ってみたかったので、その点は欲求が満たせました。

技術的には特殊なことは殆どしていませんが、以下は1年生に教えていないものでした。

  • Pixel Perfect Camera
  • Physics2D.RaycastNonAlloc
  • Animationのイベント

Animationのイベントは取り入れようかな?と感じました。なくてもやりようはありますが、知っていれば簡単に解決できる演出や動きがあるので、知っておいた方がいいかなと思いました。

あとは、当初の目的の一つであった、参加者の皆さんの作品をあれこれ遊ぶ、というのをできる範囲ですが、やっていこうと思います。

参考・関連URL

unityroom.com

unityroom.com

ASCIIコード+JIS第1水準の文字

TextMeshProを使う時にフォントアセットを作成します。その際に使える限りの文字を定義してくださっているありがたいファイルが公開されてはいるのですが、容量食うし、テスト段階ではほどほどのやつでいいのです。ざっと探したのですが見つからなかったので自作しました。

◆ココを開いて、Rawボタンをクリックして、表示されたテキストを全てコピーしてTextMeshProのFont Asset CreatorCustom CharactersCustom Character Listのところに貼り付けてご利用ください。

以下の文字セットで、約3,580文字です。

  • ASCIIコード(0x21~0x7F)
  • 記号、英数字、かな(01区~08区)
  • 第1水準漢字(16区~47区)

Atlas Resolutionは4096x4096で比較的余裕で収まると思います。

ほぼ全ての日本語を利用したい場合は、@kgsiさんのUnityのText Mesh Proでほぼ全ての日本語を表示させる - Qiitaをご覧ください。

作り方概要

JISコードで欲しい範囲をループで回して、 http://unicode.org/Public/MAPPINGS/OBSOLETE/EASTASIA/JIS/JIS0208.TXT のファイルから対応するUnicodeを取り出して、文字表示するツールをVisual C#で書きました。

参考URL