タグ: 備忘録

Live2Dの使用メモリについて

教えてもらったので自分用備忘録。


 

2016/4/4にLive2D公式マニュアルが更新されて私ははじめて知ったのですが、
Live2Dは64bitでもデフォルト設定では4GBしか使っていません。

Live2Dの使用できるメモリ上限を変更する方法

C:\Program Files (x86)\Live2D Cubism 2.1\CubismModeler2_64.bat
※ 標準のインストール先の場合
※ アニメータの場合は CubismAnimator2_64.bat

ファイルを開くと、以下の記載があります。

rem *********************************************************************
rem **  最大メモリサイズ(MB)を設定して下さい。
rem **  大きく設定しすぎると起動できない場合があります。
rem **  その場合、搭載メモリ容量の1/3を目安に設定して下さい。
rem **  Animatorでは動画出力にQuickTimeを使用するため32bit版Javaが必要です。
rem **  32bit版Javaの場合は最大1000MBとなります。
rem **  64bit版Javaの場合は搭載メモリによって異なります。
rem *********************************************************************
set MAX_MEMORY=4000

この MAX_MEMORY=4000 (MB)は 4GBを意味します。

お使いの環境が16GBの場合は、最大で14GB程度を推奨します。

set MAX_MEMORY=14000

ここで指定するサイズは、必要になった場合に最大で確保されるメモリサイズであり、
大きな値を指定しても、起動直後から14GBを確保するようなことはありません。

但し環境によっては大きな値を指定し過ぎるとアプリケーションを起動できない場合があります。

 引用元URL

特別なテキストエディタは必要なく、Windows標準のメモ帳で問題ありません。

16GBでは最大14GB推奨とのことです。
32GBだと最大28GBほどでしょうか。
8GBではOSや他のソフトウェアのことを考慮すると、4~6GBくらいが良いでしょう。

私は64GB積んでいるのでとりあえず24GBほど割り当ててみました。
現在アプリケーションが起動できない等の問題は特に起こっていません。

メモリを多めに搭載されている方はぜひ一度変更してみては如何でしょうか。
※バックアップは忘れずに。

使用中のメモリを整理する

それでも、4GBの環境の人や、32bitの環境の人も居るでしょう。
使用メモリがカツカツになると動作が不安定になったりすることがあります。

そういった環境では使用しているメモリを一度クリアしてあげると良いでしょう。
Live2Dには「ガベージコレクション」(不要なメモリを整理する機能)があります。
PhotoshopやCLIP STUDIO PAINTにある「メモリをクリア」機能と似た機能ですね。

画面右下に微かにある数値。これがメモリの使用量/確保量です。

ScreenShot01349

この部分をダブルクリックすることでメモリのクリアが実行されます。
Live2DMemoryClear

これによって使用しているメモリを一度綺麗に整理できるようです。
処理中は赤い縦縞が動きます。
これが消えると処理が完了のよです。

 

最後に

お恥ずかしながら、生放送で教えてもらうまで全く存在に気付きませんでした。

ペイントソフトにある「メモリのクリア」は、メニューバーの中にあります。
そのような項目がLive2Dにはなかったので、無いものだと思い込んでいましたね。

[colwrap] [col2]ScreenShot01350[/col2] [col2]ScreenShot01351[/col2] [/colwrap]

64bitで4GBしか使っていないと言うのも全く考えたこともなかったです。
これも思い込みです。思い込みはダメですね。思い込みが激しい所があるので気をつけないと…。

教えてもらってマニュアルを今一度きちんと見てみると、画面レイアウトのところでちゃんと触れられていました。
http://sites.cybernoids.jp/cubism2/modeler/basic/name

ということで、私と同じように思い込みの激しい人や、マニュアルをななめ読みして読んだ気になって見逃している人向けの備忘録でした。
同じような人が一人でも居たら幸いです。

Live2D「形状をコピー」機能に描画順を含めない方法

Live2DのPro限定機能に「形状をコピー」というものがあります。

[aside type=”normal”]

Q.「形状をコピー」とは?

通常の「コピー」では、描画オブジェクトやデフォーマそのものが複製されます。
「形状をコピー」では、描画オブジェクトやデフォーマの“形”をコピーする機能です。
▶公式マニュアル

[/aside]

描画オブジェクトの「形状をコピー」を行うと、オブジェクトの形状と描画順の双方が処理されます。
大変便利なのですが、オブジェクトの形状のみコピーしたい場合に描画順の数値も変化すると何かと不便な場合があります。

「形状をコピー」を使うシーンで以下のような例を見てみましょう。

横髪オブジェクトに顔の角度Xパラメータを割り当て設定します。
その後髪揺れのパラメータにもパラメータを設定して動きを付けました。


[colwrap] [col2]

角度X正面
ScreenShot01200[/col2] [col2]

角度Xの左パラメータ時に描画順を変更している
ScreenShot01201
[/col2] [/colwrap]


しかしこのままでは、角度Xの両端のパラメータにも髪揺れの動きを再度付けなければなりません。

こういうときに形状をコピーを使えば、一度付けた形をコピーし、再度付け直す手間を省けます。

さて、ココで問題になるのは、角度Xパラメータで描画順を変更してる点です。
そのまま形状のコピーを行うと、描画順が上書きされてしまいます。

なので描画順を再設定する、あるいは髪揺れの動きを再設定する事で解決しますが、同じことを何度もやるのは面倒です。


[colwrap] [col2]

髪の毛の動きを付ける
ScreenShot01202

[/col2] [col2]

横を向いた場合に髪の毛を形を再設定しなければならない。
形状コピー使用した場合は、描画順を再設定しなければならない。
ScreenShot01203

[/col2] [/colwrap]


この例の場合であれば描画順を何回か再設定すればよいのですが、
モデルの作り込み具合によっては無数の再設定をしなければならない可能性があります。
膨大な単調作業の繰り返しは大きく集中力と気力を削ぐので避けたいところです。

そこで、描画順が上書きされてしまわないように形状のコピー出来ればその手間がかかりません。

描画順を含めない「形状をコピー」方法

形状をコピーの際に、

  • ドラッグ選択
  • 投げ縄選択
  • ソフト選択

などを使い、
ポリゴンを選択した状態で行えば描画順は含まれません。

[colwrap] [col3]


ドラッグ選択

ScreenShot01204

ScreenShot01205

[/col3] [col3]


投げ縄選択

ScreenShot01206

ScreenShot01207

[/col3] [col3]


ソフト選択

ScreenShot01208

ScreenShot01210

[/col3] [/colwrap]

[colwrap] [col2] [/col2] [col2]

[aside type=”warning”]選択する際の注意点

  • 選択するオブジェクト以外をロック
  • Shiftを押しながら選択

上記操作のいずれかを行いましょう。
関係ないポリゴンが選択されてしまいます。

[/aside]

[/col2] [/colwrap]

これにより描画順は含まれません
ポリゴンを全て選択している場合も同様です。

これにより描画順を先に設定した場合でも、
後から「形状をコピー」を用いることに躊躇する必要が無くなります。

「形状をコピー」は非常によく使う機能なので、ちょっとした小技でも積み重なるとだいぶ時間の節約になると思います。
ぜひ活用してみてください!(もっと早く知っておけば…)

補足

逆に描画順のみを選択する方法は現在ありません。
しかし、数値をコピペすることはできますので、そちらは大丈夫でしょう。

またLive2D Ver2.1現在、公式フォーラムにて多くの方が描画順に関しての要望を出しています。
次期Ver3.0にて描画順周りの機能が充実すると良いですね。

Live2D Cubism Editor 3 PRO 無償アップグレード対象者メモ

Live2D 2.1リリースコンテストPRO賞を貰った報告記事にて、クーポンの使用時期が遅くなって対象外になったんじゃないか!? と書いていたのですが、詳細が出たので自分用まとめです。

まずPRO賞で貰ったライセンスがアップグレードの対象になるかどうかですが、Live2Dの中の人であるやっちゃんさんのツイートでは以下の通りのようです。

ScreenShot00908

[引用元URL]

P_20150711_232228 残念、対象外でしたか…

PRO賞受賞者には、100%OFFクーポンが授与され、公式ストアからの購入時にクーポンにて0円で購入できるという形になっています。
なので、”購入”に含まれるかと解釈も出来なくは無かったのですが、流石に今回はダメなようですね。

しかしLive2Dでは過去にコンテスト参加者に20%OFFクーポンの配布も行っていました。
その点については以下のとおりのようです。

ScreenShot00910

[引用元URL]

P_20141220_220323 私が自腹購入した分は対象のようですな

 

簡単にまとめると、
2014/9/02~2015/12/24にPROライセンスを買った個人・インディーズで無償バージョンアップの対象となるのは以下のようです。

  • 【対象】定価(¥140,000)
  • 【対象】20%OFF(¥112,000)
  • 【対象外】PRO賞100%OFF(¥0)

2015/12/25~現在

  • 【対象外】定価(¥140,000)
  • 【対象外】80%OFFキャンペーン(¥28,000)
  • 【対象外】PRO賞100%OFF(¥0)

となるようです。


 

余談ですが、アップグレードの値段はどのくらいになるのでしょうか。
こればかりは今後の公式発表を待たないとなんとも言えないのですが…

 当社では、2014年4月よりCubism Editor FREEをインディークリエイター向けに無償提供してまいりました。一方でインディークリエイターの中には、プロフェッショナル向けのCubism Editor PRO(通常価格14万円+税)を必要とされるユーザーも多く、「個人で買うには高すぎる」という感想を数多くいただいておりました。当社としましては、できるだけ多くの方々にCubism Editor PROを使っていただきたいと考えており、個人や小規模な事業者の方々にとってもお求めやすい価格帯を準備するべき、という結論に至り、数週間の事前通知を経て今回のキャンペーンを開催いたしました。これまでCubism Editor PROのキャンペーンなどは行ってきましたが、今回のようにインディークリエイター向けに新しい価格帯を設けたことはありませんでした。

[引用元URL]

しかし以上のような公式ページでの記載もありますので、個人・インディーズ向けアップグレード料金はそれほど高くないのではないか? と私は思っています。

2月からインディーズ向け新料金¥29,800にて提供が始まりますが、3.0アップグレードが10万円とかになれば「今回の結論は何だったんだww」と思ってしまいますね(ノ∀`)

また、以下の様なやっちゃんさんのツイートもありました。

ScreenShot00912

[引用元URL]

つまり、新規購入価格>アップグレード価格だと思います。(これはほかのソフトでも普通ですがw)
そしてこの新規購入価格の個人・インディーズ向けはLive2D 2.1では2月より¥29,800です。
仮に新規購入価格が上がったとしても、今回の無償対象の¥112,000(20%OFF)を超えることはないでしょう。
少なくとも差額¥82,200以下ではないでしょうか?(あれ?これでも高いな…)

しかしLive2D 2.1で¥29,800であることを考えたら、そのあたりがアップグレード料金としてはちょうどよいのかなといった気もします。
そうなると、私のような20%OFFでの早期購入者はやはり5万くらい損した気分になる気もしますね。

まぁこのあたりの値段の変動は仕方ないと割り切った方が良いですね。
20%OFFで買った私としては、Live2D Cubism Editor 4 PRO でも無償対象にしてくれたら嬉しいな! とは思いました|ョェ・´)チラ


 

それよりも、ライセンス的に「Win×1、MAC×1」はOKで、「Win×2」はNGってのをどうにかして欲しいですね…
SurfaceBookをサブ機として購入したい身としては(ノ∀`)

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_ヽ)_

この髪の毛メイキング動画が気になる

厚塗りの髪の毛の塗り方で非常に参考になりそうなメイキング動画があったのでご紹介!

メイキング動画

ツールはPhotoshopを用いているようです。

私も同じような手法で厚塗りを行いますが、明度と彩度の選び方が段違いですね。
立体感と髪の毛の質感の表現は見習いたいです。
P_20150613_124212 すごいにゃ

スクリーンショット

まずはじめにシルエットを大まかに描いていますね。
すでに私とはやり方が違うのですが、このやり方もなかなか良さそうなので今度取り入れて描いてみたいですね。
ScreenShot00418

その後髪の毛のラフを描いていくようです。
私はここの順序が逆ですね。ラフ線を描いてから下塗りします。
ScreenShot00419

ベースとなる基本の着色ですね。
どうやら先ほどのラフの上にクリッピングマスクを使って色を乗せていますね。
乗算あたりを使っているようですがちょっと字が読めないです(´・ω・`)
ScreenShot00420 ScreenShot00421

その後一度髪の毛のレイヤーを結合し、再度新たにクリッピングマスクを設定したレイヤーを作って、そこで描き込んでいくようです。
頭頂部から描き込んでいくようです。
ScreenShot00422

必要に応じてレイヤーはどんどん結合して行くようですね。そして新たにレイヤーを作ってそちらに描き込むようです。
レイヤーの結合基準は何なんでしょうね?
私は上手く描けたかなと思った時に結合していますね。
ScreenShot00423
 ScreenShot00424

クリッピングマスクを使っていないところもあるようですね。
何かしらの理由があるのか、もしくは必要なかっただけでしょうかね。
少なくともレイヤーが複数増えているということは、何かしらのレイヤーモードを使っているのだと思われます。
ScreenShot00425
  ScreenShot00426

最終的なレイヤー構成はこんな感じで描き終えていますね。
ここからレイヤーを全結合して、最終的な調整を行っています。
ScreenShot00427
ScreenShot00428


なんとなく描く流れに共通点はありましたが、
肝心の色彩や明度の選び方、立体感や質感の出し方は自分で描いて覚えるしか無いですね。
l1501

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

はちゃち的、畳テクスチャの作り方

畳テクスチャが必要になったので、せっかくなので自作してみることに。

ScreenShot00190

案外いい感じに出来たのじゃないかな?
l8828

以下はググりつつ試行錯誤した工程を備忘録代わりにメモです。
注意:講座と違いざっくりとした内容です。

[制作環境] Photoshop CC 2014

畳テクスチャの作り方メモ

手順1

4500pixelくらいのキャンバスを新規作成しました。
(サイズに特に理由はない)

まずはキャンバスを黒く塗りつぶします。

ScreenShot00153

手順2

新規レイヤーを作成し、白いラインを引きます。

ScreenShot00154

線を複製して縞模様にしていきます。

ScreenShot00156

手順3

白線レイヤーに「ぼかし(ガウス)」をかけます。

ScreenShot00171 ScreenShot00172 ScreenShot00173

手順4

新規レイヤーを作成し、グレーで塗りつぶします。

ScreenShot00175

グレー濃度は以下の感じ

ScreenShot00176

手順5

グレーレイヤーに「ノイズを加える」処理を施す。

ScreenShot00177 ScreenShot00178

手順6

ノイズを加えたグレーレイヤーに、「ぼかし(移動)」をかける。

ScreenShot00179 ScreenShot00180

手順7

グレーレイヤーの描画モードを「差の絶対値」にする。

ScreenShot00181

以下実行結果

ScreenShot00182

手順8

レイヤーを全て結合し、「色相・彩度」にて色相補正を行う。

ScreenShot00184

右下の「色彩の統一」に☑チェックを入れ、数値を試行錯誤しながら微調整していく。

ScreenShot00186

OKで確定すると以下の様になる。

ScreenShot00187

これを保存すれば畳テクスチャの完成!

最後に

毎月Adobeに5千円上納しているわけですからPhotoshopも使わないと損だとは思っているんですけれどね…
どうしてもお絵描きのメインソフトがCLIP STUDIO PAINTで出番の無いPhotoshop先生です。

Photoshopは解説出来るほど把握出来ていませんので簡単な説明とスクリーンショットだけでしたが如何だったでしょうか?
個人的には復習兼備忘録としてよかったのでまた何か学んだら残していきたいですね。

CIMG0096

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 <次回もよろしくにゃ

最新液タブの「Cintiq Companion 2」が気になる!

アマからプロまで御用達のワコムの液タブの新製品が発表されました!!

キタ━━━━CIMG0927━━━━!!

2種類発表された液タブの内、個人的に特に気になる製品が「Cintiq Companion 2」です。
CintiqCompanion2-1

スペック

スペック表の中で個人的に気になるところを抜粋してみますた( ´∀`)b

モデル名 Value Standard Premium Enhanced
OS Windows 8.1 Windows 8.1 Windows 8.1 Pro 未定
CPU 第4世代 Core i3-4005U/1.7GHz 第4世代 Core i5-4258U/2.9 GHz 第4世代 Core i7-4558U/3.2GHz 未定
グラフィック・
アクセラレータ
インテル® HD graphics 4400 インテル® IRIS™ graphics 5100 インテル® IRIS™ graphics 5100 未定
メインメモリ(RAM) 4GB 8GB 8GB 未定
フラッシュメモリ SSD 64GB SSD 128GB SSD 256GB SSD 512GB
液晶パネル 表示サイズ/アスペクト比 13.3型(293.76 x 165.24 mm)/16:9
最大表示解像度 WQHD(2560 x 1440ドット)
ペン入力 読取方式 電磁誘導方式(Electro Magnetic Resonance technology)
スタンド 3段階調整(22°/35°/50°)/着脱式可能
電源 電源供給方式 専用ACアダプタ(AC100~240V、50/60Hz)、または専用バッテリ
外形寸法(W×D×H) 374.1 x 247.7 x 17.0 mm(グリップパッドを含む)
質量 約1.7kg

より詳細のスペックは公式ページをどうぞ

個人的マイナス点

  • スタンドが三段階しかできない。
  • メインメモリ容量が心もとない。
  • ディスプレイ部分が小さい(外枠が大きい?)

ぱっと画像を見た感じ、ディスプレイの部分はここまでですよね?
CintiqCompanion2-3
スペック的にこれ以上の小型化は難しかったのだろうか…
個人的にはサイドボタンとかいらないから、その分小型化して欲しかった…

疑問点

  • ペンのラインナップにクラシックペンやインクペンがあるのか?
  • バッテリーの持ち具合がどの程度か?

goroneこの辺りが気になりますね~

個人的wktk点

  • 「付属の2分岐ケーブル(HDMI入力/USB 2.0接続)でPCと接続し純粋な液晶ペンタブレットとして使える「デスクトップモード」を新たに追加」
  • 「デスクトップモード利用時はUSB 3.0ポートをUSB 2.0 Hubとして利用できる」
nandato

こ…これは…

CIMG0960 <欲しい…!!

この機能は前機種のCintiq Companionが出た時に欲しいと思っていた機能ですね。
前機種で搭載していたらおそらく当時発売日に買ってましたね(ノ∀`)

競合他社タブレットと比較

だがちょっとまってほしい。

競合他社の製品も気になる所ではないか!?gokuri

 

Cintiq Companion 2 (Premium) VAIO Prototype Tablet PC Surface Pro 3
外観 CintiqCompanion2-2 VaioPrototypePC Surface3
OS Windows 8.1 Pro Windows 8.1 Pro Windows 8.1 Pro
CPU Core i7-4558U / 3.2GHz 第4世代Core Hプロセッサ? Core i7-4650U 1.70 GHz
メインメモリ 8GB 8~16G? 8 GB
最大解像度 2560 x 1440 2560 × 1704 2160 x 1440
外形寸法(W×D×H) 374.1 x 247.7 x 17.0 mm 非公開? 292 x 201.3 x 9.1 mm
AdobeRGB 95%以上 95%以上
重量 約1.7kg 非公開? 約 800 g
角度 3段階調整(22°/35°/50°) ※専用スタンド必須 無段階 無段階
デジタイザペン ワコム製 N-Trig製 N-Trig製
筆圧 2048段階 256段階 (仮想1024?) 256段階
u-nn

ざっくりとしたスペック比較表を作ってみましたが、
一番気になる機種は現在開発中の「VAIO Prototype Tablet PC」です。
こちらは冬コミ(C87)にて現物をセルシスブースで触ってきましたが、かなり使いやすかったです。

ディスプレイもVAIOの方が横長すぎずタブレットとしては使いやすそう.
その一方でCintiqとAdobeRGBは同程度ですね。

ネット上にVAIOの性格な外形寸法は出ていませんでしたが、Surface 3よりも2,3㎝ほど縦横寸法が大きい程度でした。(うろ覚え)

また、Cintiqは専用スタンドを使って三段階しか角度を調整出来ないのに対し、VAIOやSurface 3は無断階に調整できます。
特にVAIOは非常に心地よい角度調整を行えストレスを感じませんでした。(この辺りは要体感ですが)

その一方でやはり筆圧などのペン性能はCintiqが抜きん出ているのではないでしょうか。
VAIO実機も非常に描き心地は良かったですが、カタログスペックは256段階の筆圧らしいです。
(冬コミで聞いた際は、仮想的に1024段階を実現している…と言った話をVAIOの担当者がしてました)

脳内順位的にはこんな感じでしょうか…

液タブとしての性能 Cintiq > VAIO >Surface 3
Winタブとしての使い心地 VAIO > Surface 3 > Cintiq
サブのお絵描き機として VAIO > Cintiq >Surface 3
メインPCとの連携 Cintiq > VAIO ≒ Surface 3
gununu

なんて悩ましいんだ…!

VAIO Prototype Tablet PC のような外形寸法の Cintiq Companion 2

Cintiq Companion 2 のように液タブとしても使える VAIO Prototype Tablet PC

こんな製品があればいいのに…!!!

piko< ついでにVAIOさんはワコム製のペンの採用をお願いします

最後に

まだCintiq Companion 2も発表されたばかりで、現物を扱えていないのでいかんせんなんとも言えませんね

やはりこういう製品はカタログスペックのみに目を向けず、実機を触り、自分の肌に合うか直接確かめたいです。

スペックが未定なEnhancedも気になるところですし、続報や発売日に期待したい所です(*´∀`)

IMGP1115 <焦らにゃい焦らにゃい…zzz

 

リンク