3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Sprite EditrのEdit Physics Shapeを使って、SpriteのColliderエッジを調整する

Last updated at Posted at 2018-01-29

 この投稿では、Unityゲームエンジンにおいて、Sprite EditrのEdit Physics Shapeを使って、SpriteのColliderエッジを調整する方法を紹介します。

 次の画像はSpriteRendererにPolygonColliderを付与した様子です。Colliderのエッジは画像の淵に設定されています。

sprite_renderer_2.PNG

 次の画像はTilemapにTilemapColliderとCompositeColliderを付与した様子です。ColliderのエッジはTileの淵に設定されています。

tile.PNG

 このColliderの形状では、画像中の壁にキャラクターなどが埋まってしまうように見えてしまい問題があります。Colliderのエッジを画像やTileのふちではなく、次の画像のようにSprite中の壁に沿うように設定したいです。

 改善後のSpriteRenderer。

sprite_renderer.PNG

 改善後のTilemap。

tile2.PNG

 これを実現するには、Sprite EditrのEdit Physics Shapeを使って、SpriteのColliderエッジを調整すれば可能です。

 Project Windowで対象画像を選択、Inspector上のSprite Editorボタンを押し、Sprite Editr Windowを開きます。

キャプチャ.PNG

 そしてSprite Editor Windowの左上部「Spite Editor」というタブを押し、ドロップダウンよりEdit Physics Shapeを選択してください。

キャプチャ1.PNG

そうすると次のようにEdit Physics Shapeモードになり、Spriteの四隅に白い四角が表示されます。

キャプチャ3.PNG

 この白い四角と白い四角が結ぶ線がColliderのエッジとなります。この白い四角を次のGifのように動かしApplyボタンを押すことで、Colliderのエッジを調整できます。

SpriteEditorShapePhysics.gif

 次のSpriteのColliderのエッジを調整しましょう。この画像の場合はColliderの頂点が4個ではたりません。頂点を追加するには、この白い四角と白い四角が結ぶ線の間をクリックすると頂点を追加することができます。

SpriteEditorShapePhysics.gif

 このようにSprite EditrのEdit Physics Shapeを使って、SpriteのColliderエッジを調整することで目的のColliderの形状を得ることができます。

tile2.PNG

 また透過背景をもつSpriteであれば、Snapボタンを押すと、非透過部の形状にそってエッジを自動的に設定してくれます。こちらも合わせて覚えておくことをお勧めします。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?