【Unity】シス研メンバーに祝福を

はじめに　メリークリスマス！

ワッハ↑ハ↑　！
クリスマスイブを暇しているメンバの皆に少しでも感動と祝福を届けたいので，無理やりにでも笑顔になってもらうべく，ネタアプリを作っていこう思います．とは言えまず，自己紹介と執筆動機から．始めまして？シス研「Itooooo_Main@Slack」です．これまでめったに記事とか書いてこなかったのですが，「学生生活最後のクリスマス，最後くらい伝えたいことや制作を残したい！」みたいな気持ちになりこの記事を執筆します．
もしよかったら読んでいってください．
身内ノリの記事なので，一定期間で消しちゃうかも．

制作動機

では何を残していくのか？
僕は大学生活の中で何よりも「人との繋がり」が何よりも重要であることに気が付きました．何をするにしてもその人がどんな人なのか，信頼できるのかを知らなければ話は始まりません．また，チーム開発や研究活動において，一人では大したこともできないと実感してきた人，これから実感していくひと，いると思います．特に今の世代では社会情勢的に人間関係が希薄になりがちだと思います．そこで，僕は考えました．シス研にはどんな人がいるか，何ができる人がいるのか，それが分かる人間データベースが必要だと．

まずはその第1弾！

「シス研ガチャ」

を提案します．

先ほど人間データベースが必要であるといいました．データベースを作るにしても最初はオフラインで会いたいものです．そのためのシス研に来たくなる，モチベーションになるアプリになればと思っています．

仕様検討

• プレイ環境

  制作環境はUnityです．僕がそう判断しました．Unityは様々なOS，デバイスで動くものを製作可能です．ユーザ，すなわちシス研メンバの皆さんにどうプレイしてほしいのか．優先すべき観点は何か？
  この制作は既存IPでもなんでもなく，制作の趣旨からまずは簡単にプレイできなければ，触ってもらえなければ意味がありません．ということで，手軽さという観点を優先します．となるとブラウザですよね．いろんなアプリがブラウザでもできるようになっているのは，やっぱり手軽さからでしょうね．Unity的に言えばWebGLをビルドターゲットにします．

• 内容

  触れてもらうことも大事ですが，継続してもらうことも大事です．
  「すべては依存症になるようデザインされている？――僕らをのめり込ませる6つのテクニック」によると皆さんにこのゲームの中毒者になってもらうためには

  1. ちょっと手を伸ばせば届きそうな魅力的な報酬(目標)
  2. 抵抗しづらく、また予測できないランダムな頻度で、報われる感覚（正のフィードバック）
  3. 段階的に進歩・向上していく感覚(進歩の実感)
  4. 徐々に難易度を増していくタスク(難易度のエスカレート)
  5. 解消したいが解消されていない緊張感(クリフハンガー)
  6. 強い社会的な結びつき(社会的相互作用)
  

  の存在があることが重要だそうです．
  全部含めるのは難しそうなので今回は1，2，5，6当たりを最大化できる簡単なアプリで考えていきたいと思います．
  また，前述の手軽さという観点も含めて考えると何かしらのガチャがよさそうです．２と手軽さの観点からゲーム性は排除し，単純なクリッカーゲームみたいにして6の観点から出現する報酬はシス研のメンバにしたいと思います．

  もう，タイトルから駄々漏れでしたがこんな内容で作ります．

制作課程

制作する上でハマったこと，考えたことを殴り書きしていきます．重要→ほぼ確か約だいたい，正しいことをいうように心がけますが，間違っていたらごめんね．SideViewGolfなんかを作ったことがあるくらいだから，実はほぼハマったことはないんだけど，ハマりそうな部分として，ハマったことにするね．特筆すべきコーディングは無かったよ．

• 最終システム構成
  

  最初はガチャシステムをUnity製ページに入れ込んでいたよ．メンバデータなどのリソースを全て突っ込んでいたのでアプリだけで500MBくらいあったよ．通信料ヤバかったので，ガチャシステムとして分けたよ．代替のバックエンドサーバを「k22097　仁木正人　nikimasato
  @Slack」がやってくれたよ．そっちの詳しいことは分からない．魔法で動いているよ．マジ感謝

• ユーザ視点フローチャート
  

• シス研wifiにつないでやってみて(シス研ガチャ)
  
  http://172.16.0.169/SyskenGacha_Xmas

• フォント

  • テキスト関連はWebGLで書き出すと大体□とかになるよ．これはデフォルトのフォントが日本語に対応していないからみたい
  • Googleフォント(Google Font)から取ってきたよ.Googleはいろいろデザインに使える物を無償配布していたりするよ．すごいね！
  • 変換作業

    • TextMeshPro用の形式にする必要があるよ(というか全部TMPになったんだUI->Textなくなったんだ)

    • 基本的にはここを参考にするといいけど，特にWebGLでは

      • Sampling Point Size 13(フォントによる)
      • Atlas Resolution 2048 * 2048 (以下)

      にする必要がある．これはブラウザの制約によるものらしいです．

• 非同期処理

  • WebGLではマルチスレッドが使えないみたい(参考)
    • Unityで非同期処理する方法はいくつかあるみたい(参考)
      • 中でもマルチスレッドを使わず非同期に見せかけることができるコルーチンを使うよ

• Webサーバ

  • CORS → リバースプロキシ
    • ページ配信サーバとバックエンドサーバを別々にしたせいで怒られるよ.これをCORSの制約っていうらしいよ(参考)
    • 困ったけどリバースプロキシで解決(参考)
      • クライアント的には同一サーバであるように見せかける技らしい

• 仮想マシン Proxmox

  	Spec(Apache)
  OS	Ubutntu 22.04
  CPU	4 core
  Mem	4 GB

  	Spec(Backend)
  OS	Ubutntu 22.04
  CPU	1 core
  Mem	512 MB

  パフォーマンス分析とかしてないけど，同時に4, 5人でも今のところ動いているのでヨシ！

• Github

  • Gitignore(参考)
    • UnityプロジェクトをGithubで管理したいと思ったらプロジェクトファイル全部あげればいいと思うじゃん．
    • 例えば画面配置なんかも共有されちゃうとか100MB以上のファイルはアップロードできないとかあるのでめんどくさいよ．
    • そのためにクライアントの個々で違う部分とかは無視したほうがいいのでその設定ファイルだよ．100MB以上のファイルとか画像リソースファイルとかは他のストレージサービスを使おう．
  • 消えたパスワード認証(参考)
    • Source Treeを今まで通り使おうとすると，プッシュ時になんか認証に失敗するよ．クローン時にトークンを発行して，URLに入れ込む必要があるみたい．僕はセキュリティー意識がばがばなのでトークン期限無期限にしちゃったよ．

• 確定演出

  • 本当は何にも結果に影響しないのにユーザがあたかも自分の操作が結果に影響しているかのように見せかけることができる手法の一つみたい．
    • 偶然における操作量がエンタテインメント性に及ぼす影響の調査
    • 制御幻想とは何か？
  • 今回はシス研から溢れ出るオーラの色で演出別けすることにしたよ
    • SpriteGrow
      • spriteのエッジを光らせてくれるよ
      • 色は大体Apex方式だよ
    • PostProcessing
      • SpriteGrowを使うのに前提となるアセットだよ
      • 結構動作重い

• 素材

  • Medibang Paint
    • 簡単な素材はこれで書いたり，切り抜いたりしたよ
  • PowerPoint
    • シルエット画像をよくこれで作るよ．

• メンバ画像の変換

  • バックエンドサーバからとってきたPNG形式の画像はそのままではSprite Rendererでは表示できないよ．Texture → Texture2D → Spriteの変換作業がいるみたい．
    • Texture → Texture2D(参考)
    • Texture2D → Sprite (参考)
  • PCでは軽いものの，スマホだと重かったので結局却下，手軽さの観点に反する．
    • 結局Textureをそのまま扱えるRaw Imageにしたよ．

• バックエンドサーバとのやり取り

  • バックエンドサーバにUnity(ブラウザ)からガチャしたいってリクエストを送るとガチャ結果のシス研メンバデータと画像が送られてくるよ．Jsonでやり取りをしていて以前のアドベントカレンダ記事とほぼ同じことをしているよ．

できたもの

1 .タイトル（クリスマス仕様）

2. 爆破

3. シス研メンバ爆誕！

運用と広告

• いいものを作っただけでは誰の目にも触れることはできません．シス研メンバに周知，宣伝する必要があります．

  • QRコード
    • 適当に調べて出てきたサイトを使った．
    • QRコードって文字列をただ単に画像に変換したものなんだね！
    • https://twitter.com/intent/tweet?text=%E3%81%B6%E3%82%8A%E3%81%B6%E3%82%8A とかやるとツイート用リンク作れたりする！面白い
  • 広告風景
    
    

• メンバデータアップロードシステムの公開と運用

  • みんなもアルバムとして活用できるようにメンバ追加できるようになっているよ．後日，やりかたをSlackで共有するよ．↓バックエンドシステム　ユーザ認証も備わっていて，プライバシーも大丈V!?
    

今後の展望

最終目標はシス研メンバ(OB含む)の人間データベースをつくることです．横の繋がりはもちろん，縦の繋がりもつくれないかと思っています．そういった意味ではまだまだな部分も多く，その点，今後誰かに引き継いで貰ったり，追加開発してもらったりして，最終目標に少しでも近づけたいです．この点に関して今ある課題を記して行きます．

• 登場キャラにタグを追加してピックアップガチャなようなことをできるようにする．

• 内容が内容だけに外に公開できません．ある意味シス研に来るモチベーションになっていいのかなとも思いますが，モザイク処理や登場の可否の調査，アップロード内容の審査プロセスなんかを検討して，外部公開もできるようになるといいなと思っています．

• アクセスログをとってアップロード件数とってちゃんと報酬(ジュースとか)に反映したい．

• 来年度以降のゲーム制作班の題材にでもしてくれるとうれしいと思っています．

おわりに

シス研ガチャ楽しんでもらえたでしょうか？これから来るシス研メンバもぜひプレイしてもらってこんな人がいるんだ！とか興味を持ってもらえるとうれしいです．

人を楽しませる，楽させる．それが技術の存在意義です．
逆に言うと技術の先には常に"人"がいるわけです．(小泉構文)
"人"に技術が伝わらなくても意味がないし，"人"に技術がなくでもいみがない．
アイデアも"人"の求めに応じて生まれる．
こういったことから

• 技術大事！だがそれと同時に "人"！

ということを伝えたかったです．
シス研メンバには技術！技術！とそればかりに没頭してしまう人もいますが，視野をもっと広げてみて，その技術は誰に役立つのか，どう役立つのか．誰と実現するのか，そういったことを想像できるような人になってほしいと思います．多分研究室ではいっぱいその点を先生やお世話になる方に聞かれますよ．技術を"人"に活用していきましょう！

以上，僕は何か残すことができたかな？この記事で誰かを幸せにできますように！
それではよいお年を！メリークリスマス～　明日のカレンダーの方よろしく！