ニフティクラウド mobiel backend

UnitySDK ハンズオンニフティ株式会社

目次1 　ハンズオン前の準備2 　各アセットのインポート3 ゲームオブジェクトの設定準備4 NCMB の設定5 NCMB データストアの活用

目次1 　ハンズオン前の準備2 　各アセットのインポート3 ゲームオブジェクトの設定準備4 NCMB の設定5 NCMB データストアの活用

ハンズオン前の準備　タスクリスト

1 　 mobile backend の登録2 　本日のサンプルのダウンロード3 　 Unity ちゃん、 Japanese Otaku City の DL

mobile backend の登録

1

• サービスサイトのお申込みページを開く

• http://mb.cloud.nifty.com/signup.htm

2• nifty ID 　の　取得

3• mobile backend へのログイン

niftyID 取得画面

お申込みページ

本日のサンプルの DL

1

• Github より DL• https://github.com/hounenhounen/NCMB_handson_hacosco

2• 内容物の確認

Unity ちゃん、 Japanese Otaku City の DL

https://www.assetstore.unity3d.com/jp/#!/content/18705

UnityChan

Japanese Otaku City

https://www.assetstore.unity3d.com/jp/#!/content/20359

目次1 　ハンズオン前の準備2 　各アセットのインポート3 ゲームオブジェクトの設定準備4 NCMB の設定5 NCMB データストアの活用

各アセットのインポート　タスクリスト

1 　各アセットのインポート2 　 Otaku 　 City ・ Unity ちゃんの設置

あらかじめアセットを DL していた場合Window>AssetStore を

クリックすると

Unity のブラウザが立ち上がるのでそこで、「 Unitychan 」と検索すると出てくるので”Unity-chan”model を選ぶとこの画面が出てきます

「 Import 」を押すと Import できます

本ハンズオンで始めて DL ・インポートする場合 Window>AssetStore を

クリックすると

Unity のブラウザが立ち上がるのでそこで、「 Japanese Otaku City 」と検索するとこの画面が出てきます

「 DownLoad 」を押すと DL が始まり、そのご「 Import 」を押すとできます

Otaku 　 City の設置Assets ＞ ZRNAssets ＞ 005339_08932_25_14>Models PQ_Remake_AKIHABARA_Import Settings を Hierarchy にドラック＆ドロップ

※world シーンを開いてください

Otaku City の設定

005339_08932_25_14 　のフォルダをZRNAssets フォルダの配下からAsset の直配下に移動してください

その後 ZRNAssets を削除してくださいまた 005339_08932_25_14の Scripts フォルダも削除してください※ この Scripts が原因でエラーが出ている端末もあるかと思います。

ドラック & ドロップで Asset の直配

下へ

Scripts も削除してください

Unity ちゃんの設置Assets ＞ UnityChan ＞ Prefabs 　 Unitychan を Hierarchy にドラック＆ドロップ

インスペクターで UnityChan の位置を (-9, 0.3, -21) 　ローテンションを(0 ， 180 ， 0)スケールを (0.1, 0.1, 0.1) にあわせる

目次1 　ハンズオン前の準備2 　各アセットのインポート3 ゲームオブジェクトの設定準備4 NCMB の設定5 NCMB データストアの活用

ゲームオブジェクトの設定準備タスクリスト

1 　ライトの設定2 　 Unity ちゃんの設定3 　 Camera の設定

ライトの設定Assets ＞ UnityChan ＞ Prefabs Directional light for UnityChan を Hierarchy にドラック＆ドロップ

Directional light の影響範囲を Unity ちゃんに限定するるため、 Bright というLayer を追加し、 Unity ちゃんの Layer を Bright に、 Directional light のCulling Mask を Bright に設定します。

Bright Layer を追加し選択する

Culling Mask をBright に設定

Unity ちゃんの設定現状の Unity ちゃんにアタッチされているスクリプト「 IdleChanger 」「 FaceUpdate 」を RemoveComponent しますAssets ＞ Animations 　 UnityChanRun をAssets ＞ Scripts ＞ UnityChan 内にあるスクリプトをそれぞれアタッチAddComponent で RigidBody 　 Capsile Collider を加えて下記のように設定します

Camera の設定Assets ＞ Scripts ＞ Camera 内にあるスクリプト「 MyCameraController 」「 NeverSleep 」をそれぞれアタッチ※ 上記の内容はすでに行っていますMain 　 Camera を UnityChan にアタッチ

こちらはすでに行っています

目次1 　ハンズオン前の準備2 　各アセットのインポート3 ゲームオブジェクトの設定準備4 NCMB の設定5 NCMB データストアの活用

NCMB の設定タスクリスト1 NCMB にアプリを作る2 SDK を DL3 SDK の組み込み

このような画面が表示されます

mobile backend での新規アプリ作成mobile backend へログインをお願いします！

akibarun と入力して「新規作成」をクリック本アプリ用のサーバー環境ができます

SDK を DL※ こちらはすでにやっております

https://github.com/NIFTYCloud-mbaas/ncmb_unity/releasesのページを開くと下記のページが開かれます赤丸の部分をクリックしてSDK を DL します

SDK をインポート※こちらはすでにやっております

先ほど DL したサンプルゲームを開いた状態で

NCMB_latest の Unity package file 「 NCMB 」をダブルクリック

表示された右の画面の「 Import 」をクリック

SDK の組み込み　 1※ こちらはすでにやっております

「 Sta ｒｔ」シーンを開いて空の Game Object を作成し「 NCMBSettings 」にリネームします

SDK の組み込み　 2※ こちらはすでにやっております

Asset>NCMB の「 NCMBSettings.cs 」を「 NCMBSettings 」にアタッチします

SDK の組み込み　 3アプリケーションキー、クライアントキーを設定します

目次1 　ハンズオン前の準備2 　各アセットのインポート3 ゲームオブジェクトの設定準備4 NCMB の設定5 NCMB データストアの活用

NCMB データストアの活用　タスクリスト

1 　経過時間に保存するコードの実装

using UnityEngine;using System.Collections;using NCMB;・

・ ( 省略 )・

// Goal 到着が検知されたときvoid OnGoal(){

goal = true;// クラスの指定NCMBObject timeClass = new NCMBObject("Time");// カラムと挿入するデータの指定

　　　　　　 timeClass["time"] = lapTime;// 非同期でのアップロードtimeClass.SaveAsync();

}

経過時間保存ロジックの実装Assets ＞ Scripts ＞ UnityChan 内にあるスクリプト「 Timer.cs 」を参照ください

動作確認• ここまでの作業でサーバーに経過時間を

保存できるようになっています。• 一度ゲームを遊んでみて経過時間を保存し

てみましょう！

NCMB データストアの活用　タスクリスト

1 　経過時間に保存するコードの実装2 　保存されたデータをランキングで表示する 今回のハンズオンの発展内

容Assets ＞ Scripts ＞LeaderBoardをご参照ください

LeaderBoard フォルダの構成• LeaderBoard フォルダには以下のスクリプ

トが含まれています– LeaderBoard.cs– Rankers.cs

• ランキングは以下のメソッドで行っております– Timer.cs の OnGUI 部分

各スクリプトの解説• LeaderBoard.cs– mobile backend と接続して経過時間を引き出

す• Rankers.cs– 引き出した経過時間を一時的に保存するもの

LeaderBoard.cs の解説 1 public void fetchTopRankers(){

// データストアの「 HighScore 」クラスから検索

NCMBQuery<NCMBObject> query = new NCMBQuery<NCMBObject> (“Time");

query.OrderByDescending (“time");

query.Limit = 5; 　

スコアを保存している Time クラスを操作する

クエリの作成

time カラムを昇順に並び替えて引き出すよう設定

5 個だけ取り出すように設定

LeaderBoard.cs の解説 2query.FindAsync ((List<NCMBObject> objList ,NCMBException e) => {

if (e != null) {// 検索失敗時の処理} else {// 検索成功時の処理

List<NCMB.Rankers> list = new List<NCMB.Rankers>();foreach (NCMBObject obj in objList) {

string t = System.Convert.ToString(obj[" time "]);list.Add( new Rankers( t ) );

---- 以下省略 ----

スコアと名前を引き出す操作

引き出したオブジェクトから time だけを取り出す

引き出したスコアと名前

を Rankers クラスに保存

どうやって LeaderBoard.cs のメソッドを呼び出すか ?

今回、 LederBoard.cs は Unity に依存しない形で実装しています。開発状態によってはこのように Unity に依存しない形で実装することもあるかと思いますのでその場合のメソッドの呼び出し方についても記載しておきます

LeaderBoard lBoard;

lBoard = new LeaderBoard(); 　 // LeaderBoard クラスのインスタンス生成

lBoard.fetchTopRankers(); 　 // メソッドの呼び出し

おまけ

Otaku 　 City の設定現状こんなピンクですが…005339_08932_25_14>Models 内の　 PQ_Rmake_ AKIHABAR のインスペクタ　 Materials 　 Material Naming を「 From Model’s Material 」→「 Model Name+Modeli’s Material 」に変更その後　 005339_08932_25_14>Textures の 00_TexturesPlus をクリックすると「 Unapplied import Settings 」というアラートがでるので Apply すると…

カラーになりますなぜこうなるのか？まったくわからないので非公式な方法とご認識ください

スマホと MainCamera の傾きの同期ハコスコで行うことを想定しているのでスマホの傾きと MainCamera の傾きを同期させています同期させているロジックがAssets>Scritps>UnityChan 内の MyCameraCotroller.cs 　です

Input.gyro.enabled = true;if (Input.gyro.enabled){ Quaternion gyro = Input.gyro.attitude; this.transform.localRotation = Quaternion.Euler(90, 0, 0) * (new Quaternion(-gyro.x,-gyro.y, gyro.z, gyro.w)); //最初に見ていた向きとゲームの進行方向を合わせる this.transform.localRotation = Quaternion.Euler(0, -start_gyro.y, 0);}

MyCameraController.cs Update 内

ジャイロの値を取得する

ジャイロの値とカメラの傾きを同期させる

次のページにて解説

start_gyro.y についてstart_gyro は「 start シーン」で「 startボタン」をタップしたときに取得しているジャイロの値です。MyCameraController.cs この値を利用しthis.transform.localRotation = Quaternion.Euler(0, -start_gyro.y, 0);

としているのは、ゲームのユーザーが正面だと思う向きとゲームの進行方向を合わせるためです、もしこの一行がないと、ユーザーの向いている向きと関係なく、ジャイロの y軸の値が 0° のときをゲームの進行方向としてしまいます。

ゴールしたことを検知する方法

「 Goal 」 object に UnityChan が接触した際に“ OnGoal” というメッセージを発行するようにし、 UntiyChan にアタッチされている各ロジックの OnGoal メソッドが作動するようにしています。それにより経過時間のサーバーへの保存やアニメーションの切り替えが行えています

void OnTriggerStay (Collider col){if(callbackActive == false){

return;}//Unity ちゃんが Goal についたら各スクリプトの OnGoal を作動させるif(col.name == "Goal"){

gameObject.SendMessage("OnGoal");return;

}}

CollisionDetect.cs

今回、ゴールしたことを検知するロジックはAssets>Scritps>UnityChan 内の CollisionDetect.cs で記述しています

本日はお越しいただきありがとうございました！