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

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

Cubism3SDKUnity内に含まれるサンプルの簡易説明

Cubism3SDKUnityにはR8時点で9つのサンプルが同梱されています。
シーンを再生すればすぐにフィードバックがあるサンプルから、コードを変更する必要のあるサンプルがあったりと色々なので簡素に内容をまとめようかな。という記事です。

Cubism3SDKUnityに同梱されているサンプル(バージョンR8時点)

f:id:traitam:20180728155953p:plain

R8時点では上記画像のように9つサンプルが同梱されています。
すぐに何をやってるのか分かりやすいのがAnimation、AsyncBenchmark、LookAt、Raycastingの4つだと思います。
この4つはシーンを開いて再生すれば、何をすればよいのか、何が行われているのか端的に分かりやすいと思います。

ほかの5つはソースコードを変更したり、エディタ上で変更を行うことで変化が得られる、Unityを触っている人向けのものになっています。
おそらく、全くUnityを触ったことが無く、かつCubism3SDK初挑戦だと、この5つのサンプルを弄っても“何のためのサンプルなの?”と首を傾げる可能性があります。

“とりあえず動くものを見てみたい”という方は、先に挙げた4つのサンプルのいずれかを閲覧すると良いかもしれません。
以下は各サンプルの概要です。

Animation

f:id:traitam:20180728155806p:plain

シーンを再生するとキャラクター(こはるちゃん)がアニメーションしてくれます。
可愛いですね。

AsyncBenchmark

f:id:traitam:20180728160627p:plain

ボタンを操作することでベンチマークを行うことが出来ます。
また、HierachyにあるSpawnerをクリックし、[ModelSpawner]->[Model Prefab]を変更することで表示するモデルを変更することが出来ます。

ほんの少し追加解説

Asyncと銘打たれている通り、Asyncで非同期処理を行って表示しています。
Unityで広く使われているコルーチンではメインスレッドを活用して非同期処理を実現していますが、Asyncの方は実際にスレッドを分けて処理しています。

Editor

このフォルダに説明テキストとImportCustomization.csの2つのみとなっています。
ImportCustomizationはモデルをインポートした際、モデルに独自変更を行う機能が書かれています。いわばモデルインポートにおける拡張機能のサンプルです。
使用の際は33行目の、コメントを外します。
f:id:traitam:20180728161541p:plain

コメントを外した後にモデルをインポートするとモデルが緑がかってインポートされるようになります。
右のモデルはコメントを外した後に、モデルをインポートした例です。(自動的にモデルはインポートされないので手動で行う必要があります)
f:id:traitam:20180728162126p:plain

もし、ロードタイミングが分かりにくい場合は36行目の下にDebug.Logで読み込まれたことを確認すると良いと思います。
注意:コメントを外した部分は確認が終われば、再度コメントアウトするようにしましょう。以降のモデルインポートで全てのモデルが緑色になります。

LookAt

f:id:traitam:20180728162504p:plain

キャラクターがLive2Dのロゴを見つめ続けるサンプルシーンです。
実際にこのように実装したい場合は以下の公式記事をご覧ください。
視線追従の設定 | Live2D Manuals & Tutorials

Masking

MaskTextureは原則共有されているから、もし独自に作りたい場合はMaskTexturePreviewから変更を行うと独自の変更が出来るよ。
…というサンプルシーンなのですが、イマイチ変更が上手く行きませんでした。

すいません、よく分からないので変化が見れる画像もありません。

Models

Maskingで使われているモデルと、サンプルシーン全般に使われているモデルが含まれています。
特にサンプルシーンも特別追加されたスクリプトなどは、ありません。

MultipleModels

f:id:traitam:20180728163126p:plain
f:id:traitam:20180728163130p:plain
複数モデルが存在するときにモデルの描画順についてのサンプルシーンとなっています。

基本状態ではキャラクターが前になっていますが、HierarchyのClippingを選択し
[Cubism Render Controller]->[Sorting]->[Order In Layer]の数値を変更することで描画順を変更することが出来ます。
例としてはCrippingモデルの方を“2”にすることで前面に来るようになります。
キャラクター(Koharu)と同じ数値である“1”を選択すると2つが混ざったような見た目になります。これは期待されない処理なのでそうならないように気を付けましょう。

PerspectiveCamera

f:id:traitam:20180728164052p:plain
f:id:traitam:20180728164049p:plain
Live2DではCamera設定はorthographic(Unity 2Dモードの標準設定)で活用されることが原則となっています。
しかしperspective(3Dモードの標準設定)で活用したい人に向けたサンプルになっています。

Live2Dモデルをperspective上で正しく描画させるには[Cubism Render Controller]->[Sorting]->[Mode]を[Back To Front Order]に変更する必要があります。
このサンプルシーンで[Back To Front Z]に変更すると描画が乱れることが確認できると思います。
ちなみにカメラ設定は[Camera]->[Projection]から確認することができます。

RayCasting

f:id:traitam:20180728164209p:plain

マウスでクリックした時に、マウス上にあったものを一覧で表示するサンプルです。
専門的に言うと、マウスクリック時にレイを射出し、レイにヒットしたDrawablesの一覧を表示するサンプルです。

おわりに

これでR8時点で含まれているサンプルの紹介は終わりです。
サンプルの詳細をもっと知りたい、という方は公式SDKチュートリアルへアクセスすれば大体は乗っていると思います。
TOP | Live2D Manuals & Tutorials

半分はUnity経験者向けのサンプルなので、割とハードルが高いサンプルですがこの記事がヒントになると嬉しいです。
それではみなさん、楽しい創作ライフを!

UnityのLive2DCubism3SDKでUserEvnetをインポートする時の注意点

motion3.jsonに設定されたユーザデータを取得 | Live2D Manuals & Tutorials

上記リンクのある通り、公式のSDKチュートリアルの通り行えば基本的には問題ありません。
ただ、「厳密に」上記の順番で行わないと問題が起きます。
今回はモーションにユーザーイベントを登録して検証をしています。

目次

どのような問題が起きるのか

f:id:traitam:20180725223051p:plain

順番を間違えると画像のようにイベントが登録されていないとエラーを吐かれます。

なぜこのような問題が起きるのか

Eventのハンドルもモデルをインポートした段階で登録されます。
そのため「Live2Dモデルのインポート」→「スクリプトにイベント登録処理を追加する」順番で行うとインポーターがイベントを拾えるが上手く追加できないという事態になります。

解決策

解決策としては「スクリプトにイベント登録処理を追加」→「Live2Dモデルをインポート」という順番を守ればOKです。
また先にモデルをインポートしても「モデルフォルダクリック」→「Reimport」で再度インポート処理を走らせれば対策できます。
モデルを再インポートした場合はアタッチが外れているので再度付け直しましょう。
解決されれば無事にDebug.Logが走ります。(例ではモーションの2か所にUserEventを登録しているため2つ出ています)
f:id:traitam:20180725224243p:plain


解決策が分かれば難しい問題ありませんが、分からないと何が原因か分からず最悪詰まる可能性があるかもしれません。
UserEventをUniyで扱う時は少し意識しておきたいですね。

それではみなさん、楽しい創作ライフを!

Live2Dにおけるアートメッシュとメッシュとポリゴンの違い

この区別が書かれたブログを見たことが無かったので記述します。(皆様知ってて実は必要なかったのかも…)

追記2019/01/27
公式が違いについての記事が追加されていました。
Live2D用語集 | Live2D Manuals & Tutorials

アートメッシュ

アートメッシュとはLive2Dで編集されるオブジェクトです。
公式では「メッシュが割り当てられた状態の画像」をアートメッシュと呼んでいます。
編集パーツ+対応したメッシュ=アートメッシュ、と考えると少しわかりやすいかもです
f:id:traitam:20180603224324p:plain

タイトルの3つでは一番大きな分類になります。
アートメッシュについて | Live2D Manuals & Tutorials

メッシュ

ポリゴンの集合体のことを言います。
実際アートメッシュに近いニュアンスになるかもです。
しかし、アートメッシュとメッシュは少し違うニュアンスになると思います。

ポリゴン

頂点3つで出来る三角形のことです。
Live2Dではこれを用いて変形をして、パラメータやアニメーションを作っていきます。

3つ違いについて

以下3つを集合で表すと図のようになります。
f:id:traitam:20180603225047p:plain

アートメッシュが一番概念としては大きく、続いてメッシュ・ポリゴンとなっています。
ポリゴンを構成するのは“頂点”となっているため、作成していく中では一番小さい概念は頂点となっています。
こまった時は「~~のアートメッシュ」と言えば問題無いと思います。

最後に

意識して使い分けたいもしくは厳密に区別する必要がある方向けという内容でした(マニュアルやリファレンスを外部に向けて書く方向け)。
が、意識すると分類が難しく感じ、また区別するための記事が見当たらなかったので書きました。
(正直通じれば何でもいい気がする)

HUION gt-220 v2(2048)でWinTab APIを使う

概要

  • タブレットの設定から「タブレットPCサポート」のチェックを外します。
  • ソフトではSAI2の場合は設定から「WinTab APIを使用する」設定にすればOKです。Photoshopは変更する必要はありません。
  • WinTab APIは解像度の違うディスプレイを使っている場合、座標がズレる問題が発生しました。もし2枚以上モニターを使用したいのであれば解像度を揃える必要があります。

WintabAPIを使用する

f:id:traitam:20180504171959p:plain
HUIONのドライバーから「タブレットPCサポート」のチェックを外します。
これだけでタブレットを使用するときにWintabAPIを使用します。
基本はこれでソフトも対応していますが、SAI2などソフトから明示的に使用するAPIを変える必要のあるものがあります。

SAI2の場合

f:id:traitam:20180504172009p:plain
ヘルプ > 設定 でウィンドウを開きます。
その後、一番上の「WintabAPIを使用する」を選択し、再起動すれば完了です。

WinTabAPI使用時にペン先がずれる

WintabAPIを使用時、SAI2やPhotoshopでペン先がずれる場合があります。
これは以下のように解像度の異なるディスプレイを使用している時に発生します。
f:id:traitam:20180504172231p:plain

もしWintabAPIを使用したい場合は解像度の違うディスプレイを外すと問題が解消されます。
f:id:traitam:20180504171855p:plain

縦横比が同じならば良いのかもしれません。片方を縦描画にしても問題は発生しませんでした。

ペンタブに使用するAPIについての概要

SAIやPhotoshop CS6 をWintabAPIで使用すると入力される情報が変になる(ペン先がずれる)ので情報を集めていました。
その中で、どうやら動作させるドライバーの種類があるようなのでまとめます。

APIとは

以下サイトではこのように記述されています。

APIとはApplication Programming Interfaceの略で、プラットフォーム側の汎用性の高い機能を外部から手軽に利用できるように提供する仕組みのこと。

www.idcf.jp

ペンタブを機能させるにもプログラミングが必要なわけで、そのプログラミングをしやすくするためのものです。
で、世の中には、このAPIが無数に存在しており、ペンタブレット周りでは2種類存在しています。それが、
WinTab API TabletPC API
です。

WinTab API

WinTab APIWACOMが提供しているAPIです。
wdnet.jp

SAI1やPhotoshop CS6 以前で、このAPIが使われているようです。

TabletPC API

TabletPC APIマイクロソフトが提供しているAPIです.
Tablet PC API Reference (Windows)

マイクロソフト全般のソフトによく使われているそうです。
SAI2やクリスタではこちらのモードが扱えるようです。

HUION gt-220 v2(2048)でTabletAPIモードを辞めたい(辞めれてない)

背景

Win10でTabletAPIを用いると基本的は動いてくれるが、「クリック>近い場所をクリック」が出来ないので何とかして、タブレットドライバの「タブレットPCサポート」のチェックを外したかった。
けれども出来なかった。

試行錯誤

SAI2の色変更の際に細かい選択ができない。
 タブレットPCサポートを切るとキビキビ動く。が、筆圧が死ぬ。

SAI2内のヘルプ>設定>「WinTabではなく~」のチェックを外して再起動
 筆圧復活。
  が、キャリブレーションがおかしくなる(Psと同様で、選択部分より少し上もしくは下に座標が来る)

 Wintab_x64を入れる
参考文献:
http://www.stdio.jp/entry/windows/surface_pro_4-saiwww.stdio.jp
https://togetter.com/li/1112148togetter.com

SAI2のエラーは吐かなくなったけど、筆圧が死ぬ。キャリブレーションは回復

とりあえず全部TabletAPIモードに戻す。HUIONドライバの筆圧テストで反応なし。併せてPsでもブラシで描けない

状況改善のため、最新版のドライバインストールして全体を元の状態に戻す。

結果

結果はタブレットPCモードで使うのが一番安定したという話です。
ただ、Photoshopのペン座標が上手く行ってないので直したいけどWacom板タブ使っていた頃から問題が発生してしており、かつ改善策が見いだせないため使用頻度は低くなっています。
資料集めて、また再挑戦しても良さそうですが果たして…。

【Cubism3.1Version】FaceRigのワークショップに自作Live2Dモデルを公開するまで

Live2Dのモデルを作成してSteamのFaceRigのワークショップに公開するまでの流れを書きます。ここでの前提条件として

  • Live2Dモデル作成が終了済み
  • FaceRig+FaceRigLive2DModule購入済み(しなくても大丈夫かもですが動作確認ができません)

が、ありますのでご了承ください。

Cubism2.1で開発されて、公開する場合は以下の記事を参照ください。
traitam.hatenablog.com


必要なもの

  • FaceRig(+DLC:FaceRigLive2DModule)
  • Live2Dモデル(Cubism3Editorで作られたモデル)
  • FaceRig Workshop Utility Kit

FaceRig Utility Kit はSteamからダウンロードします。
Steamアプリを開いて[ライブラリ]->[ツール]->[FaceRig Workshop Utility Kit]をインストールしてください。
f:id:traitam:20160602105520j:plain

次にLive2DモデルをFaceRigで読み込めるデータ作成を行います。

必要なモデルデータ作成

Live2Dモデルは.cmo3ファイルになっていますがFaceRigで読み込むデータは.moc3ファイルです。ここでは.moc3ファイルを作成します。

Cubism3Editorでは[ファイル]>[組込み用ファイル書き出し]>[moc3ファイル書き出し]を選択します。
f:id:traitam:20180307100921p:plain


次にウィンドウが出現するので特に設定は行わずOKボタンを押します。
f:id:traitam:20180307110943p:plain

 上記の設定で出力を行えば、
[name].4096(1024 or 2048)
[name].moc3
[name].model3.json
([name]は、出力した時の名称です。ここでは抽象性を出すため[name]となっています)
が新しく生成されます。
f:id:traitam:20180307111023p:plain

 実際の所、このデータだけをアバター名フォルダ([name]フォルダ)でひとつにして、FaceRigにインポートすれば動作します。しかし、今回はワークショップにアップロードするまで行うのでもう少し手を加えます。次は、アップロードに必要なフォルダ構成です。もし、自分だけで楽しんだり、動作確認をしたい場合は[動作確認]の項目まで読み飛ばしてください。


--

フォルダ構成

フォルダ構成ではアップロードルールがありますので、それに従って構成していきます。
Objects
-[name]
--[name].4096
--[name].moc3
--[name].model3.json
-preview.png
です。
f:id:traitam:20180307111730p:plain
f:id:traitam:20180307111811p:plain

preview.pngはワークショップで表示するためのサムネイルです。これが無いとアップロード時、エラーでアップロードできません。無事に表示できるという確認が取れたのは『512*512 png形式』のみです。何か理由が無ければこの形式をオススメします。

これにファイルを少々付け加えます。FaceRig動作時における名前・説明・サムネイルの表示です。

FaceRig内の名前・説明・サムネイル表示

 previewとは別にFaceRig用のサムネイルや名前などを設定する必要があります。ここではその設定を行っていきます。
 まず名前・説明は.cfgファイルというファイルを使って表示を行います。プログラマなど一部の方以外には聞きなれないファイル名かもしれませんがメモ帳や各エディタで編集できます。
 メモ帳もしくは各テキストエディタを開きます。記述内容は以下の通りです。

あ。日本語対応にもできますが、日本語を使いたい場合は保存形式をUTF-8にする必要があります。特に保存形式を気にしたくない方は英語のみで記述を行うと問題なく表示できます。

set_friendly_name [name] '[表示用のname]'
set_avatar_skin_description [name] default 'Description[表示用の説明文]'

--

set_friendly_name

ここで名前の設定を行います。FaceRigでは赤枠内に影響が現れます。
f:id:traitam:20180307113649p:plain


赤枠内に設定が表示されます。

set_avatar_skin_description

説明文が記述されます。デフォルトだと英語ですがあらかじめ日本語でも説明文を入れれば言語設定で日本語が適用されます。ただし文字制限が存在したり、UTF-8(ROM無)という文字エンコード方式にしか対応してないなどが言われています。詳しい検証はしてません、ご容赦ください。
f:id:traitam:20180307113813p:plain

FaceRig内では赤枠内に設定が表示されます。

この上記の文章を書き終えたら
cc_names_[name].cfg
という名称にして保存します。保存ができない!という方は.txt形式で保存になっていないか確認してください。よくあります(経験談)。

次にアイコンの設定です。
アイコンはpreview.pngがサイズ512*512.png形式ならば使いまわせます。今回は使いまわします。ただし、FaceRigのサムネイルはサイズ512*512、形式pngでしか表示確認ができてません。特別な理由が無い限りは512*512のpngデータをオススメします。

名称はico_[name].pngにします。
f:id:traitam:20180307114232p:plain
FaceRigでは赤枠内に表示されます。

2つのファイルが作成出来たら.mocファイルなどが入っている場所に入れてください。最終的にはこのようなファイル群になります
f:id:traitam:20180307114346p:plain
無事に終了したら次は動作確認を行います。

動作確認

保存先フォルダ

先ほど作ったObjectフォルダを所定の場所に入れます。
場所はSteamフォルダ階層深くです。例としては
C:\ProgramFiles(x86)\steam\steamapps\common\FaceRig\Mod\VP\PC_Common\Objects
です。


また、steamアプリからも飛べます。
ライブラリからFaceRigを表示して左の項目を右クリック->[プロパティ]でウィンドウを開きます
f:id:traitam:20160602110119j:plain

その後、ウィンドウの[ローカルファイル]->[ローカルファイルを閲覧]でFaceRigフォルダまで飛べます。その後、FaceRig\Mod\VP\PC_Common\Objectsまで開きます。
f:id:traitam:20160602110133j:plain
f:id:traitam:20180307114947p:plain


ちなみに、\PC_CustomData\Objectsの内部に入れても同様に機能します。他のブログ様ではこちらを入れることが多いですが、このフォルダは実際にワークショップからサブスクライブ(使用登録)するときに使うフォルダです。

そのためフォルダに入れて動作させた後、アップロードした自作モデルをサブスクライブした場合、フォルダがダブります。
その場合どちらが動作確認用なのか、アップロード物なのか分からなくなるので、ここでは動作確認を行う場合、原則PC_Common\Objectsにしています。

[注意]2018/03/07現在、バグなのかCumtomData/Objects以下に置いた場合、以下の画像が出てきてCubism3モデルが呼び出せません。必ずPC_Common/Objectsフォルダの方に入れてください。
[追記:2018/05/04]5月2日アップデートでCommon、CustomDataどちらに入れても問題なくモデル呼び出しが出来るようになりました。
f:id:traitam:20180307115256p:plain


FaceRigを起動し、選択・表示できれば導入完了です。
最後にワークショップアップロードです。

アップロード(FaceRig Workshop Utility Kit)

steamアプリの[ライブラリ]->[インストール済み]からUtility Kitを選択し、プレイします
f:id:traitam:20160602110252j:plain
f:id:traitam:20160602110259j:plain

ウィンドウが出現するはずです。
f:id:traitam:20180307115948p:plain
このウィンドウ、もといソフトを用いてワークショップへアップロードを行います。

設定後はこのようになります。
f:id:traitam:20180307120158p:plain

以下は各種項目の説明になります。

Update Item

Add new item -no update 新規アップロードします
既にアップロードしたモデルを更新したい場合は、右側のプルダウンボタンからアップデートしたいモデルを選択してください。

Title

ワークショップで公開するもののタイトルです

Description

ワークショップで公開するものの説明です

Tags

タグ設定です。"," で区切れます。

Data Folder

アップロード時、参照するフォルダです。
ここではObjectsフォルダを参照します。注意点として、間に日本語フォルダがあると文字化けして正常にアップロードされない可能性があるので予め英語フォルダで最後まで統一するようにしてください。

Peview Picture File

ワークショップで公開するもののサムネイルです。
Data Folderを選択した時に一緒に設定されますが、そのままアップロードしようとすると
Preview picture file
”~~(ファイル階層)”does not exist.
Please add an existing path to a.png / .jpg / .bmp file or none at all.」というエラーを吐くので、しっかり[Browse]ボタンからPreview.pngを設定します。

Item Visibility

public 誰でも閲覧可能
friend only フレンドのみ閲覧可能
private 自分のみ閲覧可能
他の人に使ってほしい場合はpublic です。最初は御試しアップロードでprivateで上げる、というのも手です。

Change Log

アップロード、アップデート履歴です。
変更点などを記します。

最後まで設定が終了したらTerms and Agreement(規約同意)にチェックボックスがあるので、チェック(同意)して[Add Item]ボタンを押します。
これでアップロードが完了します。もし、失敗した場合は何か問題があるので、ゆっくり甘いものでも摂りながら確認してみてください。

アップロード後、以下のダイアログが出てくればアップロード成功です。お疲れ様でした。
f:id:traitam:20180307120612p:plain

以上でLive2Dモデル公開手順を終了します。

既知のバグ

Cannot load Live2D avaterと表示されてmoc3ファイルが開けない

f:id:traitam:20180307115256p:plain

2018年5月2日のアップデートで解消されます。それより以前のバージョンを使っている場合はアップデートをお願いします。
もし解消されない場合は、データをPC_Common/Objectsにモデルを移動してください。

乗算加算が適用されない

これは対応待ちになります。

[2018/05/19追記]
どうやら乗算加算とクリッピングを併用すると問題が発生するようです。



以降は公式様からの対応があれば、適宜対応していきたいと思います。
それではみなさん、楽しい創作ライフを!