コミュニティ機能を使って友達とつながる・・・「ゲームアプリをソーシャル化するAppSteroid」第6回 | GameBusiness.jp

コミュニティ機能を使って友達とつながる・・・「ゲームアプリをソーシャル化するAppSteroid」第6回

ゲーム開発 ミドルウェア

コミュニティ機能を使って友達とつながる・・・「ゲームアプリをソーシャル化するAppSteroid」第6回
  • コミュニティ機能を使って友達とつながる・・・「ゲームアプリをソーシャル化するAppSteroid」第6回
  • コミュニティ機能を使って友達とつながる・・・「ゲームアプリをソーシャル化するAppSteroid」第6回
  • コミュニティ機能を使って友達とつながる・・・「ゲームアプリをソーシャル化するAppSteroid」第6回
  • コミュニティ機能を使って友達とつながる・・・「ゲームアプリをソーシャル化するAppSteroid」第6回
  • コミュニティ機能を使って友達とつながる・・・「ゲームアプリをソーシャル化するAppSteroid」第6回
  • コミュニティ機能を使って友達とつながる・・・「ゲームアプリをソーシャル化するAppSteroid」第6回
  • コミュニティ機能を使って友達とつながる・・・「ゲームアプリをソーシャル化するAppSteroid」第6回
  • コミュニティ機能を使って友達とつながる・・・「ゲームアプリをソーシャル化するAppSteroid」第6回
今回はコミュニティ機能の利用方法と実装方法についてです。友達申請やメッセージ送信といった機能の利用方法から、開発側にとって実装の自由度が高いインゲームチャットまで解説します。

友達申請



(1) 友達を見つける

サンプルアプリのCommunityボタンからAppSteroidのGUIに入るとコミュニティ、リーダーボード等の画面内でプレイヤーの名前が表示されているのが分かると思います。

それらのプレイヤーのアイコンをタップしてプロフィール画面を開いてみるのも良いですし、相手のユーザーIDや名前が分かっていれば、それらから検索してとも友達を探すこともできます。


※リーダーボードでプレイヤーアイコンをタップ


検索を行う場合はマイページの「フレンズ」をタップして検索ページに入ってください。



いずれの方法でも良いですが、最終的に友達のプロフィール画面を開く形となります。

(2) 友達申請をする

相手のプロフィール画面内の「フレンド申請」ボタンをタップして申請します。



リクエストが届いた側には通知が来ますのでマイページの「リクエスト」をタップして、以下の画面から承認する形となります。



これで友達になることができます。

メッセージ送信と通話機能



友達になると、相手に対して連絡が取りやすくなります。

タブメニューのメッセージから新規メッセージ作成アイコンをタップして開くと、友達一覧が表示されますので、メッセージを送りたい相手を選択してそのままメッセージを送信できます。



メッセージはテキストだけでなく、「ステッカー」「カメラで撮影した画像」「画像」「プレイ動画」などあらゆるデータを送ることが可能です。

以下はステッカーを送ったところです。



さらにボイスチャット付SDKの場合、メッセージ画面から相手との通話も可能です。メッセージ画面右上の「電話アイコン」をタップすると通話画面に入ります。



通話ボタンをタップすると相手側でも通話確認の画面が表示され、承諾されると通話が始まります。



友達や友達以外の相手にメッセージを送ったり通話を申し込んだりすることも可能です。その場合は、相手のプロフィール画面を開いて「メッセージ」や「通話」ボタンをタップします。



こういった流れはSkypeやLINEなど、一般的なメッセージアプリの操作と同じです。AppSteroidのGUIにおいて、それらのコミュニティ機能が一通り提供されています。

インゲームチャット



これまで説明した機能はAppSteroidのGUI上から利用できるものがメインでしたが、次はゲーム内で利用できるインゲームチャット機能について説明します。

インゲームチャットはグループメッセージ機能を介して行いますので、事前にグループを作成しておく必要があります。先に説明しましたメッセージのやりとりを行うことで自動的にグループが作成されます。複数人のグル―プにするには、複数の相手を指定してメッセージを送信すればOKです。

サンプルゲームにインゲームチャットを実装してみましたので、それを元に進めていきます。

まず、スタート画面に「Chat」ボタンを追加しました。このボタンをタップするとチャットパネルを開きます。



本来インゲームチャットなのでプレイ画面でもチャットが行えるようにしたいところですが、今回のサンプルゲームは時間内でステージクリアするルールであることからプレイ中のチャットは難しいため、スタート画面に配置しました。

Chatボタンを押すと、ポップアップする形でグループ選択パネルが開きます。ここではチャットを行うグループを選択します。



プレイ中にチャットを行うようにする場合は、小型のパネルにするべきかと思いますが、今回は解説しやすいように大きなパネルにしてみました。

グループを選択するとチャット画面に入ります。



上記のようにゲーム画面上にポップアップする感じのチャット機能にしました。
ここまで実装したデータをGitHubに上げていますので、必要に応じてご確認ください。(https://github.com/sinfonia2015/AdditionCrash)

UnityでのUIパーツの構成は以下のようになっています。



グループ選択用(GroupCanvas)とチャット用(ChatCanvas)のキャンバスをそれぞれ用意します。タップ操作に応じてこのenabledを切り替えています。

GroupCanvasでは、Contentパネルの子供としてグループ名のボタンを生成していきます。

ChatCanvasでは、「ChatLog」Textにチャットの履歴が表示されます。送信メッセージは「InputField」で入力し、「SendButton」で送信します。

チャット全般を制御する「Chat.cs」を作成し、いずれかのオブジェクトにセットしてヒエラルキーに置きます。(サンプルでは「Chat」という空オブジェクトに設置)

「Chat.cs」のソースは以下のようにしてみました。

using UnityEngine;
using UnityEngine.UI;
using System.Collections;
using System.Collections.Generic;
using Fresvii.AppSteroid;
using Fresvii.AppSteroid.Gui;
using Fresvii.AppSteroid.Services;

public class Chat : MonoBehaviour {
// チャットキャンバスのコンポーネント
[HideInInspector]
public Canvas chatCanvas;

// グループ内のメンバーを表示するキャンバス
[HideInInspector]
public Canvas groupCanvas;

// メンバーの名前ボタン
public GameObject nameButton;

// 画面で表示するチャットログ
public static string logMessage = "";
// チャット入力メッセージ
private string chat = "";
// メッセージグループの配列
private IList groups = new List();
// チャットを行うグループ
private Fresvii.AppSteroid.Models.Group inGameChatGroup;

// ----------------- 変数ここまで -----------------------------------------

// グループメンバーパネルを表示・非表示
public void ShowGroup() {
if(!groupCanvas.enabled) {
groupCanvas.enabled = true;
StartCoroutine("MakeGroupList");
} else {
groupCanvas.enabled = false;
// Contentの子要素(=ボタン)を全削除
foreach(Transform n in GameObject.Find("Content").transform) {
GameObject.Destroy(n.gameObject);
}
}
}

// グループリストを表示するコルーチン
IEnumerator MakeGroupList() {
yield return new WaitForSeconds(1.0f);
// グループボタンを作成、並べる
if(this.groups != null)
{
foreach(Fresvii.AppSteroid.Models.Group group in this.groups){
// ボタンテキスト
string members = "";
// ボタンテキストにメンバー名を追加していく
if(group.Members != null)
{
foreach(Fresvii.AppSteroid.Models.Member member in group.Members)
{
members += member.Name + ", ";
}
}

// ボタンPrefabを生成、contentパネルの子供にする
GameObject clone = Instantiate(nameButton) as GameObject;
clone.transform.SetParent(GameObject.Find("Content").transform);

// ボタンテキストを変更
clone.GetComponentInChildren().text = members;
Button button = clone.GetComponent<Button>();
button.onClick.AddListener (() => {
ShowGroup();
ShowChat(members, group);
});
}
}
}

// チャットパネルを表示・非表示
public void ShowChat(string title, Fresvii.AppSteroid.Models.Group group) {
if(!chatCanvas.enabled) {
chatCanvas.enabled = true;
inGameChatGroup = group;
GameObject.Find("Chat_Title").GetComponent().text = title;

if(inGameChatGroup != null) {
logMessage += "チャット開始" + "\n";
} else {
logMessage += "グループIDが取得できていません" + "\n";
}
}
}

// チャットパネルを閉じる
public void CloseChat() {
chatCanvas.enabled = false;
}

// チャット送信
public void SendChat() {
FASGroup.SendGroupMessageInGames(inGameChatGroup.Id, chat, delegate(Fresvii.AppSteroid.Models.GroupMessage groupMessage, Fresvii.AppSteroid.Models.Error error)
{
if (error != null)
{
if (FASConfig.Instance.logLevel <= FAS.LogLevels.Error)
Debug.LogError(error.ToString());
logMessage += error.ToString();
}
else
{
if (FASConfig.Instance.logLevel <= FAS.LogLevels.Verbose)
Debug.Log(groupMessage.Text);
logMessage += groupMessage.User.Name + " : " + groupMessage.Text + "\n";
}
});

// 入力フィールドを空にする
GameObject.Find("InputField").GetComponent().text = "";
}

// グループメッセージ作成イベントを登録
void OnEnable()
{
FASEvent.OnGroupMessageInGameCreated += OnGroupMessageInGameCreated;
}

// グループメッセージ作成イベントを解除
void OnDisable()
{
FASEvent.OnGroupMessageInGameCreated -= OnGroupMessageInGameCreated;
}

// メッセージ受信
void OnGroupMessageInGameCreated(Fresvii.AppSteroid.Models.GroupMessage groupMessage)
{
Debug.Log("In Game chat : " + groupMessage.User.Name + " : " + groupMessage.Text);
logMessage += groupMessage.User.Name + " : " + groupMessage.Text + "\n";
}

IEnumerator Start () {
chatCanvas = GameObject.Find("ChatCanvas").GetComponent<Canvas>();
groupCanvas = GameObject.Find("GroupCanvas").GetComponent<Canvas>();
groupCanvas.enabled = false;

// 初期化処理完了まで待機
while (!FAS.Initialized)
{
yield return 1;
}

// グループリストを取得
FASGroup.GetGroupList(delegate(IList groups, Fresvii.AppSteroid.Models.Error error)
{
if(error == null){
this.groups = groups;
foreach(Fresvii.AppSteroid.Models.Group group in this.groups)
{
group.FetchMembers(delegate {});
}
}
else
{
Debug.LogError(error.ToString());
}
});
}


void Update () {
// チャットログエリアにログを表示
GameObject.Find ("ChatLog").GetComponent().text = logMessage;
// 入力メッセージをchat変数に格納
chat = GameObject.Find("InputField").GetComponent().text;
}
}


この中で、チャットの送受信の基本的なコードは青字の部分になります。

<送信する場合の基本形>

FASGroup.SendGroupMessageInGames(メッセージグループのID, "送信メッセージ", (groupMessage, error)=>
{
if (error != null) // 送信エラー
{
Debug.LogError(error.ToString());
}
else // 送信成功
{
Debug.Log(groupMessage.Text);
}
});


サンプルではこの送信コードを「SendChat()」という関数の中に入れ、送信ボタンを押した時に実行されるようボタンに設定しています。

この時、メッセージグループIDは、グループ選択パネルで選択したグループIDを引き継いで設定しなければなりません。グループ選択パネルでグループ一覧を作成しているのが「MakeGroupList()」コルーチンです。グループ全体から「foreach」で各グループ単位のボタンを作成していく際に、「AddListener」でグループ(goup)とそこに所属するメンバー(member)をボタンイベントにセットしています。

※グループ全体のリストは、「Start()」内の
FASGroup.GetGroupList(delegate(IList groups, Fresvii.AppSteroid.Models.Error error)
以下の部分で取得しています。

サンプル「Chat.cs」では送信した際に自分の送ったメッセージもログに残したいので
「SendChat()」の「else」内に、
logMessage += groupMessage.User.Name + " : " + groupMessage.Text + "\n";
を追加しています。

<受信するための基本コード>

void OnEnable()
{
// グループメッセージ作成イベントを登録
FASEvent.OnGroupMessageInGameCreated += OnGroupMessageInGameCreated;
}

void OnDisable()
{
// グループメッセージ作成イベントを解除
FASEvent.OnGroupMessageInGameCreated -= OnGroupMessageInGameCreated;
}

// グループメッセージ作成時に、グループメッセージモデルを引数に呼び出される
void OnGroupMessageInGameCreated(GroupMessage groupMessage)
{
Debug.Log("In Game chat : " + groupMessage.User.Name + " : " + groupMessage.Text);
}


「OnEnable()」と「OnDisable()」は、グループメッセージが作成された時にチャットイベントを発生させるための記述です。

そして、イベントが発生した際に「OnGroupMessageInGameCreated」が実行されます。

サンプル「Chat.cs」では、
logMessage += groupMessage.User.Name + " : " + groupMessage.Text + "\n";
という行で、チャット履歴に送信されたメッセージを追記するようにしています。

基本形さえ分かっていればUIは自由に作成できますし、キャラクターを使ってプレイするようなゲームであればゲーム内でキャラクターに吹き出しをつけてチャットを表示するというような利用もできます。

以上、今回はAppSteroid GUIを使った一般的なコミュニティ機能から、独自の実装が可能なインゲームチャットの仕組みまでのざっとした説明でした。

次回は「インゲームボイスチャット」と「インゲームビデオキャプチャー(現在iOSのみ対応)」について説明したいと思います。
《Fresvii》

関連ニュース

特集

人気ニュースランキングや特集をお届け…メルマガ会員はこちら