Ragdoll

Greg Pugh氏による人形(rag doll)アプリのチュートリアルです。

https://youtu.be/WxjSnfY0CTU

psd ファイル

アートワークの.psdファイルは、下記のリンクからダウンロードしてください。

http://www.kwiksher.com/tutorials/Kwik4/Ragdoll.zip

.psdファイルのサイズは 768×1024 です.iPad Mini向けの新しいプロジェクトを作成してください.

物理演算の追加

まず,最初に物理環境の設定を行います.Kwikのウィンドウで,PhysicsボタンからEnviroment Propertiesボタンを押してください.以下のように環境を設定してください

Hybridモードで設定されていることに気がつくと思います。人形が完成した時には、これをNormalに変更してください.

  • Hybrid
  • Create virtual walls around the screen
    • Top, Left, Bottom, Right

人形のそれぞれの部分に物理演算を追加する必要があります.頭と体,手足に異なった重さを指定することで,人間に近い状態になります。まず,人形の頭に物理を追加しましょう.

Layersウィンドウで, head レイヤーを選択してください。Physics > Set body propertiesをクリックして、以下のようにプロパティを設定してください:

  • head

    • Dynamic
    • Density 0.5
    • Friction 0.3
    • Bounce 0.2
    • Shape: Circle

次にbodyレイヤーを選択して、以下のようにプロパティを設定してください.

  • body

    • Dynamic
    • Density 1.0
    • Friction 0.3
    • Bounce 0.2
    • Shape: Circle

腕の重さは両腕とも同じ重さのため,両腕の設定を同時に作成します。arm1レイヤーを選択し,次にshiftを押したままarm2レイヤーを選択し,複数選択状態のまま、Set body propertiesをクリックしてください.

以下のような画面が表示されます.

  • arm1, arm2

これによって両腕のレイヤーに同じプロパティを設定することができます.足についてもshiftキーを用い、複数選択で物理を設定してください。

以下のような画面が表示されます.

  • leg1, leg2

    • Dynamic
    • Density 0.3
    • Friction 0.3
    • Bounce 0.2
    • Shape Rectangle

人形のドラッグ

rag dollに重さを負荷できたので,ドラッグして動かすようにします。この例では,頭や手足のどこかをドラッグして、人形が画面中を動くようにします。

レイヤーウィンドウで,headレイヤーを選択し,Kwikウィンドウで Interactions > Drag Objectをクリックしてください.dragHeadと名前をつけてCreateを選択してください.

  • Name: dragHead
  • Layer: head

これと同様のことを他の人形の残りのパーツについても(arm1, arm2, leg1, leg2, body),以下のスクリーンと同じ名前を命名して同様の設定を行ってください.


パブリッシュ

一旦、Publishボタンを押して動作を確認してみます。

2,3秒待つと人形がバラバラになって落ちてきます! 完成させるためには、これらを結合する必要があります.

試しにパーツをドラッグしてみると、スクリーン上で動かせることがわかります。物理の判定エリアが表示されているのが確認できると思います.もし手足の物理判定の形をより適切な形にしたい場合,Physics Editorを利用してください。今回の場合はシンプルなものなので丸と長方形で構成されています。


ジョイント(Joint)ー結合

このrag dollに結合(Joint)を設定します。フォトショップの情報パネルから値を読み取る必要があります。フォトショップの移動(Move)ツールを使い、rag dollの頭を身体が結合しているところに、マウスカーソルを移動させます。Info windowでXとY座標が以下のような値であることが確認できると思います。

この数値が頭と接合する部分の座標になります.

headレイヤーを選択して,Physics > Set joint propertiesをクリックします.Choose connect with bodyとPivotを選択して,情報パネルに表示されているXとY座標と同じ数値を設定します.この場合であれば468と214になります.

結合を各パーツに設定してください。

  • head

    • Connect with body
    • Joint Type: pivot
    • Joint connection point X:468, Y:214

arm1レイヤーを選択して以下のようにプロパティを設定します:

  • arm1

    • Connect with body
    • Joint Type: pivot
    • Joint connection point X:427, Y:241

arm2レイヤーを選択して以下のようにプロパティを設定します:

  • arm2

    • Connect with body
    • Joint Type: pivot
    • Joint connection point X:523, Y:241

leg1レイヤーは次の通りです

  • leg1

    • Connect with body
    • Joint Type: pivot
    • Joint connection point X:429, Y:367

最後にleg2レイヤーは次の通りです

  • leg2

    • Connect with body
    • Joint Type: pivot
    • Joint connection point X:493, Y:367

Publish again

rad dollの中に見える青い線は追加された結合部分です.

確認し終えたら,Physics > Enviroment propertiesからHybridをNormalに変更してください. 完成すると下の画像のようになります:

これは簡単なrag dollをドラッグを可能にし重さを加えるというチュートリアルでした.最初に言った通り,丸や四角ではなくもっと複雑な物理判定を作成するにはPhysics Editorを使う必要があります.rag dollを"パンチ"して倒すようなアプリケーションも作れるので是非トライしてみてください.

Enjoy!

results matching ""

    No results matching ""