技術ブログ カテゴリ: アニメーション

カスタムビルド解像度設定がリビルドで変更されない場合の対処

Unityでカスタム解像度を使ってビルドするとき、選択された会社名とアプリ名にリンクされたその解像度でプレーヤー設定ファイル を作ります。 問題は、その後そのカスタム解像度を変更してプロジェクトを再構築したい場合でも、古いプレーヤー設定ファイルがあるコンピューターに表示されるものが一度設定した解像度になることです。

たとえば、解像度を800×600のカスタムサイズに設定してビルドした場合は、このようになります:

後でカスタム解像度を1920×1080に変更して再ビルドしても、同じ800×600の解像度が表示されます。

その解像度を適切な解像度に設定するには、2つの方法があります:

最初の方法は、ビルドプレイヤー設定に新しい会社名を設定することです。 その後、その名前であなたのシステムに新しいプレイヤー設定フォルダを作成します。

二番目の方法は、レジストリファイル内の設定フォルダを見つけて削除することです。 そのようにあなたの新しい解像度設定のファイルを作成します。 そのファイルはレジストリエディタのHKCU / softwareの中にあります。

Unity3D+IK(Inverse Kinematics)のAnima2Dチュートリアル

Blogをいつもご覧いただきありがとうございます。

前回は「Unity3D+Anima2Dチュートリアル」というテーマの記事を投稿しました。

今回はAnima2dのInverse Kinematicsについて説明したいと思います。

Inverse Kinematicsとは何ですか？

Anima2Dには、Inverse Kinematicsのコンポーネントがあります。これを使い、親関係のボーンオブジェクトの子供を動かすと、親も連動し動きます。

例を挙げると、腕と肩の関係のようなものです。（以下省略”IK”です）。

シンプルなアニメーションは、ボーンをいじるだけで充分ですが、もしアニメーションが複雑な場合はかなり時間がかかると思います。

そういう場合は「IK」が便利です。移動させたいボーンを「IK」と繋げればこのボーンのチェーンを丸ごと動かすことができとても便利です。

 

IKの種類は？

 

Anima2DのIKには，IK CCDとIK Limb という2種類のIKがあります。

IL Limbは骨を2本しかコントロールできません、余弦定理ですので、今回の場合手足に利用します。

IK CCD は設定に応じて、最大コントロールできる本数がルートボーンまでの全部の骨をコントロールすることができます。今回の場合頭と尻尾に使います。

 

では、前回の引継き、IKの使い方を説明します。
IKをの使い方を説明する前に、先ずAnima2Dの効率をアップでさせる機能を紹介したいと思います。

「PoseManager」というものです。

使い方はとても簡単です。下記の画像のように、前回の「牛」のオブジェクトに「Pose Manager」を入れれば、使えるようになるはずです。

そして、「Create new pose」をクリックしたら、今のスプライトのポジションとローテーションがセーブできます。

一つの「Idle」のポーズを「Save」をクリックしてから、後はどんな調整しても、ただ「Load」ボタンをクリックしたら、最初設定のポーズに戻れます。（ちなみに、「Save」はオーバライドしますので、ご注意ください。）

「Pose Manager」の使い方はここまでです。

それでは、「IK」の使い方の説明に入りましょう。

Step 1:　IKをクリエイトします

「牛」のオブジェクトの中に、もう一個の空のオブジェクトを作って、名付け「IK」です。

下記の画像のようにそのオブジェクトに右クリックして、「2D Object」→「IK Limb」をクリックしたら、「IK」が出ます。

では、「IK」のパラメータを説明しましょう。

  • Record：アニメーションモードの間，ボーンのキーフレームを記録します。
  • Target​： IKが適用されるボーン。
  • Weight：​IKのポーズに対する影響度。
  • Restore Default Pose： 計算を実行する前に最初のポーズを設定します。
  • Orient Child：ターゲットの子ボーン（使用可能な場合）をIKローテーションに回転させます。
  • Num bones​：IKの影響を受けるボーンの数．最大はルートボーンまで。
  • Iterations​： solverの反復回数。
  • Damping​：ソルバのステップ速度を制御する．値が小さいと変化が見やすい，大きいと変化が見にくいです。Dampingの値が大きければ、もっと自然に見えるかもしれません。

 

Step 2:「IK」をコントロールしたい関節に配置します

下記の画像のように、三つの「IK」をクリエイトして、分かりやすい名前を付けてから、それぞれにコントロールしたいところに置いてください。

上記の説明の通り、「頭」の部分には、使っているのはIK CCDです。

お気付きだとおもいますが、このグレーのリングを自分が望んでいる所に配置しても、スプライトはまだコントロールできません。

なぜかというと、下記の画像表示の通りに、右側の「Inspector」の「Target」はまだ「None」になっていますので、コントロールできるオブジェクトはまだありません。

では、「Target」に相応の「Bone」オブジェクトに入れてみてください。

設定が終了したら、グレーのリングは青のリングに変わります。

では、下記の画像の手順通りにすれば、左側のコントロールしたい「IK」のオブジェクトをクリックして、右側のリングを移動したら、「牛」全身が一緒に動きます。

注意点：偶にリングを移動しても、欲しい角度に合わせられない場合があったら、下記の画像の状態で「IK」の「Inspector」の「Filp」のチェックを入れてから、もう一度調整すれば、合わせられると思います。

適用後の図：

これで、「IK」のリングを弄れば、簡単に関節が調整できるようになりました。

複雑なボーンが入っているスプライトでは、「IK」はとても役に立ちます。

今回のインバース キネマティクス(IK)の使い方はここまでになります。

では皆さん、次回の内容をご期待ください！

Unity3D+Anima2Dチュートリアル

Blogをいつもご覧いただきありがとうございます。
先日、「Unity+Myo(ジェスチャーを活用して牛乳を搾るゲームを作りました)」というテーマのブログを発表しました。

下記のURLはゲームの映像です。
https://www.youtube.com/watch?v=4Jz7y1n3Iec

その中の「牛」はAnima2Dプラグインを利用して制作しました。Anima2Dの使い方のチュートリアルとして今回はAnima2Dを利用して「牛」を動かしてみましょう！

Anima2Dのメリットは？
  • Unity3Dのアニメーションと同じ感覚で2Dキャラクターが動かせます。
    • スキニングとBoneが付くアニメーションを作ることができます。
    • Spriteの各頂点編集することができます。
    • 全部アニメーション（Unity3Dの標準機能）でコントロールすることができます
Step1　Anima2Dをインストール
  • AssetStoreからAnima2Dを検索し、ダウンロードしてから、インポートをしてください。
Step2 「牛」の画像を分割

上記の画像はまだ分割していない状態です。

ゲームでは「頭」、「足」二本、「体」を分けたいので、こちらで「Gimp2」でこの４つの部分を分割しました。

そして、分割した画像をUnityにインポートして、下記の状態になりました。

画像のInspectorのTexture TypeをSprite (2D and UI)に変更するのを忘れないで下さい。

これで、下準備は完了です。

Step3　SpriteMeshを作る

ここから本番ですね。先用意した画像を選択して、右クリックしてSpriteMeshが作れます。( Create→Anima2D→SpriteMesh)

上記のステップで、拡張子が「asset」のファイルができると思います。保存先が分からなくなってしまわぬよう独立のフォルダーを入れるとよいと思います。

Step4　SpriteMeshをSceneに配置

これから、作り上げたSpriteMeshをシーンに配置します。

まず、シーンにempty GameObjectを作って、この中で二つ空のGameObjectを作ります。下記の画像ご参考までに。

そして、SpriteMeshを一個ずつBodyのGameObjectに入れます。（一気に全部選択しても一個ずつしか入りませんので）

全部入れて、元「牛」の四肢のようにポジションを調整したら、下記の画像のようになるかと思います。

Step5　SortingLayer、OrderLayerの調整

ですが、牛の頭が体に隠れてしまってるように見えますので、そこで、OrderLayerの順位を調整します。

  • 先ず、SpriteMeshのSortingLayerを全部同じにします。SpriteMeshのオブジェクトを選択して、右側は下記のようにします。

デフォルトの状態で全部のSpriteMeshのOrderLayerは0になっていますので、一番前に表示したい物のLayerの順位を0より大すると前面に表示できます。

今回の場合は牛の頭を体の前に表示しようと思いますので、頭のオブジェクトを選択して、OrderLayerは1にすれば、一番前に表示できるようになると思います。

これで、SortingLayerとOrderLayerの説明は維持上です。

Step6　Boneを入れる

これがAnima2Dのとても大事な機能です。スプライトに骨を付けることができます。

先ず、先ほど作ったBoneというゲームオブジェクトに右クリックしてください。

下記の画像のように選択します。

こうすれば、新しいBoneオブジェクトがインスタンスされます。自分が分かりやすい名前を決めてください。

そして、「Torso」の中で頭、両足の2DBoneを作って、針みたいなものを相応の所に配置します。

注意点：上記の赤い箇所で示している所は「骨」の長さです、スプライトの大きさに相応して決めてください。

そして、BoneとSpriteMeshを繋げましょう！

下記の画像の通りにそれぞれのBoneオブジェクトをSpriteMeshのSet bonesの所に入れます。

注意点：繋げたくない部分があれば、右クリックで削除してください。

これで、BoneとSpriteMeshは繋がりました。

とは言え、Boneを動かしてみたら、Meshの方は全然ついて来きません。それはなぜでしょうか？次のステップで解決していきます。

Step7　SpriteMeshはBoneと一緒に動かす

SpriteMeshはBoneと一緒に移動できるようにする場合は、先ず、移動させたいSpriteMeshを選択したまま、「Window」をクリックしてください。そして、「Anima2D」→「Sprite Mesh Editor」を押してください。

開いたら、下記の画面が表示します。

注意点：赤い箇所は頂点の数がコントロールできます。今回はデフォルトの設定で十分だと思いますので、デフォルトのままで行きます。

次は「Bind」の方に進みましょう。

設定する前に、先ず右下の「Overlay」をチェックしてください。そして、影響範囲が可視化されてもっとわかりやすくなるのでしょう。

次は右上の「Apply」を押したら、MeshとBoneは一緒に動かすことができるはずです。

全部上記の設定が完了すると、牛の頭を移動しても体のSpriteMeshも一緒に連動して動きます。

次回はインバース キネマティクス(IK)の使い方を説明したいと思います。

Davinci Resolveで黒の余白なくビデオを出力する方法

Youtubeに動画をアップする場合、無償で使える強力な編集ソフトとして、
DaVinci Resolve 15　があります。
（ダウンロードリンクは下記ページの最下部にあります。）

When you want to edit videos before uploading them to Youtube for example, you can use Davinci Resolve 15,
a powerful editing software that can be used free of charge.
(The download link is at the bottom of the page below.)

https://www.blackmagicdesign.com/jp/products/davinciresolve/

DaVinci ResolveインストールしてYoutube用のムービーを書き出しした際にはまった箇所があり、その解決方法をシェアしたいとおもいます。
トラブルとしては、解像度を指定してビデオを書き出したかったのですが、出力した映像に下記のような上下に黒い帯が入ってしまうというケースです。

When I uploaded a movie to youtube after editing it with DaVinci Resolve, I found an issue and I would like to share the way i solved it.
The issue was that I wanted to export a video with a specified resolution, but there was a case where black bands would appear at the top and bottom of the output video as shown below.

Output_Ng_Case
Output_Ng_Case

調べた結果、プロジェクトセッティングの解像度の設定が適切でなかったのが原因でした。
I noticed that the resolution setting in the project settings was not correct.

解決方法と手順を下記に記します。
※今回は問題を再現する為にイレギュラーな解像度（2048×1023）のイメージを利用しています。
Here is the solution I found.
※I used an image with an irregular resolution (2048×1023) to reproduce the issue.

1.タイムラインに配置されているフッテージ素材の解像度を確認します。
Check the resolution of the footage material placed on the timeline.

video_info
video_info

2.File>Project Setting…を開きプロジェクトの解像度を設定します。
File>Project Setting… and set the resolution of the project.

prj_setting_menu
prj_setting_menu

３.Timeline resolutionをCustomに変更して、解像度を素材の解像度と同じに（2043x1023px:ご自身の状況に応じて変更してください。 ）設定します。

Change the timeline resolution to the same resolution than the material(2043x1023px in that example. set your own resolution that you want to).

prj_setting_detail
prj_setting_detail

４.Davinci Resolve下の方のDeliverタブ（➀）をクリックしてビデオの出力設定を開きます。
②Individual Clipsを選択
③Videoタブを選択
④出力フォーマットを選びます。
⑤Render at source resolution　を選択します。

Click the Deliver tab under Davinci Resolve window（➀） to open the video output settings.

②Go to Individual Clips
③Select the video tab
④then set the output format
⑤and select the Render at source resolution option

OutPut_Settings
OutPut_Settings

上記の設定が終わったら、Add to Render Queueボタンを押して、
レンダーキューに追加して、レンダーを行います。
Finally press the Add to Render Queue button.

以上で下記のような余白がないビデオが出力が可能となります。
You should now be able to output the video correctly.

Output_Ok_Case
Output_Ok_Case