タグ: Live2D

Live2D コンテストにて Pro賞をいただきました!

だいぶ遅くなったのですが、この度Live2D Cubism 2.1 リリースコンテストにてTOP賞であるPRO賞に選んでいただきました!

IMGP0663 ありがとうございます!

投稿作品について

今回投稿したのは現在公開中の小説「Atheist」関連です。
ヒロインの澪をLive2Dモデルで作り、UnityUnityアセットの宴を用いてブラウザ上で動くノベルゲーム的な作品を投稿しました。

Twitterに投稿した30秒動画です。
こんな感じのノベルゲームの試作品的なものですね!
全部見たい方はこちらのURLにて公開していますので、是非見てみて下さい▶ http://game.atheist.jp/

余談

ちなみにこのコンテストの結果発表は11月末には結果がメールにて通知されていたので知っていました(ノ´∀`*)
なのに何故、今更かというとですね…

コミケ原稿が死にかけていたからです!!(´;ω;`)

なんとか両方生き残ってめでたしめでたし。

そう言えば今回のPRO賞、Tシャツも付いてくると言われてサイズ等返信送ったのですが、未だに届きませんね…
今年中には届くかな?(*´ω`*)
届いたらこれでLive2DTシャツは2枚目ですね!
前コンテストではコップとTシャツのグッズ賞でしたので(๑•̀ㅂ•́)و✧

Proライセンスについて

ということでProライセンスを貰ったのですが、残念なことにコンテストより結構前にPro購入済みですので、ライセンスが1つ余ってしましました。
辞退してもほかの人に回るということもないようですし、譲渡や貸与も禁止されているので宙に浮いている状態です(ノ∀`)アチャー
他のライセンスとか…(/ω・\)チラッチラッ とメールを送ってみましたが、流石に無理でしたね(ノ´∀`*)

Live2Dは1PCに付き1ライセンスが必要という形式です。
 (AdobeやCELSYSでは個人所有の同一者かつ同時起動させない条件で2台まで)
ただし、OSが違えばLive2Dも2台まで可能なようです。
 (Windows、MAC → OK)
 (Windows7、Windows10 → NG)
しかし残念ながら私はWindowsしか持っていません。
なので今後サブ機を買った場合は宙に浮いているライセンスを使うことにしましょう。

ということでProライセンスを頂きました!
ScreenShot00864

ありがとございます(*´∀`*)

公式サイトではセール期間中!

と、少し前からなんと、個人向けProライセンスが大幅割引で買えるらしいですぞ!
ScreenShot00871

Live2DはFree版も出ていてはじめて触る人はそちらでも問題ないのですが、
テクスチャのサイズや枚数制限、パラメータやデフォーマの数量制限など、ある程度作りこみを考えている人にはすぐに引っかかる制限があります。
これを気にProライセンスを確保しておくのもいいと思いますよ(`ω´)

しかし、10万以上だして買った私はなんだか損をした気分…
でもだいぶ以前だからしょうがないよね…(´・ω・`)

とか思ってたらLive2Dさんやってくれました!

キャンペーン事前通知以前に購入されたインディークリエイターの皆様へ
〜 Cubism Editor 3 PROの無償提供プログラムについてのご案内 〜

以下略
[引用元URL]

キタ━━━━ヽ(゚∀゚ )ノ━━━━!!!!!!

Live2D Cubism Editor 3.0 !!!!!
しかも無償ってことは、本来は有償ということ。
有償ということは、有償にするほどの大規模なアップデート!!!!!!!!

しかも、これを見ていただきたい。
Live2D社のCEO&CTOの方の去年末の書き込みです。

ScreenShot00872

[引用元URL]

l17449

ScreenShot00872-1

[引用元URL]

 

l5641

Live2Dの最大の欠点である、なめらかな髪揺れ!
ついに改善の兆しがっ!!!

これは3.0公開されたらソッコーで試すしか無いですな!!

懸念

だが待って欲しい。
無償バージョンアップのページをよく見よう。

ScreenShot00873

[引用元URL]

2014/9/2からか…
Pro購入が2014/11くらいだから大丈夫だな(ΦωΦ)フフフ…

ん?

2015/12/24までの購入の方?

ん?

コンテストによるProライセンスは、購入時にクーポンを入力することで同額値引きが入って実質タダになる。
Pro賞とは、Pro全額割引券のクーポンがもらえるということ。

つまり、コンテストで貰ったPROライセンスは無償の対象となり得るのではないか!?

そして…

コミケ原稿で忙しいと後回しにして2016年1月に入ってからクーポンを使った私は対象外となるのではないか!!??

uwaaaa

 

MOTTAINAI☆

と思ったのですがどうなんでしょうか。

少なくとも自腹で購入しているライセンスについては問題ないのですが、今回のPro賞分がどうなるのか気になりますね。
実は現在、サブ機にSurfaceを買おうか検討中でして、Surfaceを買うなら今回もらったライセンスを入れようと画策していたのですが、
このままではメインPC→3.0、サブPC→2.1という状態になってしまう!?

/(^o^)\ナンテコッタイ

今後について

どちらにせよLive2D 3.0は2016年後半になると思います。
今はともかく、Live2DとUnityと宴を使ったノベルゲームの制作をしないとですね!

現在1月末の「デジゲー博」と「コミティア115」にすでにサークル参加を申し込んでおります(`・ω・´)ゞ
(間に合う気がしないけれど)そちらの方でLive2Dノベルゲームの頒布、あるいは展示を行いたいと思います。
なのでとりあえず制作をせねば…!
P_20150711_232228 バタッ

それでは今後ともよろしくお願いします。

あ、Live2D立ち絵メイキング的なものは今回は打ち切りです(;´Д`)
代わりに他にLive2Dについてブログを更新していきたいですね(`・ω・´)ゞ

 

いい加減Live2Dで立ち絵を作りたい:05

コミティアや砲雷撃戦よーいの新刊の方で一ヶ月以上Live2Dを触れませんでしたが最近やっと作業再開出来ました(ノ´∀`*)

気付けばLive2D Ver2.1も正式に公開されました。時間が経つのは早いものです…
Live2D Ver2.1特設サイト


 

と言うことで口の制作の途中で、前回は終わってましたね。
まずは口の中の実装。
はにかむような口の開きの場合に歯の白さが出るように調整し、併せて舌の描画も実装しました。

Animation 13

八重歯が見えているのがチャームポイントですね
IMGP0663

同時に口の大きさも実装しました。

Animation 14 Animation 15

口の大きさを設定すれば、口のバリエーションがかなり増えるのですが、以下のように微妙な口も出来てしまうのがどうしたものか…

Animation 16

Live2Dのリップシンク機能はいまいち把握してないけど、「あいうえお」の登録は出来ず口の開閉のみっぽい?
でも、表現の幅は広げて、出来るだけ汎用性を持たせたいので実装しました!
P_20141220_220323 どやぁ

それにしてもクリッピング機能は便利ですね。
前回の口中のパーツにクリッピング設定をしているのですが、大元をしっかり作ればあとは雑でもはみ出すことはありませんね!


さて、一通りの口は出来たので、とりあえず次は目ですね。

まずは目の光沢部分が同一パーツだったので、一度PSDファイルを再インポートして分離させました。
しかし残念ながらCLIP STUDIO PAINTでは「覆い焼き発光」を使っていたのですが、Live2Dでは「加算」しか出来ないのでイメージが結構変わってしまうのが残念デスね…

 

 

ScreenShot00636 ScreenShot00517

↑が過去の画像との比較。。。
2013-05-09 15.08.24ふむ…

鮮やかさが足りない…
自分のイラストは結構「覆い焼き発光」を用いるので、これが動くパーツに使えないのは結構表現の幅が狭まって辛いですね…
Live2D公式が要望募集している時に、覆い焼き発光実装を要望で出したのでいつか実装してくれると良いですね…!(/ω・\)チラッ

さて、そんな光沢を分離させた目を動かしていきましょう。

Animation 17

クリッピングを用いることで、綺麗に目を実装できましたね!

Animation 18

目の開閉も調整。
目の動き、開閉共に、瞳と光沢の動きを若干ずらしています。
瞳と光沢が同一パーツだとペラい印象を受けますが、若干ずらすことで立体感を演出しようという試みです。
上手く行っているかな?


さて、今回はここまでですね。
実はもうちょっと先まで作り終えてます。(パラメータ見て気付いていた人も居るでしょうが…)
Live2Dに触れなかった期間もあるので、復習がてらまたちまちま進捗を載せていこうと思います(`・ω・´)ゞ

 

 

(´・ω・`).。◯(体の動きXYZで苦戦中で先に進みませんな…)

いい加減Live2Dで立ち絵を作りたい:04

いい加減Live2Dで立ち絵を作りたい:03


さて、前回まででとりあえず準備段階はだいたい終わりました。
いよいよモデルの動きを付けて行きますヾ(´ω`=´ω`)ノ

とりあえず口の線を動かしてみます。

Animation 3 Animation 2

作り方は口の線を一本引き、それを左右対称部分を削除します。
ScreenShot00507

この線をまずコピーして口の上下を作ります。

ScreenShot00508

そして2つの線で形を作ったらコピー反転をして作りました。
この手法で左右同じ形を作れるので正面モデルだと非常に楽ですね(^ν^)

 

続いて目の開閉をです。

Animation 5

クリッピング機能を使っています。
白目に瞳をクリッピングし、まつ毛に変形パスを用いてパラメータを設定しています。

公式マニュアルの、Ver2.0までの作り方は以下の様な感じです。

ScreenShot00505
パラメータで動きをつけよう:http://sites.cybernoids.jp/cubism2/beginner-tutorial/05

このように目を隠すパーツもしくは部分が別途必要でしたが、クリッピングを用いれば白目の部分からはみ出すことは無いのでまぶたの必要がなくなります。

これは便利ヾ(´ω`=´ω`)ノ

これは口でも応用出来そうです。
ただし、口の場合は目よりも圧倒的に動きが複雑になります。
これ、作れるのかな?と疑問に思いながら作ってみることに。

Animation 6

作れましたヾ(´ω`=´ω`)ノ

Animation 7

口の線通りに頂点を動かしてやれば意外とすんなり出来るものなんですね(^ν^)

まだ口の中を調整していませんので、このあと作っていきます∠(`・ω・´)

 

いい加減Live2Dで立ち絵を作りたい:03

Live2Dで立ち絵を作りたい:02


 

さて、とりあえず前回までにPSDインポートとテクスチャの再配置、クリッピングの設定が終わりました(仮)
今回はその後に行った、描画順についてと表示グループについてです。

描画順に関してですが、PSDインポートを行うと全てのパーツが描画順500で読み込まれるようです。
レイヤー校正順になっているので全て500でも現時点では問題ありませんが、順番を変更したりフォルダで整理するとパーツの順番が変わり大惨事になります。
そこで以下のパーツ全てを0~1000の間で数値を調整してきましょう。(数字が大きい方が手前に表示される)

ScreenShot00490

編集ウィンドウの中の描画順数値を直接変更したり、縦に長く伸びる定規のような描画順編集バーにて変えられます。
個人的には編集バーを使用する方が楽でしたね。
そんな感じで後ろ髪は後ろへ。前髪は前へ移動させたりしました。

 

表示グループについてですが、これは言わば表示非表示の状態を記録できます。
夏服や冬服を切り替える際に、1つ1つ表示非表示を選択していたのでは手間ですし、予め登録しておきたいと思いました。

公式サイトを見てみましょう。

ScreenShot00491

>表示グループを設定できます。詳しくはこちらのページをご覧ください。

(´・ω・`)

(´・ω・`) …

CIMG0696 どちら!?

 

ということで実際に試してみることに。

Animation 0

出来ない…(^ν^)

とTwitterで愚痴ったりしてたら教えていただきました!

なん…だと…Σ(´∀`;)
ということでいざ実践。

Animation 1

デキタ━━━━ヽ(゚∀゚ )ノ━━━━!!!!!!

教訓:表示グループは表示単位で考えよう。

まかかびさん、いつもありがとうございます(´;ω;`)ブワッ

 

そしてよくよく後から見てみると、公式マニュアルに表示グループについてもうちょっと載ってましたね(´・ω・`)

ScreenShot00492

いい加減Live2Dで立ち絵を作りたい:02

Live2Dで立ち絵を作りたい:01


 

さて、前回で元絵を準備し、PSDインポートを使いLive2Dへ読み込み、テクスチャの再配置を行ったところです。

読み込んだ画像を見てみるとこのような形です。
ScreenShot00475
今回Live2Dは2.1βです。新たに実装されたクリッピングを使うべく、ニーソはクリッピング前提の作りにしてみました!
ScreenShot00475
↑ニーソはこのような感じ。
補正色を大雑把に配置し、乗算とクリッピングを組み合わせて行きます。

 

さて、クリッピング自体は編集ウィンドウのクリップIDにクリップ先IDを設定するだけです。
クリッピング機能とはなんぞや?という人は公式サイトの以下の部分を見てみると良いかと思います。

ScreenShot00493

パーツパレットについて:http://sites.cybernoids.jp/cubism2/modeler/basic/edit-pallet

このように、はみ出し防止が出来る強力な機能です。
また、コンマ区切りで複数指定することも出来ます。

(´・ω・`) …

コンマ区切りで複数指定することも出来ます!!

 

さて、とりあえず使い方もわかったので実際に指定してみました。

ScreenShot00476

なんじゃこりゃ━━(;゚Д゚)━━!!
何で肌が薄くなっとるんじゃ?
ウワァァ—–。゚(゚´Д`゚)゚。—–ン!!!!

という自体が発生しました。

バグなのか仕様なのかはわかりませんが、どうやらPhotoshopやCLIP STUDIO PAINTなどのクリッピングマスクとは挙動が違うようです(‘、3_ヽ)_

ScreenShot00480

ということで半日程あっちゃこっちゃ扱ってましたがいまいち半透明の処理を上手く出来ず…
Twitterで愚痴っていた所、

!!!!(゚д゚)!!!!

はい。この時私はクリップIDを複数指定できることを知りませんでした。

そこでニーソ余生用のパーツを大きい物に統合し、クリップIDを指定してみます。

ScreenShot00494

 

ScreenShot00481

デキタ━━━━ヽ(゚∀゚ )ノ━━━━!!!!!!

教訓。クリップIDは複数指定できる(´・ω・`)

まかかびさん教えて頂きありがとうございます。
教えてもらわなかったらあと3日は悩んでいた自信がありますm(_ _)m
ちゃんとマニュアルは読まないとダメですね(;´∀`)

 

クリッピング昨日と乗算機能を組み合わせる事による負荷は…よくわからないので今は考えないで置くことにします∠(`・ω・´)

いい加減Live2Dで立ち絵を作りたい:01

そんなわけで以前まで作っていたLive2D立ち絵が色々と修正箇所が増え、最初から作りなおしたほうが早い程になってたので、

最初から作り直したいと思います
∠(`・ω・´)

ついでにメイキング的な感じでブログを更新できたらいいですね(願望)

ScreenShot00474

って事でほぼ一から書き直した元イラストです。
既にLive2D用に分割済みです。
ちなみに背景のグレーは4096pixelの正方形です。
後ろ髪など長いパーツがはみ出さないように目安として置いてました。

服などは流用出来たので使っていますが、分割方法などが以前に比べてだいぶ変わりましたね。
まぁその辺はおいおい(ノ´∀`*)

さて、とりあえず現時点でLive2Dに持っていけるまでの状況です。
とりあえずPSDインポート機能を使い読み込み、テクスチャの再配置Cを行います。ScreenShot00488 ScreenShot00487

拡大率100%で、4096テクスチャ2枚でギリギリ収まりました⊂(^ω^)⊃ セフセフ!!
ポリゴンの割り当てについては随時作りなおす予定なのでとりあえずデフォルトのままです(。╹ω╹)
ただ以前のバージョンでは4096テクスチャを使うとLive2DViewerでエラーが出た事があったので一抹の不安…

現時点では夏と冬の制服姿を考えていますが、今後差分を増やす必要があればPSDインポートを再度使用して追加してみたいですね(。╹ω╹)

そんなこんなで進捗をちょくちょく上げれたらいいなと思ってますん(‘、3_ヽ)_

Live2D用の正面絵を作る際に役に立つクリスタの機能

Live2Dは魅力的な機能が満載です。しかし、Live2Dの最初の難所は、元絵を準備するところです。
そんなLive2D用の「正面向きの絵」を描く場合に便利な方法をご紹介!

ペイントソフトは「CLIP STUDIO PAINT」です。ProでもEXでも大丈夫なはず。

対称定規

CLIP STUDIO PAINTには対称定規という機能があります。
これは片方を描けば反対側にも反映される機能です。

ScreenShot00437-2

何はともあれ、使ったこと無い方は一度使ってみるとすぐ分かります。

Animation 27

ね、簡単でしょ?

Live2Dにて正面の絵を動かそうと思った場合、左右対称のパーツが非常に多くなりますので、この機能を使って描き、その後片方を削除、Live2Dで再度左右対称処理を行うと製作が捗ります。

描けない場合の多くは、「特殊定規にスナップ」がされていないのが原因です。
表示メニューの中に「特殊定規にスナップ」という項目があるので✔チェックが入っているか確認しましょう。
ScreenShot00446

Live2D用に描く場合のワンポイント

真ん中に定規を引く

CLIP STUDIO PAINTでは定規をキャンバスの真ん中に作る方法がありません。
(私が知らないだけだったらこっそり教えて下さいm(_ _)m)
そこで一手間かかりますが、簡単に真ん中を割り出す方法がこちらです。

  1. 何色でも良いのでキャンバス全体を塗りつぶします。
  2. 次に自由変形ツール(Ctrl+T)を押します。
  3. 元の画像の比率を維持の☑チェックが入っていたら外します
  4. 拡大率の横を50を指定し、半分の大きさにしEnterで確定します。
  5. レイヤー移動ツールを使って左(もしくは右)端に移動させます。
    (この時Shiftを押しながら移動させ、細かい調整は左右の矢印キーを使うと上手く行きます)
  6. キャンバスをできるだけ拡大します(虫眼鏡ツール or Ctrl+SPACE)
  7. 左右対称定規を選択し、境界の所をクリックします。
  8. 消去ツールを使って、一度レイヤー内を全消しします。
Animation 28

これでキャンバスの真ん中に定規を引くことが出来ます!

定規の影響範囲

左右対称定規のデフォルトの設定では設定したレイヤーにのみ作用します。
これではレイヤーをいくつも使うとき毎回同じ場所に定規を引かなくてはならないため非常に煩わしいです。

それを解決する方法が定規の表示についての機能です。

デフォルトでは以下のようになっています。
ScreenShot00439

右上にある定規アイコンをクリックします。
以下のように設定項目が出てきます。
ScreenShot00440

例えば すべてのレイヤーで表示 をクリックして☑チェックを入れてみましょう。
ScreenShot00438

若干レイヤー名の横のアイコンが変化しました。
定規は表示されている状態で効果を発揮しますので、一つのレイヤーに定規を設定し「全てのレイヤーで表示」を選択した場合他のレイヤーも定規の影響を受けます。

Animation 29

オススメの使い方その1

フォルダに定規を設定する方法です。

ScreenShot00441

定規のアイコンはドラッグアンドドロップで移動できます。
簡単なのは先の方法で真ん中に定規を設定し、その後フォルダへ移します。

Animation 30

フォルダへ設定するときは「編集対象の時のみ表示」設定する事をおすすめします。
表示対象とは、フォルダの中のことです。「同一フォルダ」とはその階層の事なので意味としては違ってきます。
これを行うことで、定規の線邪魔だな…と描いている途中で思った場合に、フォルダの外のレイヤーを選択することで定規が非表示になります。
途中で全体を確認したい場合等に地味に使えます。

オススメの使い方その2

定規用のレイヤーを作っておきます。

ScreenShot00445

レイヤー名を分かりやすく「定規」にしました。
対称定規の設定は「全てのレイヤーで表示」です。
サムネイルを分かりやすく黒で塗りつぶし、不透明度0%で完全に透明にします。
定規を含むレイヤーを間違えて動かさないようにレイヤーをロックします。

どこかしらにこのレイヤーを保持しつつ、Live2D用にいつも通り絵を描いていきます。


これで新規に何枚レイヤーを作ったとしても、全てのレイヤーで左右対称を行うことが出来ます。

左右対称定規を使いたくない場合

便利ですが全てが左右対称とは限りません。
一時的に左右対称を行いたくない場合は以下の方法があります。

オススメ2では、レイヤーを非表示にする事で左右対称されません。
これでも良いのですが、もう一つ、特殊定規にスナップを切る方法もあります。

ScreenShot00446

表示メニューの中の「特殊定規にスナップ」の✔チェックを外すか、
右下にある3つのアイコン(CLIPホームページの左横)の真ん中が「特殊定規にスナップ」アイコンで左右対称をさせなく出来ます。

ScreenShot00447

ScreenShot00448 ◀ 特殊定規にスナップアイコン

オススメ1ではこの方法で、オススメ2ではこの方法か先のレイヤー非表示によって使い分けることが可能です。

最後に

この左右対称定規、何故かPhotoshopやSAIでは無いようです。非常に便利な機能なので他のソフトでも使えるようになると良いですね(・∀・)

完全に左右対称の絵と言うのは中々描く機会がありませんが、Live2Dのような特殊な元絵を描く場合にこういった地味な機能が非常に重宝します。
これに気づく前は、毎回パーツを反転コピーして元絵を完成していましたorz
私と同じ轍を踏むことのないよう役に立てば幸いです(‘、3_ヽ)_

Live2Dでポリゴン再構築する際の注意点

ようやく最近Live2Dを扱う余裕が出てきたので使い方を思い出しながら製作を再開中であります!
P_20150613_124212 <だいぶ間が開いたにゃ…

と、その過程でちょっと気になった事があったので備忘録的自分用まとめです。

バージョン: Live2D 2.1 public beta1

現象

下絵を見ながら配置するのが嫌いな私は、PSDデータをインポートした後にポリゴンを再構築するやり方を行っています。
その場合、自動で設定された頂点の大部分を一度削除して打ち直すのですが、
頂点が1つ以下にした後に再構築するとバグるようです。

検証

実際にまぶたパーツで行ってみます。
ScreenShot00337

頂点を1つ以下に減らした後に再構築した場合

ポリゴン再構築前
ScreenShot00338

頂点を1つ残し他を削除
ScreenShot00339

再構築(検証用でテキトーに)
ScreenShot00340

 

結果:表示がおかしくなる
ScreenShot00341

2点以上ポリゴンを残して再構築した場合

ポリゴン再構築前
ScreenShot00338

頂点を2つ残す
ScreenShot00342

再構築
ScreenShot00343

結果:問題なし

ScreenShot00344

現状

これがバグなのか、仕様なのか…
私の環境固有の症状なのかはわかりませんが、
同様の症状に悩んでいる方がいましたら2点以上残して再構築してみると良いようです。

それよりも1点1点クリックして消さねければならない方が非常に手間ですね。
再構築を行うために、頂点全消しボタン実装してくれないですかね。
なげなわツールからの削除機能でもいいですね。
2013-08-02 19.02.47 チラッチラッ

おまけ

テクスチャの再配置Cで時折、赤枠がズレることがあるようです。
Animation 6 ◀クリックでGIFのアニメ再生
一度選択を解除し再選択すれば元に戻るようなので特に支障はないようです。
こちらは私の環境では発生が稀で、バグ出現条件がよくわかりませんでした。
l1360

Adobe MuseでLive2Dを表示しつついい感じのホームページが作りたい[2]

[前編はこちら]

しんかい鎮守府3_028

備忘録的な手順(後編)

前回までにSimpe.htmlの中身をMuse上で再現出来ました。
そこで今回はSimpe.jsを確認しましょう。

Simple.js の中身を確認

全283行…

sappariwakaran

そんな訳で今は下手に変更しない方が良いだろうとの結論ありきの議論の結果、とりあえず置いておくことに。

Muse上にJavaScriptファイルを読み込ませる

SimpleサンプルのSimple.htmlを確認すると、以下のように二種類のスクリプトが使われている。

        <!-- Live2D Library -->
        <script src="../../lib/live2d.min.js"></script>
        
        <!-- User's Script -->
        <script src="src/Simple.js"></script>

そこで、ひとまずはMuse上で[Simple.js]と[live2d.min.js]を読めるようにする方法を考える。
が、MuseはWebプログラム分からなくてもサイトが作れるのが売りのソフト。
逆に言えばプログラムに関する機能が無い!

CIMG0696<マジカ

なんとか方法はないものか…とググるもののMuseの情報はあまりに多くなく見つけることができなかった。
仕方なくMuse内の機能を色々試していた所、[アップロードするファイルを追加]という機能を発見!
ScreenShot00039

これを使えばLive2D用のJavaScriptファイルをMuse側で認識できるようになるのではないか。
ということで早速ファイルを追加してみました。

ScreenShot00040

追加するとアセット内にJavaScriptファイルが追加されます。
この[アップロードするファイルを追加]機能はサーバー上にアップロードする際はどのようになっているのかを確認します。
Muse右上▶パブリッシュ▶HTML形式で書き出し を行います。
ScreenShot00046

ScreenShot00045

書き出しが完了したら、ドキュメントのMuseExportフォルダにWebサイト一式のデータが出力されました。

ScreenShot00044

中を確認するとLive2D用のJavaScriptファイルはscriptsフォルダの中に…ありません!!

nandato

[アップロードするファイルを追加]したファイルはファイルの種類に関係なくassetsフォルダに格納されるようです。

ScreenShot00043

ともかくアップロード一式に入っているのでMuse側からも認識出来る状態っぽいです。


 

l8510
l1498

 /assets/Simple.js
という階層になるということは、前回にMuseに埋め込んだタグも修正が必要ということになりますね。

<!-- Live2D Library -->
<script src="../../lib/live2d.min.js"></script>

<!-- User's Script -->
<script src="src/Simple.js"></script>

上記を以下のように修正します。

<!-- Live2D Library -->
<script src="assets/live2d.min.js"></script>

<!-- User's Script -->
<script src="assets/Simple.js"></script>

ScreenShot00047
これでMuse内のHTML挿入機能からJavaScriptが読み込めるようです。

Live2Dファイルの読み込み

Live2Dファイルである .moc と テクスチャ.png をMuseに読み込ませます。
方法は先ほどのJavaScriptファイルと一緒で、[アップロードするファイルを追加]から行います。

ScreenShot00048-2

ここで一つ問題が…
Live2Dモデルをmocファイルに出力するとテクスチャはフォルダの中にまとめられています。
しかしMuseアセットではどうもフォルダを作ることが出来ない(もしくは私が知らない)為に、assetsフォルダの中にそのまま配置されます。

ScreenShot00049

ファイルパスの修正

Simple.jsファイル 46行目
にLive2Dモデル設定項目があります。

    /*
    * Live2D モデル設定。
    */
    this.modelDef = {
        
        "type":"Live2D Model Setting",
        "name":"haru",
        "model":"assets/haru/haru.moc",
        "textures":[
            "assets/haru/haru.1024/texture_00.png",
            "assets/haru/haru.1024/texture_01.png",
            "assets/haru/haru.1024/texture_02.png"
        ]
    };

ここのファイルパスをMuse用に修正する必要があります。
まずは先ほどのテクスチャ用フォルダが作れない問題ですが、ここのファイルパスで直接テクスチャを指定することで問題は解消されました。

        "textures":[
            "assets/texture_00.png",
            "assets/texture_01.png",
            "assets/texture_02.png"
        ]

同様にLive2Dモデルファイルのパスも修正しましょう。

        "model":"assets/haru.moc",

ファイルパスの修正が必要な箇所は今のところここだけのようです。

l8828

[アップロードするファイルを追加]の注意点

仕様なのかバグなのか無知なだけかはわかりませんが、アセット内は小文字英数字しか使えないらしく、HTML形式で書き出しを行うとSimple.jsなどのファイル名がsimple.jsと自動で修正されていました。
元のファイルはそのままなので、書き出しを行う歳に修正されているようです。

ScreenShot00050 ScreenShot00051

問題あるか私はわかりませんでしたが何かしらの不具合が出るのも嫌なので、私は元ファイルを小文字英数字に変更し追加しなおしました。
関連してMuse内のHTML挿入機能にて書いたファイル名も忘れないうちに修正しておきました。

<!-- Live2D Library -->
<script src="assets/live2d.min.js"></script>

<!-- User's Script -->
<script src="assets/simple.js"></script>

プレビュー

Muse右上のプレビューを押してみます。

ScreenShot00053 l5641

ということで無事に表示出来ました。

今回作ったデータは以下のURLにアップロードしておきます。
もし不具合やら不備やらありましたら教えてください。

http://test.hatyati.jp/muse-live2d/

20140219_160904_Android-e1410817356756-975x1024 <よろしくにゃ

最後に

なにわともあれ、Adobe Museを使用してLive2Dを表示しつつWebサイトを構築することが出来そうです。
まだまだ初歩的なレベルですが、同じような事を考えている人の一助になればいいなと思います。

では最後に一言。

Live2DもMuseも何でこんなに情報が少ないんだ!!

l34142

 

次回は自分の作ったLive2Dモデルに差し替えを行いたいと思います。

Adobe MuseでLive2Dを表示しつついい感じのホームページが作りたい[1]

という願望…
しんかい鎮守府3_028

前知識

タイトルの様な願望あっても、残念ながら私の知識は10年位前の中学生の時に近くの図書館でHTML4辞典を借りてきて、必死にメモ帳にタグ打ちした程度で止まっている。
「JavaScript? あ、うん、わかるわかる。えーっと…うん…Javaなスクリプトだよね_(:3 」∠)_」 程度のものでまるで知らない(´・ω・`)

そんな私でもWebサイトが作れるツールがあるらしい!
それがAdobe Muse!
l21555

先に言っておくと、別にホームページビルダーでもBiNDでもフリーソフトでも良かったのだろうが、同人誌作ったりする関係上Adobe Creative Cloudに入り月々5千円きちんと上納している。
せっかく上納金収めているのだから使わない方が損だよね! でもDreamweaver扱えるほどWebプログラミング分からないし…
そんな訳でAdobe Museを使ってみることにしたわけですよ奥さん!
CIMG0927 <ドヤァ

と言ってもMuse自体も今回初めて触るので、ぶっちゃけよくわからないのだ
iconaa_0x0_7d1261356fd21e989b8a9b0d57278e7c<やだ、私の知識少なすぎ…?

目標

とりあえずまずはLive2DがMuseで表示できるのかが何よりも問題だろう。
意気込んで始めたはいいけれど、まったく対応していなければ意味が無い(´・ω・`)

Live2DをWebサイトで公開しようと思った場合、現在3つほどの手段がある。

  • GIFアニメに書き出して貼り付ける
  • Flashで作成してサイトに埋め込む
  • WebGLを用いて表示する

GIFアニメは既に行ったことがある。以下参考画像。

Flashも考えたが、Flashは今後無くなりそうな勢いなので今から勉強する気が起きなかった。
そこで今回はWebGLにて表示を目指すことに。また無謀なことを

試行錯誤の結果

とりあえずLive2D公式が公開しているWebGLSDK内のサンプルをAdobe Museにて表示させる事に成功しました!

ScreenShot00013

yaruo_kita

備忘録的な手順(前編)

さて結果を先に見せたところで手順を復習がてら載せていきます。

下準備

まずはLive2DのWebGL関連のSDKをダウンロードします。
こちらは個人なら無料で使用できますが、[Live2D Cubism SDK 試用申込み] を行わなければなりません。

ScreenShot00018

 

ScreenShot00019 ▶ ScreenShot00020


申請するとメールにてURLが送られてきます。
専用ページの左メニューにあるSDK 2.0内のWebGLをクリックします。

ScreenShot00022
 ダウンロードページに行きます。
2015/05/11現在 Ver2.0.02_2が最新っぽいのでこれをダウンロードしました。

ScreenShot00024

ZIPファイルをダウンロード後、解凍すると以下の様なファイルが出てきます。

ScreenShot00025

シンプルなサンプル

Sampleフォルダを見てみると現在3つのサンプルが内包されているようです。
今回はSimpleサンプルをMuseで表示させるのを目標にすることにしました。

ひとまずsimple.htmlの中身を見てみると以下のようになっている。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            <title>Live2D Simple</title>
        </meta>
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=4.0">
        </meta>
    

    </head>

    <body onload="Simple()">
        <canvas id="glcanvas" width = "512px" height="512px" style="border:dashed 1px #CCC"></canvas>

        <div id="myconsole" style="color:#BBB">---- Log ----</div>
        
        <!-- Live2D Library -->
        <script src="../../lib/live2d.min.js"></script>
        
        <!-- User's Script -->
        <script src="src/Simple.js"></script>
    </body>
</html>
l24359

大丈夫、このくらいなら10年前の知識とさほど変わってないはずだ。

とりあえず関係ありそうな項目は14~24行の中身のようです。

Muse起動

Museを起動します。
まだMuseについてもあまりよくわかっていませんが、とりあえずわからない箇所はデフォルトのまま進めることにして、以下の新規作成[OK] ▶ ホーム[A-マスター]ページを開きます。

ScreenShot00027ScreenShot00028

以下のようにまっさらなページが表示されます。

ScreenShot00029 u-nn iconaa_0x0_ff1dfc29b66dbc0eba6e4b942c027c76 piko

あーだこーだ試行錯誤は省くとして、オブジェクト▶[HTMLの挿入]にて行けるっぽい
ScreenShot00030

HTMLの挿入に以下をこぴぺしようと思いつきます。

    <body onload="Simple()">
        <canvas id="glcanvas" width = "512px" height="512px" style="border:dashed 1px #CCC"></canvas>
 
        <div id="myconsole" style="color:#BBB">---- Log ----</div>
        
        <!-- Live2D Library -->
        <script src="../../lib/live2d.min.js"></script>
        
        <!-- User's Script -->
        <script src="src/Simple.js"></script>
    </body>

しかしこの時、はちゃちに電流走る。

あくまでHTML挿入機能。
BodyタグなんてMuseが自動生成するに違いない。
<body></body>タグが2セットできるのではないか!?
詳しくないけどなんか<html>と<head>と<body>は1セットずつの方がいいような気がする…
gorone<「ブログ読者の中にWebプログラミングに詳しい方はいらっしゃいませんか~」

ので、ここでは15~23行のみを挿入する事に。
ScreenShot00031

ScreenShot00032

ここでプレビューを押してみると怪しげな枠線が表示された!!

rizumu-syobo-nキタコレ♪

しかし問題はBodyタグ内の要素…

onload="Simple()"

これだ(´・ω・`)

Simple()は呼び出す先の関数だろう。
ではonloadは呼び出す機能なのだろう。

とググりながら理解しつつ、
Adobe MuseではどうやらBodyタグ内で要素を付けられないということも理解
nandato
※方法ご存知の方いたら教えてください(´;ω;`)

なので代替方法を模索した結果(ググッた結果)、window.onload という類似機能があるとのこと。
こちらは<head>内に記載するような感じの事を解説サイトに書いてあるので、
「ページ▶ページプロパティ▶メタデータ▶<head>に挿入するHTML:」
にスクリプトを挿入した。
ScreenShot00033ScreenShot00035

 

<script type="text/javascript">
    window.onload = function(){ Simple() }
</script>

これでsimple.htmlファイルの内容をMuseで再現できるようです。

次回に続く

思ったよりも長くなってしまったので一度この辺りで区切り、続きは後から執筆したいと思います。

次回は[Simple.js]のJavaScriptファイルを若干いじりつつ、Live2Dモデルを表示するために行ったMuse側の操作について書きたいです(願望)

CIMG0105 <次回もよろしくにゃ

Live2Dで立ち座りパラメータを実装したい

P_20150313_161152

 

 

ここ2週間ほど行方不明だったマクロが帰って来ました(´;ω;`)
お前どこ行ってたんだよ( ;∀;)

 

さて、Live2Dの方ですが、World of Warships やってて進んでいません。

Live2Dは足の動きも苦手とするパーツの一つな気がします。
苦手というより難易度が高いといったほうが良いかもしれませんね。

現に今私の作っているモデルでも違和感が拭えません。
mio

今回も腕と同様に3つのパーツで作ってみました。

スクリーンショット 2015-03-15 02.53.40

足幅を広げる、狭める等の横の動きは非常に楽なのですが、足が手前に膝が折れ、アウトラインが大きく変化する動きはやはりLive2Dでは難しですね。
そこで膝のパーツを別け、足下とももの変形から生じる破綻を膝で覆い隠そうというしてみました。

スクリーンショット 2015-03-15 02.54.36 スクリーンショット 2015-03-15 02.54.33 スクリーンショット 2015-03-15 02.54.28

l21555なかなかいい感じに出来たのでた無いだろうか!

特にスカートの折れ目具合がお気に入りですね。
スクリーンショット 2015-03-15 02.59.43

 

逆に上着の具合がちょっと微妙感が拭えない…
まぁソレよりも問題点があるんですけどね。

現在立ち座り、上下の動きで大きな問題は無いのですが、体の回転Xを加えると作りこみの甘さから破綻します。

スクリーンショット 2015-03-15 03.01.07

多少のほころびは修正出来るでしょうが…
問題は膝が動いていないということです。体を横にずらしたのに、足は不動…これではおかしい…
かと言って、膝パーツで隠しているだけなので、横を向けると粗が見えてしまう…
u-nn

なので現在進行が止まっている状態です。
大方WoWsのせいだけど。

もうちょっと色々と考えて作らないと行けませんね(;´∀`)
なにわともあれ、マクロが無事に帰ってきて良かったですε-(´∀`*)ホッ

P_20150313_160754_LL<?

Live2Dで回転デフォーマを反転複製する場合は要注意?

前回、左腕を作りました(`・ω・´)

今回は左腕を複製し、反転機能を用い右腕を作りました(。╹ω╹)b

結果から書くと上手く出来ましたヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノ
結果は以下のとおりです。

スクリーンショット 2015-03-10 21.17.36

と、上手く行ったから良いのですが途中で躓いた箇所があったので忘備録代わりに載せておきます。

Live2Dの反転機能については公式マニュアルを一読してもらうとして… ▶公式マニュアル 05.反転機能
まずは公式マニュアル通りに反転機能を使うと…

スクリーンショット 2015-03-10 00.53.33

お わ か り い た だ け た だ ろ う か

若干腕の角度が違いますよね(´・ω・`)
次はより分かりやすいように一部デフォーマのみ表示させてみましょう。

スクリーンショット 2015-03-10 00.36.07

回転デフォーマの角度が反転していません!

いやいや、これはきっと何か私の操作が悪かったのだ…もしくはモデルの構造がおかしいのだ…
そこで公式サンプルのモデルを使い、再度マニュアルとにらめっこしながら作ってみます。

サンプルの右腕を削除。
左腕のデフォーマを表示させた状態。腕に割り振られたデフォーマは、左腕の回転x
―左腕の回転y
――左腕の回転1
―――左腕の回転2

このようになっています。

01スクリーンショット 2015-03-10 19.28.47
腕の最上位デフォーマは回転xです。これを選択している状態です。 02スクリーンショット 2015-03-10 19.28.50
「オブジェクト▶反転」 を選択。(もしくは右クリック▶反転) 03スクリーンショット 2015-03-10 19.29.17
「水平方向に反転」に☑チェックが入っている事を確認し決定する。 04スクリーンショット 2015-03-10 19.29.36
 デデドン! 05スクリーンショット 2015-03-10 19.29.48
nandato

 

はい。公式サンプルでも上手く行きませんでした。

試しに腕を動かしてみましょう。

スクリーンショット 2015-03-10 19.30.15

明らかに腕の角度が違ってきていますね。
これはモデルの構造云々よりも私の操作手順が間違えているのでしょうか(´・ω・`)?
と考えてみたもののわかりません(´;ω;`)


 

各デフォーマを見てみます。

全体像がこちら
スクリーンショット 2015-03-10 22.14.55

腕の回転x y がこちら
スクリーンショット 2015-03-10 22.14.55-2

腕の回転1 2 がこちら
スクリーンショット 2015-03-10 22.14.55-3

tibiyaruo-hatena

X,Yでは反転していないけれど、1,2は上手く反転しているっぽい…?

これは何故なのか…

iconaa_0x0_ff1dfc29b66dbc0eba6e4b942c027c76

そもそも回転デフォーマは反転するパーツでは作るべきではないのか?

との疑問も出たわけですが、
冷静に考えればサンプルのモデルも回転デフォーマを使用していますし、公式マニュアルにも以下のように記載されています。

>位置のみを設定したい時も利用します。


スクリーンショット 2015-03-10 19.36.23

 

引用元

 

むしろ腕の位置(X,Y)などで使うことを推奨していますね(;・∀・)

しかし反転機能で回転デフォーマの角度は反転しない…?
もしくは反転する回転デフォーマとしない回転デフォーマがある?

バグや不具合でないなら良いのですが、反転機能でうまい具合に角度も反転出来るようにする方法はないものでしょうかね(´・ω・`)


 

さて、今回の解決方法ですが、「回転デフォーマだから上手くいかない」と言うことですので、親デフォーマに曲面デフォーマを作り、その曲面デフォーマを反転することでうまくいきました。

簡単にスクリーンショットを載せて解説してみましょう。

まず曲面デフォーマを作ります。これは後で削除するのでどこでも良いですが、
今回は基準面の直下に曲面デフォーマを作りました。
 01スクリーンショット 2015-03-10 23.07.46
現在の階層はこのようになっています。基準面の直下にデフォーマが入っている状態です。

今回はコアパーツの曲面という名前に成ってます(デフォルト)

 02スクリーンショット 2015-03-10 23.08.05
続いて右腕に反転したい左腕デフォーマを先ほど作った曲面デフォーマの子デフォーマに設定します。設定するとこのように階層が反映されます。  03スクリーンショット 2015-03-10 23.08.46
この状態で曲面デフォーマを反転することで、子デフォーマである回転デフォーマの角度も水平方向に反転しています。  04スクリーンショット 2015-03-10 23.15.23
その後、回転デフォーマを元の階層に戻し、曲面デフォーマは不要になるので削除します。その後、右腕になったデフォーマやパーツの名称を右腕に変えていきます。  05スクリーンショット 2015-03-10 23.16.08

これと同じことを私の作っているモデルで用いる事で上手く反転複製することが出来ました。

スクリーンショット 2015-03-10 01.22.58

 


つ、つかれた…_(:3 」∠)_
この考えに至るまでどれだけ試行錯誤したことか…もう、反転した後に手動で角度を全部調整していこうかと思いかけていました( ゚∀゚)・∵. グハッ!!

なにわともあれ、うまい具合に反転出来たのでひとつの山場を超えた感じですかね( ´ー`)フゥー...

これはなんで反転機能単体で上手く行かないんでしょうね?
もっとスマートないい方法を知っている方いたら教えてください_ノ乙(、ン、)_