2015年4月26日日曜日

SDユニティちゃんを小さくして使う

SDユニティちゃんのモデルサイズを変更して使う際のメモ。

モデルの大きさは簡単に変更できますが、ユレモノ関係の当たり判定が元サイズのままで服や髪がきれいに揺れてくれません。

今回はこれをなんとかしてみます。


目的

SDユニティちゃんを元サイズの1/2で使いたい(実質背丈が半分)。
ユレモノも適切に揺らしたい。
※最終的には任意倍率で調整可能にします。

環境

Unity5.0.1f1 personal

※SDユニティちゃんのAssetはダウンロード&プロジェクトにImport済み前提。
※作業中素材には『ユニティちゃんライセンス』で提供されるコンテンツを利用しています。


モデルサイズを1/2にする

SDユニティちゃんをシーンにドラッグ&ドロップ。
(ユレモノ設定済みの Prefabs内のSD_unitychan_generic を使用)

選択状態からInspectorのTransform欄を見るとScaleが <1,1,1> になっています。
これを <0.5, 0.5, 0.5>にすればシーン上のSDユニティちゃんは簡単に半分の背丈になります。

しかしこのままUnityをPlayしてみると・・・
サイズを1/2にした方のSDユニティちゃんは、服の裾がめくれあがったり、髪が持ち上がったりしています。
ユニティちゃんのアイデンティティであるツノ(?)もこれではまるでウサギ耳のように!?。

黄色い球のGizmosが揺れるパーツ側の当たり判定で、これらが元サイズのままなのが原因です。
※ここでは見えてませんがユレモノが当たる相手側(腕とか)の当たり判定サイズも同様です。



ユレモノの当たり判定サイズ

SDユニティちゃんの髪や服の裾などのユレモノは複数のスクリプトで制御されています。
(普通サイズのユニティちゃんのユレモノ対応版も同様)


今回注目するスクリプトは2つ。

スクリプト名 SpringBone: 髪などの揺れる側用。
スクリプト名 SpringCollider: 腕などの衝突相手側用。

これらのスクリプトがユレモノ関連パーツに適切に設定されています。


この2つのスクリプトはpublic変数 Radius を持っています。
この値による球状範囲が相互に当たり判定サイズになっています。

つまりこの値も全て1/2にすれば当たり判定サイズがモデルサイズに合うわけです。


SDユニティちゃんではSpringBoneは13個、Spring Colliderは27個各パーツに入っています。

簡単に言えば、シーン上のSDユニティちゃんモデルでこれら計40個のパーツ内スクリプトRadius値を1/2にするだけです。

手動で作業するならここで話は終了です。


が、大きさを変えるたびにこれを手作業でやるのはハッキリ言って、

疲れます( ゚Д゚;)


※ちなみにSDではないユレモノ対応ユニティちゃんではパーツ数が多く53個になってます。

ということで、スクリプトで自動化してみます。



ユレモノサイズ変更スクリプト

以下のC#ソースをシーン上のSDユニティちゃんに放り込んで使います。

PlayするとSDユニティちゃん内のSpringBone、SpringColliderを検索して各Radius値を書き換えます。
※resizeMag で倍率を指定。1/2なので0.5。
※非constでpublicの方が便利な気がしないでもない。適時お好みで。



スクリプト名:Extention_SpringForUnityChan
-----
/*
 *  @file   Extention_SpringForUnityChan.cs
 *  @attention  
 *  @note
 */
using UnityEngine;
using System.Collections;
using UnityEngine;
using UnityChan;// Scope for SpringCollider/SpringBone

public class Extention_SpringForUnityChan : MonoBehaviour {
    const float resizeMag = 0.5f; //!< Resize number

    void ChangeRadius_Spring(GameObject go){
        //SpringCollider[] cs_sc = go.GetComponentsInChildren<SpringCollider>(true);//note: find to hide object too when set true.
        SpringCollider[] cs_sc = go.GetComponentsInChildren<SpringCollider>();
        Debug.Log ("Found SpringCollider="+cs_sc.Length);
        for(int i=0;i<cs_sc.Length;i++){
            cs_sc[i].radius = cs_sc[i].radius * resizeMag;
        }
        SpringBone[] cs_sb = go.GetComponentsInChildren<SpringBone>();
        Debug.Log ("Found SpringBone="+cs_sb.Length);
        for(int i=0;i<cs_sb.Length;i++){
            cs_sb[i].radius = cs_sb[i].radius * resizeMag;
        }
    }

    void Awake(){
        ChangeRadius_Spring(gameObject);
    }
    //void Start () {
    //}
    //void Update () {
    //}
}
-----

スクリプト適用前後比較。



とりあえずこれで裾や髪も元サイズ同様な感じになりますヽ(´ー`)ノ

※今回は小さくしてますが、倍率値次第で大きくしても使えると思います。
※SDではないユニティちゃんモデル(unitychan_dynamic = ユレモノ対応版)でも使えます。

2015年4月8日水曜日

デカールを貼る ~ SubStance Painter

SubStance Painterで凹凸のある3Dモデルにデカールぽいものを貼ってみるメモ。


※他にもっとスマートな方法がありそうな気もしますが、とりあえずやってみたのでメモ。
※デカール = プラモデルなどで車のボンネットや戦闘機の翼などに貼ってあるマーク類。痛車ぽい絵を貼る際にも使えるかも。
※Blender上でも同様なことは一応できますが、SubStance Painterの方がいろいろと利便性が良い感じ。





環境

Windows7x64
SubStance Painter 1.3.3。
(モデルとマスクテクスチャ作成にBlender、PhotoShopを使用)

※作業中のデカール素材には『ユニティちゃんライセンス』で提供されるコンテンツを利用しています。


3Dモデルを用意

表面に凹凸があるモデルを用意(Blenderで適当に作ったもの)。
Obj形式でExportできれば他の3Dツールでも良いと思います。



□Blenderでモデルを作る場合のプチメモ:

先のモデルはBlender上では、
  • 色ごとに3つのObjectに分かれている(赤、青、緑)。

  • マテリアルは1つのみ作成。
    3つのObjectで1つのマテリアルを共用に設定。
     
  • UV配置も共存
    それぞれUV展開後、1枚のテクスチャ面積に収まるように各UVを配置。

こうしておくと SubStance Painter上では、
  • マテリアルは1つなので、1つのモデルのように塗れる。
    Particleでオイルなどを流した際に3つのObjectにまたがって流れてくれる。
    ※Blender上で各Object毎にマテリアルを個別に作ってしまうと別のマテリアル領域には流れない。
    デカールも貼りやすくなる(3つのObjectにまたがって同時に貼れるので)。

  • パーツごとの塗りには色選択マスクを使う。
    各Object毎の塗りは色選択マスクを使えば問題なし。
    (参考記事: 色選択マスク ~ SubStance Painter
    マスクは別途2Dソフトで作る必要有。
    BlenderからUVレイアウト(Object3つ分)を出力し2Dソフトで合成&着色するだけ。

  • SubStance Painter上での(3つのObject分の)作業結果も1枚のテクスチャ(法線/絵/光沢など各1枚)になる。
    ExportしてBlenderやUnityで貼る際にも楽。

ということで、Objectが複数あるモデルの場合はマテリアルを1つ(各Objectで共用)でExportすると楽な場合がありそうです。

色選択マスクのテクスチャ(UV)はこんな感じ。
※追記:左下1つだけ8角形に塗れてないのはミスです。
後から気付きましたが記事の本筋には支障がないのでそのまま( ゚∀゚;



SubStance Painterで準備

  1. 3Dモデルの読込。
    Obj形式でExport済みの3DモデルをSubStance Painterで読み込む。

  2. Fill Layerを3つ作成&各色選択マスク追加。
    各Fill LayerにAdd mssk with color selection で色選択マスクを追加。
    2Dソフトで作成済みの色選択マスクを読込む。
    3つのObjectに相当するパーツを色選択マスクで指定。
     
  3. 3つのパーツを適当に塗り塗り。
とりあえず適当にこんな感じに。


デカールを貼る


  1. デカール素材読込
  2. レイヤ追加
  3. ブラシ選択
  4. ブラシのマテリアルにデカール素材を指定



デカールを貼る面が正面にくるように3Dビューを調整。
※3Dビュー内で CTRL+SHIFT+マウス左ボタン押し状態で90度単位の回転を使うと楽。

ブラシ設定内で、アライメントをカメラに設定(重要ポイント)。
各~ジッタの数値を0にする。
Alphaを無し、他、貼る角度を変更など。

3Dビュー上で大きさを調整して左クリックで貼る。


貼り終わった状態。

独り言

SubStance Painterの入門者向け(?)な日本語情報が少ない気がします。

オンラインマニュアル(英語)も簡素な感じであまり詳細に触れてないような。

Youtubeの動画は情報源としてそれなりに有効なのですが英語ばかりですし。
(特に公式動画は早口過ぎっ)

3Dツール関係は必要な基礎知識量(?)が多そうなので、どこまで詳細に説明するかなど、いろいろ難しそうですね。

2015年3月26日木曜日

タイル床を作る~ SubStance Painter + Unity5

タイル床(?)らしきものを簡単に作ってみるメモ。



つくるモノの概要

  • 3Dモデルは単なる平たい四角形。
  • 左右の濃い色と中央とで質感を変えてみる。
  • タイル溝部分はノーマルマップで凹ます。 



    環境

    Windows7x64
    PhotoShop5.5。 ※png形式等で出力できればなんでも可。
    Blender2.73a(x64)。 ※Obj形式で出力できればなんでも可。
    SubStance Painter1.32。
    Unity5.0.0f4(x64)。


    モデリング


    Blenderで作業。
    OBJ形式で出力できれば3Dツールは何でも良いと思います。

    モデルはただのCubeを上下つぶして四角い板状にしただけです。

    UVは上面を床(?)として使う前提でテクスチャ全面に展開。
    (Blenderなら3D Viewで u>unwrap)。
    下面、横面はどうでも良いですが、一応下図では適当な位置にUVを配置。

    できたらOBJ形式でExport。
    Blenderだとモデルを選択状態にして File>Export>Wavefront(.obj) で以下のような感じに。

    マスクを描く

    SubStance Painter上での作業用にマスクを描きます。
    ※最終的なテクスチャは全てSubStance Painter上で生成します。
     ここで作成するマスクはその作業を補助するものです。
    今回はPhotoShopを使っていますが、GMP2でもなんでも良いです。
    pngかtgaあたりで出力できればなんでも可。

    一応最終的な完成イメージは以下のような感じとしました。


    これをSubStance Painter上で作るために、2つのマスクテクスチャを描きます。

    ■タイル溝マスクテクスチャ

    格子線でタイル溝を描きます。
    赤色に特に意味はないです(気分です)。

    ■床面マスクテクスチャ

    中央と左右で床の色を変える為のマスクを描きます。
    既に完成イメージの単色で塗ってありますが、マスクとしては何色でも構いません。
    ※PhotoShop上で色彩を決めたので、そのまま色がのっているだけです。 
    ここで色をのせておくと、SubStance Painter上でスポイドで色を拾えてちょっと便利。


    2つのマスクはpngかtga等で保存しておきます。

    テクスチャ作成

    SubStance Painter上で作業。

    ■新規プロジェクト作成

    File>New (又はCTRL+N)で新規プロジェクト作成ダイアログを開く。
    右上のSelectをクリックしてExport済みのObjファイルを選択。
    Addをクリックして保存済みのマスクテクスチャ2つを選択。
    ※CTRLを押しながらファイルを選ぶと複数選択可能。
    OKをクリックで進む。



    画面下部のShelfパネル内のTextureタブにマスクテクスチャ2つが追加されていることを確認。
    ※もし無ければ File>Import image で読み込む。
    右上のLayersパネル内のLayer1は使わないので、左クリックで選択、DELキー押しで削除する。


    ■左右濃緑部分のレイヤ作成

    【色選択マスク作成】

    Fill layer を追加&Add mask with color selectionでColor selectionを付与。
    参考: 色選択マスク ~ SubStance Painter

    ID Maskでインポート済みの床面マスクテクスチャを指定。
    Pick colorをクリックすると2D/3D画面内がマスクの色を拾うモードに変化します。
    そこで左右の濃い緑部分をクリック。2Dでも3D画面内どちらでも可。



    Fill Layer 1の文字のところでダブルクリックするとレイヤ名を変更できます。
    ここではわかりやすいように Side Line に変更してあります。


    【色をのせる】

    レイヤの左側をクリックして選択(Fill Layer)。
    Base Colorをクリック。


    ここで左右の濃い緑色を指定します。RGB値で入力しても良いのですが、ここではスポイトを使うと楽です。

    ポップアップしているカラーウィンドウ内にスポイトアイコンがあります。
    このスポイトアイコン上でマウスの左ボタンを押したままドラッグして拾いたい色のところで離します。
    読み込み済みのマスクに既に色がついているのでそこで離せば色が拾えます。


    これで左右の端をマスクにしてFill Layerの色が適用された状態になります。


    ■中央薄緑部分のレイヤ作成

    前項と要領は同じです。

    Fill layerを1つ追加してColor selectionで、
    ID Maskは前項と同じマスクテクスチャを指定。
    Pick colorは中央の薄い緑部分を指定。

    Base Colorは中央の薄い緑色を拾います。

    レイヤ名をCenterに変更しておきます。

    ■タイル溝部分のレイヤ作成

    要領は同じです。
    Fill layerを1つ追加してColor selectionで、
    ID Maskはタイル溝マスクテクスチャを指定(赤い色の方)。
    Pick colorは格子の黒い指定。細いのでズームして拾うと良いです。

    Base Colorは格子の部分が細すぎてスポイトでは難しいので、RGB各0値で黒にしておきます。

    レイヤ名をCross Lineに変更しておきます。

    ■質感調整

    【Side Lineレイヤ】

    Side Lineレイヤをクリックして選択。
    同レイヤの左側のアイコンをクリック(マスクではない方)。



    レイヤパネル下の Properties - Fill を見ます。
    その中にRoughnessやMetallicのスライドバーがあります。
    ここで質感を調整。
    • Roughness
      0に近い程反射。1に近い程反射しない。
    • Metallic:
      1に近い程金属らしい反射が強くなる。
      ただしRoughnessとの兼ね合いもある。鏡面反射的な要素はRoughnessが支配的。
      Roughness=0.0、Metallic=1.0 で最もきれいな鏡面反射に。
      Roughness=0.0、Metallic=0.0 にすると鏡面反射しつつやや表面が濁る質感に。
    今回は、Roughness=0.6程度、Metallic=0.2程度にしておきます。
    ※スライドバー上のMetallic文字上をクリックするとさらにDirt等のテクスチャを使ってMetallicの設定もできます。

    【Centerレイヤ】

    同じ要領でCenterレイヤも質感調整。

    Roughness=0.5程度、Metallic=0.1程度にしておきます。

    【Cross Lineレイヤ】

    同じ要領でCross Lineレイヤも質感調整。

    Roughness=0.3程度、Metallic=0.0程度にしておきます。

    溝を凹ましたいので、Heightのスライドバーを0にします。

    こんな感じになります。


    ■Export

    いよいよテクスチャ出力です。

    Unity5のShader=Standardで使う前提で出力します。


    File>Export all channnels (又はCTRL+SHIFT+E)でダイアログを開く。
    ここでは出力形式をpngとしていますがUnityで読めれば何でも良いと思います。
    Config行のプルダウンから Unity5(Standard Metallic) を選択。
    Exportします。
    ※出力先フォルダは上部に見えるパスをクリックで変更可能。

    ※ダイアログでは4ファイル見えていますが、実際の出力は3ファイル。

    Unityで使う

    Exportした3つのテクスチャファイルはそれぞれ、
    1. ~AlbedoTransparency.png
      絵テクスチャ。
    2. ~MetallicSmoothness.png
      メタリック用テクスチャ
    3. ~Normal.png
      ノーマルマップテクスチャ
    と、なっています。


    これらをUnity画面のAssetsにドラッグ&ドロップで放り込みます。
    Export済みモデルのObjファイルも同様にAssetsに放り込みます。

    モデルをシーンに配置。
    モデル内のdefaultを選択。
    Inspectorからマテリアル(defaultMat)を展開。

    Main Mapsの下で各テクスチャを設定。
    ノーマルマップは Fix Now の問い合わせが出てくるのでクリックする。



    こんな感じに


    ただの板きれモデルが、それっぽい感じに♪


    考察


    ブログで書くと非常に面倒ですが・・・マスクテクスチャのデザインさえ決まれば、実作業は1時間もかかりません。

    今回マテリアルは全てSubStance Painterで調整。

    SubStance PainterはちゃんとUnity5向けのExport設定が用意されているのが嬉しいです。

    光源の違いで若干の差はでるものの、実質ほぼSubStance Painter上で見たものがUnity5で再現できます。

    今回のタイルの溝のようなものは、SubStance Painter上のHeight設定で簡単にノーマルマップ化できるので楽です。

    SubStance Painter上でさらにウェザリングの類もかけられるので便利だと思います。
    (Dirtやオイル汚れ等々)

    思うにSubStance Painterのプリセットマテリアルの把握と調整加減が肝なので、そこの感覚をつかむまでに時間がかかりそうです。


    追記~Androidで使う

    Androidなどのスマホ/タブレット系で使う際、Unity5のシェーダーをMobileにしたい場合があると思います(軽くなるはず)。

    その場合は、
    • Mobile/Bumped Specular
    • Mobile/Bumped Specular (1 directional light)
    あたりを使うと思います。

    このシェーダーを使う際は絵テクスのRGBAが、

    RGB=Diffuse、A=Gloss

    となる為、SubStance PaiterでUnity5指定でExportすると合致しません。

    Unity4を指定してExportします。
    ※SubStance PainterのExportダイアログ、Configurationタブをまじまじ見るとわかりやすい。
     右下のconverted mapsの色アイコンとOutput mapsの色アイコンを見比べるとよくわかります。



    1. ~_DiffuseGlossiness.png
      Base(RGB) Gloss(A) のテクスチャに割り当てます。
    2. ~_DiffuseIllumination.png
      使いません。
    3. ~_Normal.png
      Normalmapに割り当てます。
    若干見え方が変わりますが、一応使える感じです。


    独り言

    モノによっては非常に楽ができそうです。
    (BlenderでArrayでタイル並べてローポリにベイクしてる場合ではなかった(笑;


    PopcornFXなんてのもちょっと気になりますね(ボソ


    2015年3月24日火曜日

    ホイール操作の反転/日本語化など ~ SubStance Painter1.32

    SubStance Painterが1.32になり気付いた点などメモ。


    1. マウスホイールのインバートに対応
    2. 日本語対応

    ツールバーメニューから Edit > Settings... で設定を開く。
    デフォルトは言語がEnglishになっているのでこれをJapaneseにする。

    Zoom/ホイール関連も inverse directionのチェックの有無で反転可能に。
    私的にマウスホイールの回転とズームが逆な感覚だったのでこれは助かります。



    一応「おおむね」日本語になりますが、全てではないです。
    (肝心のわかりにくい所とかは英語のままとか)

    一応日本語フォルダを使っても大丈夫そうには見えます。
    (が、多分使わない方が安心な気はします。なんとなく)


    おまけ・・・漢字こもごも

    マテリアル名に全角文字を使ったOBJデータをSubStance Painterに読み込ませた場合。

    GPUを抱き込んで死ぬという現象に遭遇。再現性100%。
    (SubStance Painter1.32)


    ※マテリアル名に全角文字など普通使わないとは思いますが・・・。

    例を挙げるとBlender上でインターナショナルフォント=日本語を選んだ「だけ」ならいいのですが、Translate欄で他も有効にした場合。

    新規マテリアル作成時にマテリアル名に自動で全角カタカナが入ります。
    一度これをやってしまうと半角に書き直してもダメなようです。


    ちなみにインターナショナルフォントを無効にすれば良いだろう、と思うわけですが。
    ここにも罠があります。

    無効にするとAuto Save時に不意にBlender(2.73a)が落ちることがあります。
    (※Auto Sava時なのでなぜ落ちたのか状況が非常にわかりにくい)

    Windows7のシステムではユーザーディレクトリ名に「ユーザー」と全角を使っているのが原因ではないかとなんとなく推察しています。
    一応半角によるエイリアス(?)のパスもあるはずなのですが・・・。













    2015年3月22日日曜日

    色選択マスク ~ SubStance Painter


    SubStance Painterで色選択マスクを使うメモ。

    グレイスケールのマスクではなく、単色カラーを指定してマスクに使う方法。

    1枚のカラーマスクで複数のマスクに使いまわせるのでちょっと便利。
    ※クロマキー抜きを1枚のテクスチャで単色x複数でできるような感じ(?)



    準備としてFill Layer を作成し、マスク対象の色をのせる。
    ここではBase Colorに赤色Metallicをのせてるが何でも良い。
    ※Metallicの加減の調整なども可。
    これでとりあえずオブジェクト全体が赤色メタリックになる。




    作成した Fill Layerの上で右クリック>Add mask with color selection で色選択マスクを作成。


    Fill Layer直下に Color selectionが付加されるのでクリックして選択。
    下部のColor Selection欄の ID Maskをクリック。


    マスク用テクスチャの選択候補がでてくる。
    ここでは予めインポートしておいたサイコロ絵のテクスチャを指定。これをマスクに使う。


    Pick colorをクリックするとマウスカーソルがスポイト状態になる。
    ここではサイコロの1の目の部分をクリックしてマスクで抜くように指定してみる。
    ※このサイコロ絵テクスチャの1の目は単色赤で塗ってある。 2~6目も単色青。
    ※追補:サイコロ絵テクスチャはモデルのUVに貼れる状態で展開済み。


     
    先に作成してあるFill Layerの赤色メタリックがマスク領域のみに適用される。



    今回はPick colorでサイコロの1の目=単色赤を指定したので、そこがマスクとなり Fill Layerの色&マテリアルがその領域のみに適用されている。

    さらに別途Fill Layerを作成してPick colorでサイコロの2~6の青部分を指定すればそこをマスクにできる。


    うまく単色マスクを複数のせたテクスチャなら1枚で複数のマスク領域を指定できるので便利そう。
    ※これはSubStance Painter同梱サンプルの Cymourai.spp でも使用しているので、そちらを見るとわかりやすいかもしれない。


    ワークフロー的には例えば、モデリング>UVレイアウトを2Dテクスチャで出力>2Dツールで部位別に単色で塗り(マスク)>部位ごとにSubStance Painterでマテリアル付与、みたいな感じもできる。