あほげー第33回で作ったゲームの作り方
あほげー第33回（お題：TWIN）で作ったゲームはどうやって作ったのか、というお話。
そのまんまなんですけど、作ったゲームの振り返りはやっておいた方がいいと思ったんでやります。
作業中に記録を残しているわけではないので、もう記憶はうすぼんやりしている。
1.作ったゲーム
あほげー第33回で作ったゲームはこちら↓
neoaco.com
おらが村にもツインタワー建てるっぺよ！
どこの方言ですかと聞かれましたがとくに特定の地域をイメージしているわけではありません。
概要：予算を配分してツインタワーを伸ばす。エンドレス。
2.どうやってゲームの案を出したのか
神経衰弱を作る気満々だったんだけど、一晩かけて絵を描く作業をやってみたら全然描けなかったので呻いていたら、
夫が「予算配分ゲームとかどう？ そういうの作ったことないでしょ？ 人件費とか材料費とかさぁ」というアドバイスをくれたので、鵜呑みにした。
3.Unityの準備
直前にアップデートするのは好くないということは皆さん十分にご存知だと思うんですが、私も知っています。
なので、Unityのバージョンは「2019.4.8」です。
アップデートするの忘れとったわ……。
最近アセットいっぱい買ったし使いたいな～～とか思ってたんだけど、
無料の「DOTween」と有料の「Text Animator for Unity」しか使ってないね。
Text Animator for Unityを使うためにテキストメッシュプロを導入し、フォントはM+を使ってます。
assetstore.unity.com
assetstore.unity.com
mplus-fonts.osdn.jp
最後の方についカッとなってDOTweenの有料版買ったけど、解決しなかったので、買わなくてもよかった。このアセットは今後に活用したい。
4.試作
何事にも試作が必要。
2Dでプロジェクトを作成したら、
「予算に応じて」「ビルが伸びる」
の部分だけを作ってみる。
こんな感じ↓
CubeからBoxColliderを取り除いたもの（Tower）と、スライダー2本、ボタン1個。
スライダー2本の値を決定ボタンを押したらタワーという名のCubeへ送り、伸びてもらう。
スライダーが整数ごとに動いてほしいので…
↑このWholeNumbersのチェックを入れると、min～Maxの間を１ずつ増減するようになる。いまなら0～10。
もう完成したスクリプトしかないのでうすぼんやりと書くけど
TowerCtrl.cs public void 予算決定ボタン(){ float 各予算 = スライダーの値; if(予算の合計 < 1000万円){ // 人件費か資材費か、低い方の値段に合わせて建築する float 建築階数 = Mathf.Min(人件費, 資材費); ビル建築(); } } void ビル建築(){ Vector3 ビルの高さ = タワー.transform.localScale; ビルの高さ.y += 建築階数; }
こんな感じ。スライダーやボタンは[SerializeField]で設定しておく。これで、ボタンを押すたびにどんどん黒い四角が伸びていく。
………そうだね、上下に伸びていくね。
これはちょっとした細工でコントロールできる。
空のオブジェクトにCubeのオブジェクトを入れる
→Cubeのオブジェクトをサイズの半分（この場合は0.5）上げて、Cubeの下端が親の空オブジェクトの位置になるようにする
→親オブジェクトのScaleを変更するようにする
これで上に向かって伸びているように見えるようになる。
ゲームの仕組みはこれだけ。
もうできたじゃん！！！！
実際、ボタンを押すたびに伸びるビルをみると達成感がある。
あとは、予算配分は「人件費」「資材費」「重機レンタル費」「広告費」の四つにするので、スライダーを複製して四つにして、ビルの高さを伸ばす計算式をちょっと考えたりする。
もうできたじゃん！！！！！！！！！！
5.ゲームっぽくする
5-1:伸びるように見せる
このままではボタンを押すと即建築完了で伸ばしている感が無い。ニョキニョキ伸びて欲しい。
ので、伸びていく様子を作らなければならない。
こういう「徐々に変化させる」のはコルーチンで書くこともできるんだけど、
超超超超便利なDOTweenを使うとすごく早い。
//Tweener = DOScaleY(終点の値,何秒かけてやるか).相対的にやる(); buildTweener = タワー.transform.DOScaleY(建築階数, 5).SetRelative();
これだけ。これで、今の高さから建築階数分縦に伸びてくれる。
やったー、のびたー。
……なんでTweenerなの？と聞かれると困るんですが、後々別な部品で「Tweenerじゃないと困る」という場面が出てくるので、全部まとめてTweenerにした気がする。
ここは別にTweenでもよかったんじゃないかな。
記憶があやふやで申し訳ない。
5-2:予算配分にゲーム性を持たせる
予算はどんどん増えていってべらぼうに伸びて欲しいな、と思っていたので
・使い切ると次年度は増額
・余ると公共事業の定めとして減額
という仕様にすることに。増える量は定額だと面白くないからランダムにして、余った分は丸ごと減額にすることに。
ただ、そうなると、余らないようにすればいいだけなので、
それぞれの費用のスライダーを手動で設定していると、
「ボタンを押す→伸びるのを待つ」
しか中身のない単調なものになってしまうので、
その配分のところをゲームにするということで
スライダーに動いてもらうことにしました。
ここで完全にゲームの雰囲気が「予算配分ゲーム」から「スロットゲーム」へと変貌しましたね。
悲しいね。
僕には小難しいゲームを作ることなんてできないんだ……。
ま、そんなことはさておき、スライダーを動かすのもDOTweenでラクチンポイなのである。
// DOValue(最大値,何秒で動かすか).SetLoop(ループ回数(-1は無限),LoopType.Yoyo(行ったり来たりする)).SetEase(直線); Tweener 人件費用 = 人件費スライダー.DOValue(humanS.maxValue, 1).SetLoops(-1, LoopType.Yoyo).SetEase(Ease.Linear);
完成したあとから撮影したからいろいろ装飾がしてありますね。
ちょっと解説。
・スライダーの数値を読み取って表示している
・スライダーのハンドルに何の費用かわかるように文字を配置した
・ゲームっぽくするために、それぞれ移動スピードを違うようにした（はずだけど重と広のスピードが同じだな……）
ここで、neoacoさんは思うわけです。
総額がちゃんと予算になってるかどうか見るのめんどくさいから、
残りの予算に合わせてスライダーのMAX値が減ってほしいな……
と。
普通のTweenだと、動き始めたときの変数の値を後生大事に抱えているわけですが、
Tweenerだと途中で変えられるんですよ。
決定ボタンを押して一個ずつ予算を決定していくようにして、使った予算は総額から消していくようにする。
TowerCtrl.cs public void 予算決定ボタン() { // ボタンを一個押すと一つ決まり、予算から引かれ、次のMAXとなる if (DecidePhase == 0) { 人件費スライダーTweener.Pause(); 予算残り = 総予算 - 人件費スライダー.value; 資材費スライダー.maxValue = 予算残り; 資材費スライダーTweener.ChangeEndValue(資材費.maxValue); 資材費スライダーTweener.Restart(); 決定ボタンText.text = "資材費 決定"; DecidePhase = 1; } else if (DecidePhase == 1) { ・ ・ ・ } }
ま、ゲームをプレイしてもらえばどんな感じかわかると思うので……
とりあえず、ゲームっぽくなったのでこれで良し。
6.タワーを育てる
黒い四角ではタワーと言い難いので、タワーの絵を準備します。ツインタワーってタワーじゃなくて実質ツインビルみたいなところあるし、ビルっぽい絵になった。私は悪くない。
それをSpriteEditorでちょいと一工夫
・緑色のコライダーみたいな四角が表示されるので、それを繰り返してほしい幅へ変更
・Pivotを下部中央に変更
シーンに配置してからも一工夫
・DrawModeをTiledに変更
（TileModeがContinuousであることを確認）
このモードの恩恵を与るためには「SpriteのSizeを変更」しなくてはならないので、
タワー（親） ┣サイズ測る用空オブジェクト ┃（CubeのレンダーをOFFにしたものでもよい） ┗ビルの絵
という感じの親子構造にして、タワーの絵の高さはUpdateの中で監視することにする。
TowerCtrl.cs void Update(){ タワーの絵.size = new Vector2(2.12f, タワーのサイズ測る用空オブジェクト.transform.localScale.y); }
これで、タワーがニョキニョキ育つ！！！！！！！！！
7.めでたしめでたし
いや～、これでできましたね、すばらしい、もうこれで完成ですわ～
8.めでたくない部分も書いておきます
やりたかったけどできなかったこととも言います。
ゲームをプレイしてもらえばわかると思うんですが、伸びている最中になんのお知らせも入らないのってさみしくないですか？
達成感がないというか……
本当は「ある数値を達成すると文字が色がつくかアニメーションするかなんかしておめでとう感を出す」とかやりたかったんですよ
でもね、なんかうまくいかないというか、なんか、思った感じにできないんですよね
DOTweenもTextAnimationForUnityもどっちも、せわしなく変更されている文字列についてはどうもアニメーションできないっぽいんですよ
あら～～～困ったわね～～～～～
まぁ動かす仕組みを考えたら難しいのかな、と、あほげーが終わってから納得しました
8.1:改善策
数値を超えたらお祝いするやつは「達成数値ごとにフラグをつくる」「カットイン演出を入れる」とすればいいんだろうな、と思ってはいます。
それを作るほどの労力はかけたくないし、実際の建物の絵をかくのは難しいし、やってないんですけど。
うう～～～～～ん、文字だけの演出したかったな～～～～。
残念無念。
