読者です 読者をやめる 読者になる 読者になる

TDUPRESS公式ブログ

コラムやエッセイなどをゆる〜く発信中。

「PROJECT TSUKUYOMi」とは何だったのか(クライアントアプリケーション編)


はじめに

この記事は当委員会が発行しているTDUPRESS「旭祭号」(2016)における一記事「PROJECT TSUKUYOMiとは何だったのか?」の技術面に関する補足的な記事です。

物理記事の方といっしょに読んでもらえると良いかも知れません。

PROJECT TSUKUYOMiとはなんだったのか

こちらは物理記事にも書いてあるので、簡単な説明にしたいと思います。

「PROJECT TSUKUYOMi」とは、本学の学園祭にて当委員会が展示していた写真パネルでの人気投票システムです。

以下の写真のような雰囲気でやっていました(物理記事からの引用です)。

f:id:dendai_tarou:20161208042323p:plain

こちらの記事では筆者の担当したUnityによる画面デザインについて軽く、やわめに触れていきます。

経緯

  • リアルタイムで投票結果が確認できる何かをUnityでそれっぽく作れと言われました。
  • でも10個とかの要素で写真と投票数を並列に確認できるデザインって難しくないですか?
  • そう言えば1月に見たSECCONの可視化システム格好良かったなあ…。

パクりました 閃きました

f:id:dendai_tarou:20161208042921p:plain

というわけで、おおよそのデザインが閃かれました。いや~閃いたな~。

勘の良い方ならお気づきかも知れませんが、「TSUKUYOMi」という名称は こちらのセキュリティコンテスト「SECCON」の戦況可視化システムである「AMATERAS零」にあやかりました。 (iが小文字なのはWeb担当のtypoです。)

こだわり

実はデザイン面に関しては「AMATERAS零を模倣した」で終わる話ですが投票ボタンの押下によって 中心の球から発射される投票球については少しだけこだわりました。

f:id:dendai_tarou:20161208050328g:plain f:id:dendai_tarou:20161208050329g:plain

この「無作為な方向に発射されるけど最終的に目的の点に到達する」という動作の実現には 生成される投票球オブジェクトそれぞれに以下のスクリプトを割り当てることで行っています。

using UnityEngine;
using System.Collections;

public class ParticleScript : MonoBehaviour {
    Vector3 force;
    Vector3 target = Vector3.zero;
    void Start () {
        // 初期化時に与えるランダムな座標
        force = new Vector3(0f, Random.Range(-2f, 2f), Random.Range(-2f, 2f));
    }

    public void setTarget (Vector3 target) {
        // 最終的に到達する座標
        this.target = target;
    }

    float cnt = 0f;
    void Update () {
        // フレーム毎に特定の方向に球を動かす
        // 方向はランダムな座標から目的の座標に遷移
        Vector3 vector = target - transform.localPosition;
        transform.Translate(vector.normalized * 0.1f);
        transform.Translate(force * (0.1f - cnt));
        if (cnt < 0.1f) {
            cnt += 0.001f;
        }
    }
}

簡単に説明すると「ランダムな座標X」と「最終的に到達するべき座標Y」を定めた上で 最初はXに強く近づけるようにオブジェクトを動かし、 フレームごとにYに近づける割合を高める、といった動作となっています。

見て頂けると分かるかも知れないですが、かなりのゴリ押しスクリプトになっています。

いや~ほらでも自分で言うのも何ですけど、なんか雰囲気良くないですか~。 ボタンをポチポチ押すとたくさんの球がこうウワァーってシュゴーってなるんですよ!!

公開

ここまでのデモを委員会室に持っていったところいつの間にか 「物理ボタン押下に反応する回路」、「ArduinoやWebSocketとの連携」、「Webページ」、「写真パネル点灯LED回路」、etc...が 他の様々な誰かの手により着々と完成されていき無事当日公開となりました。 すごいですね様々な誰か。

しかし、実際にお客さんの目に触れるほとんどの部分はこの「Unity製クライアントアプリケーション」なのです。 お客さんにシステムの説明を行うにあたり褒められが起きると嬉しい反面、縁の下となっている多くの技術を考え背筋が伸びるのが正直なところでした。

おわりに

ここまで読んでいただき、気づきましたか?実は本システムの技術的な面についてはほぼ触れていないんですね。 「ハードと通信との連携がどうなっているのか」、「どのようなネットワーク構成なのか」といった より詳しい内容については「「PROJECT TSUKUYOMi」とは何だったのか(ハードウェア、ネットワーク編)」にて、公開されています。

ぜひ、併せてお読み頂けると幸いです!!!