のののーと

ライフワークとライスワークの割合

Unity : コンボの演出表現

コンボした時の演出をつくってみた。こんなの。

f:id:nonoui:20170905221626g:plain

メイキング

上のgif画像みたいになるまでの過程をメモしていこうと思います。

コンボとは

今回,コンボを「何かしらのアクションが連続的に行われた時のカウンター」とします。とすると、最低限実装すべきものは「カウンター」 ですよね...?

んじゃとりあえず変数用意してインクリメント。

f:id:nonoui:20170904235206g:plain

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

public class ComboSystem : MonoBehaviour {
    [SerializeField] string comboWord;
    [SerializeField] GameObject comboObj;
    Text comboText;
    RectTransform comboRectTrans;
    int counter = 0;

    void Awake() {
        comboText = comboObj.GetComponent<Text>();
        comboRectTrans = comboObj.GetComponent<RectTransform>();
    }

    public void IncreaseCombo() {
        counter++;
        UpdateCombo(counter);
    }

    /// <summary>
    /// コンボの更新.
    /// </summary>
    /// <param name="comboCount">コンボ数</param>
    void UpdateCombo(int comboCount) {
        Show();
        comboText.text = comboCount + comboWord;
    }

    void Show() {
        comboText.enabled = true;
    }

}

文字のスケールを拡大縮小

コンボとしての役割は果たしているのであとは演出を凝る。文字の大きさを大→小に変化させることでインパクトある感じに。実装方法はコルーチンとAnimationCurveを使いました。参考記事Unityで対象のポイントへ等速で動かす - テラシュールブログ

f:id:nonoui:20170905221652g:plain

一定時間コンボが増えない場合の処理

コンボが発生した時、ある程度時間経っても増えない場合はコンボ数をクリアするようにします。

f:id:nonoui:20170905221705g:plain

文を傾ける

数字と大きさの変化だけじゃなんか物足りない... そこで毎回ランダムに文を傾けるようにします。個人的こだわりポイント。この時点でほぼ実装完了って感じ。

f:id:nonoui:20170905221718g:plain

段階的に表示する

あとはプラスアルファ。 ぷよぷよとかパズドラ見たいに段階的にコンボが増える仕様なら大丈夫ですが、一気に1→5になることもゲームによってはありえると思いますよね...現状では2,3,4を飛ばして5を表示する仕様になってますが、個人的には2,3,4も表示させたい...!!

なので、一度に(厳密には目で追えない早さで)増えても段階的に表示させるように改良。実装方法はQueueを使ってコンボ数を貯めておき、ある程度時間がたったらDequeueするという感じに。

f:id:nonoui:20170905221731g:plain

その他細かい部分

コンボ数が積み重なるほど盛り上がる感じが欲しかったので、いい感じになるようにいじります。 いろいろこねくり回しているとトップgifのようになりました。

ソースコードと使い方

Githubとか使えば良かったんですが、なんとなく直貼り。もっとこうした方がいいみたいなのあったら教えて頂けると嬉しいです...

使い方は、下の画像のように上記ソースコードを空のオブジェクト(画像内ではComboSystem)にアタッチ。 その後、ComboSystemコンポーネントのパラメータを埋めて、ボタンをクリックするとIncreaseComboメソッドが実行されるように設定します。 f:id:nonoui:20170916022349p:plain

感想

今回、色と音については特に触れませんでした。 もっと爽快感ある感じにできたらいいな...