Live2Dで光の反射を表現する
Live2Dにおける光源や反射表現をリアルタイムで動かす表現は、個人的にはあまり見ません。
ただ、前例としてはゲーム「デスティニーチャイルド」があります。
以下の記事の通り制作事例があったので参考にしつつ、自分なりに作り、ノウハウをまとめていこうと思います。
jp.gamesindustry.biz
最終的に作ったもの
アニメーションが適当すぎてランダムアニメーションテストみたいな感じになってますが、お許しください。
分かりやすい場所は手の反射表現だと思います。
剣が近づくと反射が発生し、遠のくと手が暗くなります。
素材の準備
使用する素材
素材は自分で作ることも考えましたが、既存のイラストを分割した方が時間的に、そして何よりモチベーション的にいいかなと思ったのでそのようにしました。
使用するイラストは、ゲーム「フラワーナイトガール」のキャラ「ワスレナグサ」です。ゲーム内では進化前と進化後のイラストが存在し、進化後の方が反射表現の勉強になると思い、進化後のイラストを使用しています。
作成も実際にこの背景付き1枚絵から切り抜いて分割を行います。
素材の分割
今回は反射表現の勉強といえど、やはりしっかり動いてもらいたいので通常の分割も行います。
図鑑の背景付き1枚絵からキャラを切り抜き、そしてキャラを分割していきます。
私はSAI2に慣れているので、SAI2でマスクを使いながらパーツ分割をしていきます。
分割した後は、モデルが動いても隙間が発生しないように塗り足しを行います。
特筆すべきは、今回の分割では、反射を分割するところです。
ベースは反射していない手です。その上に反射だけのパーツを作成します。
これをモデル制作時に、パラメータなどで透明度を切り替え、光源や反射を表現します。
モデルの作成
先ほど作ったpsdデータをLive2DCubismEditorにインポートして、各種デフォ―マ階層を作り、パラメータを作成していきます。
反射を表現するための透明度変化以外には別途行う必要は無く、階層も各種パーツと同じ場所に入れます。
パラメータとしては、本当は各部位の反射ごとにパラメータを作成するのが良いのですが今回は面倒なので一括にまとめています。
下の画像のように、反射用パラメータを作成し、反射用のアートメッシュを適応させ、透明度を調整します。
これで、反射表現を行うことが出来るモデルを作成することができました。
もっと凝りたいのであれば、光源である剣を透明度によって炎のような表現を行えば良いです。が、大変なので今回は割愛です。
アニメーションの作成
Animatorでアニメーションを作成します。
意識することとしては、光源である剣の遠近で反射パラメータを動かすことです。
あとはご自由に動かしてください。
これで反射表現を伴ったモデルの作成とアニメーションの作成が終わりました。
終わりに
いかがだったでしょうか？
光源・反射表現をLive2Dで行うことでよりリッチな表現ができたと思います。
Live2Dで動かすこと自体が大変ではありますが、このような表現を加えていくことでより素晴らしいモデルに仕上がると感じます。
立ち絵などではあまり使わないかもしれないですが、風景込みの1枚絵をLive2Dで動かして物語を作る、みたいな場所で真価を発揮しそうですね。
それではみなさん、楽しい創作ライフを！
人に教えるという難しさに対処するための知識の列挙
こうして記事を書いたり、何かと「まとめて、伝える」ことが多いのでその難しさ、そしてその対処法を行うのに必要な知識を書いていこうと思います。
かなり私的なまとめ方だし自分でも消化しきれていない部分があるので「分かりにくい」と感じるかもしれません。ご容赦いただけるとありがたいです。
そして、本記事は「こういう人が居るからこう対処するといいよ」という即座に使える知識はありません。
「こういう考え方がある・こういう人がいるのだな」と思ってもらえれば。
対象とする方
「他人に教えるタイミングがある方」とします。
具体的には、学校で教えていたり、サークル内で教えていたり、記事で技術ブログを書いていたりする方などをイメージしています。
ただ、社会的には日常的に他人に教えたり教わったりするので、広範な考え方をすれば多くの方に当てはまります。
人に教える・教わる「行動を起こすまで」のプロセス
人に教える（教わる）という行動を起こす前に、何かしらの原因があって要因を経て行動に起こします。
ここではそのプロセスの紹介になります。
ちょっと定義付けをします。論述の展開は定義がしっかりしていると行いやすいので。
教える人というのは「援助行動を行う人」とします。
社会心理学では人を助ける行為を「援助行動」と定義しています。専門的になれば種類がありますがここでは言及いたしません。
そして、教わる人は「援助要請を行う人」とします。
同心理学分野では人に助けを求める行為を「援助要請」と定義しています。
助ける（援助行動を起こす）までのプロセス
書籍「基礎から学ぶ社会心理学（サイエンス社）」では高木(1997)を基に作成された援助行動の判断過程のプロセスを以下の図のように記載されています。
援助行動では、自分が問題を解決できるか・できないかの他に、実行時・非実行時における利益とコストなどが考えられます。
たとえ、知識を持っていたとしてもメリットが薄かったり、相手に教えたのに反発的な結果が返ってきた場合などは動機付けが下がり、次回以降は援助行動をしようとは思わなくなります。
逆に感謝されたりすると動機付けが上がり、次回も援助行動に対して率先的な行動になります。
助けを求める（援助要請を行う）までのプロセス
前項の「助ける（援助行動を起こす）までのプロセス」で述べた同書で以下のように援助要請の判断過程が記載されています。
助けを求める。これは避けては通れない問題です。そのため、ここでは少し詳しく解説していこうと思います。
ここでは「②援助要請の意思決定」「③援助要請の実行に関する判断」に注目していきたいと思います。
②では実行時（非実行時）の利益とコストを天秤にかける行為をしています。
ソフトウェアの使い方が分からない、アルゴリズムが組めないなどの問題が発生し、かつ自分では対策を打てない（ネットで調べても分からないなど）場合を具体例とします。
このとき「別に無理してこのソフトウェアの使い方が分からなくでもいいや」とか「この実装組めないから諦めよう」とか「迷惑がかかるかもしれない」とか思えば、援助要請プロセス的にはこの時点で終了し、他人に助けを求めないことになります。
ただ、「このソフトウェアを使いたい（仕事上使わなければならない）」とか「この実装が無いと成り立たない」とか思うのであれば、③に続きます。
③では、援助者が自分の周りにいるか、助けを求める方法があるかどうかを検討します。
TwitterではTLに援助者がいるかどうか、方法があるかが具体例となります。
TLに有識者がいるとしてもその人のツイートが常にヘイトにまみれていたり、不機嫌だったり、助けてくれそうだとは思わない可能性が高いです。助けてくれるとしても精神的に疲れる（精神コストが高い）場合、そうなれば援助要請は行わない可能性が高いです。
そして、その問題も越え、助けてくれそうな人がいるとします。リプライがいいのかDMがいいのかなどという、どのような助けを求める方法が有効なのかが考えられて、実行に移されます。
あと、援助行動と要請に関しては以下のURLでも詳細にまとめられており参考になります。
http://educational-psychology.edu.mie-u.ac.jp/thesis/2013/sakai/mondaitomokuteki.html
知の呪縛
書籍「わかりやすく説明する練習をしよう。（講談社）」では知の呪縛という概念を説明しています。
書籍では「これは、チップ・ハースとダン・ハースの著作『アイデアのちから』（邦訳：日経BP）で紹介されている現象で、あるテーマについてよく知っている人は、それを”知らない”という状態が想像しづらくなるという現象のことだ。」と説明されています。
自身が特定のテーマについてよく知っていると、知らない頃の状態を忘れ、それにより伝え方が変わるということです。
これは「インターフェースデザインの心理学（オライリー社）」における想起と認識の差でも言われています。
書籍内では想起（思い出すこと）は、認識（見ること・感じることなど）よりも難しいということが説明されています。
知らない状態、例えば初心者の頃の思い出を思い出そうとしても難しいということです。
この場合、環境があるのならば初心者を見て（認識して）教えるポイントを見出す方が楽になると思います。もし近くに初心者の方がいるのならば、その方を観察してどこで詰まっているのか見るのが、先に述べた理論では手っ取り早い方法になります。
また、「わかりやすく説明する練習をしよう。」では以下のように文章が続きます。
「これは共感に関わる問題だ。知識のせいで、他人の視点から物事を見る能力や、他人の自信度を正確に推し量る能力が妨げられる。僕たちは、すでに持っている知識によって呪いにかけられるのだ」
知識を持ってしまったが為に、教えることが難しくなる呪いがかけられる。ということです。
しかし知の呪縛を知ったところで、過去の初心者の頃の思い出は鮮明思い出せない場合があります。そして記憶は思い出されるたびに少しづつ内容が変わってくるのでその記憶が本当に初心者の頃の記憶なのか曖昧なところです。困ったところです。
おわりに
人に伝えるということ。それだけでビジネス・学問があるくらい専門的に深くなっている分野です。
掘ればその分出てくるのですが、文章書くのも大変だし読むのも大変だしで…、自分が軽く思い出して必要な部分を列挙しました。
特に、援助行動と援助要請の部分は特に助ける・助けられるの行動プロセスを分かりやすく図に収まっているので私も、このプロセスを気にかけながら伝えることをしていきたいものです。
また、知識だけ持っていても実際に活用できるかどうかは別問題です。
書籍「アナタはなぜチェックリストを使わないのか？」では「無知と無能」についての言及があります。
知識、知識を適切に活用できる能力は別であり各々育てないといけないと思います。
別に知識を持ってるから偉い、という訳ではありません。それを適切に扱えてこそとも思います。
しかし適切な行動は、良き知識が有った方が良いに越したことはありません。時間がかかりそうですね。そして難しい話です。
Alive2017行ってきましたレポート
Live2D公式イベントであるAlive2017に参加してきました。
alive2017.live2d.com
行ってきたので、すでにAliveの記事はいくつもあるのですが自分のまとめた内容を公開していこうと思います。
箇条書きに近い文章だけです。画像はありません。ご容赦ください。
基調講演
Alive参加者アンケートの内訳
従事している仕事では
50%がグラフィック関係者
10%それぞれでプログラマと学生が参加者になっていた。
Cubismユーザーの利用用途として
ゲーム・アプリが45%
アニメ・映像が40%
利用目的としては
趣味が44%
個人業務で36%
購入比率としては
個人71%
企業29%
みたいでした。
やはりグラフィック寄りの方々が多いみたいですね。
最近はアニメ映像も増えているみたいですね。結構リアルタイム系が多いと思ってました。
Cubismについて
3.0では開発環境をKotlinに変更
3.2実装予定のもの
スキニングの実装（3.1.xでβ実装予定）
インポート機能の強化
PSD書き出しの対応
アニメータの強化
が掲げられていた。
- SDK3.0
C言語フルスクラッチ開発
コアの上にあるレンダラやフレームワーク部分はOpenにしてユーザーがいじれるようになった
- Unity SDK
- Native SDK
ライブラリをCで実装
- JavaScriptSDK
CをEmscriptenでarm.jsに
- feature
各種プラットフォームの対応強化 → DirectX,Cocos-2dxなど
3.0状況下で2.1ワークフローが動くようにする(pose,expressionなど)
SDKはUnitySDKしか触ったことが無いのですが、2.1より格段に使いやすくなった印象です。
また、今後の方針としては全体的にプラットフォームの強化をしていくのも嬉しい話ですね。
2.1ワークフローが動く仕組みは企業向けだと思われます。個人でも規模が大きくなると移行が大変で結局前バージョンのままってのがあると思うので、そういう方にも嬉しいですね。
Euclidについて
コンポジット機能、楕円補間は特許取得済み
- まだ未実装なもの
Phython対応
MacOS対応
Euclid1.2では長い髪を効率よく作れるようになった。
- feature
制作工程50%減
SDKを用いたHMDを用いたVR表示で3体表示
今回Euclid × MRを展示していたものの抽選展示
VR Girlsが12月4日18時からSteamで配信
store.steampowered.com
Euclidはどうやら制作が大変みたいですね。ほとんど触ってないので経験値が少ないなので何とも言えないのですが。
公式からEuclidを使ったVRゲームが出たのは大きいと思います。無料ですし、HMDを持ってる方はインストールしてみては如何でしょうか？
私も入れて遊びました。キャラ可愛いですね。
Live2D Creative Studioチーム
Live2Dの制作支援を行っているチーム。
どうやらLive2Dクリエータが枯渇しているみたいです。(募集中ってことですね)
現在は映像に力を入れている。
Alive2017のイベント内で公開されていたムービー「The Lamp Man」を観ると技術力の高さが伺えますね。
「Live2Dらしい独特な動きが無い」というのが、制作したことある人なら誰もが驚く点だと思います。
展示スペースでLamp Manのモデルを触りました。360度回転もするレベルの高いモデルであると共に、可愛かったです。あと展示スペースにあったLamp Manのアクリルスタンドが特に良かったです。
2次マ
新サービスとして2次マという名前で発表されてました。
正式名称は“2次元のマーケット”
イラストを描く人、そのイラストを活用してモデルを作る人、そしてそのモデルを購入して何かを作る人
という構図を備えたサービスのようです。
分業が捗る、そして何よりお金が稼げるというサービスです。
また、このサービスを通じで企業の人がモデル制作者を見つけやすくする出会いの場が作れるのではないか？という仮説も提唱されていました。
そして、発展形としてAPIの提供でアプリ連携を強化する。有名キャラの二次創作を可能にする。という展望も見られました。
リリースとしては2018年春を目標に動いているようです。
ソフトではない、全く新しいサービスですね。気になりますね。
このサービスを通じて魅力的なモデルが増えたりするのに期待が持たれます。
あと、Live2Dアニメータを探している企業との出会いの場、というのが個人的には惹かれた部分です。
ツイッターにモデルを投稿して企業から声がかかったりしたという話も聞きますし、そのような話がこのサービスを通じて増えるのかもしれないですね。
セッション
ここではセッションで見聞きしたことを列挙していきます。
いくつか見たのですが、ここでは2つほど紹介をします。
デスティニーチャイルド制作事例
映像や画像についてはこちらの記事様が大変よくまとめた上で記載されています。併せてご覧ください。
jp.gamesindustry.biz
モデルは韓国版デスティニーチャイルドでの、シーズン2のレイド大ボス。翻訳Wikiでは「バリ」と訳されていました。
また、バリは日本版では現在未実装であるものの「還生館」の主という、ストーリー・攻略共に重要な立ち位置に立っているキャラクターです（還生館では別途作成された立ちモデルが動いてます）。
シーズン2のレイド大ボスだけあって、Live2Dアニメータのキム氏も頑張ったと言われていました。
- モデルの分類
まずモデルの分類ですが、本体・光源・装飾要素に分けているそうです。
光源は本体の周りに浮いている提灯から受ける光です。これを本体のモデルと別に分けて透明度を変えることで光源から光を受けているという表現を行っていました。
光源の透明度に併せて、提灯の光も同様に透明度で明るさ調整を表現しているそうです。
- 姿態の強調
上半身と下半身を分割し、それぞれにパラメータを振り反対方向に動かすことで女性的な魅力が増す動きになるそうです。
このノウハウは他のモデルでも応用されてそうですね。
- 被ダメージのモーション
被ダメでのモーションは早く・短くというのを意識して付けられているそうです。
- Live2Dについて
一番原画の魅力が引き出せる気がするとキム氏。
Live2Dが使えるというのは十分武器になるとのこと。
- Q&A
Q.光源レイヤーはデザインが下りてきた時点で分かれていたのですか？
A.一部のみ。原画を分けた部分もあり、無理にでも分けた。
Q.アートメッシュに直接パラメータを付けていますか？
A.はい。細かくやるにはポリゴンをいじるのが一番なので
Q.1体制作するにはどのくらい時間を使っていますか？
A.2~3週間。制作事例のモデルは3週間程度
Q.ポリゴンはいくつくらいですか？
A.いつもは1500~2000程度。事例のは4000程度
Q.立体感表現で、立体感を付ける点で工夫した点は何ですか？
A.立体感は大事だけども、絵が崩れるのは良くない。感覚に頼っている。出来るのならば原画と同じレベルのイラストが描けるのが望ましい。
Q.キーフレームを打つコツはありますか？
A.カーブエディタで動きをなめらかにする。パラメータ設定の時に、左右のオブジェクトが動く移動量を同じにする。
(3点挿入の場合)中央から伸びる左右のパラメータは同じにして、左右の移動量は同じに。そうしないと、アニメーションを付けるときに動きに違和感が生じてしまう。
Q.Live2Dアニメータは何人ですか？
A.社内では5人。あとは外注を使うなどしている。ただ、重要度の高いモデルは社内制作。
Q.フレイ(本編主人公のライバル)の角などの描画順変更の設定はどうやって表現しているのですか？
A.隠すようにパラメータを振れば、案外無理して動かせるので、そのように行ってる。
Q.今後Live2Dでやりたい表現は何ですか？
A.モデルを90度以上回転させてみたい。
講演自体が短く、質問時間が長かったので色々な意味で満足な講演でした。
デスティニーチャイルドは韓国版少しやっており、本格的に始めたのは日本版クローズドβからだったので講演が聞けて個人的に大変うれしかったです。
レイドボスというかなり重要度の高いモデルの事例なので、ノウハウの塊という印象でした。自分でも参考にしたい技術がたくさんありました。
いやぁ、絵も綺麗だし、その魅力を損なわないモデルの動かし方をしてて感嘆の一言です。
個人講演 モーセル氏
ツイッターやPixivのうごイラでLive2Dを使ったモデルをいくつも公開されている方です。
- Live2Dをはじめたきっかけ
絵描いて、ゲームを作りたい！
→ドット絵：何か違う
→3DCG：ハードルが高い
→スプライトアニメーション：「絵を動かす」とは遠い
という中でLive2Dに会って、触ったそう。
- 初めてのモデル制作にあたって
シンプルなモデルを作る → 面白くない
→「Live2Dっぽくないものを作りたい」
として、1枚絵の構図でLive2Dを制作。
- できること<やりたことのバランスを見極める。
→出来そうなものより作ってて面白いもの、グッとくるものを作りたい
→そもそも“グッとくるもの”とは？
→1枚絵で考えるのならば「想像をかき立てるもの」。5W1Hが絵の中で分かると絵の魅力が伝わりやすい
→これにLive2Dで動きを加えることで、補完ができるのではないか？
→動きを入れることで空間・時間的に「奥行き」のあるものが作れるのでは？
という深掘りしていく思考を用いていた。
作例の中では
「様々な表情の表現」、「2人の絡み」、「1人称視点」、「感情の振れ幅の表現」、「ループで飽きさせない仕様に」
などなど、Live2D作品ごとにテーマを決めて制作をされていた。
- ネットでの反応
Twitter、Pixiv共にフォロワー数やRTいいね、ブックマークなど数字で一気に反響があった。
3作目を投稿後位から仕事の依頼が来た（1年で10社程度）
フリーランスとしての活動も良かったが、Live2D Creative Studioが募集をしていたので、技術を身に着けるため就職をした。
- 体験を通じて学んだこと
ツイッターでは
多くの人の目に届く可能性がある
モーメント機能を利用して、ポートフォリオの形にするでも良い
Pixivでは
うごイラが1枚絵より数が少ないのでランクインを狙いやすい
ニコ静
上記2つとは違う層がいる。コメントがモチベに繋がりやすい
また、仕事に繋がりやすいと感じた。
動くものはSNSで伸びが良く、注目されやすい。
採用案件も多いので、売り手市場なのではないか？
- デザイナーになりたい個人ユーザーに向けて
趣味・仕事問わず「自分が動いているキャラが見たい」などのキャラ愛を持って触ってほしい
「もっと絵が評価されたい」とか考えている場合は、Live2Dで技術の付加価値を武器にしていけるので活用してほしい
とのこと。
- Q&A
Q.絵が全く描けないけども、Live2Dアニメータはやっていけると思いますか？
A.2次マの発表もあったし、全然大丈夫だと思う。分業の話もあるので。
個人講演をされていたモーセル氏はLive2Dとの馴れ初めからテーマを決めて制作をする、分析を行う、などを話されていました。
特に後半は分析が多くあまり見ない講演内容だったので、新鮮な気持ちで聞いていました。
やはり絵が上手いですね。羨ましいです。
そして絵を生かして動かすことも念頭に置かれているような話をされていました。この部分はデスティニーチャイルドの制作事例と重なるところですね。
やはり原画の魅力を生かしてこそのLive2Dなのと再確認できました。
おわりに
Aliveは他にも展示スペースを回ったり、懇親会で素晴らしい方々とお話ししたり夢のような時間でした。
来年は社会人になるので、自由に扱える時間が減ってしまうのですがコンテストに作品を出したり来年のAliveに参加したいですね。
これからもLive2Dを楽しんでいこう。そう思えるイベントでした。楽しかった。
Live2DCubismEditorでオブジェクトを中心基準に動かす
Live2Dでアートメッシュやワープ(曲面)デフォ―マを動かす時に中心を基準にサイズを変えたいけれども、通常の拡縮では対角や辺を基準に動きます。
けれども、Altを押しながらドラッグすることで中心を基準にサイズを拡縮することが可能になります。
例としているGIFではアートメッシュですが、ワープデフォ―マでも同様な編集が可能です。
私も最近知りましたが、扱えればより編集が楽になると思われる便利ショートカットです。ショートカットなどを覚えて効率よく作業したいものですね。
それではみなさん、楽しい創作ライフを！
HUIONペンタブのペン先が抜ける問題と対処法
ペン先が抜ける問題
HUIONのGT-220v2を使って結構経ちましたが、使っている中でペン先が抜けてしまう問題が発生しました。
症状としては、「ペンを少し素早く振るだけでペン先が飛ぶ」という状態です。
グーグルのサジェストでも出てくるくらい他の方も同じような状況に陥っているようです。
ペン先を抜けなくする対処法
探しているうちに解決できる方法がこちらでまとめられていました。
方法としては簡単で「ペン先部分にある穴を広げる」というものです。
私も同様の方法で解決しました。使用したものが画びょうですが、穴が広がればいいのでシャーペンでもいいのかもしれません。
その他
その他、使用感や問題はこちらに記述してありますので、良かったら併せてご覧ください。
traitam.hatenablog.com
wonderland用モデル作成 - クエスト完了時にモデルを喋らせる
wondarlandはapricotのモデルをそのまま扱うことができます。
ただ、wondarlandはapricoctと違い、クエスト完了時、モデルに喋らせることができます。
この記事はその実装方法を解説します。
iPhoneへの導入は以下の記事からご参考ください。
traitam.hatenablog.com
xml編集
アプリ作者であるKawatan様(@kawatan)に直接お伺いしたところクエスト完了時にモデルが喋るようにする場合は「completeイベント」を導入する必要があるそうです。
モデルの作り方自体は「apricotモデル作成」という名称が書かれた記事群で確認することができます。そのため、詳しい作り方は割愛し、completeイベントのみ解説します。
<sequence name="complete"> <message>作戦完了です！お疲れさまでした</message> <sequence name="Samidare.Say" /> </sequence>
イベントの実装自体は他のイベントと分かりません。
もしクエスト名を喋らせたい場合は「{.}」と記述することで実装が可能です。
xmlを編集後、wonderlandで無事に導入できれば、以下の画像のようにキャラクターがクエスト完了時に喋ります。
このcompleteタグはapricotでは活用できないため、GitHubでは文章化されていません。
そのため、文章化による保存も兼ねてこちらに記述しました。
それではみなさん、よき創作ライフを！
apricotモデル作成(その8) - apricot for iPhoneにモデルを追加する
apricot記事では久々です。半年ぶり。
今回は、作成した自作のapricotモデルをiPhoneに導入します。
wonderlandタグが付いていますが、iPhoneへの導入が同じ方法なのでタグを付けています。
xmlの編集
iPhoneへ導入する際、階層構造ができないので、画像参照の部分をすべて変更します。
<image x="0" y="0" width="450" height="650">Images\Samidare_back_hair.png</image>
となっている場合
<image x="0" y="0" width="450" height="650">Samidare_back_hair.png</image>
というように、参照していたImagesフォルダを削除します。
ひとつひとつやっていくのは大変なので、全置換機能があるエディタやIDEを用いて置換すると良いと思います。
