# 2D画像の破壊表現が簡単に実装できる「Destructible 2D」 ###### tags: `Unity` `Asset` Unityバージョン:2019.3.0f6 Destructible 2Dバージョン:3.0.6 # はじめに ゲーム中に画像を切ったり穴あけたりが簡単にできるアセットです。動画を見るだけで何ができるか分かり、なんとなく面白いものが作れそうな気がします。 [https://assetstore.unity.com/packages/tools/sprite-management/destructible-2d-18125#releases:embed] デモが豊富にあるので、それを一つずつ見ていきます。 # 目次 # 1.Destructible Sprite ### サンプル クリックするたびに、クリックしたときに表示される画像の形にオブジェクトをくり抜きます。 ![](https://i.imgur.com/K8M5KnM.gif) ### 実装 #### 穴をあけられる画像 「穴をあけたい画像オブジェクト>SpriteRendererの一番右端のアイコン>Make Destructible」を選択します。 ![](https://i.imgur.com/oNuHqlN.png) 選択すると、「D2D Destructible Sprite」が追加されます。 ![](https://i.imgur.com/FWMPve0.png) #### 穴をあける画像 空のオブジェクトを作成し、「D2D Click To Stamp」を追加します。 ![](https://i.imgur.com/k9tQQDa.png) クリック時に表示する画像プレハブを作成し、 ![](https://i.imgur.com/LjJgVev.png) ![](https://i.imgur.com/6lsY8SF.png) 先ほど作成したオブジェクトの「D2D Click To Stamp>Indicator Prefab」に設定します。 ![](https://i.imgur.com/XqruugP.png) これでクリック時に画像が表示されるようになります。 この段階ではまだ穴をあけることはできません。 次に、先ほど作成したオブジェクトの「D2D Click To Stamp>Sharp」にマスク用画像を設定します。 ![](https://i.imgur.com/QdiuyS7.png) ![](https://i.imgur.com/Sl1g3iW.png) これで完成です。 # 2.Optimize Sprite このデモではスプライトの最適化が説明されています。 最適化するとパフォーマンスが良くなる代わりに、見た目の品質が悪くなるらしいです。 ![](https://i.imgur.com/WHWIw4L.gif) 最適化するには、「D2D Destructible Sprite」の「Optimize」をクリックします。 ![](https://i.imgur.com/Xm77kCD.png) 元に戻すには「Rebuild」をクリックします。 # 3.Edge Collider ### サンプル 画像の変形にあわせてコライダーを変形させます(動かないオブジェクトに適用)。 ![](https://i.imgur.com/aOZXHuU.gif) ### 実装 「D2D Destructible Sprite」の「Edge Collider」をクリックすると、 ![](https://i.imgur.com/BEoZqpd.png) 自動でコライダーが作成されます。 ![](https://i.imgur.com/DNUdqp7.png) これだけ。 # 4.Polygon Collider ### サンプル 画像の変形にあわせてコライダーを変形させます(動くオブジェクトに適用)。 ![](https://i.imgur.com/R3JyMJD.gif) ### 実装 「D2D Destructible Sprite」の「Polygon Collider」をクリックすると、 ![](https://i.imgur.com/H6NYJXv.png) 自動でコライダーが作成されます。 ![](https://i.imgur.com/aHidNRF.png) 「Rigidbody 2D」は手動でつける必要があります。 # 5.Splitter ### サンプル 画像が分割されたとき、それぞれの画像を別オブジェクトとして扱えるようにします。 ![](https://i.imgur.com/yxi1MxM.gif) ### 実装 「D2D Destructible Sprite」の「Splitter」をクリックすると、「D2D Splitter」が追加されます。 ![](https://i.imgur.com/sOHxmrh.png) あとは「Polygon Collider」なり「Rigidbody 2D」を追加すればOKです。 # 6.Slice ### サンプル ドラッグで画像を破壊できるようにします。 ![](https://i.imgur.com/txRmvzS.gif) ### 実装 空のオブジェクトを作成し、「D2D Drag To Slice」を追加します。 ![](https://i.imgur.com/NnTn6Ye.png) あとは「D2D Click To Stamp」と同じように「Indicator Prefab」と「Shape」を設定します。 ![](https://i.imgur.com/7SR1doW.png) # 7.Transparency ### サンプル 半透明のオブジェクトを破壊できるようにします。   ![](https://i.imgur.com/zLEY2HE.gif) 半透明の画像にそのまま「Polygon Collider」を適用すると、こんな感じでおかしくなるようです。 ![](https://i.imgur.com/wxlyurt.png) ちなみにサンプルで破壊している画像はこんな感じで、 ![](https://i.imgur.com/8L9qGPW.png) 後で使用する、破壊範囲を設定するための画像がこんな感じです。 ![](https://i.imgur.com/3lJrSTb.png) ### 実装 「D2D Destructible Sprite>Shape」にアルファ値を設定していない破壊範囲を設定するための画像を設定します。 ![](https://i.imgur.com/X3FtbKn.png) この状態で「Polygon Collider」を適用すると、コライダーが正常に作成されます。 ただし画像のアルファ値が無視されてしまいます。 ![](https://i.imgur.com/M9Z7CN5.png) なので、次に「Sprite Renderer>Material」に「Keep Alpha」を設定します。 ![](https://i.imgur.com/KWPQ33G.png) これで、コライダーも画像も正常になります。 ![](https://i.imgur.com/dwmQhkx.png) # おわりに [リンク名:embed] [リンク名:title] ```cs using UnityEngine; ``` >引用 > 1. 2. 3.