naichi's lab

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

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

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

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

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

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

f:id:naichilab:20171219015511p:plain

f:id:naichilab:20171218004519p:plain

3. unity-simple-ranking の設定

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

f:id:naichilab:20171218005210p:plain

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

f:id:naichilab:20170524214202p:plain

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

f:id:naichilab:20171218005548p:plain

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

f:id:naichilab:20170524214353p:plain

詳細は以下の通り

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

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

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

データの修正や削除など

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

f:id:naichilab:20171218010213p:plain

まとめ

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

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

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

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