勉強会主催者 Meetup 2019.01参加しました

はじめに

2019年1月19日に「勉強会主催者Meetup」という勉強会主催者向けの勉強会に参加しました。
connpass.com

10人以下の規模で開催されている方や100人以上の大規模で開催されている方など、様々な経験者が集まりお話しをしました。
社会人だけでなく学生やスクールに通っている状態で勉強会の主催を行っている方もおられました。
エンジニア界隈では勉強会は多く存在しており、集まったメンバーもほぼほぼエンジニアでした。

箇条書きに近い形ですがメモをゴリゴリ取っていたので記事にします。

Twitterでの実況は以下リンクからどうぞ
twitter.com

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

概要

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

背景

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

ダウンロード方法

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

取り扱いの注意

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

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

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

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

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

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

トップページ

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

01DL場所

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種類の書き出し設定が行えます。

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

unity2018.3について

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

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

参考文献(最終閲覧日：2018/12/21)

Cubism 3.3 アップデートに伴う注意 | Live2D Manuals & Tutorials
Unity2018.3で生成されるプロジェクトに関して | Live2D Manuals & Tutorials

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

前回の記事
traitam.hatenablog.com

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

使用感

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

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

ペンの筆圧

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

ペンの感知について

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

入り抜きについて

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

色について

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

その他

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

発生した問題

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

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

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

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

作業環境について

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

［セット品］GPD Pocket9点セット[GPD Pocket本体,専用ポーチ,トラックポイントキャップ２個,専用HDMIケーブル,液晶保護フィルム,イヤホン,USB HUB,VAGOODオリジナルグッズ,保障書]

Anker PowerCore Fusion 5000 (5000mAh モバイルバッテリー搭載 USB急速充電器) 【PowerIQ搭載/折畳式プラグ搭載】 iPhone、iPad、Android各種対応(ブラック)

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

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

描いたもの

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

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

XP-PEN Artsis12購入しました

XP-Pen液晶ペンタブレットXP-Pen Artist12 は、色鉛筆、シャープペンと同じような 六角スタイラスペンを採用しているため、デジタルイラストが一般の描画感覚に近い感覚になります。

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

特徴

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

開封・中身紹介

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

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

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

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

使用準備

インストール

ダウンロード- xp-pen

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

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

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

フィルム剥がし

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

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

フィルムについて

メディアカバーマーケット XP-Pen Artist 13.3 機種用 【ペーパーライク 反射防止 指紋防止 ペンタブレット用 液晶保護フィルム】

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

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

問題が発生した

画面の縦横比がおかしい

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

描画がぶれる

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

その他対応

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

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

個人的な特筆点

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

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

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

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

はじめに

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

大鳳の Live2D つよすぎる pic.twitter.com/x4JnYBnxFm

— ばつ👶新刊メロブ委託中 (@batuACT3) September 14, 2018

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

素晴らしいと思った場所

指パーツの切り替え

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

そこからある程度切り替え後の形に近づけて

1フレームで切り替える。

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

前腕の影の切り替え

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

後半ではこの通り前腕下半分に影が出来ています。

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

レコードの回転

そしてこれ。
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でモーション作成時に入れた文章になっています。

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

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

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

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

その他必要な作業

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

動作確認

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

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

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