UnityでFirebaseを使ってデータの保存を行う

最近自分の中でFirebaseを使うことが多くて
UnityからもAssetを使えばかんたんにできるそうなのでやってみました。
まだ自分でも不明点みたいなのがいっぱいなので間違っていればご指摘ください。

* Firebase for Unityはまだアップデートされてないみたい

Cloneしてきて、インポートしてもエラーで使えません。
今回はそれは使わずにAssetを使ってみました。

Simple Firebase Unity

Asset Store

こちらを使います。

インポートした時はこんな感じです。
基本的に使い方は簡単ですが、どれを使っていのかはじめはわかりませんでした。

基本的には２パターン使ってFirebaseにデータを投げます。

AddQueueメソッドを使う

これはまとまったデータを投げるときなどに便利です。
個人的にはこちらを使って行きたい。。。
理由は後に説明します。

Child & Pushメソッドを使う

Jsonの子どもをGetしてきてそのValueとしてデータを投げる方法
基本的にデータのやり取りが頻繁な場合はこちらを使います。
こっちを最初使っていてコケた。

初期準備

一つのFirebaseを使う場合は基本的にシングルトンで書いてもいいと思います。
まずはなんにも使わず（Observerを使えば通知ができる）書いていきます。

ここまでで何か空のゲームオブジェクトにアタッチすれば他のクラスから呼び出して使うことができます。

Child & Pushを使ってみる

こんな感じでPushできるようにします。

ちゃんとPushが成功すればSuccessLogがでます。

ちゃんとこんな感じでFirebaseで確認できます。

コードはこんな感じ！めっちゃ簡単！

// NetworkTest.cs
public InputField input;

public void PushText () { // Attach Button OnClick.
	if (input.text != "") {
		NetworkSingleton.Instance.firebase.Child ("message", true).Push ("{\"name\": \"kazuma\",\"text\": \""+input.text+"\"}", true);
		}
}

ただここで気になったのはJsonなのですが
messageの下に文字列が入ってるのが好きではないのでChild & Pushはあまり使うのは。。。とおもってしまいました。
もしいい方法があれば教えて下さい。

AddQueueメソッドを使う

AddQueueSet

一番はじめにデータをセットする際に利用します。
これを使うとデータが置き換わるので追加する場合はデータを取ってきてクライアント側でデータを追加してPushする必要があります。

AddQueuePush

まとめてChild & Pushを行うと考えてもいいと思います。
ただコレもPushした場合気になっていた部分の文字列Keyになります。

AddQueueUpdate

これがいいかなーって思ってます。
Updateなんですが、Create or Updateみたいな感じかと思います。

今回はAddQueueUpdateを使って書いていきます。

こんな感じでまとめてプッシュします。

コレを使うと謎のキーが入りません。
なのでいい感じ！

Testコードを大幅に書き換えます。

NetworkSingleton.csにもFirebaseQueueのインスタンスを追加します。

public FirebaseQueue firebaseQueue;
// method Awake. 
firebaseQueue = new FirebaseQueue();

Jsonデータを取ってくる場合

Firebase firebase = NetworkSingleton.Instance.firebase;
NetworkSingleton.Instance.firebaseQueue.AddQueueGet (firebase, "print=pretty");

あとはJsonを解析すればOKです。
ちょっとUnityだと面倒ですが。

MiniJsonとかここを参考に使うといいかもです。
qiita.com

補足

FirebaseObserverクラスがあると思いますが、Startしてデータが更新されるとコールバックによりデータを取ってくる事ができます。

Firebase × Unityでリアルタイムチャットアプリ実装してみた。 pic.twitter.com/JcyeKjXf5q

— かずま (@kazumalab) November 1, 2016

こんな感じで更新されると自動的にメッセージを受信します。

UnityでGoogleMapを表示する方法

かずまです。

今回はUnity上でGoogleMapを表示する方法を書いておきたいと思います。

流れ

1. GoogleMapの緯度経度を地名から取ってくる
2. GoogleAPIに緯度経度を投げて帰って来た画像を表示する

この２つになります。

緯度経度を取ってくる方法

色々あるとは思いますが、これいいな、と思ったので僕はコレにしました。

http://www.geocoding.jp/

このサイトを使います。
パラメーターに地名を渡すだけでXML形式で緯度経度が返って来ます。

こんな感じです。

Unityではサーバーから何かダウンロードしてきたり、GET、POSTリクエストをする場合にはIEnumerator(非同期処理)を使うのでそれで書いていきます。

クラスを作ってAPIで呼び出せるようにする

今回はGmapというClassを作り、その中に記載していきます。
呼び出す側のコードを減らすためです。

呼び出し方の成功例

// GmapTest.cs
private IEnumerator Start () {
  Gmap gmap = new Gmap ("東京");
  Coroutine getGeo = StartCoroutine( gmap.GetGmap ());
  yield return e;
  print ("東京(" + gmap.Latitude + " ," + gmap.Longitude + ")");
  
  Coroutine getImage = StartCoroutine(gmap.GetImage ());
  yield return getImage;
}

Coroutineで受け止めているのはStartCoroutineの処理が終わったときに次の処理に移ると言うものです。

getImageまで終わればgmap.textureでGmapのImageが取れているはずなのでPlaneなどのTextureに入れて上げればOKです。

今回Includeするのは

// Gmap.cs
using UnityEngine;
using System.Collections;
using System.Xml; # 返って来たXmlを解析するため
using System; # double型にConvertするため

Gmap.csを書く

C#のGet, Setを使う

プロパティーをそのまま触らずにゲッター、セッターを使って書いています。
参考URL プロパティ - C# によるプログラミング入門 | ++C++; // 未確認飛行 C

XmlDocumentを使う

// L43あたり
xmlDoc.LoadXml (www.text);

これでWWWで返ってきた文字列をXMLで読み取ります。
その後

XmlNodeList nodes = xmlDoc.GetElementsByTagName ("result");

ここでresultというタグを取ってきます。
Nodesの中にはcoordinateというタグがあり、その下にlatitude, longitudeがあります。
そこを取ってくればいいわけですね。

WWWクラス

GetImageするところの実装ですが、Unity C#ではWWWを使ってダウンロードします。
GetImageをするときに

WWW www = new WWW (url);
		while (!www.isDone) {
			print (www.progress * 100 + "%");
		}
		yield return www;

このようにするとダウンロードされているものが今何％かを知ることができます。
参考URL Unity - スクリプトリファレンス: WWW

最後に

今のところコレだとタダ画像を取ってきてるだけなので残念ながらGoogleMapのようにスクロール、ピン留めなどはできません。

ちょっと残念。

WebVRを開発するまでの準備を行ってみた

こんばんは。かずまです。

本日PSVRが発売されますね！ぼくはPS４を持ってないので買ってませんが。

結構面白そうなソフトがあるのでやってみたいです。あとOculusとかよりもディスプレイの色の出方がきれいらしいので、一度は見てみたいところです。

さて、今日はWebVRについて書きたいと思います。
といっても技術的なところではなくて開発前のセッティングですね。

特にWeb上でHTC VIVEなどを動かすには今のところ限られたブラウザしかダメらしいです。

Chromiumをダウンロードする

WebVR.infoでもちゃんと説明されていますが一応メモしておきます。

WebVR - Experimental Chromium Builds

とりあえず上記サイトにアクセスしてChromiumをGoogle Driveから落としてきます。

Zipファイルになっているので、開くとインスコせずに起動できると思います。

WebVRの設定を行う

さて、Chromiumを開きます。
なんか旧型のブラウザみたいですが、気にしない。

ここでアドレスバーにこう打ち込みます。

chrome://flags/#enable-webvr

#を付けるとCtrl + Fで検索するのと同じ機能みたいに検索できるみたいです。
べんり！

WebVRをEnableにします。

続いて

chrome://flags/#enable-gamepad-extensions

これでGamePadを有効にします。
日本語の場合”既定”となっていますが確実に有効にします。

これで設定完了です。

最後に

今回の設定はWebVR（Javascriptで書かれたもの、threes.jsとか）の設定になります。

UnityのWebGLを使おうとする場合はFirefoxから見る必要があるようです。

ちなみにWebVRを取り入れようとしているサービスはこちら

sinariovr.com

大学を中退せずにレールに沿った人生であのレールで導いてくれるWebフレームワークRailsを使ってサービスを作ってみました。

かずまです。
題名は最近ばずってる記事から少し頂きました。

それがこの記事

www.ishidanohanashi.com

こんな記事を見かけました。
まずバズってる、すごい、僕には大学を辞めるなんてできなかった・・・。
というよりも普通に大学の授業が楽しかった、大学で初めてプログラムを組んだり。
しかも普通に４年、もしくは大学院をでてIT企業で働く、というのが頭にありました。

けどふと思った

あれ？実際ハッカソンであったやつで学生起業してるやついたな。。。

まぁ起業は置いて、プロダクトを実際に作ってみた

サービス内容

凄く簡単です。Thetaなどで撮った全天球の写真をアップロードするサービスです。
ターゲットはVRってなに？それおいしいの？けど全天球すげーといったライトユーザを対象としています。

サービスは以下サイト
sinariovr.com

技術的なお話

Webフレームワーク： Ruby on Rails
デザインフレームワーク： Foundation

名前を付けるのが難しい

作ったものは自分の子どものようなもので、いい名前を付けてあげたいのです。

だけどいい名前が思いつかなくて、
お！っと思ったものはすでにサイトがあったり、ドメインの関係上厳しかったりして頭を悩ませます。

最後に残ったのは”シナリオ”、なんか写真って人それぞれの思いがあるよね～、でも英語のScenarioだとGoogleで引っかかるのはまず翻訳・・・。

あ、じゃあドメインもあるし、ローマ字でいいんじゃね？みたいな感じで決まりました。
確かにGoogleでは引っかからんやん！

まぁ、問題は「ほんとはScenarioだけど、これ英語読めないやつが作ったんじゃね？」と思われることぐらいですね。笑
気にしない、だってGoogleで引っかからないんだもん！しかも日本人だとタイピングしやすいはず。（前向き）

支出

基本的に人件費は人を雇っていないのでかかってません。（当たり前）
フロントエンド、バックエンドは自分で。

サーバー費用はテスト段階はHerokuの無料を使っていましたが今はサーバーを借りているのでざっと下記のような感じです。

サーバー代月１０００円

ドメイン、サーバー証明書で年間２０００円

メインとなる画像１枚で５０００円（現在制作中）

思ったよりお金はかかる、これは初期段階だから安いけど大きくなってくるときついかも・・・(; ･`д･´)

収入

今はゼロです。というよりまだβ版の配信なので何社かの広告ロゴは無料で掲載しています。
Webページにはできるだけ広告を出したくないのでクリック収入とかはないかもです。

つまり会社でいうと赤字！！！これはまずいですね。

今後

WebVRが来るぞ！みたいなお話を聞いたのでみんながとった写真に自由にViveとかでお絵かきできたらな～って思います。
というより実装をいま書いているところです。JavaScriptむずい。
UnityのWebGLでもVRモードあるみたいなのでどちらか使いたい。

あとはスマホアプリでアップロード、または見れるようにしたい、または写真撮影も（？）したいのでそれも並列処理してます。
見る方は下準備できているので時間はかかりませんがネックなのはアップロード部分かと思います。

起業は遠い

法人化するとお得になります！！というのがない限りはしないです。
あと起業という言葉をいっぱい使ってきましたが、僕はあんまり好きではないからですね。

最大は、社長になっちゃうと物（プロダクト）を作れる気がしなくて、コード書く時間さえも無くなっちゃいそうです。

最後に

発言でバズれるってすごい。
いつかバズって見たい気もする笑

そろそろ中間発表、卒論がんばる。

Unity C#でDelegate＆Callbackを使う

かずまです。

今回はUnityのC#でDelegateとCallbackを使って見たいと思います。

Delegateとは

簡単に言うと処理を渡して、その先で処理を実行するというもの。ゲームプログラミングでは重要みたいです。

デザインパターンとしてはObserver パターンになります。

使い方

  public class DelegateTest : MonoBehaviour {
     public delegate void Callback ();
     private Callback callback;
}

こんな感じ。
コレに関数を渡してあげるメソッドを準備します。

  public class DelegateTest : MonoBehaviour {
     public delegate void Callback ();
     private Callback callback;

     public void SetCallback (Callback _callback) {
		this.callback = _callback;
     }

     public void AddCallback (Callback _callback) {
		this.callback += _callback;
     }
}

Setは一つの関数のみ実行可能で、Addは登録された分を一気に実行可能です。

実際に使ってみる

今回はボタンの処理をさせて見ます。

＊Defenseの文字が間違ってます。。。すみません笑

上の３つで切り替えて下のボタン一つでその関数を実行します。
前回の記事でUnityのUIボタンの処理をさせるのを書きましたが、今回はまた別の方法で処理を変えます。
kazumalab.hatenablog.com

下のボタンの中身はこの関数を設定しておきます。

コードは先程のに追記します。
ボタンで呼び出すのはClickButtonメソッドですね。

今度は上の３つのボタンを設定します。

以下のコードのClickAttack, ClickDefense, ClickDamageをボタンに設定します。

DelegateTestを読み込み、SetCallbackを呼びます。その引数としてセットしたいメソッドを入れてあげます。これでDelegateTest側でAttack, Defense, Damageが呼び出されます。

つまり、DelegateTest.csは追記せず、コードの処理を増やすことができます。
あとはタイミングも好きなタイミングでできるので今回はボタンのおした時にしてあります。

最後に

はじめはわからなかったのですが書いてみると結構便利だな、と実感しました。
いいですね。

追記

18/9/9
スコープを間違えていたのを修正しました。
コメントありがとうございました。