リクルート住まいカンパニー Tech Blog

ITのちからで暮らしをよくしたい、エンジニア・デザイナーが発信するTech情報メディア

スマートデスクでエアホッケーを作ってみた

f:id:recruit-sumai:20170307185041p:plain

こんにちは、スマートデバイス戦略開発グループの shimada です。 普段はモバイルアプリ開発などをメインに行っています。

今回はスマートデスクに対応したエアホッケーを作ったお話をしようと思います。

 

スマートデスクについて

皆さんはスマートデスクというものをご存知でしょうか? f:id:recruit-sumai:20170307185027j:plain 簡単にまとめますと、大きい机の中にWindowsが入っていてスワイプ、タッチで操作ができる、というものです。

(大きさ比較用にiPad Air2を置いてあります)

 

スマートデスクのディスプレイ、PCのスペックは以下の通りです。

ディスプレイスペック

PCスペック

このようなユニークなデスクを活かしていくにはどのようなアプリが有効かを考えた際、一つの答えとしてUnityによるマルチタッチ操作によるアプリが考えられました。

また、最近Cardboard用SDKによるVR開発などで注目を集めているUnityでアプリを一度作ってみるという経験の意味も兼ねてUnityでアプリを作ってみることになりました。

Unityについて

Unity公式ページ

>>Unityは3D、2Dを問わずマルチプラットフォームでゲームやインタラクティブコンテンツを制作する人のための最高の開発環境です。

とあるとおり、マルチプラットフォームでゲームやVRなどのインタラクティブコンテンツを制作するIDEをUnityと言います。

Unityでアプリを作成することにより様々なプラットフォーム(Android, iOS, Windows…etc)で動作するアプリを作成することができるのです!

エアホッケーについて

完成したエアホッケーのプレイ動画です。

 

三日ぐらいでざっくり作りましたが、住まいカンパニーのコミュニケーションルームに設置したところかなり好評で、たくさんの方にプレイしてもらえました!

Unityも初めて触りましたが、基本的にGUIでオブジェクトを操作でき、少しC#でscriptを追加するだけで、割と簡単にホッケーを実装することができました。

例えばマレット(プレイヤーが動かすラケットのようなもののことです)をタッチで動かすには以下のようにします

/// <summary>
/// マレットをタッチで移動できるようにする
/// </summary>
protected void MoveOnTouchMallet(MalletType type)
{
 if (Input.touchCount > 0)
 {
  for (int i = 0; i < Input.touchCount; i++) { // スクリーン座標をワールド座標へ変換 Vector2 touchPosition = Camera.main.ScreenToWorldPoint(Input.touches[i].position); if (type == MalletType.Left) { // 左側のマレットならタッチポジションが中線より左の場合のみ移動するようにする if (GameObject.Find("CenterLine").transform.position.x > touchPosition.x)
    {
     SetMalletPosition(type, touchPosition);
    }
   }
   else if (type == MalletType.Right)
   {
    // 右側のマレットならタッチポジションが中線より右の場合のみ移動するようにする
    if (GameObject.Find("CenterLine").transform.position.x < touchPosition.x)
    {
     SetMalletPosition(type, touchPosition);
    }
   }
  }
 }
}

左右のマレットごとにセンターラインを越えられないよう処理が分けてあります。

実際のマレットの位置は以下のメソッドで決定されます。

/// <summary>
/// マレットの場所を設定する
/// <param name="type">左右どちらのマレットか</param>
/// <param name="touchPotision">タッチ箇所</param>
/// </summary>
private void SetMalletPosition(MalletType type, Vector2 touchPosition)
{
 float malletX;
 float malletY;

 if (type == MalletType.Left)
 {
  if (touchPosition.x <= GameObject.Find("CenterLine").transform.position.x - Const.MALLET.RADIUS)  {   malletX = GameObject.Find("CenterLine").transform.position.x - Const.MALLET.RADIUS;  }  else  {   malletX = touchPosition.x;  }  malletY = touchPosition.y;  _rb.position = new Vector2(malletX, malletY); } else if (type == MalletType.Right) {  if (touchPosition.x >= GameObject.Find("CenterLine").transform.position.x + Const.MALLET.RADIUS)
  {
   malletX = GameObject.Find("CenterLine").transform.position.x + Const.MALLET.RADIUS;
  }
  else
  {
   malletX = touchPosition.x;
  }
  malletY = touchPosition.y;
  _rb.position = new Vector2(malletX, malletY);
 }
}

CenterLineオブジェクトより左右とも先に進まないように制御してあります。

実際のタッチ座標はUnityが取得してくれるので、それをマレットの座標と指定するだけでマレットの移動が実現できるのです!

 

感想

今回スマートデスクにUnityを使ってエアホッケーを作ってみた感想をまとめてみました。

  • 今後アップデートする機会があればスマートデスクならではの機能、パックが一定条件で分裂するなどの遊びを入れたいてみたいです
  • 最初マウスクリックイベントでマレットを操作していたのですが、それだと二つのマレットを同時に操作できない(考えてみればマウスポインタは一つしかないので当たり前ですね。。。)ので、途中でタッチイベントでマレットを操作するように修正したりと、ディスプレイの大きいスマートデスクの醍醐味である複数タッチをどのように有効活用することが考えどころでした
  • 実際に作ったゲームが動いたときの感動は忘れられません、私自身趣味でゲームをよくするのですが実際に自分で作ったゲームが動くと喜びも一層大きなものでした

 

如何でしょうか?

少しでもUnityの雰囲気が伝われば嬉しいです。

cardboard用SDKも配布されているので、今後はVRの分野でも期待できそうなIDEですね!

 

参考

https://developers.google.com/cardboard/unity/?hl=ja