カテゴリー: ソフトウェア

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

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

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

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

Live2Dで肘を綺麗に曲げたい

現在製作中のLive2Dモデルの肘がそれっぽく出来たので載せてみます。

mio  ※クリックでGIFアニメ再生

今回こだわったのは肘です。

第一のこだわりポイントとして、肘を外側に少し曲げられるようにしました!!!

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

これはお絵描きにも使える考えですが、女の子はちょっと肘を逆側に曲げる仕草が可愛いんですよね!(*´∀`)

hiji_out こんな感じで外に少し曲げると女の子らしさが際立ちます。

このように肘が曲がる事をなんというか覚えてませんが、
私は野郎でこのように曲がる人や表現を見た記憶がないですね。
私はくびれと同様に女性特有の魅力の一つでは無いかと思っています。

 

第二にこだわったのが、関節のアウトラインの綺麗さです。
できるだけどのタイミングでみても肘っぽさが出るように考えて見ました。

スクリーンショット 2015-03-10 15.17.58 スクリーンショット 2015-03-10 15.18.02 スクリーンショット 2015-03-10 15.18.06
スクリーンショット 2015-03-10 15.18.17 スクリーンショット 2015-03-10 15.18.20 スクリーンショット 2015-03-10 15.18.23

それっぽく見えるかな…?(´・ω・`)

今回肘を作るにあたりいつもと腕の構成を変えています。
いつもは肘のところで分割し、腕は上下の2つのパーツで構成しています。
が、今回は以下のように肘の部分自体を分離させています。

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

腕の部分は基本的にいじらず、肘を回転と曲面デフォーマを駆使して曲げています。

そのためか、スクリーンショット 2015-03-10 15.26.30-1 パラメータが非常に煩雑になってます((((;゚Д゚))))

これはどうなんでしょうね。。。
パラメータに三点挿入だけでは中間の自動生成される形が綺麗に出来なかったのでどんどん増やしてしまいましたが…
後々問題が出ないといいな(;´Д`)

 

問題点といえば、
腕の前後パラメータも作っています。
スクリーンショット 2015-03-10 15.46.50-1
これを用いる事で、腕を後ろで組ませたり、手前で組ませたり出来るようになっています。

服の後ろに隠れるスクリーンショット 2015-03-10 15.46.50 腕と手の一部が手前に出るスクリーンショット 2015-03-10 15.47.01 腕と手が完全に手前に出るスクリーンショット 2015-03-10 15.47.12

中間のパラメータは、腰に手を当てた際にちょうど中指、薬指、小指がスカートに隠れるような描画順に調整しています。

これらの設定により、パラメータの組み合わせで公式サンプルよりも多くのポーズをとれると思うのですが、
この、前後設定で一箇所問題点が出ています。

服の手前に持ってくると言っても、二の腕を手前に持ってくると、袖の手前にも来てしまいます。
かと言って袖ごと手前に持ってくると、袖の裏側に隠している部分が表に出てきてしまい形が崩れてしまいます。
仕方なく二の腕の描画順はそのままにしているのですが、腕をより寄せると以下のように境界が目立ってしまいます。

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

かと言って腕の可動領域を狭めると表現の幅が狭まり嫌なんですよね(´・ω・`)
体の後ろに腕を回してると問題無いんですがね…

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

この辺りはもうちょっと考えて作らないとダメでしたね…

何か改善策がないかもう少し模索してみることにします(`・ω・´)


 

以上Live2Dの肘製作における進捗と問題点でした(´・ω・`)
次回は腕を反転複製した際に躓いたポイントを忘備録として残しましょうかね(`・ω・´)

Live2Dにおける肩の概念

現在製作中のLive2Dモデルの腕周りがだいぶ出来てきたので載せていきます

mio ※クリックでGIFアニメ再生

 

こんな感じで肩周りが稼働します。

今回ある程度腕を上げるために、肩の動きと腕の動きのパラメータを分割しています。

これはLive2Dに限った話ではないのですが、
腕の関節をそのまま動かすと非常に体のバランスがおかしくなります。
以下にラフを載せてみましょう。

Shoulder_Bad

こ れ は ひ ど い

Live2Dではこのような形は比較的楽に作れます。
腕の根本に回転デフォーマを設置すれば良いだけですしね(。╹ω╹)b

試しに無理やり動かしてみました。
スクリーンショット 2015-03-10 02.53.06

こ れ は ひ ど い

回転デフォーマの位置が悪いとかそんなレベルじゃない(´・ω・`)

 

では肩を一緒に動かすと以下のようになります。

Shoulder_good

先程よりだいぶ違和感が消えたのではないでしょうか(゚∀゚)

この辺りは以前pixivで公開したお絵描き講座でも触れた点ですが、
関節は四カ所意識するほうが良いというのが私の持論です。
Shoulder_good2

 

これをLive2Dで実装すると以下のようになります。

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

まだまだ作りこみが甘いですね(´;ω;`)
ですが先ほどよりだいぶましになったのでは無いでしょうか。

 

Live2Dにおいてこの肩の構造を作るにあたってパラメータを別けざるを得ませんでした。(もっといい方法は無いですかね…)
しかしパラメータを分けた理由として肩のみを上下させる事が出来るという長所もあり採用しています。

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

このように肩をすくめる表現が可能となります。
片方の肩だけすくめると微妙ですが、両肩…ひいては動きを伴った肩をすくめる動作をする女の子は可愛いと思うんですよね!!!(^ν^)

ですが、肩の上下は従来のように回転デフォーマを付けて回転させるだけでは出来ません。
回転させたら体の他の部分も回転してしまいますし、肩の部分だけ別けていたとしてもパーツの調整が出来ません。
なので曲面デフォーマを設定し、納得が行くまで変形させました_(:3 」∠)_

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

この辺りはまだまだ経験値不足ですね。。。
もっと場数を踏んで試行錯誤してみないと納得できる代物は出来そうもありませんね(´・ω・`)


以上現在の進捗を兼ねた忘備録でした。
公式のサンプルモデルで腕を大きく上げるキャラが居ないので色々と試行錯誤してしまいました。
もうちょっと詳しく解説出来たらいいのですが、まだ私自身詳しく解説できるほどの技術が無いので大雑把になってしまいましたね(´・ω・`)

そんなことより、ここ一週間ほどマクロが帰ってこず辛いです(´;ω;`)どこ行ったの…

CIMG0948

Live2D製作再開中

昨年からちょくちょく勉強を始めていたLive2Dですが、冬コミや体調不良などでずっと停滞していたのですが最近製作を再開しています。

前回までの製作中に様々な課題が見つかったので、今回は元絵から大幅に加筆修正を行いました。

現状まだ見せれる箇所は非常に少ない状況ですが、顔の前後左右がだいぶ出来てきたので載せてみます。

スクリーンショット 2015-03-06 01.03.51

 

元絵の修正点で大きいものとして、瞳を一から描き直しました。
可愛さと輝き増し増しな感じになりました!
20140219_160904_Android-e1410817356756-975x1024ドヤァ…

またLive2Dの仕様にあったレイヤー構成をこちらも一から考えなおしたりしました。その辺りはある程度上手くできたら追々復習がてら載せていけたらと思います。

さて、現在顔の横と縦の動きをの新着は以下のようになっています。
(以下のGIFアニメはクリックで再生)

横の動き

mio

縦の動き

mio

u-nn

なんか違和感が残っているんですよね…
現状では特に下を向いた時がしっくりこないですね。

(あ、眉毛片方作ってなかった…)

もうちょっといろいろいじってみないといけませんね
2013-02-22 22.11.16ぐったり…


 

そういえばLive2Dのコンテストが開催されるようですね。

去年開催されたAward2014ではTシャツ賞を頂きましたヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノ
今回のコンテストでもう一着狙っていくしか無いですね(。╹ω╹)b

しかし今思えばPSDインポート機能+テンプレ適応しただけのGIFアニメでTシャツって…なんで取れたんだろう(´・ω・`)

award2015http://www.live2d.com/award2015

SpriteIlluminator使ってみた

今日のニコニコ生放送にてSpriteIlluminatorと言う新しいソフトを扱ってみました!

そして完成品はこちら

test5

何これスゲ━━━━━━CIMG0927━━━━━━!!!!


元のイラストがこちら

スクリーンショット 2015-02-26 01.37.27

右ウィンドウにあるEffectsやBrushes & Toolsを用いて法線マップを描いていきます。
この描き味は2Dイラストを書く時と非常に似ています。

スクリーンショット 2015-02-26 01.37.34

 

 

法線マップのみを表示するとこんな感じ。

この2つを合わせることで以下のように立体的になります。

スクリーンショット 2015-02-26 01.36.28

そして左の□Auto rotate lightにチェック☑をいれると最初のGIFアニメのように立体感を体感できます(。╹ω╹)

現時点で私はまだここまでしか使えていません。
GIFアニメはこのソフトの機能ではなく、GIFアニメとしてデスクトップをキャプチャ出来るフリーソフトを用いて強引に撮っただけです(。╹ω╹)b

まだ開発中のソフトのようで情報が非常に少ないですが、現在は非常にシンプルな機能のみの実装となっており直感でなんとかなる感じでした
もっとも、シンプル故にブラシが痒いところに手が届かない感が否めないです が、単に私がまだ良くわかってないだけか(゚∀゚) 2013-02-23 22.33.41
ちなみに私は英語はまったくと言っていいほど分からないのでgoogle翻訳に頑張ってもらいました(^ω^)

まだまだ使い始めたばかりですが、今度整理&復習がてら使い方をまとめたりしたいですね(`・ω・´)

 

UnityでLive2D立ち絵を表示してみる

進捗

色々と作りこみが甘いところがありますが、暫定で立ち絵のLive2DModelerにて再設定が終わりました。
スクリーンショット 2014-10-05 22.33.01

今回は公式チュートリアル「Unityでグリグリ動かしてみよう」を進めていきました(`・ω・´)ゞ

Live2D SDK Unityの準備

早速Unityで表示だ!まずはSDKの準備からだな!(((((((((((っ・ω・)っポチポチッ
スクリーンショット 2014-10-05 01.21.32

nandato

何故かLive2D SDK Unity が解凍が出来ない!
そうか…私はZIPファイルの解凍の仕方も分からないか…なら仕方ない。
goroneむりぽ…

と思っていたら解凍ソフトの相性か何かの問題らしいです。

スクリーンショット 2014-10-05 22.23.04

ツイッターで教えてくださった方ありがとうございますm(_ _)m

Lhaplusは調べたらもうだいぶ更新がされていないんですね。
私は結構昔からそちらのフリーソフトにお世話になっていたのですがそろそろ最新の解凍ソフトに乗り換えたほうが良いかもしれませんね。

解凍が上手く行ったあとは、特に引っかかるところもなくサンプルのデータをUnity上で動かすことが出来ました。

スクリーンショット 2014-10-05 22.44.06

 サンプルを差し替え

さて、いよいよサンプルから今回苦労して作ったモデルへの差し替え作業ですよ♪
rizumu-syobo-n

スクリーンショット 2014-10-05 13.58.13

 

yaruo_kita

ついにUnity上でLive2Dを取り込みましたよ奥さん!
客観的に見れば小さな一歩でも私にとっては大きな一歩だ(+・`ω・´)

ん?

なんか荒くね?
なんじゃあこりゃァァァァ━━━━(;゚Д゚)━━━━!!


tibiyaruo-hatena

と、いろいろといじっていたら正規の方法かわからないのですが、とりあえず以下のように設定すれば治りました。

書き出しターゲットを 1/1 に指定
スクリーンショット 2014-10-05 22.58.17

Max Sizeを書き出しターゲットと同じサイズを選ぶ
Truecolorを選ぶ
スクリーンショット 2014-10-05 22.55.06

偶然上手く行きました。ただ、多分ファイルサイズ的に重いしある程度縮小してから出力したいところですが…

全体的にまだ分かってないですね…
⊂( ・∀・)ワケ ( ・∀・)つワカ ⊂( ・∀・)つラン♪

Unity Web Player を埋め込む

さて、実際問題、どんな感じになっているのかを説明するよりも実際に触ってもらったほうが早いでしょう。百聞は一見にしかず。
Unityではブラウザ上で動かせる機能があるので今回はそちらを使います。

※Unity Web Playerをインストールしている必要があるらしいです
 まだの方はこちらからどうぞ【 http://japan.unity3d.com/webplayer/ 】

と言っても今回のこの機能初めて使うし、動くのかわかりません…
ブログのUnityが埋め込めるプラグインが動くかどうかも、Web上で公開する書き出し処理もまだまだ勉強不足のため行き当たりばったりです。
動かなかったり重かったりしたらコメントでもツイッター上ででも教えてもらえると嬉しいです(`・ω・´)ゞ

あ、アホ毛が荒ぶる理由も分かる方いたら教えてください
piko

今後の予定

もともとはニコニコ自作ゲームフェス4までにある程度ノベルゲームとしての骨格は作って見たかったんですが、残念ながら間に合いそうにありませんね。
あまりノベルゲームに執着していると冬コミ新刊を落とすことになるので、今後は同人活動の方を優先的にやりますかね。

Live2D角度X・Y設定中

進捗

現在Live2D Modelerに作業を移し現在モデリング中です。
はじめに…そしておそらく最も大変な顔のモデリングがだいぶ進みました_|\○_ヒャッ ε=\_○ノ ホーウ!!

mio_migiue mio_ue mio_hidariue
mio_migi mio_mae mio_hidari
mio_migisita mio_sita mio_hidarisita

とりあえず

この土日はずっとパソコンに張り付いて作ってましたが、なかなかに大変ですね…
輪郭や目はいい感じに調整が出来たと思います。

それに比べ髪が難しいですね…
特に髪の毛の一部がカクつくんですよね…
u-nn
なんかデフォーマの分割が甘いのかな?
後から分割増やしても大丈夫なのかな?

それになんかアホ毛が一部暴走していますし(;・∀・)

まだ分からないことが多いですがとりあえず土日での作業はここまでですね(ノ∀`)
また明日以降がんばります_(:3 」∠)_
(ΦωΦ).。◯(明日から本気出す...)

あ、目にハートをつけたままスクリーンショット取っちゃった(;・∀・)