More than 1 year has passed since last update.

Unityゲーム開発者ギルド

UnityEditor「で」遊べるクリッカーゲームを作ってみた

Last updated at 2023-04-27Posted at 2022-03-21

使用バージョン

Unity 2021.2.7f1(古いバージョンでも動くはず)

記事の内容のプロジェクト（Unlicense）

概要

まずはこちらをご覧ください

はい。見ての通り、クッキーをクリックすると数が増えていき、そのクッキーでお買い物をしてさらにクッキーをクリックする効率が増えるゲームです

今回はUnityのEditor拡張を使って、このクリッカーゲームをUnityEditor内でプレイできるようにしてみました

~~これでUnityで開発しながらゲームができるよ！~~

ゲームの仕様

今回のクリッカーゲームは非常にシンプルな仕様になっています

クッキーをクリックすると数字が増える
一定秒数でクリックしなくても数字が増える
アイテムを購入すると上記二つの数字の増える効率が上がる
アイテムを購入すると新しいアイテムが解放される
上記進捗がセーブされる

と、ゲームとしては最低限の体裁で作られています。今回はこれをEditor拡張で作ってみましょう
Editor拡張の細かい解説は他にも優良な記事がたくさんありますので今回は割愛します

ウィンドウのレイアウトに対応して位置をある程度調整する

先ほどの動画であった通り、このプロジェクトではウィンドウのサイズによって、ある程度レイアウトが自動的に設定されています

描画部分は全体として
BaseWindow.cs
のファイルのOnGUI()で行なっています

GUILayout.BeginArea(new Rect(0, 0, currentWindow.position.size.x, currentWindow.position.size.y));

というはじまりをしていますが、
これは「現在のWindowのサイズで描画を行う」という処理になります
GUILayoutでBeginAreaとEndAreaを行うことで、ショップの情報、インフォメーション情報、クッキーの情報を並べています
ここは通常のEditor拡張の表示と変わりはありません

数字のアニメーションを表示する

さて、次は数字の処理ですが、これが曲者でした
単純に生成して、毎フレーム上にいき、一定秒数立ったら消えていく。というだけの処理ではありますが、
UnityEngineと比べてUnityEditorではこの処理はなかなかに曲者です
理由としては、
1.Coroutineが使えない
1.OnGUI()などUpdate()の代わりになるようなものの呼ばれるタイミングが通常と違う
1.Time.deltaTimeが正常に動作しない

というものがEditor拡張ではあるからです
ではどうすれば良いのか。そう、自作です

CookieAnimation.cs
のファイルでクッキーのアニメーションを管理しています

ここではコンストラクタとして以下の情報を渡しています

        public CookieAnimation(Rect targetRect,Rect fromRect, double number,float animationSpeed)
        {
            this.targetRect = targetRect;
            this.number = number;
            this.currentRect = fromRect;
            this.animationSpeed = animationSpeed / 10f;
            step = 0;
        }

順番に、対象の位置、初期位置、表示する数字、アニメーションの速度。です

これらの情報を元に、
BaseWindow.csに以下の処理があります

        private void ExecuteNumberAnimation(double deltaTime)
        {
            var style = new GUIStyle();
            style.fontSize = 30;
            style.normal.textColor = Color.white;
            for(var i = currentAnimationList.Count - 1; i >= 0; i--)
            {
                var animation = currentAnimationList[i];
                GUI.Label(animation.NextStep(deltaTime), animation.number.ToString(CultureInfo.InvariantCulture), style);

                if (animation.IsComplete())
                {
                    currentAnimationList.Remove(animation);
                }
            }
        }

要は「今登録されている数字に対して、経過時間を渡して、完了していたら完了する」という処理ですね。
ここでキモとなるのはdeltaTimeの計算とanimation.NextStepの処理です

deltaTimeの計算方法

BaseWindow.csでdeltaTimeを計算しています。
先ほど少し触れましたが、EditorApplicationではTime.deltaTimeが正常に動作しません
なので、注目したのがEditorApplication.timeSinceStartupです

これはEditorを起動してからの時間をとれるため、これを利用してOnGUIが呼ばれるたびに最後にOnGUIが呼ばれた時間を代入し、差分の計算に使っています
これでOnGUIの更新の間の時間が取れました
更新が処理的に早すぎるのなら、この差分の時間が一定になったらアニメーションを実行する。という処理を入れても良いでしょう

AnimationのStep実行

次に、数字のアニメーションの処理です
これはCookieAnimation.csのNextStep関数で表示位置を返しています
ここでの処理は非常にシンプルです

        public Rect NextStep(double deltaTime)
        {
            step += (float)deltaTime * animationSpeed;
           
            var y = Mathf.Lerp(currentRect.y, targetRect.y, step);
            return new Rect(currentRect.x, y, currentRect.width, currentRect.height);
        }

独自で物理計算やアニメーションなどやっている人にはお馴染みの
Mathf.Lerpですが、使ったことある人には違和感があると思います
普通は「秒数」を基準に、何秒かけて目標に行くか。とやるのですが、ここでは単純にアニメーションの速度だけしかみていません
普通に秒数を基準に厳格にやっても良いのですが、なんかこうした方が上までしっかり行って消えてくれたのでそのままにしています
この部分はゲーム性には関わらないので厳格にはやっていません

例えばここを厳格にしてみたり、消える時にColorのフェードを入れても良いかもしれませんね

データ周り

さて、お次はデータ周りです。もしこのプロジェクトを使って遊びたい場合は、このデータ周りを触る必要があります
データとして大きく持っているのは

スキルデータ
セーブデータ
リソースデータ

の3つです
特にスキルデータの扱いをメインに説明いたします

スキルの追加・編集・登録

スキルのデータはResources/SkillDataの中に入っています

データの持ち方としてはScriptableObjectで、起動時にその中のデータを読んで、セーブデータと照らし合わせています

右クリックをして作成メニューを選ぶか、既存のアイテムをコピーして作りましょう

データの実態としては
SkillData.csの中をご覧ください

要素を一個ずつ説明していきます

連番
連番です。これが重複しているとバグると思います
名前
アイテムの名前です
値段
購入にかかるクッキーの数です
スキル説明
説明文です。表示するところはまだありませんが、作ると楽しいと思います
1クリックでいくらもらえるか
1クリックするときに追加で増えるクッキーの数です
クリックしなくてもいくらもらえるか
クリックをしなくても自動で追加で増えるクッキーの数です
オートでもらえる秒数
このスキルで自動で増えるクッキーの数が何秒に一回もらえるかの秒数です
購入したら解放されるアイテムの番号
これを購入することで、新しくショップに並ぶアイテムの番号です。連番と合わせます（連番対応はバグりやすいので設計としては微妙なので、ScriptableObjectの参照でもよかった）
メモ
その名の通りメモ欄です。何を書いても良いです

これらのデータを追加することで、新しいアイテムが作成できます
例えばチートとして、
「伝説のクッキー職人」「無料でもらえる」「購入するとクッキーがクリックのたびに10000枚」「自動で12345枚のクッキーを0.5秒でもらえる」
アイテムを作ってみましょう

作りました。ただこれで終わりではなく、このアイテムの解放条件を入れる必要があります
最初から持ってるデフォルトアイテムの解放アイテムに、今作ったアイテムの番号を入れてみましょう

この状態でWindowを読み込み直すと

無事商品に「伝説のクッキー職人」が並びました。購入してみましょう

はい。ゲーム性が壊れました。インフレも良いところです

セーブデータ

ゲームとしてチートしてしまい、つまらなくなってしまったのでデータを初期化しましょう
セーブデータは
SaveService.csで行なっています

public void Save(UserData data)
        {
            string dataJson = JsonUtility.ToJson(data);
           
            using (StreamWriter streamWriter = new StreamWriter(DefaultData.savePath, false))
            {
                streamWriter.Write(dataJson);
            }
        }

        public UserData Load()
        {
            // セーブデータがつくられてなければnullを返す
            if (!File.Exists(DefaultData.savePath)) return null;
            using var streamReader = new StreamReader(DefaultData.savePath);
            try
            {
                var dataJson = streamReader.ReadToEnd();
                var data = JsonUtility.FromJson<UserData>(dataJson);
                if (data != null)
                {
                    return data;
                }

            }
            catch (Exception e)
            {
                Debug.LogError("LoadError: " + e);
            }

            return null;
        }

やってることはシンプル。UserDataをJsonにしてファイルに書き出し、セーブデータがなければ作っているだけです
なのでSaveData.txtを削除して初期化しましょう

リソースデータ

最後にリソースのデータです。実はGithubを見てもらった人にはわかると思うのですが、クッキーのアイコンはGithubには上がっていません。再配布になってしまいますからね

ResourcesNames.csの中で読み込む画像やスキルのリソースが入っているフォルダなどを設定しています

    public static class ResourcesNames
    {
        #if USE_DEBUG_RESOURCE
        // デバッグようのリソース
        private static readonly string resourcesPrefix = "Ignore/";
        #else
        private static readonly string resourcesPrefix = "";
        #endif
        // クッキーの画像のリソースパス
        public static readonly string CookieButtonImagePath = resourcesPrefix + "cookieButton";
        // スキルデータの格納されているフォルダ名
        public const string SkillPathFolder = "SkillData";
    }

先ほどからのサンプルでは、USE_DEBUG_RESOURCEのシンボルを使って、Ignoreというフォルダの下のcookieButtonを見ています
Ignoreフォルダ以下はGitに上がらないようにしているので、著作権的にも考慮されています

さて、それではIgnore/cookieButtonというファイルを差し替えてみましょう

はい。チョコチップクッキーになりました。美味しそうですね

文字データ

最後に、文字のデータについて少しお話しします
例えばクッキーとして作っていたけど、世の中には無量大数に到達するレベルのクッキーがすでに生産されたと聞きます。
だったらクッキーではなくマラサダに変えることで独自性を出そうと思います

まず、マラサダの画像をDLして差し替えます

はい。マラサダになりました。美味しそうですね

しかし問題として、通貨の単位がクッキーになってしまっています

こういう時のために、
StringList.csというファイルに文言を入れています

    public static class StringList
    {
        public static readonly string title = "クリッカーInEditor";
        public static readonly string resourcesName = "クッキー";
        public static readonly string unit = "個";
    }

変えられるのはWindowのタイトル、増やしたいやつの名前、単位です。これをマラサダ風に変えてみましょう

はい。無事マラサダになりましたね。スキル名…？　みないでください

このように、データとしていじりやすいようになっているので、ぜひ君だけの最強のEditorクリッカーを作ってください

最後に

今回はEditor拡張のTipsを交えつつ、クリッカーゲームを作ってみました
ここでは紹介していない機能などもあるので、ぜひみなさん一度Githubに目を通していただけると幸いです

Githubはこちら
https://github.com/ttyyamada/ClickerInEditor

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up