タグ: Atheist

Live2D Creative Awards 2016 に応募しました!

Live2D社が主催するLive2Dコンテスト「Live2D Creative Awards 2016」に動画作品を応募しました!

応募作品

動画はFullHDで投稿していますので、スペックに余裕のある方はぜひ高解像度で見てみてください(`・ω・´)ゞ
(デフォルトだと中解像度になるっぽい?)

今回のモデルは左右90度ずつ、180度の顔の角度Xの実装を軸に、しっかりとした髪揺れや、腕周りの汎用性を追求してみました。
あとはやっぱり、可愛らしさを全面に出そうとバランス調整をすごく頑張りました(ノ∀`)

また、今回はサークル「まかろに☆けちゃっぷ」様の協力を得てなんと、ボイスを実装してみました!
口パクもただの開閉だけではなく、きちんと母音に合わせて行っていますのでその辺りも注目してもらえると嬉しいです。

なにげに最後のクレジット画面のモーションが一番のお気に入りだったりします(*´∀`*)

PICKUP作品

Awardsに投稿された作品の中で、
個人的に気になった作品を幾つかピックアップして勝手に紹介しますヾ(´ω`=´ω`)ノ


Awards2016の審査基準として明記されている「Live2Dの特徴や可能性を表現している」作品といえばこの作品。
くしゃみが出そうな仕草や、入れ歯が飛び出すモーションもそうなのですが、
横を向いた時にメガネの光沢具合が変わるところも地味に作りこまれていますね。

私が審査員ならグランプリに選んでいるくらいオススメの作品。


こちらもLive2Dの可能性を引き出すすごい作品。

変態構造モデル(褒め言葉)
Live2Dで側転出来ることも凄いが、汎用的な手を実装しているところにも注目したい作品。


一瞬MMD動画でも見ているのかと錯覚してしまった凄い作品。

全身モデルで横や後ろ向きの切り替えもできる汎用性の高いモデル。
特に腕が手前に来る箇所が綺麗に作ってあって凄い。


可動域はそれほど広くは無いですが、細かい表情の付け方と間のとり方が凄く好きな作品。
最後のオチまできちんと作られた完成度の高い作品。


Live2Dは別に人だけしか作れないわけではない!
と言うのを体現してくれる作品。

 


https://www.youtube.com/watch?v=v5pfoQwYEHE

モデルのレベルが高く、凄いよく動く。
と言うかサムネのインパクトが強い(; ・`ω・´)
そしてそのインパクトのまま動く感じが凄い!


メイクアップあるように、初音ミクが化粧する動画作品。
化粧をしない野郎の私には思いつかなかったコンセプト。この発想はなかった(´゚д゚`)


か、可愛い(*´∀`*)
この子うちにも現れてくれないかな!?(ΦωΦ)

実写にLive2Dモデルを表示されているのに違和感なく見ることが出来る凄い作品。
モデルも凄い可愛い!


立ち絵ぬるぬるっと動く凄い作品!
実際にゲームに使われていそうなクオリティの高いモデルです。


https://www.youtube.com/watch?v=fLwOQ3kAPzc

昨今盛り上がり始めたVRとLive2Dの組み合わせ!
アバターのように髪型や服を変えられる。これどういうモデル構造になっているんだろう?


Live2Dモデルで塗り絵が出来てしまう凄いアプリ!
プログラミングに弱い私からしてみると謎の技術です(ノ´∀`*)

このアプリに使うモデルは専用の構造のモデルじゃないとダメなのでしょうかね?
作ってみたい感はあるのですが、大変そうです(; ・`ω・´)


生放送用にLive2Dモデルをなんやかんや出来る凄いソフト。
近いうちに試してみる予定!

ゲーム配信や、お絵描き配信と相性が良さそう。


謎の技術。
ナンダこの変態技術は!(褒め言葉)


謎の技術その2。
学のない私には説明できない凄い技術の作品。
どういうことだってばよ!?



謎の技術その3。
すごい:(;゙゚’ω゚’):

最後に

ピックアップで取り上げた作品は全体の一部になります。
YouTubeで「Live2D_2016」と検索してタイトルに該当文字がある作品が応募された作品になります。
他にもたくさんの応募作品を見ることが出来ますので、ぜひいろんな動画を見てみて下さい!\\\\٩( ‘ω’ )و ////
出来れば私の応募動画も見て下さい(。▰´▵`▰。)

▶YouTube [ https://www.youtube.com/results?q=live2d_2016 ]

▶Live2D Creative Awards 2016 [ http://www.live2d.com/award2016 ]

デジゲー博SP & コミティア115にサークル参加します!

いつものようにギリギリの告知になりましたorz

1/30開催のデジゲー博SPと1/31開催のコミティア115にサークル参加します(`・ω・´)ゞ

  • デジゲー博SP C-01a
  • コミティア へ-25b

 

現在Unity+Live2Dを使ったノベルゲームを開発中です。
今回のイベントは短編のノベルゲームを頒布予定でしたが、残念ながら完成には至りませんでした(´・ω・`)

なので、今回は展示のみとなります!(`・ω・´)

ScreenShot00932

また、今回も冊子版Atheist澪標廻廊を持って行きます!
冬コミの時にちゃっかり増刷したやつですね(*´∀`*)

P_20160127_153745 P_20160127_153829

さらにちゃっかり初版の時と澪標廻廊のロゴが変わってます(ノ∀`)

サイズは文庫本(A6)、420ページの薄い小説本となっています。
頒布価格は1500円と高いのですが、印刷代が一冊あたり1600円ちょっとかかってるのでこれ以上安くはちょっと辛いですねorz

そのくせ本文はBoothと小説家になろうにて無料公開中です( ゚д゚ )

澪のSDアクリルキーホルダーも置いていますのでどうぞよろしくお願いしますm(_ _)m

SDmio

それでは当日お会いしましょうヾ(´ω`=´ω`)ノ

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で苦戦中で先に進みませんな…)

COMITIA113にて自作ライトノベル頒布します!

毎度ギリギリの告知に定評のある はちゃちです。

今回はCOMITIA113にてサークル参加します!
スペースは Z-02b です。
COMITIA113MAP

 

今回の頒布物は小説本となります。
コミティアはオリジナルオンリーの同人イベントなので、当然小説も自作小説です。

418頁の薄い本です!!!

CIMG0906 !?

小説本ですし、ページ数が増えるのはしかたないですね。
薄い本が厚くなるな!

表紙はこんな感じです。
novel_hyousi
(。╹人╹。)

あらすじ

 毎日同じ日々の繰り返し。
高校へ行き授業を受けて帰る。大学受験を超えた先でも、就活競争を超えた先でも同じ。毎日繰り返しの日々。
黒野翔はそんな日々に諦めを感じ、ただ面倒事を避け無難に荒波を立てないよう過ごす。
そんな彼に、あるクラスメイトの女子が興味を持って接してくる。その女子……相沢澪と次第に打ち解けたが――

――(+・`ω・´)キリ
と言った感じのライトノベルになっております。
CIMG0096 <感動モノにゃ

(分厚さ的に)市販のライトノベル劣らないクオリティになっておりますのでぜひぜひ当日は現物を見に来ていただけると嬉しいです。
また、本のサイズはA6(文庫本)サイズになっています。この辺りも市販のライトノベルと同じ大きさですね!

現在(突貫工事ですが)特設のWebサイトも作りました!
http://atheist.jp/
  twitter-card
まだ内容の薄いサイトになりますが、今後少しずつ作りこんでいきたいと思いますのでどうぞよろしくお願い致します!

 

COMITIA参加に際し一つ問題があるとすれば、文庫本一種類だけの参加だとどうしても寂しいですね…
と、いうことでグッズを試しに作ってみました!

アクリルキーホルダー
20150828215122
Tシャツ
20150826211311

どちらも少数のみの製作ですが、当日持っていきます!
あくまでオマケ的なものですが、クオリティはちゃんとしているはずです…!
(一個あたりの単価がヤバイ…)

 

 

当日はどうぞよろしくお願い致します!
(他サークル見てていなかったら申し訳ないorz)

いい加減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_ヽ)_

COMITIA113にてサークル参加します!

最近ブログを更新出来てません(´;ω;`)ブワッ

そんな私ですが、8/30に東京で開催されるコミティア113にサークル参加が確定しましたので告知です!
IMGP0757 よろしくにゃ

頒布予定

コミティアはオリジナルオンリーなイベントですので、残念ながら艦これの同人誌は出せません。
そこで今回は以前からちゃっかり公開していたオリジナルの小説を印刷して持って行きたいと思います∠(`・ω・´)

現在の表紙(仮)はこんな感じです。

hyousi

薄い本の中身ですが、小説ですので多少厚いです。
今のところ400ページは超えました!

背幅が1.6センチくらいです。
薄い本()

サイズはA6の文庫本サイズです。
一般的なラノベと同じサイズですね。

頒布数ですが、残念ながら400ページの薄い本()をたくさん刷るにはお金が足りないので多分10冊前後くらいが限界な気がします。
オリジナルの小説ですので捌けきる事はないと思いますが、もし興味を持っていただけた方はよろしくお願い致しますm(_ _)m

他にも少数のグッズ類を作れたらなと考えています。

スペース

サークルP&Pは Z-02bに配置されました。
img007

この辺りですね。
ジャンルは小説で申込しましたのでその辺りになるかと思います。

特設サイト

サイトをちゃんと作りたくて現在時間を見つけてはちまちまと作っています。
▶ http://atheist.jp
まだ上記サイトは工事中の表記だけですが、だいたいこんな感じのサイトを作れたらと思っています。

ちなみに私はHTMLやCSSやらよく分かってないです(´・ω・`)
Adobe MuseというWebプログラム分からなくてもサイトが作れるソフトを使用しています。
なかなか面白難しいですね、このソフト(・∀・)

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