apricotモデル作成(その2)
その２です。
前回は最低限の機能を追加して終わりました。
今回は、出現時日時を喋る、まばたき、喋る動作、ダブルクリックをすると反応する機能を追加します。
まばたきは目を描いていない全体と、目のパーツが必要になってきます。
凝ったモーションを行おうとすればするほど、素材数が跳ね上がります。これは時間と相談しつつ、作っていきたいですね。
口は動かしてもいいのですが、今回は作りません。一気に素材の手間が増えてしまうので。
最終的な完成形はこんな形にします。
まずは素材を用意します(大変)
前回は1枚絵でしたが、分割しました。
目とそれ以外の画像座標はPhotoshopなどで見ます。
このとき、Neutralizeの記述を変更します。
<sequence name="samidare.Neutralize"> <motion fps="30" z-index="0"> <image x="0" y="0" width="175" height="250">Images\samidare-base.png</image> </motion> <motion fps="30" z-index="1"> <image x="37" y="35" width="65" height="60">Images\samidare-eye1.png</image> </motion> </sequence>
画像をベースと瞳の2枚使うので、それぞれ定義します。
z-indexはレイヤー階層です。数字が大きければ手前に来ます。
<sequence name="samidare.Say"> <motion fps="10" z-index="0" iterations="40"> <image x="0" y="0" width="175" height="250">Images\samidare-base.png</image> </motion> </sequence>
喋るときはこのように記述します。ノーマライズの上体から瞳の変更は必要ないので体の記述だけ行います。(いらない？ノーマライズで事足る？)
<sequence name="samidare.Blink"> <motion fps="10" z-index="1" iterations="2"> <image x="37" y="35" width="65" height="60">Images\samidare-eye1.png</image> <image x="37" y="35" width="65" height="60">Images\samidare-eye2.png</image> <image x="37" y="35" width="65" height="60">Images\samidare-eye3.png</image> <image x="37" y="35" width="65" height="60">Images\samidare-eye1.png</image> </motion> </sequence>
まばたきの場合はこのように記述します。
ノーマライズの体画像をそのまま使用するため、記述は瞳だけにしています。
iterations="2"
というのは、繰り返し回数です。
2と選択すると2回まばたきを行います。
<sequence name="samidare.Shake"> <motion fps ="10" z-index="0" iterations="3"> <image x="0" y="-6" width="175" height="250">Images\samidare-base.png</image> <image x="0" y="-12" width="175" height="250">Images\samidare-base.png</image> <image x="0" y="-6" width="175" height="250">Images\samidare-base.png</image> <image x="0" y="0" width="175" height="250">Images\samidare-base.png</image> </motion> <motion fps="10" z-index="1" iterations="3"> <image x="37" y="29" width="65" height="60">Images\samidare-eye3.png</image> <image x="37" y="23" width="65" height="60">Images\samidare-eye3.png</image> <image x="37" y="29" width="65" height="60">Images\samidare-eye3.png</image> <image x="37" y="35" width="65" height="60">Images\samidare-eye3.png</image> </motion> </sequence>
これはダブルクリックをしたときにピョンピョンするモーションです。
全体的に画像が移動するので、体と瞳の画像両方を記述しています。
ここまでがモーションの作成です。
モーション作成 → 動作タイミング
という順で作っていくのがいいのかな？
次に、動作タイミングに合わせたモーション定義を行ってきます。
<sequence name="samidare.Neutralize" />
Idle部分のモーションをまばたきのモーションに変更しました。
<sequence name="samidare.Neutralize" /> <message>五月雨って言います<break/>護衛任務はお任せください</message> <sequence name="samidare.Blink" />
起動時のモーションで喋った後、まばたきするようにしました。
Stop部分は変更点なしです。
<sequence name="Tick" state="00:00:00"> <message>{M月d日}です</message> <sequence name="samidare.Say" /> </sequence>
これが起動時に時間を言ってくれる動作記述です。
これを記述すれば日時をお知らせしてくれます。
<sequence name="DoubleClick"> <sequence name="samidare.Shake" /> <message>お任せくださいね！</message> <sequence name="samidare.Say" /> </sequence>
これがダブルクリック時、モーションを起動するシーケンスです。
シーケンスタグは"DoubleClick"です。
シーケンスタグによってその時に反応する動作を作れます。
詳しくはリファレンスをご覧ください。
github.com
これでモデルが少しレベルアップしました。
今回はこれで終了です。
それではみなさん、楽しい創作ライフを！
apricotモデル作成(その1)
デスクトップマスコット、apricotのモデルを自作しましょうというものです。
進捗具合も兼ねての記事です。
Apricotとは何かという方は前回の記事をご一読ください
traitam.hatenablog.com
今回はとりあえず、1枚絵を表示、開始時、終了時に喋る処理を書いて終わりです。
こんな感じになります。
最初に、素材を用意します(大変なところ)。透過処理済みの素材です。
素材は五月雨ちゃんです。サイズは175*250です。大きくし過ぎてもデスクトップマスコットだとデスクトップを占領してしまうので…。
モデルを動かすには.xml拡張子のファイルが必要です。これを何かしらのテキストエディタで作成します。場合によっては既存のモデルのデータをコピーして持ってくるのも手ですね。
内部の記述を全部消して、ファイル名を変えてもOKです。
次にフォルダの作成ですが、
[キャラ名]
-[Images]-[image.png]
-[キャラ名.xml]
という感じにします。
そしてこのフォルダを[Apricot]->[Character]フォルダに挿入します。
では、ちょっと大変ですが.xmlデータ内に書いていきましょう。
まずは、一覧を表示して、各種説明という形にしていきます。
<?xml version="1.0" encoding="utf-8" ?> <script> <character name="さみだれちゃん" origin-x="45" origin-y="20" x="0" y="0" width="219" height="313"> <sequence name="samidare.Neutralize"> <motion fps="30" z-index="0"> <image x="0" y="0" width="175" height="250">Images\samidare-base-all.png</image> </motion> </sequence> <sequence name="Idle"> <sequence name="samidare.Neutralize" /> </sequence> <sequence name="Start"> <sequence name="samidare.Neutralize" /> <message>五月雨って言います<break/>護衛任務はお任せください</message> </sequence> <sequence name="Stop"> <sequence name="samidare.Neutralize" /> <message>それでは、また</message> </sequence> </character> </script>
これで、モデルが表示されたときに一言喋って、ソフトを終了したときに一言喋るようになります。
<character name="さみだれちゃん" origin-x="45" origin-y="20" x="0" y="0" width="219" height="313">
これで、モデルの定義を行います。originは表示時の場所です。全体の左上が(0,0)になってます。
ちょっと空けておかないと画像が切れて表示されちゃうんですよね。あと飛び跳ねた処理を行った時に画像が切れちゃったり…。
<sequence name="samidare.Neutralize"> <motion fps="30" z-index="0"> <image x="0" y="0" width="175" height="250">Images\samidare-base-all.png</image> </motion> </sequence>
これはモデルの基本状態を定義する処理です。
シーケンスで囲ってますね。
motionタグがあります。これでfpsや画像を複数使う時に前後関係を定義します。
画像のパスは.xmlがあるパスからの相対パスになっています。
motionタグで、そのキャラの動きを定義します。これを活用して、起動したときにどんな動きをさせるか決定できます。
<sequence name="Idle"> <sequence name="samidare.Neutralize" /> </sequence>
これはアイドリング状態に何のモーションを再生するか、という記述です。
今回は基本状態のモーションしかないのでこのように基本状態のモーションを入れておきます。
<sequence name="Start"> <sequence name="samidare.Neutralize" /> <message>五月雨って言います<break/>護衛任務はお任せください</message> </sequence>
Startネームタグ。
これはモデルが表示されたとき(モデル変更、ソフト起動)に呼ばれるタグです。
messageでモデルの上に吹き出しを作り、その中に言葉を入れて喋らせます。
breakで改行ができます。
Stopネームタグはソフトが終了したときに呼ばれるタグです。
やっていることはStartと同一なので説明を割愛します。
起動時はこんな感じになります。
メモQ&A
Q.origin-x,yの数値はどこから持ってくるの？
A.PhotoShopにある座標検出機能を用いてそこから持ってきます。
Q.PhotoShopが無い人は確認できない？
A.みたいです。仕方ないので、「記述->起動・確認->記述修正」を繰り返してください。
あ、でもキャンパスからの座標を検出できるものがあれば大丈夫なのかも。
それではみなさん、楽しい創作ライフを！
デスクトップマスコット-apricot-のススメ
新年初の記事はデスクトップマスコットの紹介です。
名前は「apricot」。Kawatan様(@kawatan)が開発しているソフトウェアです。
KAWATAN.NET
からApricot for Windowsを押せばソフトがダウンロードできます。
ダウンロード後、解凍すればデスクトップマスコットが出現します。
クリップボードを覚えてくれたり、ネットの言葉を拾って喋り出したり、言葉を交わしたり、好感度を上げたり…。
デスクトップの賑やかしに如何ですか？
ちなみに、独自に言語を開発しており.xml形式でオリジナルのデスクトップマスコットが作成できます！
詳細は以下の場所から。
github.com
次回は、最低限の機能を持ったApricotのマスコットモデルを作ろうと思ってます。
それではみなさん、楽しい創作ライフを！
StreamingAssetPath宣言タイミングの問題
using UnityEngine; using System.Collections; public class createfolder : MonoBehaviour { string streamingassetpath = Application.streamingAssetsPath; // Use this for initialization void Start () { } // Update is called once per frame void Update () { } }
クラス定義のすぐ下にStreamingAssetPathを定義しようとしたら
get_streamingAssetsPath is not allowed to be called from a MonoBehaviour constructor (or instance field initializer), call it in Awake or Start instead. Called from MonoBehaviour 'createfolder' on game object 'GameObject'. See "Script Serialization" page in the Unity Manual for further details. UnityEngine.Application:get_streamingAssetsPath() createfolder:.ctor() UnityEditorInternal.InternalEditorUtility:HierarchyWindowDrag(HierarchyProperty, Boolean, HierarchyDropMode) UnityEditor.DockArea:OnGUI()
というエラーを吐く。
Awake()かStart()内で記述しろというものなので以下のように修正する
using UnityEngine; using System.Collections; public class createfolder : MonoBehaviour { string streamingassetpath = ""; // Use this for initialization void Start() { streamingassetpath = Application.streamingAssetsPath; } // Update is called once per frame void Update () { } }
このように空のStringを宣言しておいて、Start()内で代入すればエラーが起きない。
ちなみに、「Application.persistentDataPath」の宣言でも同じ問題が起きるので、同じように対処すればOK
UnlimitedHand所感
大学の研究室にUnlimitedHandがあったのでUnityサンプルを触ってみた感想やその他感想です。
UnlimitedHandとは
腕に装着し、電気刺激によってVR内のモノを触れられるデバイスです。
キックスターターから端を発し、現在では一般販売もされています。
ただ触れられるといわれていますが、実際は衝撃や重さなどのシンプルなものに対応しています。
「VR上の女の子の触る感触が欲しい！」と思って使っても、思うような結果は得られないと思います。
使ってみた感想
私はUnityのサンプルを通してのみ使いました。
今回はそれのみの感想となります。
結果から言うと、発想の面白さはあるのですが発展途上感が否めなかったです。(私の活用技術が低いせいもあるかも)
鋭い刺激が多く、柔らかな刺激を発生させることが難しいのではないかというのが第一印象でした。
ただ、もともと触覚による認知は複雑なので、今後の発展がいくらでも期待できるのは確かです。
装着の仕方が悪いのかわかりませんが、上手く刺激が伝わらないもしくは弱い場合がありました。
また、電気刺激を伝えるのがジェルパッドだったので交換が必要で、展示などで使用する場合、衛生面も気になるところです。
あと何より、装着が難しいという点があります。
止めるためのマジックテープがあるのですが、片手では扱いにくく、きつく止めようとしてもマジックテープがくっついてしまう、などのもどかしさがありました。
誰かに装着してもらうのが無難だと思います。
最後に
サンプルを触っただけなので浅い所でしか話せないですが、以上が所感となります。
これより先はリファレンスを見ながら自分で開発していかないと良さがわからないような気がします。
ただそれをするにはいささか時間がかかってしまうのと、何より研究室の借り物なのであまり1人で長時間借りれることもできないという点があるので難しいかなぁ…と。
と、まぁ、UnilmitedHandの情報が少なかったので記事にしたまでですが、少しでも役立てばいいなと思っていたり。
それでは皆様、よき創作ライフを！
制作モデルマニュアル(プルキンエ)
上体の記事で使用した、モデルを配布します。
そのため、合わせてモデルの解説記事を書きます。
Live2Dモデルの研究開発にお役立てください。
このモデルは研究が主目的で制作されたモデルです。
パラメータ変更によるモデルバグが起きたり、使われていないパラメータなどがあります。ご了承ください。
モデルURL：
library.live2d.com
1 モデル設定
キャラクター名称：プルキンエ(Purkinje)
2 モデル概要
Live2DModeler2.1Pro版での制作です。
制作期間1週間(デザイン～Live2Dモデル制作完了)
2.1 統計情報
<< 共通データ >>
パーツ数 : 22
補間の数 : 336 << デフォーマデータ >>
曲面の数 : 99
回転の数 : 26
デフォーマの補間数 : 486
補間のないデフォーマの数 : 30
描画要素を１つだけ持つデフォーマの数 : 33
デフォーマを１つだけ持つデフォーマの数 : 50
中身のないデフォーマの数 : 3 << Cubismの主要データ >>
描画オブジェクトの数 : 99 ※「旧テクスチャの数」
描画オブジェクトの補間数 : 300 ※「旧テクスチャの補間数」
ポリゴン（三角形）の数 : 11688 << パス・変形パス >>
曲線の点数 : 21 （描画用の点数）
曲線の点数 : 178 （補間用の元データの点数）
2.2 パラメータ一覧
パラメータ数 44
角度 X・角度 Y・角度 Z
左目 開閉・左目 笑顔
右目 開閉・右目 笑顔
目玉 X・目玉 Y
目玉の拡大縮小
左眉 左右
左眉 上下
右眉 左右
右眉 上下
左眉 角度
右眉 角度
左眉 変形
右眉 変形
口 変形・口 開閉
照れ
体の回転 X・体の回転 Y・体の回転 Z
呼吸
髪揺れ 前・髪揺れ 横・髪揺れ 後
左腕・左前腕
右腕・右前腕
左手回転・右手回転
左親指回転・右親指回転
髪揺れ ふわ
肩すくめる
胸揺れX・胸揺れY
上体
上体 腕(未実装)
ブローチ揺れ
はね毛
2.3 デフォーマ階層
デフォーマ階層は長い為、分割画像です。
各部名称が同じ場所は、同一デフォーマです。
3 問い合わせ
何か気になることがあったら、コメント、もしくはTwitter(ID:@traitam)にご連絡ください。
上体の作り方03
前屈み上体作成の最後の記事です。前回階層を設定したデフォーマにパラメータを付けていきます。
３．上体パラメータによるデフォーマの設定
この章ではおおまかに3パーツに分けて節を書いていきます。
また、パラメータの設定では、上体専用スカート以外は“-30,0,30”で割り振られています。
上体専用スカートでは見える直前に前面のスカートと形を合わせるために“5”にパラメータが割り振られています。
今回設定するのはパラメータ30の、前屈みのみです。後ろの動きは公式の上体の動きを参考に作成しました。
また、添付されている画像は、特に指定がない限りパラメータ30の割り振ったものです。
3.1顔・首パーツ
ここでは頭と首の回転デフォーマについて述べます。
3.1.1 頭
頭のデフォーマは真下に回転デフォーマを移動させます。
このとき倍率は120％にしています。
ここでもイメージとなる下絵があると効果的です。
極端に移動させているからといって、頭の倍率を大きくしすぎると違和感が発生してしまいます。
あくまでも控えめに。
3.1.2 首
首のデフォーマも頭と同じように真下に移動させます。
首は頭の後ろで隠れてしまうので倍率は変更しません。
動かした時に、顔からはみ出さないように意識すればOKです。
3.2体パーツ
ここでは首回りのフリル、ブローチ、腰、胸部、胸、左・右腕の設定について述べます。
3.2.1 首回りフリル前・後
首回りのフリルも顔で隠れてしまうのであまり細かい設定はいりませんが、入るまでにある程度湾曲させて角度が変わっているように見える為に変形させます。
前のフリルと後ろのフリルで首を包むように作成しています。
このとき前のフリルは強く湾曲させて角度がついているようにみせます。
が、作ってみるとほとんど見えないのでここも顔からはみ出さないように気を付ければいいかもしれません。
3.2.2 ブローチ
ブローチは、頭や首の回転デフォーマと同じように真下に移動すれば大丈夫です。
倍率は変更していません。
このような小物を倍率変更させるのも説得力が増しますが、細かい情報のため、また今回は前屈みの上体完成が目標なので何も倍率変更を施していません。
3.2.3 腰
腰の曲面では、最終的に胸部で隠れますが、パラメータ15くらいまではパーツが見えるので変形を行います。
パラメータ0
パラメータ14
パラメータ30
角度XYでの作成と同じような感覚で角度をつけていきます。
ただ今回は、湾曲がきついのと、スカートの余剰部分が見えないように、もしくは目立たないように意識しながら設定をします。
角度XY作成記事を読んだことが無い方は以下のURLからどうぞ。その知識を活用しています。
3.2.4 胸部
胸部とは、胸揺れを行わない方の胸です。
ここは胸に隠れますが、少し見える場所です。
湾曲を強く行い、見えるところを中心に違和感ないように設定します。
また、見えない場所はあまり意識して設定しません。見えない部分も違和感なく設定しようとすると作成時間が倍増します。
3.2.5 胸
この部分はよく画面に映る場所です。また、胸の強調による前方にせり出ている感覚を強くしたかったのでここは少し誇張して変形します。
パラメータ0
パラメータ30
パラメータ設定前の0と設定後の30を見比べると良くわかります。
前屈み上体の時は胸のサイズが大きくなっています。
当然前屈みになっているから位置関係的に近づくので、大きく見えます。ただもう一つ理由があります。
元々、顔と胸は目線が行きやすいです。ですので、その部分を誇張すべき箇所です。他にブローチを強調させたい場合はブローチのサイズを大きくなどあります。
強調させたいもの“のみ”大きくします。
しかし、ここで矛盾が生じます。先ほど顔の倍率の時に控えめと言っていたことです。理由として顔の認識時間や違和感の認知が非常に優れていることです。
この違和感の認知が強いせいで、少しでも誇張しすぎると違和感の原因になります。ですので控えめに、いうなれば“違和感解消のための逃げ”です。
ですので、顔は控えめに倍率を上げてください。とのことです。
これ以上踏み込むと記事を1本増やさないといけないので割愛します。
また、形を無理に変形させて見える形を整えています。もっとノウハウが溜まればきれいな作り方も完成すると思いますが今回はこのレベルです。
また、胸部、左右腕と違和感ないように接続するために上の方はキュッと締まった変形を行っています。
3.2.5 左・右腕
左右腕は上の設定を行った後に行うと、倍率の変更と位置関係の修正で終わります。
ただ、この左右腕のみパラメータを“上体”と“左腕”に設定しています。左腕は-30、0、30のパラメータ設定です。
上体パラメータで位置を、左腕パラメータで倍率を変えています。
大きくしたときの倍率は130％です。
上体30、左腕0
上体30、左腕30
このようにパラメータを分けて設定することにより、より複雑な動きを可能にさせます。
特に今回は上体時であってもなくても腕を動かせるようにしているのでこのようなパラメータ設定になっています。
また、右腕も同様に設定を行います。
位置関係の調整と右腕パラメータによって倍率の変更を行う。です。
3.3スカートパーツ
スカートパーツは2つあります。正面に常に見えているものと、上体の時にのみ見える後ろのパーツです。
よく、首の後ろにパーツを付け足すことがありますが、それと似たものと考えてもらえれば結構です。
この部分は下絵として予め完成図を描いておき、それを元に行うことを強くお勧めします。
パーツを描いたときに角度に失敗すると無理して作らないといけないためです。
結論から言います。力技です。
柄が無ければ、角度XYの設定方法と同じように行えば良いのですが、今回は柄があります。
この場合は後ろのスカートと違和感なく合わせるために無理な変形が不可欠です。
ですのでトライアンドエラーという時間度外視で行う必要が出てきます。ノウハウが溜まってないという点からもまとまっていない箇所が多くあります。その顕著なところがこのスカートと思います。
ただ、ポイントは“上半身との接合部”を意識すると幾分か作りやすかったです。
また後ろは、パラメータ5に追加で設定を行います。
この場所は前のスカートと後ろのスカートを合わせるためのパラメータです。ここでしっかり合わせておけば上体を作るときにいい感じに前後がブレンドできます。
今回、後ろの変形デフォーマは乗せません。
描いたときにイメージが十分につかめておらず、描いたパーツが合わなかったためです。コンテストに出すということもあり、時間的余裕が無かったため、ノウハウのひとつとして無理に作成しました。
近々、モデルと上げようと考えているので、その時に見え貰えれば、と思っています。
4 最後に
いかがだったでしょうか？
個人的にはかなり駆け足で、うまく伝えられてない感じが書きながら思っています。
というか、自分自身この作成はノウハウが溜まってないので伝えるのが難しいと考えています。
けれどネットにLive2Dの情報量が少ない以上、少しでも情報量の増加に関われればと思い記事を書いた次第です。
ですので、自分へのメモも兼ねて書きました。何かあればお気軽にコメントください。
