空から大量にコインを降らせようとしたら爆散した話

こちらは Unity #2 Advent Calendar 2020 の 1日目の記事です 🎅

背景

kintone hack 2019やCybozu Days 2020で、kintoneのアプリのデータをUnity内で可視化するプロジェクトを披露してきました。

このプロジェクトの中でも自分が気に入ってるのは、kintone内の案件管理データベースから直近の売上金額を集計し、売上の分だけプレイヤーの目の前にコインを大量に降らせるという、ファンキーでリッチなデータ可視化方法でした。

金だー！金だー！

実はこの大量コイン生成を実現するのに何回か失敗したので、この記事ではコインの降らし方について案内をします。なお、kintoneからデータを取得する方法については別記事で書き上げているので、この記事では割愛します。

コインを生成してみた

コインをUnityの環境内に生成するのは簡単です。生成したいオブジェクトをprehabとして準備し、Instantiateすれば生成されます。Instantiateする際の角度はランダムになるように調整もできます。

Vector3 CoinPosition = new Vector3(0,3,0);
float CoinRotationX = Random.Range(0.0f,360.0f);
float CoinRotationY = Random.Range(0.0f,360.0f);
float CoinRotationZ = Random.Range(0.0f,360.0f);
Instantiate(CoinPrefab, CoinPosition, Quaternion.Euler(CoinRotationX,CoinRotationY,CoinRotationZ));

コツン⌒☆*

簡単ですね。では、これを大量に降らせるようにコードをいじってみましょう。

コインを複数生成してみた

コインを複数生成するので、単純にループ処理でInstantiateすれば良いのかなっと思ってforループで実装してみました。これでコインが連続でチャリンチャリーンっと滝のように流れてくるはずです。

int NumberOfCoins = 100;

for(int i=0; i<NumberOfCoins; i++)
{
    Vector3 CoinPosition = new Vector3(0,3,0);
    float CoinRotationX = Random.Range(0.0f,360.0f);
    float CoinRotationY = Random.Range(0.0f,360.0f);
    float CoinRotationZ = Random.Range(0.0f,360.0f);
    Instantiate(CoinPrefab, CoinPosition, Quaternion.Euler(CoinRotationX,CoinRotationY,CoinRotationZ));
}

(　ﾟдﾟ)

(つд⊂)ｺﾞｼｺﾞｼ

(；ﾟдﾟ)

(つд⊂)ｺﾞｼｺﾞｼ
　　
（；ﾟ Дﾟ） …?! what?

爆　☆　散

爆散しました・・・何が起きたんでしょうか・・・おそらく同じ場所にBox Colliderがついているオブジェクトが一瞬に生成されたことで、オブジェクト同士が反発してしまい、爆散してしまったんだと思います。最初からクライマックスですね。

コインの生成位置をずらしてみた

ほぼ同じタイミングで特定の位置にコインが生成されるとコイン同士が反発しあって爆散するので、コインの生成位置を1つ1つずらしながら生成すれば良いのでは？という考えで実装をさらに進めてみましょう。位置をずらすけれど、だいたい同じエリアに生成させたい・・・となると螺旋状に降らせるのが良いかもしれません。

簡単な実装方法として、X軸とY軸をAdjuster変数で少しずつずらして、一周したらY軸を少しあげるようにしてみました。キレイな螺旋ではありませんが、爆散を防ぐには十分だと思います。

int NumberOfCoins = 100;

Vector3 AdjusterA = new Vector3(0.25f, 0, 0);
Vector3 AdjusterB = new Vector3(0, 0, 0.25f);
Vector3 AdjusterC = new Vector3(-0.25f, 0, 0);
Vector3 AdjusterD = new Vector3(0, 0.5f, -0.25f);

Vector3 CoinPosition = new Vector3(0,3,0);

for(int i=0; i<NumberOfCoins; i++)
{
    switch (i % 4)
    {
        case 0:
            CoinPosition = CoinPosition + AdjusterA;
            break;
        case 1:
            CoinPosition = CoinPosition + AdjusterB;
            break;
        case 2:
            CoinPosition = CoinPosition + AdjusterC;
            break;
        case 3:
            CoinPosition = CoinPosition + AdjusterD;
            break;
    }
    float CoinRotationX = Random.Range(0.0f,360.0f);
    float CoinRotationY = Random.Range(0.0f,360.0f);
    float CoinRotationZ = Random.Range(0.0f,360.0f);
    Instantiate(CoinPrefab, CoinPosition, Quaternion.Euler(CoinRotationX,CoinRotationY,CoinRotationZ));
}

ドバドバドバドバドバー⌒☆*

コインが爆散してませんし、これは中々良い感じにコインを降らせたのではないでしょうか。

コインの生成タイミングを遅らせてみた

実は先程のコインを降らせる方法に欠点がありました。

カメラが小さな範囲しか捉えてないのであればこの方法でも良いんですが、生成するコインが増えれば増えるほどコインがタワーのように高くなってしまいます。

少しズームアウトして全体を見てみましょう：

30コインの場合↓

100コインの場合↓

300コインの場合↓

んー、これは見た目がかなり悪いですね。

4コインごとにY軸の値を増やしてるので、コインが増えたら当然その分コインのタワーは高くなります。

Y軸という「位置」をずらすことにより爆散を防いでいたのですが、こんどは生成する「時間」をずらしてみましょう。UnityではWaitForSeconds() 関数を使用すれば、コインとコインが生成される間にディレイを設定することができ、例え同じ位置に生成されても先に落ちたコインと次に落ちるコインがぶつからないように調整することが可能です。なお、WaitForSeconds() 関数はcoroutineの中でしか使用が出来ないので、下記のように関数化して修正する必要があります。Y軸の修正も忘れずにしておきましょう。

void Start()
{
    StartCoroutine("InstantiateCoinsWithDelay");
}

private IEnumerator InstantiateCoinsWithDelay()
{
    int NumberOfCoins = 100;

    Vector3 AdjusterA = new Vector3(0.25f, 0, 0);
    Vector3 AdjusterB = new Vector3(0, 0, 0.25f);
    Vector3 AdjusterC = new Vector3(-0.25f, 0, 0);
    Vector3 AdjusterD = new Vector3(0, 0, -0.25f);

    Vector3 CoinPosition = new Vector3(0,3.5f,0);

    for(int i=0; i<NumberOfCoins; i++)
    {
        switch (i % 4)
        {
            case 0:
                CoinPosition = CoinPosition + AdjusterA;
                break;
            case 1:
                CoinPosition = CoinPosition + AdjusterB;
                break;
            case 2:
                CoinPosition = CoinPosition + AdjusterC;
                break;
            case 3:
                CoinPosition = CoinPosition + AdjusterD;
                break;
        }

        float CoinRotationX = Random.Range(0.0f,360.0f);
        float CoinRotationY = Random.Range(0.0f,360.0f);
        float CoinRotationZ = Random.Range(0.0f,360.0f);
        Instantiate(CoinPrefab, CoinPosition, Quaternion.Euler(CoinRotationX,CoinRotationY,CoinRotationZ));
        yield return new WaitForSeconds(0.1f);
    }
}

ぽこぽこぽこぽこー⌒☆*

良い感じですね。円を描きながら(いや、実際は四点を順番に回ってるだけなので四角か)、コインとコインの生成の間にディレイを入れているので、爆散せずに済んでいます。

コインをさらに自然に生成してみた

いや、自然にコインを生成するってなんやねん ( ´Д｀)っ))Дﾟ)・∵.

っと思いながら書いてますが、ようは雨が降るようなイメージでコインを降らしてみたいんですよね。

なのでコインの人工的な螺旋状の降り方を一旦やめて、自然界での天気のように「特定のエリア内に」かつ「ランダムな場所に」かつ「ランダムな間隔で」コインを降らせようと思います。

void Start()
{
    StartCoroutine("InstantiateRandomCoins");
}

private IEnumerator InstantiateRandomCoins()
{
    int NumberOfCoins = 300;
    Vector3 CoinPosition = new Vector3(0,0,0);
    
    for(int i=0; i<NumberOfCoins; i++)
    {
        CoinPosition = new Vector3(Random.Range(0,1.6f),Random.Range(4.0f,4.8f),Random.Range(0,1.6f));
        float CoinRotationX = Random.Range(0.0f,360.0f);
        float CoinRotationY = Random.Range(0.0f,360.0f);
        float CoinRotationZ = Random.Range(0.0f,360.0f);
        Instantiate(CoinPrefab, CoinPosition, Quaternion.Euler(CoinRotationX,CoinRotationY,CoinRotationZ));
        yield return new WaitForSeconds(Random.Range(0.01f,0.07f));
    }
}

雨っぽく見えるように、ついでに雲のオブジェクトも配置してみました。どうでしょうか、少しは自然界の雨のように見えますでしょうか。人工的なコインを大量に降らせてるから雨もくそもないんですけどね。アハハ。自分でも何作ってんのか良くわからんです。

「雨なんて降って・・・」

「いや」「雨だよ」

参考

今回の記事に使用したアセットや参考資料です

• コインのアセット: Medieval Gold
• 女の子のアセット: Free Voxel Girl
• 雲のアセット: 3LE Low Poly Cloud Pack
• 参考Qiita記事1: UnityからkintoneのREST APIを叩く方法
• 参考Qiita記事2: kintoneアプリに溜めたゲームスコア情報をUnity内に表示させる