どうも洋梨🍐です。

ゲームによくある「ランキング」ですが、この機能を実装する方法について書いていこうと思います。

今回はサーバーに保存されたデーターをUnityで表示するまでの方法です。

[2019/07/09追記]
同じような記事を書いてしまいましたのでこちらをご覧ください。

環境

今回はテスト環境としてXAMPPを使用しました。

データーベースはMySQL

サーバーはNode.js

受信環境はUnity

で行っています。

データーベースを構築する

今回構築するデーターベースは

id(プレイヤー のID) ,name (プレイヤー の名前) ,score (プレイヤーの点数) ,date(記録した日時)

を保存するものとします。

まずデーターベースを構築します。

今回はテストとしてデーターをいくつか追加しておきます。なお、テーブル名は”RANK“としてます。

なお、上画像はMySQL派生のMariaDBを使っている図です。

Node.jsでサーバーを構築

今回フレームワークとして Express を使用します。

サーバーはポート番号:3000で待ち受け、 localhost:3000/Getにアクセスされ、データーの一覧をjson形式で返すものとします。

const exp = require("express");
const app = exp();

app.listen(3000,function(){
    console.log("Start Server.");
})

const mysql = require('mysql');

app.get("/Get",function(req,res,nex){

    let con = mysql.createConnection({
        host : 'localhost',
        user : 'root',
        port : 3306,
        database : 'test'
    });
    con.query("SELECT * FROM RANK",function(e,r){
        console.log(r);
        response(res,"OK",r);
    })
})

function response(res,result,data){
    let resJson = {status:result,data:data}
    res.json(resJson);
}

実行した後、ブラウザなどでアクセスすると動いているのを確認できると思います。

Unityでサーバから情報を受け取る

まずはUnity上でサーバーから受信できるかをテストします。

画面のGETボタンをクリックしたら受信をします。

    public void OnPushGET()
    {
        var req = WebRequest.Create("http://localhost:3000/Get");
        var res = req.GetResponse();

        using (Stream stm = res.GetResponseStream())
        using(StreamReader str = new StreamReader(stm))
        {
            string json = str.ReadToEnd();
            Debug.Log(json);
        }
    }

取得できている場合、ログに出力されると思います。

デシリアライズし、使える形式にする

JSONを使えるようにシリアライズします。シリアライズに使うクラスは以下のとおりです。

[Serializable]
public class Json
{
    public string status;
    public Data[] data;
}

[Serializable]
public class Data
{
    public string id;
    public string name;
    public int score;
    public string date;
}

先ほど書いたソースコードを受信したJSONデーターを表示するように書き換えます。

    public void OnPushGET()
    {
        var req = WebRequest.Create("http://localhost:3000/Get");
        var res = req.GetResponse();

        using (Stream stm = res.GetResponseStream())
        using(StreamReader str = new StreamReader(stm))
        {
            string json = str.ReadToEnd();
            Debug.Log(json);

            Json j = JsonUtility.FromJson<Json>(json);

            string s = "結果\n";
            foreach (Data data in j.data) s += "[" + data.name + "] Score:" + data.score + "\n";
            text.text = s;
        }
    }

成功するとこのように表示されます。

これでUnity上でサーバーから取得した情報が使えるようになりました。

次回はサーバーに情報を登録できるようにしていきたいと思います。

---

ここまで読んでくれてありがとうございました！！

ホームページでは他にも

・様々な記事や作った作品および過程
・ソースコード、素材ファイル
・あらゆる”モノ”の作り方

などなど随時、記事や作品を新規公開・更新していますので是非見ていってくださいね！見ていただけると本当に嬉しいです！