naichi's lab

3日後の自分(他人)への書き置き

【Unity、WebGL】なるべく簡単にオンラインランキング機能をつけるサンプル

更新履歴

2019/01/16

  • 複数ランキングを扱えるようになりました。
    • クリアタイムや所持金額、ステージ別ランキングなど、1つのゲームで複数のランキングを扱いたい場合にもご利用ください。

2017/12/18

  • @divideby_zeroさんにご協力いただき、バックエンドをNCMBに変更しました。
    • 以前のGoogleSpreadsheetを使う方法より高速になっています。

よくある質問

  • 取得中で進まない
    • よくある原因1 -> TimeScaleが0になっていると読み込み完了しないです。
    • よくある原因2 -> NCMBの設定オブジェクト名は必ず NCMBSettings である必要があります。

ランキング機能が欲しい

ゲームを作ってると、オンラインランキング機能が欲しくなりますよね。

ゲームジャム中は色々大変だしなるべくコーディングなしでそのまま使える形を目指して作ってみましょう。

作りました

GitHub - naichilab/unity-simple-ranking

数値と時間のランキングが簡単に実装できます。 WebGL用に作りましたが、iOS/Android等でも問題なく動くと思います。(ちゃんと検証してないので使う場合はお気をつけください)

デモはこちら

以下使い方。

トラブルなければ15分ぐらいで実装できるかと思います。

使い方

1. 下記記事を参考に、 APIキーの設定とSDKの初期化 まで進める。

イントロダクション (Unity) : クイックスタート | ニフクラ mobile backend

v4.0.0で動作確認済みです。 他のバージョンではうまく動かない可能性があります。

2. パッケージのインポート

GitHubのunity-simple-rankingにあるReleasesから、unity-simple-ranking.unitypackage をダウンロードしてUnityにインポート。

f:id:naichilab:20190117000206p:plain:w320

基本的に最新バージョンを使ってもらえばOKです。

f:id:naichilab:20190117001114p:plain:w320

3. unity-simple-ranking の設定

Build Settingsnaichilab/unity-simple-ranking/Scenes/Ranking をビルド対象シーンに追加する

f:id:naichilab:20171218005210p:plain:w320

EventSystem がない場合は作成しておく
すでにuGUI使ってる場合はあると思うので作成不要。

f:id:naichilab:20170524214202p:plain:w320

naichilab/unity-simple-ranking/Prefabs/RankingLoader をHierarchyウィンドウにドラッグ&ドロップ

f:id:naichilab:20171218005548p:plain:w320

naichilab/unity-simple-ranking/Settings/RankingInfo の設定を確認・変更する

f:id:naichilab:20190117001838p:plain:w320

詳細は以下の通り

BoardName

ランキング名。 ○○ランキング と表示される。空でもOK。

ClassName

NCMBへアップロードする際のクラス名。英数字で指定。

複数のランキングを持つ場合は重複不可。(後述)

Type
設定値 説明
Number 数値(整数、小数)をスコアとして扱う場合はこちら
Time 時間をスコアとして扱う場合はこちら
Order
設定値 説明
Order By Ascending 数値が低い(時間が短い)方がランキング上位な場合はこちら。ランキングがスコア1,2,3と並びます
Order By Descending 数値が高い(時間が長い)方がランキング上位な場合はこちら。ランキングがスコア3,2,1と並びます
Custom Format

数値の桁揃えや小数桁数指定などができます。 時間の場合もミリ秒まで表示などの指定ができます。(入力は任意)

これで準備完了

4. 呼び出す

ゲームオーバー時とか、スコアが確定したタイミングで下記を呼び出す。

// Type == Number の場合
naichilab.RankingLoader.Instance.SendScoreAndShowRanking (100);

// Type == Time の場合
var millsec = 123456;
var timeScore = new System.TimeSpan (0, 0, 0, 0, millsec);
naichilab.RankingLoader.Instance.SendScoreAndShowRanking (timeScore);

上記を呼び出すと、Ranking シーンが追加読込されます。

f:id:naichilab:20171218010051p:plain:w320

これでスコア表示とハイスコア送信、TOP30のランキング表示が可能です。

UIは全てuGUIなので、テクスチャつけるなりフォント変えるなり自由に変更してください。

データの修正や削除など

登録されたデータはNCMBの管理画面で一覧でき、ここから削除は編集も可能です。

データストアにて RankingInfoClassName に設定したクラスのデータを編集してください。

f:id:naichilab:20171218010213p:plain:w320

複数ランキングについて

必要ない方は読み飛ばしてください。

時間と数値の2つのランキングを使いたい場合などはここを参考に設定してください。

3つ以上も可能です。

1. 必要な数だけRankingInfoを増やす

Projectビューで Create -> Ranking Info

f:id:naichilab:20190117002555p:plain:w320

場所と名前はどこでもいいですが、 naichilab/unity-simple-ranking/Settings にまとめておくとよいでしょう。

f:id:naichilab:20190117002723p:plain:w320

作成したらインスペクタで自由に名前やスコアの型などを設定してください。

時間とタイム、昇順・降順など、好きな組み合わせでいくつでも作れます。

ClassNameだけは重複しないように設定してください。

2. RankingBoardsにRankingInfoをセットする

naichilab/unity-simple-ranking/Settings/RankingBoards のインスペクタを開き、先ほど作成した RankingInfo をセットします。

f:id:naichilab:20190117002944p:plain:w320

3. 呼び出す

呼び出す際の第二引数に、IDを指定することで使い分けることができます。

//1つ目のランキングを呼び出す場合
naichilab.RankingLoader.Instance.SendScoreAndShowRanking (100, 0); 
//2つ目のランキングを呼び出す場合
naichilab.RankingLoader.Instance.SendScoreAndShowRanking (100, 1); 

IDはRankingBoardsにセットしたRankingInfoの上から順番に0,1,2となります。

f:id:naichilab:20190117003359p:plain:w320

まとめ

ランキングの必要最低限の機能を、なるべくコーディングなしで使えるように作ってみました。

NCMB無料枠でもかなり使えるのでぜひ活用ください。

自前でランキングサーバーを立てると少なからず有料(レンタルサーバー代や電気代など)なうえに、ゲームの寿命が尽きるまでずっと管理しなきゃいけないですからね・・・クラウドサービス万歳!

ではゲーム作りを楽しみましょう〜