作成中のシューティングゲームにハイスコアランキングの機能を入れました。予定通り、ニフクラ（NCMB）を使わせてもらいました。アプリで出たスコアはアプリからニフクラへ送り、アプリは集まったスコアの上位20データを取得、一覧を表示します。ニフクラへの登録や各種設定、スクリプトでデータをセーブ、ロードする方法など、はなちる氏のサイトに解説があります。大変分かりやすく、参考になりました。↓
【Unity】NCMBを使って簡単にランキングを実装する方法 - はなちるのマイノート
これで一応、ランキングのデータは手に入るようになりました。ぼくはトップ20を表示することにし、表示用のパネルはこちらで用意してあります。しかしここで問題が。
表示用のパネルにはテキストボックスを20個貼り付けました。ここに20個のスコアを入れるのですが、理想はこれ。
「3位 123456」が1つ目のテキストボックスに、「13位 1234」が2つ目テキストボックスに入っています。要するに、パッと見て分かりやすいように対応する桁を上下でそろえたいのです。「13位」と「1234」のためにテキストボックスを別々に用意して、それぞれで右寄せにでもすればそれで解決ですが、ぼくはそういうふうにはせず（テキストボックスの位置合わせに疲れました）、工夫で乗り切りました。
なお「03位 00123456」、「13位 00001234」とすればきれいに揃います。しかしこれだと余分の「0」が入り、面白くありません。あるいはスペースで位置合わせをするよいと思うかも知れませんが「00123456」と「 123456」（0の代わりに半角スペースを使った）では実験の結果、位置がズレます。
以下のようにするとうまくいきます。
「 3位 123456」は
<color=#FF775500>0</color>3位<color=#FF775500>000</color>123456
「13位 1234」は
13位<color=#FF775500>00000</color>1234
という文字列をテキストボックスにいれればよいのです。
2つ目の方が説明は分かりやすいかも知れません。「#FF775500」は2桁ずつで文字列の色、α値を指定します。16進数です。最初の6桁がRGB（R、G、Bがそれぞれ2桁ずつ）で、色を示します。ここでは「FF7755」なのでオレンジ色っぽい色。どっち道<color=……>と</color>で挟まれた文字列は透明にしてしまうので、最初の6桁は何を書いても大丈夫です。最後の2桁は「00」で、完全に透過させます。ちなみに「FF」とすると完全に不透明になります。
まとめです。
<color=#FF775500>00000</color>
と書けば、透明の0を5桁分書くことになり、これで位置合わせできるのです。
あ、もちろんこの文字列はスクリプトで順位とスコアのデータを見ながらこしらえ、それをテキストボックスに入れることになります。また、テキストボックスの「Rich Text」にチェックを入れておかないとうまくいきません。ぼくの場合、なにもしなくても入っていましたが。
今回はスコアのみを登録し、ランキングには順位とスコアだけを表示することにしました。名前とか、日時なども登録することはできますが、とりあえずスコアだけ。
ゲームがだんだん形になってきました。あとはスプラッシュ画面も作って、ヘルプもつけて、……。Unityは初めてだったので分からないことも多く、それが大変でした。でもこれである程度分かったので次からは楽になるでしょう……。あとしばらくで終わってしまうのが少し寂しいです。
この方法を用いると、こんなふうにきれいに桁が位置合わせされます。
スコアの頭には薄くオレンジ色の0が並んでいますが、これは
<color=#FF775500> ではなく
<color=#FF775560> として実行しているからです。完全に透過させてもよいですが、こうした方が桁が分かりやすいですし、何位なのかもはっきりします。また、オレンジ色ではなく黒にしたければ
<color=#00000060> とすればＯＫです。ここでは説明のためにあえてオレンジ色にしています。
ふー、これでランキングは片付いたー！！
