ガレージ暮らしのトライタム

プログラムやツールの解説や技術を公開する場所

Cubsim3で作られたモデルの分割参考用PSDを公式からDLする

概要

公式から提供されている分割参考用PSDは桃瀬ひよりちゃんのデータです。
わかりにくいですが、チュートリアル1「イラストの加工」の文章内部に埋め込まれています。
そこからダウンロードが可能です。

背景

Cubism2時代はcmoxファイルダウンロード近くにPSDファイルのダウンロードリンクがありました。
Cubism3時代ではそのような形式でなく、やや難しい場所にあります。
知っている人しか知らないレベルかもしれないので記事に起こしました。

ダウンロード方法

Cubism3で作られたモデルで公式からPSDをダウンロードできるモデルはチュートリアルで活用されている「桃瀬ひより」ちゃんになります。

取り扱いの注意

Live2Dでは「無償提供マテリアルの使用許諾契約書」というのがあります。
PSDデータも対象内(正確には動画チュートリアル内部で使われている素材)なので一読し了解したのちダウンロードしてください。

チュートリアルサイトへアクセス

Live2D公式ページへ飛んだ後、メニュータブの「Live2Dを学ぶ」を押し「Cubism3チュートリアル」を押してチュートリアルサイトへ移動します。

f:id:traitam:20190110131625p:plain
チュートリアルサイトアクセス

所定チュートリアルページでダウンロード

サイドバーもしくはトップページ内にあるリンク「1,イラストの加工」という名前のチュートリアルページへ移動します。

f:id:traitam:20190110131918p:plain
トップページ

移動後、動画チュートリアルの下もしくは[動画のおさらい]->[イラストの加工について]に含まれるリンクからダウンロードすることができます。

f:id:traitam:20190110132226p:plain
01DL場所

f:id:traitam:20190110132244p:plain
02DL場所

上記どちらかのリンクをクリックすればダウンロードが始まり、桃瀬ひよりちゃんの分割PSDデータが手に入ります。

Live2DCubism3.3リリースにおけるSDK活用の注意点について

はじめに

2018/12/21にCubsim3.3がリリースされました。
併せて各種SDK(Unity, Native, Web)も更新されましたが、SDK用mocファイルに変更が入ったようで、SDKのバージョンによっては問題が起きるようです。
起きる問題としては「ファイルもSDKも正常であるがモデルが読み込めない現象」と公式から言われています。
Cubism 3.3 アップデートに伴う注意 | Live2D Manuals & Tutorials

バージョン対応表

対応表は以下の通りになっています。
直近のSDKは全体的にCubism2.1以前で作られたモデルは未対応ですが、一応対応表に含めました。

mocfile ~2.1 3.0~3.2 3.3~
Unity x R1~ R10~
Native x beta1~ beta9~
Web x beta1~ beta4~


また、出力されたmocファイルのバージョン確認は未対応状態のようです。

出力するmocファイルの種類変更について

3.30では以下のように2種類の書き出し設定が行えます。
f:id:traitam:20181221125823p:plain

SDKの使用バージョンによって、この部分を変える必要があります。

unity2018.3について

UnitySDKではUnity2018.3ではR9以前で問題が起きるようです。
そのためUnity2018.3を活用する場合はR10を使用する必要があるみたいです。
R10でも3.0~3.2で作られたmocファイルは対応するので、Unity2018.3を使う場合は無条件でR10に上げても良いと思われます。

Artist12購入しました Pt.2 使用感編

前回の記事
traitam.hatenablog.com

前回では開封~セットアップでした。
今回は簡単な落書きをしつつ、使用感を書いていこうと思います。
使用したペイントツールはSAI2です。

使用感

キャリブレーションについて

特に変更をしませんでした。
ドライバーを入れてからの標準状態でのキャリブレーションが良かったのでそのまま使用しています。

ペンの筆圧

8196筆圧感知なだけあってかなり強弱がつけられます。
もともと2048筆圧感知のGT-220v2を使用していたのですが、ペンの太さを変えることなく思った以上に筆圧を変えられるのは楽しかったです。

ペンの感知について

筆圧感知が8196でも、手垢で少し汚れている状態でペンを倒して描こうとすると認識されなかったする場合がありました。
これには、イラスト用手袋が付属で付いているので、それを活用すると手垢は防止できそうです。
ただ、液晶中央部分で描く事が多いので、中央で描き続けていると時々うまく線が引けない場合がありました。
これについては何か対策があれば行いたいですね。

入り抜きについて

デフォルトだと入り抜きがちょっと違和感がありました。
なので、以下のように感触を変更しました
f:id:traitam:20180930193605p:plain

色について

ごめんなさい。特に検証を行っていません。
ただ出力できる色範囲は言うほど高くないそうなので、これで仕事をするのは少し大変かもしれません。
とくに気にする必要のない同人や趣味であるならば問題はないかも?

その他

  • スタンドが無いのでディスプレイを立たせながら扱う方には別途スタンドを購入する必要があります。
  • 結構デフォルトのフィルムだと滑ります。ざらざらとした感覚が好きな方は別途フィルムを付け替えるか慣れる必要がありそうです。
  • もしケースを購入する場合は14インチ以上のサイズをお勧めします。ノートPCの13.3インチ用では入らず、15.6インチ用ではやや大きかったです。Artist12のサイズを見て判断をすると一番確実にフィットするケースを探せると思います。

発生した問題

Mac上でポインタが液タブモニターの外に行く

Macの方で、セットアップを行なった際に液タブにペン先を近づけたらもう1枚の方のモニターにマウスポインタが行ってしまう問題が発生しました。
どうやらディスプレイ配置の問題のようです。マルチモニターの時に上辺の位置を揃えないと問題が発生するようです。
Artist 10S、16、22HD&22Eの場合、Macシステムにおいてカーソルがメインディスプレイでしか動きません。-xp-pen

余談ですが、HUIONの液タブを使用していた時も近い問題がありました。HUIONの液タブでも近いドライバ設計になっているのでしょうか?

また、ドライバ設定の変更を行います。
[アプリケーション]->[PenTablet]->[PenTabletSetting.app]を開いて、[モニタータブ]からArtist12に変更します。
注意点としては、ドライバインストールしてもシステム環境設定には追加されません。別途追加するか、アプリケーションからaapファイルを開く必要があります。

作業環境について

f:id:traitam:20180930194633j:plain

GPDPocketを使用PCとしてAnkerのモバイルバッテリーでディスプレイ駆動を行っています。

完全に持ち運び用に買ったのでこの状態で、描いている最中にレスポンスが悪くならずに描けたのは良かったです。
GPD PocketにPhotoshopCS6も入っているのでちょっとした画像編集は可能です。
ただGPDPocketにそこまで性能を求めるのは酷なのであれかもですが。
出先で扱えるもののPCのファンの音が大きいので静かな場所で使うのは、なかなか大変です。

持ち運びならiPadProとPencil、もしくはraytrektabでいいじゃん。と思われる方。その通りです。
そちらの方が何倍も軽いですし、扱ってて楽だと思います。
そこはまぁ、ロマンです。

描いたもの

f:id:traitam:20180930195443p:plain

いうほど上手くないのは許してほしいです…。
あと艦これの五月雨ちゃんは可愛い。天使。


それでは皆さまよき創作ライフを。

XP-PEN Artsis12購入しました

既にHUIONのGT-220v2という液晶タブレットを持っているのですが8192筆圧感知と、3万以下で小型の液晶タブレットという魅力に負けて購入しました。

特徴

11.6インチという小回りの利くサイズ、8192筆圧感知、USBバスパワー駆動、3万円以下の価格という4点が魅力的ですね。
サイズ感が良く、何よりUSBバスパワーで動くので電源確保に困ることが少ないです。
ワコム以外の液晶タブレットではサイズラインナップが豊富で22インチ程度まであると認識しています。
最も小さな液晶タブレットサイズは10.6インチですが、価格では2018年9月現在ではArtist12が最安です。

開封・中身紹介

f:id:traitam:20180929202954j:plain

外箱はおしゃれなデザインとなっています。

f:id:traitam:20180929203331j:plain
f:id:traitam:20180929203341j:plain
f:id:traitam:20180929203349j:plain

中身はマニュアルとケーブル類の2段階構造になっており、左右にAC電源コネクタ・ペンがあります。

f:id:traitam:20180929203502j:plain

ペンは個人的に独特な収まり方だと思います。
とても面白いですね。
上部分を空けるとペン先の交換パーツがあります。
ペンは電源レスで充電する必要もなく、そのまま使えるのは良いですね。描きたい時に充電が無くて描けないという事態を回避できます。

f:id:traitam:20180929204114j:plain

ケーブル類は液晶タブレット接続用と、Thunderbolt<->HDMI変換端子、USB延長コードが付属されています。
Macユーザーが別途変換端子を購入する必要は無さそうですね。延長コードはAC電源につなげる時のものです。

使用準備

インストール

ダウンロード- xp-pen
f:id:traitam:20180929204948p:plain

上記サイトからドライバをダウンロードしてセットアップを行います。

セットアップが終わったら、液晶タブレットを接続してドライバを認識させます。
f:id:traitam:20180929205209j:plain

接続が問題無く行われ、ペンが反応すればセットアップ完了です。

フィルム剥がし

購入直後では左上に「下にアンチグレアフィルムがあるから、上部のフィルムを剥がして欲しい」という注意書きがあるので、それに従い赤いシールを摘まんで上層フィルムを剥がします。
このまま使用しても良いのですが、別途保護フィルムを買って交換するのも良いかもしれません。
特に気にしなければこのまま使っても良いのかもしれません。

一緒に購入する、で保護フィルムがおすすめされていますが既に保護フィルムが貼られているので罠かもしれません
f:id:traitam:20180929205633p:plain

フィルムについて

上記のフィルムは合わせて購入しましたがフィルムが既に貼られているので、どうしても貼りなおしたい・元のフィルムに傷を付けたくないという場合だけ買っても良さそうです。
サイズとしては以下の画像のように、液晶が写る部分は全て覆えるものの、既存で貼られているフィルムより幅が短いです。赤枠が購入したフィルムサイズです。
f:id:traitam:20180930183445j:plain

買ってしまったので、いったん置いておき貼られていたフィルムを交換したくなったら使おうと思います。使わないフラグ。

問題が発生した

画面の縦横比がおかしい

1920*2160というような解像度になっている場合、画面縦横比がおかしくなります。
その時はディスプレイの設定から1920*1080の設定に変更してください。

描画がぶれる

接続した時に上手く描画されない場合があります。
筆者も一度なったのですが、色々弄っているうちに解決されてました。
最後の動作としては「Artist12の輝度設定→再起動」をしたら解決しましたが、それが決定打とは考えにくいです。
ドライバ再インストールや、「接続してからドライバインストール」など、ハードウェアの接続とドライバのインストールタイミングを変えるなどして対処するのが普通ですがその時は上手く行かず。
結局何が問題で何が解決の糸口になったのかは分からず終いです。

その他対応

左側にファンクションキーを置きたい

ディスプレイの設定から描画を180度回転させることで対応します。
この時ファンクションキーの設定画面と実際の位置が上下反転するので注意が必要です。

個人的な特筆点

USBバスパワーで動く。
個人的には一番特徴的な部分だと思います。
液晶タブレットでUSBバスパワーで動かせるのは多くないと思います。
そもそもどうしても電力を液晶表示で食ってしまうため安定させるためにはAC電源が一番だからです。

USBバスパワーで動くのでノートPCからの電力供給もしくはモバイルバッテリーに接続することで扱えます。
そのため小回りが利き、自宅のどの場所でも、持ち出しても扱えるというのがメリットになります。
サイズもぎりぎり持ち運べる大きさになっているので、その辺りを考えられて作っているのかもしれません。


次回は実際に使ってみて使用感を見てみたいと思います。
traitam.hatenablog.com

ここがすごいね。アズールレーン大鳳のLive2D

はじめに

ツイッターを眺めてたらTLに流れてきた大鳳のLive2D。

色々と高い技術が垣間見えたので記事にしました。
お胸様の揺れ方も質量を感じる大変素晴らしい出来なのですがそれ以外で3点ほど。

素晴らしいと思った場所

指パーツの切り替え

肩から腕を振っているタイミングで切り替えることで違和感なく指が切り替わります。
最初はこの状態。
f:id:traitam:20180914230317p:plain

そこからある程度切り替え後の形に近づけて
f:id:traitam:20180914230328p:plain

1フレームで切り替える。
f:id:traitam:20180914230336p:plain

指の切り替えについては一般的ですが変化のかけ方がすごく自然でフレーム単位で見ないと分からないレベルです。

前腕の影の切り替え

これも見てて驚いたのですが前腕は一切切り替えずに、影の不透明度で表現を行っているという点です。
動画最初の方では明らかに前腕に影が無いのに。
f:id:traitam:20180914230646p:plain

後半ではこの通り前腕下半分に影が出来ています。
f:id:traitam:20180914230713p:plain

作りの想定としてはベースとなる「ベタ塗り+アルファ」を基準に、「影パーツ」を作成し不透明度で表現を行っていると思われます。
そしてこれを大振りで腕を動かしている最中に不透明度を上げることで、より違和感のない表現に仕上がっています。
下手に前腕全部を切り替えるより、「腕のシルエットはそのまま」に腕の表現が行えるので違和感が減っています。この辺り下手に前腕全てをパーツ切り替えで表現を行うと、いくら素早い動きの中での切り替えでも切り替えのフェードイン・アウトが見えてしまうものです。
それを解消した今回の方法は特筆すべき項目です。

レコードの回転

そしてこれ。
Live2Dでは地味に難しい「パースの効いた回転表現」。表現方法についてはお手数ですが以下のTogetterをご覧ください。
togetter.com

Animatorでパーツを変形させることで回転デフォ―マだけで表現が行えますが、リアルタイムで再生させようとすると一苦労です。
リアルタイムで行う場合、Togetterの通りだとワープデフォ―マと回転デフォ―マでの力技になってしまいます。それか別の手法が既に編み出されていれば、その手法なのかもしれません。
しかし意外と難しい表現であるパースの効いた回転表現を入れているあたり、開発側の高い表現力が見て取れます。

おわりに

…なんだか最近Live2Dの商業レベルが一気に高くなっているような気がします。
ちょっと前までは、「前後表現のためだけに存在する線パーツ」ことはおろか、「輪郭・ベタ塗りと影パーツを分ける」とかも無かったような気がします。
線パーツについてはLive2DEuclidが出たあたりから表現を見るようになったと感じています。

Live2D界隈が盛り上がるのは大変良い事ですが、なんだか自分の技術が追い付かず置いて行かれてる感じがして悲しさを覚えます…。
あとSDKも愛して。


それでは皆さまよき創作ライフを。

【Live2DSDK】CubismSDK for UnityのUserEventで複数メソッドを呼ぶ

はじめに

公式チュートリアルではmotion3.jsonを扱う時、1つのメソッドを利用しているが複数のメソッドを使いたい時はどうすればいいかという記事です。
motion3.jsonに設定されたユーザデータを取得 | Live2D Manuals & Tutorials

最後のDebug.Logの出力までの大体の流れは同じです。
走らせたいメソッドの用意(新規スクリプト)、CubismMotion3Json.csの加筆の後にモデル+イベントのついたモーションをUnityへインポートします。
一度公式チュートリアルを試し、流れを把握してから本記事で改良を行うことをお勧めします。

用意するスクリプト

新規スクリプト

Unityで新規スクリプトを作成します。
以下はサンプルコードです。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class MultiUserEvent: MonoBehaviour
{
    public void Listener(AnimationEvent animationEvent)
    {
        var currentState = GetComponent<Animator>().GetCurrentAnimatorStateInfo(0);

        Debug.Log("Time : " + (currentState.length / currentState.speed) + "\n" +
            "Value : " + animationEvent.functionName);
    }

    public void Listener02(AnimationEvent animationEvent)
    {
        var currentState = GetComponent<Animator>().GetCurrentAnimatorStateInfo(0);

        Debug.Log("Time : " + (currentState.length / currentState.speed) + "\n" +
            "Value : " + animationEvent.functionName);
    }
}

CubismMotion3Json.csの編集

CubismMotion3Jsonではインポート時にモーションがイベントを持っていれば対応することが出来る記述があります。
公式チュートリアルを参考にすると1つのメソッドを扱う時は以下のコードで問題ありません。

      var animationEvent = new AnimationEvent
      {
          time = UserData[i].Time,
          functionName = "Listener",    // 追加した行
          stringParameter = UserData[i].Value,
      };

ただこれでは1つのメソッドしか呼ぶことが出来ないのでいくつもUserEventがあり、いくつもメソッドをそれぞれに呼びたい場合は対応が難しくなります。
端的に言えばnewするタイミングでifやswitchで分岐させれば対応するメソッドをいくつも使う事ができます。
今回はモーションに付けられるEventの文章から条件分岐を行っています。

2つメソッドを使いたい場合

ifかswitchで行うほかに三項演算子で記述できます。ここではifと三項演算子のサンプルコードを示します。
ifの場合は以下のように、

 if (UserData[i].Value == "event01")
 {
     var animationEvent = new AnimationEvent
     {
         time = UserData[i].Time,
         functionName = "Listener",    // 追加した行
         stringParameter = UserData[i].Value,
     };
     animationEvents.Add(animationEvent);
 }
 else
 {
     var animationEvent = new AnimationEvent
     {
         time = UserData[i].Time,
         functionName = "Listener02",    // 追加した行
         stringParameter = UserData[i].Value,
     };
     animationEvents.Add(animationEvent);
 }

三項演算子の方は、以下のコードのようになります。

var animationEvent = new AnimationEvent
{
    time = UserData[i].Time,
    functionName = (UserData[i].Value == "event01") ? "Listener" : "Listener02",
    stringParameter = UserData[i].Value,
};

Valueで取っているのはCubismEditorでモーション作成時に入れた文章になっています。
f:id:traitam:20180912190900p:plain

他にも記述が必要な場合は、splitなどで一度分岐処理用の文字列を抽出してから行うと良いのかもしれません。
メソッド2つだけであれば三項演算子の方がスッキリするのでお勧めです。

3つ以上メソッドを使いたい場合

こちらもifかswitchで分岐を行うと良いです。

ただnewのタイミングで3つ以上分岐が並んでいたりswitchが列挙されていると冗長になってしまいます。メソッドとして切り出し、判別用stringを引数として判別するのが良いと思われます。
コールバック用メソッド名もベタ打ちではなく配列に格納したりするとコードをスッキリしそうですね。
それでもコードの汚さを無視しても良いのなら、同じ記述たくさんでもいいと思います。ifたくさんとかswitchまみれとか。出来ればよいのです。…っていうと色んな人から怒られそう

その他必要な作業

今回は2つのイベント用メソッドを用意しての確認です。
CubismEditorで2つ以上イベントが登録されているモーションを用意します。1つには“event01”と記述します。
その後モーションをUnityへインポートします。スクリプトを作成した後にインポートしないとイベントが登録されないので注意が必要です。
既にいれてしまった場合はモデルフォルダ右クリック->ReImportを押してインポートしなおしましょう。

動作確認

特に問題が無ければ以下のように2つのメソッドが呼ばれたことが確認できると思います。
f:id:traitam:20180912192228p:plain

思わぬ動作になった場合は文字列のタイピングミスやCubismMotion3Jsonの加筆後にモデルやモーションを再インポートしたか確認してください。


では、皆さまよき創作ライフを。

【Live2D】モデル制作時におけるバタつきの原因と対策

概要

これはLive2Dモデルの制作時に起きる「バタつき」についての原因と対策についての記事です。
バタつきは各パーツを動かした時に動かす幅が異なると発生します。
対策としてグリッドやスクショから動かす幅の確認をすることで修正が容易になります。
またパラメータをゆっくり動かして、周辺のパーツより先に動けば「動かす幅を少なく」、後に動けば「動かす幅を多く」することで修正が可能です。

バタつきとは

各パーツを動かす際に発生する違和感を指します。
特にこれは顔を動かす角度XYで顕著に発生すると思っています。

下のGIFが例になります。右目だけ動かすと滑って移動しているように見えます。
f:id:traitam:20180911172443g:plain

今回は顕著な例ですが、実際になると「なーんか動かしたときに違和感を感じる」くらいの問題になります。
完成だけを目指すのであれば無視しても良いのですが、品質向上に努めるのであれば避けては通れない問題です。

原因

違和感のある例として挙げたGIFでは右目だけ、左目や前髪と比べて横に動かす幅が長いです。
左目と緑線を用いて比較をすると以下画像のようになります。
f:id:traitam:20180911173733p:plain

右目は左目の数倍多く動かしていることが分かると思います。

原因となるその他の要素

今回は見受けられない要素ですが、1つのパーツだけ上下に動いているという場合もあります。
「体の回転Xについても~」から以下の例で分かりやすく解説がありますので、そちらをご覧ください。
dream.live2d.com

対策

対策としては「動かす幅を周辺と同じくらいにする」なのですが、動かす幅が多いのか少ないのかというのは分かりにくいです。
これについてはいくつか方法があります。

エディターのグリッド機能を使う

Live2DCubismEditorにはグリッド機能があり、赤枠内のアイコンを押すことでグリッドが表示できます。
f:id:traitam:20180911174516p:plain

これを用いて各々がどれくらい動いているか判別できます。

エディターのスクリーンショットから比較する

グリッド機能同様、エディターからスクリーンショットを撮ってどれだけ動いたかを確認できます。
f:id:traitam:20180911174757p:plain

半透明で重なっているため細かく見ようとすると大変ですが、グリッドと違って明確な分かりやすさがあると思います。

パラメータを動かして判別する

バタつきは動かす幅が違うため発生するので、パラメータで動かすと違和感が感じ取れます。
ただそれだけでは動かす幅を多くすればいいのか、少なくすればいいのか分からないので以下のルールに基づいて違和感を具体化します。

  1. 比較する2つのパーツを選びます(今回では右目と前髪)
  2. 違和感の原因となるパーツを選びます(今回は右目)
  3. パラメータを「少しずつ動かし」右目が先に移動すれば「動かす幅が多い」です。前髪が先に移動すれば「動かす幅が少ない」です。
  4. 動かす幅が多かった場合は少なく、逆であれば多くします。

この方法は先2つより正確性に欠けますが、グリッド見たりスクショ撮ったりするのが面倒な方は良いかもです。

対策後

今回は右目の動かす幅を少なくすることで対処ができる問題です。
そして修正したものが以下GIFになります。
f:id:traitam:20180911175719g:plain

以下画像の青線のように、動かす幅を左目と近くしました。
f:id:traitam:20180911175903p:plain

これで違和感は、「ある程度」解消されました。
違和感修正の程度に関しては個人差としか言えないと思うので今回はこれくらいでOKとします。

おわりに

パラメータ作成時、バタつきによる違和感があったらパーツ間で動かす幅が統一されているか確認してみてください。
問題が解消されるかもしれません。

では、皆さまよき創作ライフを。