naichi's lab

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

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

ランキング機能が欲しい

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

ぐぐるとドンピシャな記事が出てくるんですが、残念ながらWebGLには対応していない・・・

Unityゲームに全世界スコアランキングを速攻で実装する - ニフクラmBaaSお役立ちブログ

簡単に実装したいんだけど意外と見つからない。

iOS/Androidの場合は何も考えずに上記NCMBでいいと思います。

自前でLAMPサーバーとか用意すればどうにでもなるんですが、 ゲームが公開されている間ずっと管理しなきゃいけないと思うと割に合わない・・・

そんななか、 @divideby_zero さんがとても面白いものを公開していました。

GoogleSpreadSheetをバックエンドにしてしまおう!というもの。

なるほど・・・じゃあクライアント側作ってみよう。

ゲームジャム中は大変だしなるべくコーディングなしでそのまま使えることを目標で。

作りました

GitHub - naichilab/unity-simple-ranking

デモはこちら

以下使い方。

使うだけなら15分ぐらいで実装できるかと。

使い方

1. 下記記事を参考に、1.下準備 2.Unity側準備 まで進める

UnityのWebGL出力に簡単に無料でグローバルランキングを実装できる仕組みを考えてみた - Qiita

  • スプレッドシートとAPIは複数ゲームで使いまわせるので初回の1回だけでいいと思います。
  • 3.データの保存 以降は不要

1.5. WebアプリケーションURLの確認<2017/11/19 追記

作成したWebアプリケーションのURLにブラウザでアクセスすると、下記エラーになりました。

f:id:naichilab:20171119015020p:plain:w320

https://script.google.com/macros/u/0/s/長い英数字/exec というURLになっていました。

このまま次の手順に進むとエラーしてしまいます。

URLを下記のように修正してください。

https://script.google.com/macros/s/長い英数字/exec ( /u/0 を消した )

ブラウザで見ると、下記のようになっているはずです。

f:id:naichilab:20171119015424p:plain:w320

このURLを SpreadSheetSetting にセットし、次の手順へ進んでください。

対処療法であり、原因をしっかり把握した上での対策ではないので他の症状が発生するかもしれません。 その場合は申し訳ありませんが各自対応ください。

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

GitHubに公開したunity-simple-rankingから、 unity-simple-ranking.unitypackageをダウンロードしてUnityにインポート。

f:id:naichilab:20170524214046p:plain

3. unity-simple-ranking の設定

Build Settingsnaichilab/GSSARanking/Scenes/Ranking をビルド対象シーンに追加する

f:id:naichilab:20170524214111p:plain

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

f:id:naichilab:20170524214202p:plain

SpreadSheetSettingDefault Sheet Name を入れる。
ゲームごとにシートを使い分けるイメージでゲーム名とかを入れるといいです。

f:id:naichilab:20170524214242p:plain

naichilab/GSSARanking/Prefabs/RankingLoader をHierarchyウィンドウにドラッグ&ドロップ

f:id:naichilab:20170524214334p:plain

naichilab/GSSARanking/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:20170524214431p:plain

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

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

2017/11/19 追記

どうも追加読み込みするシーンに不要なカメラがあるっぽい?(先日unitypackageを更新したときに紛れ込んだかも)

Rankingシーンのカメラ は消しても大丈夫だと思うので問題なさそうなら消してください。

データの修正や削除など

最初に作成したスプレッドシートは、データベースであり、データのエディタです。 そのまま開いてデータ編集や削除をしてください。

f:id:naichilab:20170524214445p:plain

まとめ

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

ちょっと遅いですが、無料で使えるし管理もしやすいので中々いいんじゃないでしょうか?

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

ソースひどいのでシンプルにしたらぜひプルリクください!

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