WEB拍手ぱちぱちっと
Clap/拍手

01.MENU
Blog  / ブログ
Videos  / 動画
Pictures  / 絵
Game Materials  / 素材
SS(ShortStory)  / 小ネタ

02.MENU
Novels  / 小説
Chat  / チャット
BBS  / 掲示板
Others  / その他
Old Top  / 旧Top

Traffic Jam Products


そうだ、Unityで読み込んだMMDのモデルをリアルにしよう

ごきげんよう。みんなのmですw

 

年齢ゆえか飲みに行くとやっぱり結婚やらの話題が増えてきました。

~さん今年らしいよーとか、結婚どうしよう、などなど。

と、言いつつ飲みに行ったメンバー全員、きっと当面は自身には関係がなさそうな話題なのでした(ぉぃ

 

さて本題!

そうだ、Unityで読み込んだMMDのモデルをリアルにしよう

 

前回はMMDのミクをUnityに読み込みました。

http://milk0824.hatenadiary.jp/entry/2016/06/06/224831

今回はARなどの話題に移る前に、MMDのモデルをリアルにしたいと思います。

もう少し言うと、IBLという技術を使って周りの風景になじませるお話です。

 

今回お借りしたのは、この技術の時に必ず出てくるTda様の『Tda初音ミク・アペンド Ver1.00』です。

モーションはデコスカP様の『リアルワールドモーション詰め合わせ』です。

 

読み込んだ状態はこんな感じ。

f:id:m_training:20160609185615p:plain

この状態でも十分美しいのですが、風景をつけると浮いた感じになります。

それを、周りの風景に溶け込む形にします。

f:id:m_training:20160609190139p:plain

この記事で扱うのはここまでですが、さらにテクスチャ(絵)に手を加えて光源や質感を操作しまくるとこんな感じになりますw

 

f:id:m_training:20160609190311p:plain

触りたいっ!!(ぉ

 

だいたいの手順

下ごしらえ. 前回の記事を参考に、MMDのお嫁さんをUnityに降臨させておく

  1. Materialsの中のMaterialを「Standard」にして、MetalicとSmoothnessの値を調整する
  2. HDRの画像を読み込んで「Cubemap」にする
  3. Materialを作成して、ShaderをSkybox > Cubemapにする
  4. window > Lightingのskyboxに先ほど作ったMaterialを設定する
  5. Directlightなどの光源を好みに調整する
  6. Edit > Project Settings > QualityのAnti Aliasingを「8x Multi Sampling」にする
  7. MMDモデルに物理演算をつける(ミクさんは髪の毛が動かないと怖いので…)
  8. 見て癒される

1. Materialを「Standard」にする

「リアルにする」というのは、例えば森にいたら緑っぽくなって、金ぴかの部屋にいたら金ぴかっぽい感じになるといった感じです。

周りの様子がモノに反映されます。

(光に画像を設定してそれを映し出す、というとややこしいですねw)

f:id:m_training:20160609194125p:plain

f:id:m_training:20160609194151p:plain

 

その周りの様子を反映される設定をMMDのお嫁さんにしていきます。

 

Materialsのフォルダ>それぞれのMaterialのShaderを「Standard」にする

MMDのモデルに反映している画像(Material)はMaterialsのフォルダに入っているかと思います。

そこに入っているMaterialのShaderを「Standard」に設定しましょう。

 

f:id:m_training:20160609194805p:plain

そのあと「Metalic」の値と「Smoothness」の値をいじります。

Metalicは1に近づくほど金属っぽくなります。テカテカします。

Smoothnessは0に近づくほど反射しなくなります。マッドな仕上げになりますw

この辺は好みの問題も出てきますので、自分の目で見ながら設定しましょう。

 

そして、このStandardの設定をそれぞれのMaterialに設定していきます。

このとき、私は肌系のMaterialと影系のMaterialはいじりませんでした。

肌もいじらないと周りになじまないのですが……設定が難しくてテカったりガングロ様になってしまって難しくて(^-^;

影に関しては変な色になってしまうのでやらないほうが良いです。

 

f:id:m_training:20160609195304p:plain

髪の毛の設定はがんばりたいところw

f:id:m_training:20160609195437p:plain

 

光物を設定したいときは「Emission」をそれっぽい色に設定すると、多少それっぽくなります。(もちろんやらなくてもよいです)

f:id:m_training:20160609195621p:plain

f:id:m_training:20160609195808p:plain

 

2. HDRの画像をダウンロードして、Cubemapにする

続いて、背景などに使用する画像を用意しましょう。

今回はHDRの画像を使います。

HDR…明るいところと暗いところの諧調を残してくれてる写真。iPhoneとかでも設定がありますよ~)

以下のHDR Lab様の無料の画像をお借りしました。

http://www.hdri-hub.com/hdrishop/freesamples/freehdri

 

それをポンとAssetsに入れます。

f:id:m_training:20160609200739p:plain

 

Texture typeをCubemapに変更する

今持ってきた画像を「Cubemap」という形式にします。

これにすると背景にしたときにカメラをクルクル回転させてもちゃんと周りの画像を表示してくれます。

f:id:m_training:20160609200903p:plain

 

3. Materialを作って、それをSkybox > cubemapと設定する

先ほど設定したCubemapを使うためにはMaterialを作って、そのMaterialに反映させてあげて初めて使用できます。

ちなみにMaterialは、Assetsで

右クリック>Create>Material

です。

f:id:m_training:20160609201541p:plain

f:id:m_training:20160609201609p:plain

 

4. Lightingに背景を設定する

先ほど用意した画像を背景に設定します。

もう少し言うとIBLの設定をします。

……BLでしたら知ってるのですが、IBL(イメージベースドレンダリング)は詳しくは知りませんw

光源に画像を設定し、その画像をもとに光を計算するとのことですw

 

ま、難しいことは置いておいて!(ぉぃ

 Window > Lightingと開きます。

そうしたら、Skyboxに先ほど作ったMaterialを設定します。

f:id:m_training:20160609203621p:plain

f:id:m_training:20160609203839p:plain

 

 これで背景が表示されたかと思います。

ミクが全体的に森の色になったのがわかるかと思います。

……それと、肌にStandardを設定しなかったので浮きまくりなのもわかるかと思います(^-^;

 

5. 光源を好みに設定する

おそらくいじっていなければHierarchyにDirectional Lightがあるかと思います。

ここの「intensity」をいじることで明るさを変えられます。

……私は絵を描く人ですが、「困ったら暗めだったり逆光にすればそれっぽくみえる」法則が私の中にあって(私の絵を見ると逆光が多いのはソレw)、とりあえず0.2くらいまで明るさを下げました(爆

f:id:m_training:20160609204502p:plain

 

6. Edit > Project Settings > QualityのAnti Aliasingを「8x Multi Sampling」にする

もうこの辺からはきれいに見せるための調整作業です。

アンチエイリアスをかけたいと思います。(ギザギザをなくす処理)

Edit > Project Settings > QualityにAnti Aliasingという項目があるので「8x Multi Sampling」にしてみました。

Disableのときより断然きれいに見えますw

 

f:id:m_training:20160609204835p:plain

 

7. MMDのモデルに物理演算をつける

6までの工程で「できた!! 見てみよう!」と、躍らせてみると……。

ミク様の髪の毛が動かない!! まるで鉄パイプが入っているようだ!!

……まぁ、そうですよね……何もいじっていないですもの……。

 

なので、髪の毛がサワサワと動くようにします。

まずはMMDのモデルを選び、ModelタブのPhysics Engineを「Bullet Physics」に設定します。

f:id:m_training:20160609205230p:plain

 

そのあと、Physicsタブを選び、「Join Local World」のチェックを外し、「Frame per second」を70にします。

……Join Local Worldの設定はいらないかも。

そこまで設定したら「Generate Colliders」のProcessをクリック!

これで物理演算されるようになります。

f:id:m_training:20160609205605p:plain

 

8. 完成っ!!

これで完成ですっ!

しっかりと周りになじんでいますねw

f:id:m_training:20160609205753p:plain

f:id:m_training:20160609205821p:plain

f:id:m_training:20160609210509g:plain

 

 

番外編! もっと嫁をきれいにしたい!

mもやっていて「Motto!! Motto!!」と美しさを求め始めましたw

頑張れば以下のような感じまで持っていけますが、各種調整が大変……

さらにさらにテクスチャに手を加えています。

f:id:m_training:20160609210030p:plain

 

このやり方に関しては以下のUNICORN SQUARE GARDEN様を参照しました。

http://kosakasakas.github.io/blog/2014/10/18/unity-realtime-ibl/

Unity4.3時代は今の方法が使えないのでアセットで対応なさっています。

上記記事の一番下にGithubへのリンクが張られております。

そちらからアペンドミクのテクスチャをお借りしています。

 

さらに、上の説明では行わなかった肌の処理なども行って、調整をがんばるとこうなるわけですw

 

f:id:m_training:20160609190311p:plain

f:id:m_training:20160609210710g:plain

 

そうだ、MMDのモデルをUnityに読み込もう

ごきげんよう。

近頃ARやVR、MRを触っているmです!

IT業界にいるのですが、話題についていくためにお勉強中なわけですw

(mのお仕事はプログラマではないです。先生っぽいことしてます)

ちなみにARはマーカーをスマホで読み込むとキャラが出てくる、飛び出す絵本みたいなものです。

英語の教科書に使われて一時期話題になりましたw

 

VRは最近ですとPlaystationVRとかOculus riftなんていうのが話題に上がっています。

ヘッドセットをかけて、目の前にヴァーチャルな世界を再現するアレですねw

 

MRはMixed Realityで、現実とヴァーチャルの世界の合成です。

その昔のNHK電脳コイルの世界です。

今でしたらmagic leapが話題に上がりました。

 

この辺のことをお勉強がてら触ったりしていますw

さて、本題!

 

これらの基本は3D。

そんなわけでまずは……MMDMikuMikuDance)のモデルをUnityの世界に召喚してみましたw

 

MMDのモデルをUnityに読み込もう

MMDのモデルを読み込むためには以下の手順が必要になります。

0. 自分のお嫁さん(MMD)を探して、荒くなった呼吸を抑えつつダウンロードする。

1. MMD4Mecanim(http://stereoarts.jp/)をインポートする

2. お嫁さん(MMD)のフォルダをAssetにドラッグ&ドロップする

3. 「~.MMD4Mecanim」というファイルができているので、クリックして変換する。

4. 配置してときめく。

5. 棒立ちだと寂しくなってくるので、ダンスモーションをつける

6. 踊ってる姿を見てときめく

 

0. 自分のお嫁さん(MMD)をダウンロードしましょう

MMDではたくさんのモデルが発表されています。

どのモデルも素敵で目移りしますが、自分のお嫁さんを見つけ出しましょう。

サイトとしては以下にモデルさんたちが集まっております。

VPVP wiki

http://www6.atwiki.jp/vpvpwiki/pages/65.html

 

今回mはままま様の「Appearance Miku」をお借りしました。

さらに動きも付けたいのでモーションもダウンロードしました。

モーションは@kae様の「回レ雪月花」を拝借しています。

 

1. MMD4MecanimをUnityにインポートする

今回はUnityのインストールなどは扱いません。

いきなりMMDを取り込む説明をします。

MMDを取り込むには「MMD4Mecanim」というunitypackageをインポートする必要があります。

MMD4Mecanimは以下のStereoarts様にあります。

http://stereoarts.jp/

f:id:m_training:20160606214659p:plain

MMD4Mecanimのzipをダウンロードしましょう。

そこまで終わったら、Unityを起動して、新しいプロジェクトを作りましょう。

f:id:m_training:20160606215011p:plain

これを開いた状態でダウンロードしてきたzipの中にある「MMD4Mecanim.unitypackage」をダブルクリックするとインポートが進みます。

f:id:m_training:20160606215312p:plain

f:id:m_training:20160606215404p:plain

 

f:id:m_training:20160606215512p:plain

Assetsに「BulletXNA」「MMD4Mecanim」「Plugins」の3つのフォルダができたら成功です!

もうコレでセッティングがほぼ終了ですw

 

2. MMDのフォルダをAssetsにドラッグ&ドロップしましょう

MMDの入ったフォルダをAssetsにD&Dしましょう。

今回はモデルの他にモーションも付ける予定なので、モーションデータもついでに入れてしまいます。

f:id:m_training:20160606220043p:plain

 

3. MMDのモデルをUnityで使えるfbxのファイルに変換する

2.の段階で必要なファイル(~.MMD4Mecanim)がフォルダの中にできています。

このデータをUnityで使えるfbx形式に変更します。

まずは~.MMD4Mecanimのファイルをクリックします。

そうすると右側に利用規約が出てきますので、それらを読んで、同意をしましょう。

f:id:m_training:20160606220501p:plain

 

「同意する」を押すと右側のウィンドウが変換画面に変わります。

モーションが不要の場合(後からつける、などなど)はそのまま「Process」を押してください。

今回はモーションを付けますので、VMDのところにモーションファイル(~.vmdのファイル)をドラッグ&ドロップします。

f:id:m_training:20160606220752p:plain

「Process」をクリックすると、ハッカーが使いそうな黒い画面が出てきてびっくりしますが、珈琲でも飲みながら気長に待ちましょう。

マウスカーソルが砂時計マークでなくなったら終了です。

f:id:m_training:20160606221113p:plain

 

4. Rigを「Humanoid」にする

モーションをつけようと思った時によく引っかかるのが

「モーションつけたけど俺のヨメが動いてくれないっ!!」

ですw

これはAnimation typeをHumanoidにするのを忘れている場合が多いです。

その設定はココ。

f:id:m_training:20160606221408p:plain

 

5. 嫁を配置しよう!

先ほどの~.fbxを画面にD&Dすれば配置完了です!

ちなみに向きを変えたいときはy軸の角度を変えてあげるとよいですw

f:id:m_training:20160606221833p:plain

再生ボタンを押すと……

f:id:m_training:20160606221959p:plain

直立で寂しいのです……><

 

6. アニメーションをつけよう

アニメーションを付けるためには「Animator controller」というものを作って、そこにモーションを登録する必要があります。

まずはAssets上の適当な場所で

右クリック>Create>Animator controller

を作成します。

f:id:m_training:20160606222302p:plain

できたファイルをダブルクリックすると「Animator」タブが開くかと思います。

 

f:id:m_training:20160606222617p:plain

 

Animatorタブが開いたら、entryの下辺りで

右クリック>Create State>Empty

と選択します。

そうすると「New State」というのができると思います。

 

f:id:m_training:20160606222852p:plain

この「New State」をクリックすると、右側にmotionを設定する場所があるので、変換したmotionを選択します。

f:id:m_training:20160606223521p:plain

最後に、作ったAnimator controllerをMMDのモデルにドラッグ&ドロップして、モーションのセッティング終了です!

f:id:m_training:20160606223811p:plain

 

7.再生っ!

再生すると、踊っているヨメに会えるかと思いますw

f:id:m_training:20160606224135g:plain

 

次回は……

MMDでAR!? 机の上で踊りまくる鬼嫁!』

をご期待くださいっ(何

 

WEB拍手レス!!

大漁の拍手をありがとうございますーーー!!

やっぱり皆さんも曲がり角にはロマンを覚えるのですねw(違

 

>おっちゃんさん

おっちゃんさん、こんにちは!

いつも結構早起きをして、英語の勉強や読書の時間、その他家事の時間にあてたりするのです。

なので1時間半遅く起きても間に合ったりしますが……それこそドタバタしてしまいます(^-^;

 

自転車ですと曲がり角で人とぶつかったら「いった~い☆ 何するのよっ」では済まないですねw

普通に人身事故になりますのでご注意をですw

 

 

 

 

ちこくちこく~で曲がり角で人と衝突する可能性は限りなくゼロに近いですよね

ごきげんよう。

いつものmですw

 

それにしても100均に行くとテンションあがりますよね(いきなり何

あれも100円(税抜き)! これも100円(税抜き)!

近場に大きな100均があってついついはしゃいでしまいますw

今日は100均で野菜用の土、肥料、そして……三角コ~ナ~っ!(何

と買っておりましたw

あ、今植物を育てているんですw

去年から育てているパキラ(m命名:パキラ君)

それと、ガチャガチャで当てた枝豆ですw(m命名:豆)

 

f:id:m_training:20160530213707j:plain

どうなるんだろう、と思って水を上げていたのですが芽が出たのです!

小さな植木鉢で豆がかわいそうなので大きな植木鉢と野菜用の土、肥料を買ってきましたw

ちなみに野菜を育てるときは本当は植木鉢ではなくて地面がよいです。

想像以上に栄養を使うのですw(田舎暮らししてましたので知ってますw

空いた時間にガーデニングしないとですw

 

ちこくちこく~!

…………。

もう、初夏だ。

高くなった朝の陽ざしが眠っているmの顔に当たる。

セロトニンが増える、なんていってmという奴は寝る時をカーテンをしていないのだ。

本をよく読む人というのも無駄知識をため込み困りものである。

 

……もう朝……?

……うーん……ごろごろごろ……。

なんか……いつもより……日が高いような……。

……うーん……ごろごろ……。

なんか……いつもより遠くで車の音が聞こえるような……。

……ごろごろころころ……。

ぐっすり寝た気がするけど……目覚ましまだかな……

……ごろごろ…………ん?

目覚まし……

目覚まし?

………………。

 

――ガバッ!!

飛び起きた。

 

目覚まし、そういえば……かけてなかった!!!

慌てて時計を見ると

「ひやぁぁぁぁぁっ!!」

いいいいいいいいいいいつもより1時間半も遅いーっ!!

もう、もう、もう!

寝間着を慌てて脱ぎ捨てて!

そして次はっ!

はやくツイッターにこのことを書き込まなきゃ!!!(ぅぉぃ!!!

朝ご飯も食べずに朝の身支度を急いでして家を飛び出しましたw

mは通勤は徒歩なので、マンガのごとく「ちこくちこく~」と走って曲がり角で金髪ツインテールとぶつかって「大丈夫ですか…?」「ちょっと何あんた!? いたたたっ…ああもうっ、ついてない日だわ!」「あの、手を……」「ふんっ!」(そんなに怒らなくてもいいじゃない……)と思いながら会社に行くと「今日入社した帰国子君だ」「ああーっ!?」「あんたは朝のっ!!」としていると上司さんが「おっとm君と知り合いなのか。ちょうどよかったm君は帰国子女君の教育係をやってくれ」「ええっ!?」「ちょっ、なんでこんな奴に仕事を教わらなきゃいけないんですか」「ははっ、早速仲良しだね頼んだよ」「「誰がこんな奴と!!」」で、教えてる時にマウスを触る手と手触れて「きゃっ…な、なに意識してるのよっ!」「い、意識してないですっ」とか教えているうちになんとなく腕と腕がくっついて「こ、ここわかんないんだけど。も、もっと寄ってくれないと声聞こえない……」「これ以上くっつくと耳元で囁く感じになっちゃいますよ……?」「うん…私だけに囁いてほしい……」「もう……」とかしつつ、なんやかんやでゴールインするところまで思い浮かべました(核爆

 

で、実際のところ走ってしまうと汗臭くなってしまったり、髪がボンバーになってしまって一日中気にしなきゃいけなくなるので歩いて会社に行きました!(ぅぉぃ

 

結局間に合いましたw

隣の方(違う国の人だったりします)をみたら髪にカールを巻いたままだったので、きっとmは全然普通に会社にこれたと思います(爆

(ちなみに隣の子は「さすがに恥ずかしいからやめなさい」とお姉さまに怒られてましたw)

会社にカフェができたので

会社内にカフェができまして、隣の方とチョコを買ったりチョコを買ったり、カフェラテとかキャラメルラテとかカントリーマアムを買ってデスクでもぐもぐしていますw

朝ご飯を今日は食べられずに出てきたのですが、お菓子で満たしていました。

で。

「mさん、会社にカフェができたのはいいけどさ」

「うん?」

「これさ……」

「うん」

「絶対太るよね……」

「うん……あ。アルフォート買ってきたけど食べます?」

「たべますっ! トッポあげますねー」

「あざらし~」(「あざます」が変化していって、いつの間にか「あざらし」という謎の用語が我々の間で出来上がった)

 

……とまぁ、太る太る言いながらお菓子を食べ続けてしまいましたw

mは活動量計を買ってカロリー消費を確認するようにしましたw

 

 

ニコニコ動画でにこにこ

ごきげんよう。

会社で使う仕事のための勉強をしながら小林さんちのメイドドラゴンを見ているmですw

15分勉強、15分マンガ、15分勉強、15分マンガ……ということをしておりましたw

カンナちゃんがかわいいですハムハムしたいです(核爆

 

さてさて。

mですがニコニコ動画を見ています。

というか日曜日も平日もいつだって見ていたりしますw

中でもゲーム実況が好きでよく見ています。

 

今日は最近見た動画を紹介しようと思いますw

 

Scrap Mechanic実況(乗り物とかを作るゲーム)

Scrap Mechanicの実況!

Scrap Mechanicは、マインクラフトみたいなゲームですが、基本は車とか飛行機とかそういった機械をつくるゲームなのですw

これを作っているワイワイさんが面白すぎますw

発想力がスゴイ!

ドラえもんの顔半分が飛んでいくとか!

アンパンマンの新しい顔をブースターで発射してボーリングするとか!

毎度毎度爆笑させてもらっていますw

 

The Last Of Us実況(バイオハザードみたいなゲーム)

 

実況しているLickさんの声が大塚明夫さんそっくり!

出だしなんて完全に大塚さんの映画紹介ですよw

実況は声が好きで見ることも多いmなのですw

Lickさんは今はアンチャーテッド4の実況をしてランクインしてますね!

 

もしも「ぼくのなつやすみ」の主人公が社畜だったら。

 

ぼくの夏休みの「ぼく君」が社畜設定の実況です。何を言っているか(ry

これがまたアテレコが上手で、本当にぼく君が黒い会社さんの社員みたいなのです!

ちゃんと名刺交換用の名刺画像とか作っていますw

ちなみに捕まえるザリガニやクワガタがクライアントさんですw

 

天元突破プリキュア!オールスターズ!

 

プリキュアのはずなのになぜか天元突破のセリフがぴったり!

違和感が仕事しませんw

これを見た後はやり気むんむんなのですw

「それが女子力なんだよッ!!」

 

Where the Hell is Matt? (2008)

 

疲れたとき、元気が出ないときに見る動画です。

世界の広さ、けれどみんなひとつ、そんなことを感じる動画です。

これを見た後は私の悩みは小さいなんて思ってしまいますw

 

 

ざっと最近見た動画を紹介してみましたw

少しニコニコは控えよう控えようと思っているのですが見てしまいますw

 

 

2Dゲームの絵に動きをつけよう ~Spine入門・Animation編~

ごきげんよう。

ゆでたまごばかり食べているmです!

ダイエット中でして><

 

この頃は絵にアニメーションをつけることにはまってしまっていますw

縦シューティングを作っていたのに横シューティングになってしまったほどです(ぉぃ

新作はこんな感じです。一つの絵に3種類のアニメーションをつけてみました。

f:id:m_training:20160510203045g:plain

 

f:id:m_training:20160510203115g:plain

f:id:m_training:20160510203151g:plain

www.youtube.com

↑描き方動画

 

 

2Dゲームの絵に動きをつけよう ~Spine入門・Animation編~

前回のbone設定編の続きです。

今回は早速目的のアニメーションをつけていきましょう!

 

動きの基本は回転!

最初にアニメーションの「新規アニメーション」で新しいアニメーションを作ります。

f:id:m_training:20160510210927p:plain

作成後はAnimationの設定に入りましょう。

かなりわかりにくいのですが、左上の「SETUP」を押すと「Animation」の設定画面に切り替えることができます。

f:id:m_training:20160510211140p:plain

 

例:足を動かす

例として足を動かしてみます。

太もものboneを選択し、そして「回転」を選択します。

鍵マークをクリックして「赤」にしたらその角度で設定したことになります。

いったん0で鍵をかけるのがポイント!

ループさせるとき、最初に戻ってくるのですが0秒で鍵をかけておかないとカクカクした動きになってしまいます><

f:id:m_training:20160510212656p:plain

 

続いて最大の位置でまた鍵をかける

続いて「どれくらいの時間で足をどの位置まで動かすか」を指定します。

イメージとしてはフワフワとのんびり動かしたいと妄想しました。

なので……40のところにいったん設定です。

40は秒ではなく……フレーム……でもない気はします(^-^;

ここは動かしながらちょうどよい時間を見繕ってください。

f:id:m_training:20160510213228p:plain

このとき、鍵マークが「オレンジ」になっていると思います。

この状態ではまだ固定していません。

足を好きな位置に動かして鍵マークをクリックして「赤」にしましょう。

f:id:m_training:20160510213536p:plain

最後のフレームは0秒のときの動きをコピペする

動きをループさせたいときは最後のフレームと最初のフレームを一致させるとスムーズな動きになります。

なので、一番手っ取り早いのが0の時点の動きをコピペすることです。

今回は40で最大位置まで足を動かすので、元に戻るのは80の時点がちょうどよさそうです。

まずは、0のところの四角を選んでコピー。

Ctrl+cでも大丈夫です。

f:id:m_training:20160510213954p:plain

 

で、80のところに貼り付けで終わりです

f:id:m_training:20160510214127p:plain

 

つづけて膝から下も動かしてみます。

ここもやっぱり……

  • 0で固定
  • 40のところで動かして固定
  • 80のところで0秒の時の四角をコピペ

ですw

f:id:m_training:20160510214547p:plain

 

そこまで作ったら再生ボタンを押して動きを確かめてみましょう

f:id:m_training:20160510214904g:plain

 

それっぽい感じで動いてますねw

あとは色々なパーツをひたすら「回転」でいじっていきます。

回転させてれば大体のことが片付きますw

 

羽の部分は「スケール」を使ってみる

羽の動きは回転だと奇妙だったのです!!(ぉ

なので「スケール」を使ってみます。

Spineの3.2以降ですと「Shear」という台形的な変形を使えるのですが、これを使ってしまうと現状(2016/5/10時点)ではUnityで読み込めなくなってしまうので「スケール」を使用します。

基本は回転の時と同じです。

まずは0の時点で初期位置を固定します。

ついでに回転も固定しちゃいますw(画像は回転はまだ触ってない状態)

f:id:m_training:20160510215358p:plain

つづけて40の時点でそれっぽく縮めて固定です。

f:id:m_training:20160510215643p:plain

 

最後は、再生ボタンを押して「おおーすごい!!」と悦に浸れば完了です!(ぅぉぃ

f:id:m_training:20160510215903g:plain

 

……実は腕も動かしてるんですよ……><

 

まとめ

  • Animationは左上の「SETUP」をクリックして切り替え
  • 「0」の時点で初期位置を固定
  • 「40」の時点で動きの最大の位置を指定して固定(40は例です。早く動かしたいときは10とか20とか好きな数字を選んでくださいね)
  • 「80」(最後)の時点で0の時の動きをコピペ(80は例です。ここも時間は好きに動かしてくださいね)

 

 

2Dゲームの絵に動きをつけよう ~Spine入門・bone設定編~

ごきげんよう。

ダイエット中につきおやつはトマトとセロリのmです!

チョコが食べたいです。今ならまだチョコパフェでいいです。

 

今、シューティングゲーム2作目、今度はオリジナルを作成中です。

(1作目:http://milk0824.sakura.ne.jp/app/ab/

その際に「Spine」という2Dの絵を動かすソフトを使ってみたので、紹介がてら使い方を書きたいと思います。

 

2Dゲームの絵に動きをつけよう ~Spine入門・bone設定編~

 

昔。2Dのゲーム作りで大変なのが『キャラの動き』でした。

その昔はドット絵(キャラチップなど)を一枚一枚連番で描いて動かしていました。(下のような感じ)

f:id:m_training:20160507153856p:plain

パラパラアニメと同じ原理です。

1枚描くのに意外と時間がとられるのです……!

(上の例だと動きをつけるだけで一コマ1時間かけてます。それでも早いほう!)

ですが!

今でしたら簡単な動きならソフトでパパラパーとつけられてしまうのです!

時代の進歩すごい!

f:id:m_training:20160507154911g:plain

 

Live2DやSpineというソフトがあるのですが、今回は非常に簡単(30分くらい)で動きを作れた「Spine」について動きをつけるまで説明してみます!

 今回は動きをつけるための「モデル」の作成までです。

 

まずはゲームキャラの絵を描きましょう

私は絵描きなのでここから説明しますw

今回はオリジナルゲームということで、こういったキャラを設定。

f:id:m_training:20160507154746j:plain

悪魔っ娘ですw

ファンタジー系だと女の子は着る物が薄着かつティッシュのごとく破れやすいですが、私の今回のコンセプトは破れるもんなら破ってみろです(爆

鉄鋼系少女でいきますw

 

これをお絵かきソフトで2D用イラストに起こします。

絵を描いている様子は全部動画に収めたので下のほうに載せておきます(2分の動画です)

 

絵をお絵かきソフトで書くときの話。

最初からどこを動かすか考えてパーツを分けて描きます。

理由は、後ほどパーツごとの絵で1枚1枚保存するためです。

動画の例でしたら、例えば頭、リボン、二の腕、腕、羽、羽の関節から先……みたいに分けています。

それらを分けて、レイヤーセットで管理するととても楽ちんです。

photoshop, sai, ほかソフトでもレイヤーセット(フォルダみたいなの)あるかと思います)

あと、動いてもいいように、つなぎ目もちょっと大きめに塗っておきます。

動画の例だと、首が見えないのですが、動いてもいいように首も描いてます。

腕の関節部分は切ってしまわないで丸目に下地を塗ってしまっています。

アニメ塗りだとごまかしやすい!(ぉぃ

 

お絵かきソフトで描くときまとめ

  • 最初から動かすパーツを考えておく
  • 線画を描くときからもうパーツを分けて線画を描く。
  • パーツはレイヤーセット(フォルダみたいなの)で管理すると結合が楽
  • 動いてもいいように、関節部分は大きめに塗っておく(隙間ができないように)
  • 正面なら左右対称のものはコピペが楽(オリジナルだったらデザイン時点で左右対称にしておこうw)

 

youtu.be

f:id:m_training:20160507155523p:plain

 

「Spine」を使うための下ごしらえ

……描き方動画の絵を使いたかったのですが、すでに動きを完成したものを再集録するのも効率が悪かったので別の絵で説明します(汗)

使うのはこの絵。

f:id:m_training:20160507161619p:plain

f:id:m_training:20160507161515p:plain

01. パーツごとに分けてpng保存

まずは1枚1枚、パーツに分けてpngで保存、フォルダにまとめておきましょう。

 

f:id:m_training:20160507162114p:plain

ちなみにすぐさま練習してみたい人用に上の絵をまとめたものを作りましたw

http://milk0824.sakura.ne.jp/doukana/up/MyShipSide.zip

 

02. Spineをダウンロードしよう

以下からトライアルバージョンをダウンロードできます。

http://ja.esotericsoftware.com/

 

※注意

トライアル版では、保存もエクスポートもできません!

動かしてみて「わーすごい!」だけです(^-^;

 

※注意2

エッセンシャル版を買ってUnityにエクスポートしようとしている方!

現在UnityのランタイムがSpine 3.1.08までしか対応していません!!

Unityで「Error reading skeleton JSON~~~」とか、skeletenDataのインスペクターに「Attempt reimport」が出ている人はSpine 3.2以上で作っている可能性大です。

アニメーションを作る前にダウングレードしましょう(汗)

SpineのDowngradeの仕方は

左上のSpine>設定...>バージョン>その他>3.1.08>Spineの再起動

です。

私が気づかずにどれほど苦しめられたか……><

 

03. 絵を配置していこう

早速Spineを起動します。

最初に行うことは絵の組み立てです。

おそらく最初は、謎のグラサンのお兄さんがデフォルトで入っていると思うので…

左上の「Spine」アイコン>新規プロジェクト

です。

 

まずは絵を読み込みましょう

右側のリストの「イメージ」を選び、下の「閲覧」をクリックします。

フォルダ選択ができるので、先ほどバラバラにしたファイルがあるフォルダを選びましょう。

f:id:m_training:20160507163936p:plain

 

パーツを配置するための道しるべとして、完成済みの絵を置いておきましょう

イメージに絵が入っていると思います。

このままパーツを並べるのはすごく難しいっ!

なので完成済みの絵を置いておきましょう。

絵を置いた後は指針にするだけなので、透明度を上げておきます。

 

f:id:m_training:20160507164314p:plain

f:id:m_training:20160507164444p:plain

 

あとはひたすらパーツを置いていく!

あとはイメージからドラッグ&ドロップでひたすら絵を置いていきます!

もし回転になってしまう方がいらしたら、左下のウィンドウの「トランスレート」を選択すると移動に戻ります。

f:id:m_training:20160507164930p:plain

 

絵の表示順を変えよう

ただ配置しただけだと、考えていた配置順と違うと思います。

今の絵だと、スカートの部分とか手とか…気持ち悪い感じになっていますw

そんなときは「表示順序」が右のリストにあるので、そこを入れ替えます。

上にある項目ほど前面に表示されます。

f:id:m_training:20160507165505p:plain

 

04. 動きのキモ!bone(骨)を入れよう!

絵を動かすためには、動かすための「骨」が必要となります。

その「骨」を動かして、連動して絵が動く仕組みです。

 

一番最初に、全体の中心になる体のboneを作りましょう。(羽は邪魔だったので見えないようにしましたw)

左の「root」を選んで、左下の「作成」で作ります。

ドラッグで作成です。

f:id:m_training:20160507170459p:plain

作ったboneはリストのboneをダブルクリックすると名前を変えることができます。

f:id:m_training:20160507170534p:plain

 

 体にくっついているパーツのboneを作る

例えば頭なんかは体とくっついているパーツです。

そういったパーツは、今作った「body_bone」を選択して、またドラッグでboneをつくります。

こうすることで、体と連動して頭が動くようになります。

(体を傾ければ頭も傾くなど。これをやらないと、からだを回すと頭だけ置いて行かれます。デュラハン状態ですw)

f:id:m_training:20160507172639p:plain

 

続けてスカートも。

f:id:m_training:20160507172818p:plain

 

体以外の部分と連動するパーツのbone

この絵の場合、ふくらはぎの部分は「体」と連動ではなく「ふともも」部分と連動しないといけません。

そういったときは、連動させたい部分(このときはふともものところのbone)を選択してboneを作りましょう。

作っているときに赤い線で太もも部分に矢印が出ると思います。

こうすることで太ももを動かすと、一緒にふくらはぎが動くようになります。

f:id:m_training:20160507173316p:plain

 

あとは動くパーツ全部にboneを設定します。

f:id:m_training:20160507173447p:plain

……羽を忘れていました(^-^;

f:id:m_training:20160507173554p:plain

 

06. 骨と絵をくっつければ完成!

最後にboneと絵を連動させればモデルの完成です。

最初に配置したパーツを選択すると、下に「親設定」というボタンがでてきます。

親設定を押して、パーツと該当するboneを選択しましょう。

f:id:m_training:20160507175138p:plain

「体」の絵は「body_bone」と対応してますからbody_boneを選択しました。

f:id:m_training:20160507175209p:plain

 

それを一通り行って、モデルの完成です!

 

f:id:m_training:20160507175311p:plain

 

これにてbone設定編は終わりです!

 

Spineでモデルを完成させるまでのまとめ

  1. パーツごとにpngで保存する
  2. とりあえずガイドとなる全体絵を置いて薄くする
  3. それぞれのパーツを配置する
  4. 表示順序を変更する
  5. 体のboneをつくる
  6. それにくっつくboneをつくる
  7. それぞれのパーツを、それぞれ対応するboneに設定する

 

長く感じますが、例えば私の絵のパーツ数でしたら30分以内で終わりますw

 

さて!

次回はSpine・Animation編を書きたいと思います!

 

……想像以上に長くなってしまいました(^-^;

 

WEB拍手レス!

>おっちゃんさん

部活動、おつかれさまです!

 

5分アニメを見ようとしたら妹に「甲鉄城のカバネリ」を紹介されて見ていました!

ほのぼのどころかゾンビ系アニメですが燃えておりましたw(何

 

何かを学ぶ、体得する、ということはなかなか難しいことなのですよね><

見聞きして、実際にやってみて、うまくいったり失敗したりして……ようやく身についていくものだったりします。

それら含めて楽しめちゃう、というのがベストですw

 

mの日常

ごきげんよう。あなたのmですw

 

天気のいい日の散歩はキケンがいっぱい!

ゴールデンウィークですね。

mはというとこれと言って用事もないのですがお休みをいただいて10連休満喫中です。

ゴールデンウィークに入ってから天気がとてもよく、午前中は散歩をしていますw

けれど……。

天気が良い日の散歩はキケンがいっぱいなのです!

あ、キケンといっても突然町中に謎のゲートが現れてそこからあふれ出たファンタスティックなモンスターが襲い掛かってきたり、小さな子がファミレスでバイトしませんかと言ってきて小さいもの好きなmが言われるままバイトをして暴力的な人に殴られながらも何やかんやでときめいちゃって思い悩み始めるようなキケンではありません(長いよ

そう、キケンなのは……お財布と体重です。

あ、お財布のキケンといっても森を歩いていてヤンキー系お姉さんにしもむらに誘われたり(ry

 

ヨドバシがキケン

休みの日。

朝起きてトーストを食べていると外は春らしい穏やかな日和。

「天気もいいし、外にいこうっと」

そう思うのは自然ですよねw

f:id:m_training:20160502221818j:plain

川沿いを歩いているととても心地よいのですw

なぜかおじいさんから話しかけられたりします(爆

(近所で新装開店したコンビニのお話をしていましたw)

そんなあたたかな日和の中を歩いていると思考が進みます。

かつての文豪などもネタだしの時はよく歩いていたとのこと。

哲学の道、なんていう場所もあるくらいですから歩くと思考がはかどるわけです。

当然mの頭の中も思考が加速します。

「そういえば空気清浄機……」

とか

「そういえば除湿器……」

と、むくむくと物欲がっ!(ぅぉぃ

当然そうなると足が向かうのは家電から趣味のものまで幅広くそろっているパラダイスことヨドバシカメラです。

mの頭の中はもう、良い天気を楽しむことから、お部屋の空気がきれいになって幸せ空間が構築された様子に変わっています。

そんなわけで目を爛々とさせてヨドバシカメラに到着。

家電を見ようと思ったのですが、不意にキーボードとマウスがみたくなりました。

ヨドバシの魔力にやられたのですね。

地下へ降り立つm。

足を向けようとしたら、近くにペンタブコーナーがありました。

mは絵描きですからペンタブはいつもお世話になっています。

今使っているペンタブはリトバス絵を描き始めた時に買ったので……8年ほどつかっているわけですw

かなり使い込んでます。

で、コーナーをのぞき込んで……

f:id:m_training:20160502223237j:plain

……はッ!?

き、気づいたらペンタブがmの手の中にーっ><

だ、だ、だってポイントを使って6000円だったんだものっ><

安かったのですものっ><

まったく予定になかったのに散歩とヨドバシのダブル効果でペンタブを買いました(汗)

すごく使いやすいですっw(ぉ

ちなみに値段に差があるのにスペックが描かれていないですが、ペンタブの値段の差はバンドルのソフトでついていましたw(なんやかんやでその場で調べて買ってますw)

さて、この時点で空気清浄機を買うことなどはすべて頭から飛んでいます(ぅぉぃ

 

ヨドバシから出てもキケンがいっぱい

このヨドバシカメラ、出口を間違えても大変なことになります!

mが身をもって体験しました!!

間違って博多口方面に出ると恐ろしい吸引力に引き寄せられ抜け出せなくなります……。

そんなことも知らず、mはひょっこりそちらから出てしまいました。

すると目の前に現れたのは「銀だこ」!!

た…こ…や…き…!!(その時mに電流走る

 

想像してみてください。

外側はパリっとした触感……。

上にかった甘くしょっぱいソース、それに青のりとかつおぶしの織りなすハーモニー……。

かじると中はとろっとほくほく、食べ進めた時にゴロンとあらわれる……たこ!

ほくほく、うまーっ!と感想を漏らすあの瞬間っ!!

 

そこまで妄想して

「8コ入りくださーいw」

と頼んでましたw

 

って、長い休みだからダイエットにちょうど良いと思ってひかえてたのにーっ><

 

帰り道のブックオフもキケン

帰り道、顔を上げると「本」の看板。

本を中古お値打ち価格で提供してくれるブックオフです!

本が好きなmにとっては、看板を見たからには入らなければその日一日モヤモヤした気分になってしまう場所です。

そんなわけでほぼ条件反射でブックオフの自動ドアをくぐりました。

 

これといって目的はなかったのですが、まずは「キングオブバンディットJING」がほしかったので購入w

マニアックですねw

昨日絵の話を書いていて見たくなってしまったのです。(mが好きだった絵です)

 

そしてふらふらして……

「ありがとうございましたー」

 

外に出た時にゲットした本を見ると「読んだら忘れない読書術」と、

「本当は怖い宇宙」!!

無目的でふらふら立ち寄ると、買う本までふらふら!(ぉ

一貫性がないですね(^-^;

 

ちなみに「本当は怖い宇宙」はすでに読了w

超新星爆発ダークマター超ひも理論ウラシマ効果といったシュタインズ・ゲート系の話題があって楽しく読ませてもらいました(私、乱読家ですw

 

 

さて、今週はお休みなのでゆっくりのんびりと過ごしますw

 

 

 

Official LINE Account
友だち追加
@hgf7288s