Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@RyotaMurohoshi

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

 この投稿では、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ボタンを押すと、非透過部の形状にそってエッジを自動的に設定してくれます。こちらも合わせて覚えておくことをお勧めします。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?