【Unity漢レシピ】 オブジェクトをバラバラに破壊したい！

漢レシピとはッ…！ 男の子が好きそうなUnityでのTipsを紹介していこうという企画です。もちろん女の子も好きですよね。 私が初心者のころにやりたくて調べたことなんかをこちらでも紹介したりなど、気がついたものを書いていきたいと思います。

記念すべきUnity漢レシピ、第一弾は…

オブジェクトをぶっ壊してバラバラにしたいッ！

創造とはッ！ 破壊ッ！ 破壊とはッ！ 創造ッ！ Unity2Dでの破壊表現の一つとして、スプライトをバラバラにしてぶっ飛ばすというシンプルなものを作ってみたいと思います。

まずは画像を用意

画像であればなんでも良いのでなにか1つ用意しましょう。 今回は手頃ないらすとやさんから、ビルを1つお借りしてきました。

www.irasutoya.com

オブジェクトの準備

画像のインポート

画像をUnityに早速いれておきましょう。読み込みタイプはちゃんとSpriteになっていることを確認してください。

画像のスライス

スライス？いきなりこいつは何を言っているんだとお思いかもしれませんが、字のごとく画像をカットしていきます。

よくある破壊表現をかんたんに再現するには、オブジェクトをあとからバラバラにするというのではなく、バラバラにした画像を組み合わせてオブジェクトを完成させるというアプローチを行います。 例えるならジグソーパズルのようなものです。1枚の絵を貼ってからそれをジグソーパズルのピースに分解するのは難しいですよね？ でも、最初からジグソーピースを作って絵を完成させているのであれば、後ろから軽く叩いてあげればまたバラバラのピースに戻すことができるというわけです！

リアルな破壊表現をしたい等の場合は、画像をスライスしてからインポートして組み合わせるやり方も多いのですが単純な四角形に割れるぐらいであればUnityのスライス機能で十分可能です。今回はUnityの機能に甘えてしまいましょう。

まずスライスしたい画像を選択して、 Sprite Mode で Multiple を選択します。Applyボタンを押して反映しておきましょう。 これでスライスするための準備が整いました。

スプライトの編集などはSprite Editorから行うことができます。Sprite Editorボタンをクリックして開きましょう！

よく見るスプライトエディター画面が開きました。 左上の Slice をクリックしてスライスのためのメニューを開いていきましょう。 ちなみに自分で画面のスプライトをドラッグしてあげれば任意の形に切り取ることも可能です、均一でない形で切り取りたい場合などはそちらを使っても良いですね！

スライスのためのメニューが開きました。 今回はテストも兼ねているので機械的にセルサイズを指定して切ってしまいましょう。

Type でどのように画像をスライスするかの種類を選択します。今回は Grid By Cell Size を選択しましょう。

Pixel Size では、1パーツあたりのセルのサイズを決めます。（ジグソーパズルの1ピースの大きさのようなイメージ） 今回は 125x128 と少し大きめにカットして試してみましょう。

※ サイズがいびつなのは借りてきた画像の大きさにあわせているだけなので、適宜調整してくださいね！

設定が済んだら Slice ボタンをクリックしてスライスを実行します。

確認してみると、横4、縦5の20ピースに分割されていることがわかります。 こいつらをぶっ飛ばしてあげれば破壊表現ができそうな気がしてきましたね！ 右上の Applyをクリックして反映しておきます。

これで準備は整いました！ いよいよ組み立てていきましょう。

パーツを組み立てる

さて、破壊後のパーツを先に作成しました。いわばジグソーピースが手元に揃った状態です。 では、次に何をするか…？ もちろん組み立てですね！ 複数のオブジェクトが並ぶので親となる空オブジェクトを1つ作っておきましょう。

さぁ、あとは楽しい組み立てのお時間です。 さきほど分割したスプライトがそれぞれのパーツごとに分かれているので1個ずつおいていきながら元のオブジェクトを組み立てていきましょう。

分割する前の画像を透過かけて下絵としておいておくと組み立てやすくなるのでおすすめです。

さぁ、コツコツと組み立てていくと…元の絵が完成！

どっからどう見てもビルです！ さぁ、いよいよこれをぶっ壊していきましょう！！！！

スクリプトの準備

せっかくパーツで区切ったオブジェクトを作ったのですから、やりたいことはもちろん 破壊 ですよね？ ならばスクリプトを書いて破壊してあげましょう！

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Test : MonoBehaviour
{
    // 自身の子要素を管理するリスト
    List<GameObject> myParts = new List<GameObject>();

    // Start is called before the first frame update
    void Start()
    {
        // 自分の子要素をチェック
        foreach(Transform child in gameObject.transform) {

            // ビルパーツに Rigidbody2D を追加して Kinematic にしておく
            child.gameObject.AddComponent<Rigidbody2D>();
            child.gameObject.GetComponent<Rigidbody2D>().isKinematic = true;

            // 子要素リストにパーツを追加
            myParts.Add(child.gameObject);

        }
    }

    // Update is called once per frame
    void Update()
    {
        if (Input.GetMouseButtonDown(0)) {
            Explode();
        }   
    }

    void Explode() {

        // 各パーツをふっとばす
        foreach(GameObject obj in myParts) {

            // 飛ばすパワーと回転をランダムに設定
            Vector2 forcePower = new Vector2(Random.Range(-10, 10), Random.Range(-10, 10));
            float torquePower = Random.Range(-10, 10);

            // パーツをふっとばす！
            obj.GetComponent<Rigidbody2D>().isKinematic = false;
            obj.GetComponent<Rigidbody2D>().AddForce(forcePower,ForceMode2D.Impulse);
            obj.GetComponent<Rigidbody2D>().AddTorque(torquePower, ForceMode2D.Impulse);
        }
    }
}

このスクリプトを、ビルのRootオブジェクトにアタッチします。

さぁ、画面をクリックして爆発させてみましょう…！！！

やりました、ちゃんと爆発して散っていきました！

現在、オブジェクトにかける力がすべてランダムなので自然な飛び方はしていませんが、あとは力のかけ方をかえればアレンジし放題です。

たとえば、中心点からのパーツの位置をみて、ベクトルを作って外側に飛ばしてあげれば中心からの爆風で吹っ飛ぶような演出も可能です。さらにそれに爆発エフェクトなどをつけてやれば…？

すごく良い感じになりました！

このように、オブジェクトの破壊表現を行いたいときはそれぞれのパーツにわけて組み上げてからそれをバラバラに吹っ飛ばすというアプローチをとると比較的カンタンに作ることが可能です。 現在は真四角に切れているので違和感が大きいですが、フォトショップやペイントソフトなどで各部位にギザギザにパーツ分けしてあげて組み立てると更に自然な爆発を再現することが可能になります。

ゲーム表現をよりリッチにする破壊表現、ぜひ何かに入れてみてください！

assetstore.unity.com 使用した爆発エフェクト