はじめに

この記事では透過されたpng画像をSpriteにし、Polygon Collider 2Dを使って当たり判定を自動でつけるところまでやります

目次

1. 背景透過画像を用意する
2. Unityにimportする
3. 画像をSpriteに変換する
4. SpriteRendererとPolygonCollider2Dを使う

ターゲット

• ２Dアクションゲーム作りたいけど、当たり判定の作り方がよくわからない
• デザイナーじゃないし2DのAnimationが作れないから画像から当たり判定をつけたい

環境

Mac Mojave : 10.14.6
Unity : 2019.2.4f1
Rider : 2019.1
.Net : 4.x

1.背景透過画像を用意する

まず、元となるSprite画像を用意します。
今回はテストで作ったので、fire alpacaというソフトを使って背景透過のpng画像を描きアニメーションさせました。

今回はこの7枚の背景透過画像を元にします。
このとき注意しないといけないのが、攻撃するときに当たり判定をつけたい画像（武器など）と当たり判定をつけたくない画像（プレイヤー自身）などの出力を分ける必要があるということです

2.Unityにimportする

用意したpngファイルをそのままUnityのAssets内に置く

Assets/Resources/Sprites/Player/Attack3/Weapon

としました。

このままではUnityで使えないのでSpriteに変換していきます。

3.画像をSpriteに変換する

まず、importした画像を全部選択します

次に、Inspectorから、Texture TypeがDefaultになっているのをSprite(2D and UI)にします

Inspectorの下の方にApplyというボタンがあるので、そこをクリックします

すると、pngの画像をSpriteとして扱えるようになりました

4.SpriteRendererとPolygonCollider2Dを使う

ここまでで、透過画像のimportおよびSpriteへの変換が行えました。

最後に、自動でColliderを生成してくれるPolygonCollider2Dを使います。

1. SpriteRendererをAddComponentする
2. SpriteRendererのSpriteに自動でColliderをつけたい画像を設定する
3. PolygonCollider2DをAddComponentする
4. 自動で生成完了

流れはこれだけなのですが、順番が問題でこの順番じゃないとPolygonCollider2Dは自動で生成してくれません。

また、アニメーションさせたくてScriptから連続でSpriteを変更し、自動的にそのSpriteから当たり判定を付与したいときは

private async void Renderer(){
    _spriteRenderer.sprite = _attackSprites[i];
    gameObject.AddComponent<PolygonCollider2D>();
    await UniTask.Delay(50);
    Destroy(GetComponent<PolygonCollider2D>());
}

このようにDestroyメソッドの中にGetComponent()を入れて削除し、またAddComponentで追加し自動生成を行うといっためんどくさい作業をしないといけないみたいです。
エディター上のPolygonCollider2DをResetすれば自動でColliderをつけてくれますが、Scriptから

private void Reset(){
  //hogehoge
}

このように書くと、Resetがoverrideされるみたいで、ここに買いた処理がResetボタンを押した時の処理になるみたいです。

なので、処理は重いですがこういう形にしました。

ちょっとハマったところ

• 画像の出力は全てUI.Imageでやっていたので、SpriteRendererの存在を知らなかったた

もっとこうした方がいいよとかここ間違ってる等ありましたらご指摘ください！