アートパスの使い方

「アートパス」は、パスにテクスチャを乗せて線画を再現することができるツールです。
また、アートパスをアートメッシュに付属させて連動して同じ動きにすることもできます。

ここでは、アートメッシュに付属させたアートパスの作り方を例に説明していきます。
説明にはサンプルモデル「ゆうくん」を使います。

アートパスの機能としての詳細については、『アートパス』を参照してください。

アートパスの編集について

アートパスは2種類のコントロールポイントからできており、それぞれ別のツールを使って編集します。

種類  ビューポートでの表示 編集ツール 説明
制御点 アートパス編集ツール アートパスのパス形状を決めるためのコントロールポイントです。
線幅ハンドラ 線幅編集ツール 線幅ハンドラは線幅を決めるコントロールポイントです。
パス上のどの位置でどれくらいの線幅かを指定できます。
[線幅編集モード](後述)が有効のときに表示され、編集できるようになります。

ツールパレットの右から二番目が「アートパス編集ツール」で、一番右が「線幅編集ツール」です。

ビューポートの上部にあるボタンから、アートパスの選択の有効/無効と、線幅編集モードの切り替えが行えます。
線幅編集モードが有効のときに、線幅ハンドラが表示され、アートパスの線幅を調整することができます。

バインドしたアートパスの作成方法

アートパスは塗りの表現であるアートメッシュとバインドさせて連動する設定にするのが一般的な使い方です。

ここでは、ゆうくんの前髪にアートパスの設定をしてみます。

まず、前髪のアートメッシュを選択したら、右クリックで「アートメッシュを編集」を選択します。
「メッシュエディタ」が開いたら、「パス編集」を選択します。
すると、通常のメッシュ編集モードから、パスの編集モードに切り替わります。

切り替わったら、アートパスが打てるので打ち込んでいきます。
※(ゆうくんの前髪はシンメトリなので片側だけ打ち込めばOKです。)

「OK」ボタンを押したら、ビューポート上のゆうくんの前髪のまわりがピンク色のラインで囲まれます。
これはまだ、アートパスのテクスチャが空の状態です。

グループパレットにもアートパスが追加されている事を確認できます。

テクスチャーのインポート

次に、ピンク色の部分にテクスチャーを割り当てるため、テクスチャのインポートをします。

テクスチャのインポートの仕方はアートメッシュ用のPSDのインポートと同じです。
アウトライン用に用意したPSDファイル(ここでは、「yu-kun_brush.psd」)をドラッグ&ドロップします。
「新しいテクスチャとして読み込む」を選択します。

テクスチャの作成方法については、『PSDとの連携』の「ブラシテクスチャ」項目を参照してください。

するとリソースパレットに「yu-kun_brush.psd」が追加されます。

ブラシの設定

インポートできたら、ピンク色のアートパスにテクスチャを割り当てます。
「グループ」パレットで追加されたアートパスを選択した状態で、「ツール詳細」パレットの「アートパス」項目を開きます。
「ブラシ」の項目の「選択」をクリックします。

「ブラシ選択」という、新たなウィンドウが開きます。
ブラシの設定を行うために、①新規作成ををクリックします。
すると②「PB_01」というの項目が追加されます。
これを選択した状態で今度は③鉛筆のアイコンをクリックします。

左の欄をスクロールして一番下にアートパス用のテクスチャがあります。
これを選択すると、下の白い枠組みの画面にテクスチャが配置されます。

一度「OK」を選択して、ビューポート上を確認しましょう。
ピンク色だったアートパスに、テクスチャが反映されました。

ブラシの設定は後からでも自由に変えらることができ、「ブラシ設定」の右の項目ではそれぞれ設定を編集することができます。
ブラシについては、『ブラシ』を参照してください。

ゆうくんで使用しているブラシの設定を見てみます。

項目 設定値
テクスチャスケール  1.0000
分割  2
U  0.9000
V  1.0000

Tips
「分割」はなめらかに描画する為、デフォルト値の1より大きい値にしています。
あまり大きい値にするとアートパスのメッシュ数が増えてしまいパフォーマンスに影響が出るので、必要以上に大きくしないようにします。
「U」では、デフォルト値は0.9000になっていますが、これはテクスチャ同士の線の隙間を埋めるための処理の値なのでこの数値を推奨しています。

線幅ハンドラについて

1

「ツール詳細」パレットの「線幅修正」の項目から、数値を入力して線幅を変えることができます。

①線幅調整「細らせる」線幅を変えたい場所の線幅ハンドラのpxを指定して細めることができる
②線幅調整「太らせる」線幅を変えたい場所の線幅ハンドラのpxを指定して太めることができる
③指定幅に置換「0」線幅を変えたい場所の線幅ハンドラの値を0にする事ができる
④指定幅に置換「置換」線幅を変えたい場所の線幅ハンドラの値を指定したpxに置換する事ができる

数値を調整するときは、「線幅編集モード切替」にしないと、「線幅ハンドラ」を追加することも調整することもできないので必ずモードを切り替えましょう。
また、調節したいアートメッシュを選択し、線幅ハンドラを選択しておく必要があります。

2

まだ、「アートパス」がアートメッシュの全周を覆っている状態なので、「線幅編集ツール」で線の再現をします。
どういう線の太さにするのか参考になる下書きなどをあらかじめ配置しておくとよいでしょう。

ゆうくんの前髪の場合であれば、下の髪の房の部分のアウトラインは残したい、でも上の方のアウトラインは表示したくない。
となった場合、このうように「線幅ハンドラ」を追加してみます。

追加するとインデックスの数が増え、さらに前髪は「シンメトリ」の機能を使っているので
「線幅ハンドラ」のパスも「シンメトリ」で追加されます。

 

追加前 追加後

さらに「線幅ハンドラ」はアートパスの上を移動できます。
線を細めたい位置に「線幅ハンドラの点」を移動したのち、「線幅ハンドラの円」をドラッグすることで調整することも可能です。

Tips
線幅ハンドラの点…線幅ハンドラのパス上の位置を調整するためのUI。
線幅ハンドラの円…線幅ハンドラの線幅を調整するためのUI。

ショートカットキーを駆使すると非常に便利です。
「Ctrl+W」0に置換
「Ctrl+Shift+W」指定幅に置換ができます

3

アートメッシュにバインドされたアートパスは、アートメッシュの動きに連動します。

キーを打ってない状態でも「アートパス」は連動していますが、パラメータにキーを打って整えたい角度のアートパスを調整していきます。
このとき、制御点はメッシュに連動していて動かす必要がないので、線幅ハンドラで線幅を調整します。

横の顔x-90のときに前髪の生え際を調整したいのでキーを打ち、「線幅ハンドラ」の位置を動かして調整します。

調整前 調整後

制御点をつける上でのポイント

アートパスに制御点を追加したいときは「線幅編集モード」を無効に切り替え、
「アートパス編集ツール」で追加・または削除することができます。

1

前髪の毛先の「アートパス」が丸まってしまっているので尖らせたい調整をしたいときに
アートパスの制御点をAlt+左クリックすると角張らせることができます。

調整前 調整後

2

バインド状態のアートパスの「制御点」が少ないと、大きく変形したアートメッシュの形と揃わない事があり、塗りと線の間に隙間ができることがあります。
そこでアートメッシュとアートパスに隙間ができてしまった場合などは、「制御点」を増やしてあげるとメッシュの形とより揃いやすくなり隙間を無くことができます。

ある角度のときに
塗りと線に隙間がある
ベースキーに合わせて
制御点を追加する前
ベースキーに合わせて
制御点を追加した後
もとの角度に戻って確認すると
隙間がなくなっている
調整前 調整後

Tips
パラメータにキーを打っている場合は、ベースキーでのみ、「制御点」が追加することができます。

描画順オフセット

バインド状態のアートパスは、デフォルトの設定ではバインド先のアートメッシュと同じ描画順になるように連動していますが、
「描画順オフセット」の設定を使うとアートパスとアートメッシュの間に、別の描画順のアートメッシュを配置することができます。

下図のようにバインドしている2つのオブジェクトの間に描画順520の「ハイライト」を入れる設定をしてみます。

「詳細」パレットの「アートパス」の項目で描画順にチェックを入れた状態で、「描画順オフセット」を100にします。

すると前髪のアートパスの描画順が100増えたので600になりました。
前髪のアートパスは、前髪のアートメッシュの描画順+オフセット値で連動するようになります。
このように描画順は連動されてても「アートパス」の描画順を変更することが可能になります。

描画順オフセットの値を100にする 描画順が600になる

Copyright © 2018 Live2D Inc.