【第12回】ボールの飛距離を記録し、ハイスコアを表示するチュートリアル

【第12回】ボールの飛距離を記録し、ハイスコアを表示するチュートリアル

前回のチュートリアルでは、ボールの飛距離をUIテキストとしてゲーム画面に表示する方法をお送りしました。

テキストの更新タイミングがボールの停止時だけで、プレイヤーに分かりにくいことから、現在の飛距離は常に表示を更新し、飛距離の最大値をハイスコアとして保持するようにしてみましょ。

今回は前回の応用編かつ復習的な内容です。

前回のチュートリアルはこちらから。

 

今回の目的

ゲーム画面に表示するボールの飛距離を常に更新するようにします

また、ハイスコアの表示も追加し、飛距離の最大値が更新された時にハイスコアも更新されるようにします。

プロジェクトの準備

前回のチュートリアルで作成したプロジェクトをそのまま使います。

このページに先にたどり着いた方は、チュートリアルの初回から追っていただけるといいかもしれません。

ハイスコア用のUIテキストを作成

前回作成した飛距離表示用の『DistanceText』オブジェクトとは別に、ハイスコア表示用のテキストオブジェクトを作ります。

今回もUIテキストを作るので、手っ取り早くDuplicateしちゃいましょう。『DistanceText』オブジェクトを選択し、右クリックまたは二本指タップでコンテキストメニューを開きます。そこから[Duplicate]を選ぶと、同じ設定を持った『DistanceText (1)』が作られます。新しくできたオブジェクトは『HighScoreText』にリネームします。

Duplicateの選択
Duplicateで複製する

 

個人的にハイスコアが上にいて欲しいので、まずは『DistanceText』オブジェクトの位置を下にずらします。Pos Yを[-150]に変更しましたが、実際の画面に合わせて調整してください。

DistanceTextの位置
ちょっと下がってくださーい

 

今度は『HighScoreText』オブジェクトを選択し、テキストを[High Score : 20.00 m]、文字の色を[FFFF00FF](黄色)にします。色はお好みで大丈夫です。

High ScoreのTextコンポーネント
High Scoreってなんか黄色いイメージ

 

設定が終わるとこんな感じに表示されます。

High Scoreの表示
HighScoreの表示

 

表示用のオブジェクトができたので、スクリプトを編集しましょ。メインディッシュです。

 

スクリプトの編集

今回は、ハイスコアの表示と、飛距離の毎フレーム更新が目的です。

スクリプト編集の方針は以下の通り。

  • ハイスコア表示用テキストの参照を設定
  • ハイスコア保持用のメンバ変数の追加
  • 毎フレームで飛距離のテキストを更新する
  • ボールが止まったらハイスコアのチェック、既存の最大値を超えたら更新
  • Boost! を押して初期位置に戻ったら現在の距離をリセット。ただしハイスコアは残す

この辺りを盛り込んで更新した結果は以下のものになります。またポイント毎に解説していきます。

最初にメンバ変数を追加しました。一番上のdistanceTextObjectは前回と変わらずですが、その下のhighScoreTextObjectを追加しています。これはハイスコア表示用のUIテキストへの参照をセットします。

下の方では、前回同様にハイスコア表示用オブジェクトのTextコンポーネントへの参照をキャッシュし、表示する文字も定義しています。また、今回新たにハイスコアの値を格納するfloat型の変数も追加しています。

 

次はStart()の中身を更新。と言ってもハイスコア表示用オブジェクトのTextコンポーネントへの参照をセットし、SetHighScoreText()で初期値をセットしています。

 

続いてStopFlying()です。Boost! ボタンを押して初期位置に戻る際、現在の距離をリセットしています。この時、ハイスコアは保持したままです。

 

そしてCheckDistance()です。前回は『Sphere』オブジェクトのスリープ時に『DistanceText』オブジェクトに対して距離をセットしていましたが、今回は距離測定中であれば毎フレーム値を更新するようにしています。

スリープモードに入ったところで、ハイスコアのチェックを行なっています。保持されているハイスコアと停止時の距離を比較し、大きい方をハイスコアとして残します。ハイスコア自体が変わらなくても、『HighScoreText』オブジェクトへのセットを通りますが、プレイヤーからは何もしていないように見えます。

 

最後にSetHighScoreText()を追加しています。前回作成したSetDistanceText()と同様に、プレフィックス、引数の距離、サフィックスを組み合わせて文字列を生成し、ターゲットのTextコンポーネントにセットしています。

 

今回も更新部分を紹介しましたが、スクリプトの全文はGitHub Gistで公開しています。手っ取り早く確認するならこちらをコピペ。

 

オブジェクトの参照をセット

スクリプトの編集と保存が終わったら、つい忘れがちなオブジェクトの参照をセットします。エラーは回避したいですからね。

『Sphere』オブジェクトを選択し、SphereBoosterの中にあるHigh Score Text Objectに今回作成した『HighScoreText』オブジェクトをドラッグ&ドロップします。右の丸ボタンから『HighScoreText』オブジェクトを選択してもOKです。

ドラッグ&ドロップ
忘れるとぬるぽ

 

前回からぬるぽぬるぽ言ってますが、参照のつけ忘れで出るのは正確にはUnassignedReferenceExceptionです。念のため。

アサイン忘れのエラー
正確にはぬるぽじゃないのだポッター

 

動作確認

参照を設定したら、ゲームを実行してみましょ。GIFは例のごとく2倍速です。

ハイスコアの更新
ハイスコアを更新するのだポッター

 

距離の表示が更新されるので、まだ動いていることがプレイヤーにも伝わりやすくなったはず。数字の増え方が遅くなれば「そろそろ止まるかな」と予想もつきますし、前回よりは良くなったことでしょう。

ハイスコアの更新も良さそうですね。前回の記録を塗り替えたらハイスコアを更新しています。GIFには入っていませんが、ハイスコアの超えられなければHigh Scoreの値は変わりません。ぜひお手元のUnityで確認してみてくださいな。

次なる課題

ボールが停止した時の距離をハイスコアに設定することができました。

が、もしボールが停止しなかったら?

今の状態だと、ボールが飛んだ後、地面と衝突してから回転運動が始まり、その減衰で速度が低下します。

ボールが停止しないケースは……そう、地面を飛び越えて遠くに飛んでいくケースです。

実は第10回あたりから意図的に伏せていましたが、次回はついに対策を行います。具体的には地面、ゲーム的に言えばコースから落ちた時の処理を入れることにしましょう。

まとめ

今回は飛距離を毎フレーム更新し、止まった時の距離でハイスコアも更新するようにしました。

画面に数字が表示されるようになるといよいよゲーム的な世界に近づいてきた感じがします。

次回はボールが停止しないケース、すなわちコースアウトする時の処理を実装します。

アプリ公開までの攻略チャートを作りました!

CTA-IMAGE

「スマホ向けのアプリを作ってみたいけど、何から手を付けていいか分からない!」


そんなお悩みをお持ちの方向けに、todoがアプリをリリースした経験から手順や考慮すべき点をまとめたe-bookを作成しました。ゲーム作りはそれ自体がゲームのように楽しいプロセスなので、「攻略チャート」と名付けています。


アプリをリリースする観点から書いているので各アプリストア向けの作業が入っていますが、企画、設計、開発、テスト部分については他のプラットフォームでも使える知識が満載です。


無料で入手できるのでぜひお早めにゲットして、開発をブーストさせてください!