【Unity】Joy-Conを使って新しい遊び考えたら超面白かった件

みなさん、初めまして！

この記事は、[Life is Tech ! Advent Calendar](https://qiita.com/advent-calendar/2024/mentors) 17日目の記事になります！

Life is Tech! でメンターをしているかみむーです！
普段はUnityコースを中心に、メンバーとものづくりの楽しさを日々共有していますっ！！
<br>

さて、Life is Tech! では、スクールと呼ばれる毎週もしくは隔週で、全国6か所現地教室もしくは、オンライン上でものづくりを学ぶためのプログラムがあります。
（スクールに関しては、詳しくは[こちら](https://life-is-tech.com/school/)をご確認ください！）

そのスクール内のアクティビティとして、先日、**「いつもとは違う新しい技術を使って、ものづくりをしてみよう！」** をテーマとした、少人数チームのハッカソンが行われました！

そして、僕が担当するUnityコースでは、

### Joy-Conを使って新しい遊びを創り出そう！
<br>
をテーマに3日間の日程で企画から開発、発表までを行いました！

その中で、メンバーがとてもクオリティの高い**Joy-Conを使った新しい遊び**を生み出してくれました！！

そこで今回は、作品の紹介はもちろん、**Joy-ConをUnityにどうやって導入したのか**などの裏側も含めて総振り返りしながら、ハッカソンの様子をお届けしたいなと思いますー
（技術的に詳しく内容に触れるというよりかは、その外観をざっと振り返っていく形式で書いていこうと思います！より技術的に詳しい内容は他の記事にお譲りします🙇）


少々長くなりますが、ぜひ最後までお付き合いいただけると嬉しいです！！



# 1. Joy-Conって...なんだっけ？
Joy-Conってなんなんだっけ？



ズバリ、これです↓

![230602_joyconnew.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678559/c24bcf4c-c9f9-d138-bd7e-7901e8049d81.jpeg)
（[こちら](https://store-jp.nintendo.com/feature/feature_joycon/?srsltid=AfmBOoomMsKeX7tLRRiXdUfkPD8lLCFZStg_KowzKwMGQ3UXmXlcKa5k)から引用）

日本が誇る任天堂さんよりリリースされた、Nintendo Switchの付属コントローラーですね！
（調べてみると、もうかれこれ7年前のゲーム機だとか！7年経っても全然古さを感じさせないとか、やっぱデザイン、アイディア全てが神すぎる...）
<br>

Joy-Conには基本的なボタン、スティック入力はもちろんのこと、

・「**加速度センサー**」や「**ジャイロセンサー**」をはじめとしたセンサー類
・「**モーションIRカメラ**」という赤外線のカメラ（これはRのJoy-Conのみ）
・リアルな触感を作り出すことができる「**HD振動**」

などの機能が、このスリムなボディ1台に全て搭載されています！

いや、超優秀すぎないかーーーー！？！？！？！？

:::note
<b>Joy-ConにはセンサーやHD振動、赤外線カメラなどが1台に搭載されている！！</b>
:::
---

こうしたJoy-Conの機能は、普段僕たちが考えるゲームとはまた違った**新しいゲームデザイン＝新しい遊び**を生み出すことを可能にしてくれます！！

その代表例で最も印象深いのは、「[リングフィット・アドベンチャー](https://www.nintendo.com/jp/ring/index.html)」ではないでしょうか！

ぼくも実際にプレイしたことがあるのですが、**Joy-Conで脈拍をとれた**時にはほんと感動しましたね！
（IRカメラで脈までとれるなんて！すごすぎる！！）

![exercise_image_pc_1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678559/fb62d525-27f8-22a3-448c-08df078765db.jpeg)
（Joy-Conで脈を測る様子。[こちら](https://www.nintendo.com/jp/ring/about/index.html)より引用）

また、「[1-2-Switch](https://www.nintendo.com/jp/switch/aacca/index.html)」というゲームも、Joy-Conをフルに活用した新しい遊びがたくさん詰まっていて、面白かったですよ〜！

<br>


実際のゲームも見ていただきつつ、だんだん**Joy-Conの可能性**、感じていただけたのではないでしょうか！

次はいよいよ**Unityと繋げていきます...！**

<details><summary> <b>【余談】その機能、どういう仕組み？？</b>
</summary>


余談ですが、実は任天堂さん公式が、こうした機能を学研さんとのコラボで解説している記事があります！

「**それぞれがどういう役割をしているのか！**」をその仕組みからめちゃくちゃわかりやすく解説してくれていて、面白いのでぜひ見てみてください！

[第1回: HD振動](https://www.nintendo.com/jp/topics/article/933eb428-b313-11e7-8cda-063b7ac45a6d)
[第2回: 加速度センサー](https://www.nintendo.com/jp/topics/article/933eb428-b313-11e7-8cda-063b7ac45a6d)
[第3回: ジャイロセンサー](https://www.nintendo.com/jp/topics/article/151137c8-d0d9-11e7-8cda-063b7ac45a6d)
[第4回: モーションIRカメラ](https://www.nintendo.com/jp/topics/article/06bba8b4-f5ca-11e7-86dc-063b7ac45a6d)
</details>

# 2. UnityとJoy-Con...本当につながるの？
Joy-Conにはたくさん機能があることはわかりましたが、これらをどのようにUnityと繋げれば良いのでしょうか！

実は、Joy-Con自体は**Bluetooth機器**に他ならないので、簡単にPCと接続できちゃいます！
（接続方法は、[こちら](https://usedoor.jp/howto/digital/pc/windows10-nintendo-switch-joy-con-setsuzoku/)の記事など適宜参照してみてください！）

![IMG_8642.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678559/bc61a6f8-a639-6447-580e-7307bd0c0d09.jpeg)
ほっ、本当に接続できてる！！
（直撮りお許しください...当時はまさか記事に使うなんて思いもせず撮ったので。）
<br>

Joy-ConがBluetooth機器ということは、他のBluetooth機器と同じ仕組みで信号のやり取りをしているわけなので、理論上は**先ほど紹介した機能の入力も、僕たちのPCでも受け取れる**ことがわかりますね！
（過去には[Joy-Conで家電を操作する](https://qiita.com/taznica/items/a4f5123f84641e4cac40)っていう記事もあったりします笑。実はこれもLit!のメンターの記事だったりするのですが笑笑）

これだけでも少しワクワクしてしまうのは僕だけでしょうか:grin:

:::note
**Joy-ConはBluetoothで簡単に接続できる！**
:::


<details><summary>※接続が不安定で、一定時間経つと切れてしまう場合</summary>

接続が切れちゃった場合は、<b>一度設定を消して、</b>再度ペアリングし直せば再接続可能です！
この原因は、おそらくJoy-ConのBluetoothの規格が古いことが問題な気がしています。
Joy-ConのBluetoothは世代的には3.0と、現行の5.0〜5.4に比べて古いものが採用されているんですよねー
</details>

---

さて、Joy-ConをどうやらPCに接続して、その入力を受け取ることはできそうだとわかりました！

こうしたデバイスを使う時、普段ならUnityでいえば**Input System**とかが全部いい感じにやってくれますよねー
僕もゲーム開発する時には、毎回ちょーお世話になってます！
（今回のアドベントカレンダーにも、[Input Systemでゲームパッドを使う](https://qiita.com/AoichiShisho/items/31a2bc353e3152afb3f8)という記事があったので、そちらもチェックしてみてください。）

実際、Input SystemでJoy-Conのボタン・スティック入力は取ることができます！（確か取れたよね？）

でも、今回使いたいのはそんなボタン、スティック入力だけじゃないんでした！

僕たちは、

### **センサーとか、Joy-Conならではの入力を使いたいんだ！**
<br>

加速度センサーとかジャイロセンサーは基本iPhoneやAndroidなどのスマホ機種しかUnityは対応していませんし、HD振動やモーションIRカメラももっぱらそれ専用には対応していません。

#### では、自分で0からBluetoothの送られてきた情報を処理するコードを書かなければならないのか！？

周囲には、うん、僕書くよこれくらい、余裕っしょと余裕をかましながらも、
内心はすごい大変そうだーｶﾞｰﾝ、と思っていた...そんな矢先！

**Joyconlib**という画期的なライブラリを発見しました！

やはり世の中便利なものですね！！！

これを使えば簡単にセンサーの値を取得したり、Joy-Conを自由に振動させたりできそうです！！

---
このJoyconlibは環境構築も簡単です！！

[こちらのGithubのReleaseのページ](https://github.com/Looking-Glass/JoyconLib/releases)から、Unity Packageをダウンロードし、Unityでインポートするだけっ！！
![スクリーンショット 2024-12-13 13.13.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678559/98f0ce2d-2dcf-a028-77ab-e4a28b2b1cc9.png)


あっさり環境構築Doneです。最高ですね！

より詳しい手順はこちらの記事に超絶わかりやすくまとめてあったので、適宜ご覧ください！↓

https://nn-hokuson.hatenablog.com/entry/2023/02/27/164608

---

環境構築後、一番最初にできたことはJoy-Conの傾きが実際にUnity上のCubeに反映されたこと！

![スクリーンショット 2024-12-17 11.25.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678559/5ddfcdad-d903-2fc5-1515-4957604b0275.png)


正直、これだけでめちゃくちゃ感動しました！

### やばい自分のPCで、UnityでJoy-Con本当に動いているーー！！

<br>

こればかりはマジで実際に体験して欲しいのですが、やっぱり僕たち大学生でも、普段使っているJoy-Conが自分のUnityで動くだけでめっちゃワクワクするものなんですねー！

:::note
<b>Joyconlibを使えば、簡単にUnityでJoy-Con動かせるぞっ！！！</b>
（環境構築は[こちら](https://nn-hokuson.hatenablog.com/entry/2023/02/27/164608)をチェック！）
:::

<details><summary>もし、導入後に動かないエラーが出た場合！(for <b>Mac Siliconユーザー</b>)</summary>

いざワクワクしながらJoyconlibを導入すると、原因不明のエラーが...

その名も<b>"DllNotFoundException"</b>

このライブラリ自身最後に更新されたの数年前だし、バージョンとかの関係でエラー起きてるのかなーとか思いながら、見ていくと、、
どうやら、ライブラリに入っているDLLがIntelのCPUには対応しているけど、MacのSilicon（M1,とかM2とか言っているあれ）には対応していないからだということがわかりました！
（僕の環境はM2のMacbookを使ってました！）

幸いにも、ネイティブコードの方のライブラリもGitHubで公開されているものでしたし、同じような境遇の方がすでに[こちらで記事](https://nn-hokuson.hatenablog.com/entry/2023/03/03/062301)にもされていたので、そちらを参照しつつ割とスムーズにエラーを解決することができました！

</details>

---

さぁ、**UnityとJoy-Conを繋げることはできました！**

あとはいよいよハッカソンに向けた最終準備です！

今回は、ハッカソンでは開発時間も限られていたので、よりメンバーが直感的に使いやすいよう、**機能の修正や追加**を幾らかこちらで行い、**より進化させたライブラリ**を自前の教科書と共にメンバーに展開することにしました！（内々ではJoyconlibPlusと呼んでいました！）
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678559/ed7b5a6a-51e5-03eb-772e-1810e155390d.png)
（実際にメンバー向けに展開した教科書の一部。ライブラリそのままでは少し使い勝手が悪いので、直感的で使いやすいよう、公開する機能の"粒度"を全て揃えた。）
<br>

そして、実際に動いているものが見えたほうが良いだろうと、**現行の教科書にあるデモゲームの操作をJoy-Conに移植しました！**（これは同じコースのメンターが一緒に作ってくれました！）

やっぱり、目の前で、みんなが通ってきた馴染みのある教科書のゲームをJoy-Conで動かせるだけで、一気に親近感が湧いてきますね〜〜

---
こんな感じで、ハッカソンに向けた準備も概ね完了っ！！！
次からは、いよいよメンバーのみんなと一緒にJoy-Conを使った新しい遊びを考えていきます！！！


<details>
<summary>
<b>【余談】より具体的に、どんな機能改修や追加を行なったのー？</b>
</summary>


具体的には、こんな感じの機能改修や追加を行いました！！

・HD振動に関する機能を改修（振動数と強さを入力するだけで実装できるよう簡略化）
・Joy-Conの振った回数をカウントする機能
・Joy-Conの表裏を検知する機能

こうした機能改修や追加をする際には、任天堂さんが実際にリリースした小中高生向けのプログラミング教育向けのゲーム「[ナビつき！ つくってわかる はじめてゲームプログラミング](https://www.nintendo.com/jp/switch/awuxa/index.html)」にて、Joy-Conの機能面の実装をどこまで提供しているのかなどを見ながら、参考にさせていただきました！
（→実はこのゲーム、[スクリプトリファレンス的なマニュアル](https://www.nintendo.com/jp/switch/awuxa/reference/contents/index.html)まで提供されてたりするんです！めっちゃ参考にさせていただきました！）

実は、こうした改修や機能追加などでもかなり紆余曲折あったのですが、具体的な実装にまでは今回は言及しません。

ただ、このJoyconlibは意外と界隈では知られているようで、たくさんの記事がネットに転がっていて、僕もその都度めちゃくちゃ救われました！

ぜひ、「**Joyconlib**」と検索して、色々と触ってみてください！
</details>

# 3. いざ企画！... Joy-Conの強みってなんだろ！
メンター側も万全の準備をした上で、いよいよハッカソンに挑みます！

まずはみんなで企画を考えるフェーズ

**Joy-Conを使った新しいゲームってなんだろう？**
**Joy-Conの強みってなんだろう？**

0から考えるのは少しハードルが高いので、まずは、デモでつくったゲームを実際に触ってもらったり、リングフィットや1-2-Switchの動画なども見てもらいながら、少しずつヒントを得ていきます。

こういうものを見ながらわかってくるのは、

### Joy-Conって実際の動きを真似たり、立体的なアクションをゲームに落とし込めるんだなということ！
まさに、リングフィットとかがそうだよね！
<br>

後半にはメンバーもそのことに少しずつ気づいてくれたようで、アイディアがだんだんと固まっていきます！

そしてこの企画のフェーズを経て、できた企画書がこちら！！

![IMG_8652.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678559/4f95ac47-3bdd-b7b9-ce0a-8d7cbd889751.jpeg)

トロッコに乗りながら、暗闇から現れるゴーストを懐中電灯のハイビームで倒すというアトラクション形式のホラーゲームです！！
懐中電灯にはバッテリーがあって、ハイビームをつけると敵は倒せるけど、その分電気を消費してしまい、その発電をするためにはもう一方のJoy-Conを振らなければならないというリスク&リターンも含めたゲームデザインです！！

まず、**Joy-Conを懐中電灯に見立てる**というアイディアが出たのがすごいっ！！
立体的な動きをうまくゲームデザインに落とし込むことができましたー！！

これこそ**新しい遊びが生まれた瞬間っ！！！**
<br>
なんとか企画フェーズはうまく乗り越えられたようです！
さぁ、次はいよいよ開発！
うまくJoy-Conは動いてくれるかな...？
ドキドキですね！

# 5. いよいよ開発！...Joy-Con動いてくれるかな？
企画のフェーズがおわったら、いよいよ開発に入っていきます！

短い開発時間なので、役割分担が大切！
ゲームデザイン・ステージ作成、プログラマーと役割を分けて、各々の作業に入っていきます。

ゲームデザインを担当してくれたメンバーは、自分で探し出してくれたアセットを使って、ステージのデザインと配置を終わらせてくれました！！！


![スクリーンショット 2024-12-17 11.33.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678559/46f1c7eb-08dc-6df4-a2a7-63c69132d8b7.png)
（作ってくれた実際のステージの様子）

仕事早すぎて超助かる！！！
<br>
一方、プログラム担当のメンバーは、Joy-Conの動きをゲームに落とし込んでいく作業をしていきます！

初めは、普段のキーボード入力に近い、**Joy-Conのボタン入力の処理**から始め、
**Joy-Conの降った回数に合わせて、懐中電灯のバッテリーが回復する処理**、
さらには懐中電灯がバッテリーを消費することを表現するために、「**HD振動**」の機能など、段階を踏みながら、Joy-Con固有の実装に挑戦していきました！

特に、「**HD振動**」に関する実装では、振動をHz単位で細かく調節してくれて、その結果リアルな振動を肌で感じることができ、よりその世界観に没入できるように！！

本人曰く、**電気のビリビリ感で驚いてもらいながらも、ゲームプレイのためにびっくりしすぎて、コントローラーは落とさないようなちょうどいい塩梅に振動を調節した**とのこと！

細部にまでこだわりを持って実装できていることがもうすでに最高なのですが、
実際に他のメンバーにも触ってもらうと、みんなまさに開発者の狙い通りの反応を示してくれて、**自分の表現したいことを的確に実装できていた**点も素晴らしかったです！！！

**1日（しかも2時間弱？）でここまでJoy-Conの実装ができるなんて凄すぎる！！！**


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678559/22f06ed0-0184-4505-dc51-19c0bc4941da.png" width=50% c>

（実際に作ってくれたゲームを筆者がプレイする様子。実際にJoy-Conを使って懐中電灯を操作し、洞窟の中を探索していきます！）

メンバーのみんなもJoy-Conに触れながらゲームを作るという、いつもとは少し違う体験を、とても楽しんでくれた様子で、終始盛り上がっていました！！！

(Joy-Conもすごいけど、何よりメンバーのみんなが着実に技術力をつけてきていて、そっちの方がすごかった！！僕も僕で負けてはいられないなと感じました💦💦笑)


# 6. 最後は発表！実際にプレイしてもらうぞ〜！！！
こうしてメンバーが企画から開発までしてくれたゲームはついに完成しました！

他のコースでも続々と完成品が出揃ってきて、AIを使ったお絵描きしりとりのアプリや、ストップモーションを使った短編映像など、個性豊かな作品をみんな作ってきてくれました！


こうして、各コース作品が出揃ったハッカソンの最終回は、みんなで発表会をしていきます！


発表会では、

このゲームの狙いは〜です！

や、

開発の時〜を工夫しました！！


など、実際にプレイしてもらうだけではなく、製作の裏側も含めて発表していきます💪

---
結論から言うと、

### めっちゃ大盛り上がりでした！！！
<br>

メンバーのみんなもめっちゃ堂々と発表してくれたし、何より体験したメンターが必死になってJoy-Conを振ってプレイする姿に、**会場全体から応援が湧き上がって、ハッカソンの雰囲気は最高潮に達しました！！！**（体の動きをゲームに取り入れられるJoy-Conの強みをここでも感じることができました！）

<br>
これにはメンバーのみんなも本当に嬉しそうだった！！
<br>

![IMG_8906.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678559/dc4d6b7e-9905-8e10-4f25-d5bae8861787.png)
（発表会の様子！みんな食い入るように前のスクリーンに注目してくれています！前の二人で協力プレイ！！だんだん応援の掛け声まで生まれてきました！！！）
<br>

そして、なんと**優勝**までしちゃいました。やったね！
<br>

初めこそ、うまく企画が誕生するかなーやJoy-Conちゃんと動くかなーなどの心配もありましたが、そんな心配をよそに、**メンバーのみんながめちゃくちゃ活躍をしてくれてたおかげで、なんとか企画から完成まで漕ぎ着けることができました！！！**

みんな、本当にありがとう！！！
<br>

こうして、3週に渡り行われたハッカソンは無事幕を閉じ、年内最後のスクールは無事に終了しました！

# 7. おわりに
今回はスクール内のハッカソンを通じて、Joy-Conを使ってメンバーのみんなと一緒に

1. **新しい遊びを0から考えて、**
2. **Unityで実装し、**
3. **実際に人に体験してもらう！**

というゲーム開発の一連の流れを行うことができました！
<br>
普段、Unityでゲームを作るってなると、どうしてもキーボードとマウスの入力がデフォルトであり、スタート地点になってしまいます。

ですが、こういう機会に、

### 入力を少し変えるだけでも、一気に遊びのデザインの視野が広がったり、新しい"楽しさ"や"アイディア"が生まれてきたりするんだ
<br>
ということを感じてもらえたらいいなって思い、<br>
今回はJoy-Conをハッカソンのテーマにしてみました！
<br>
<br>
これは必ずしもJoy-Conに限ったことではなくて、
普段のゲーム開発に、<b>"何か一つ違ったもの"</b>を取り入れることで、同じような効果が得られると思います！

そんなことを少しでもみんなが感じてくれたらいいなー
<br>
兎にも角にも、メンバーのみんなにとっても、**めちゃくちゃ刺激的な3週間**になったようで、**実際に自分の手でJoy-Conが動いたり**する様子を見て、**とても楽しんで、のめり込んでいた**姿が本当に印象的でした〜！

**本当にこのテーマでやって良かったな！** とあたらめて実感しています^^

何より自分もめっちゃ成長できた！
（需要あれば今度はJoy-Conの技術寄りの記事も書きたいなー笑）

また、こういった体験をこれからもメンバーのみんなに届けられるよう、頑張っていきたいと思います :muscle: :muscle: 
そして、これからも絶えず**新しい遊び**を考えていきたいな！！！

---

Life is Tech！では、Unityの技術力を上げることはもちろんのことですが、こうした**いつもとは少し変わった視点も取り入れながら、刺激的で楽しい開発経験、人生を変えるような体験**を日々、中高生のみんなに届けています！

少しでも興味がある中高生のみなさんはぜひ体験入塾に来てみてくださいね！（Unity以外でも大歓迎！）

--

そして、こういった体験を届けてみたい！というそこの**大学生**っ！！！

ちょうど先日から、年に一度の大学生メンターの募集も始まりました！

興味があれば、ぜひこちらもチェックしてみてください〜！！

---

少し長くなってしまいましたが、今回の僕のアドベントカレンダーの記事はこの辺でおしまいにしたいと思います！

ここまでお付き合いいただきありがとうございました〜〜！！！


明日は、ひむらさん（@himura-shitara）による「**SQLAlchemy 2.0 の非同期水平スケーリングについて**」です！

お楽しみに〜〜

そして、みなさま**良いクリスマス:christmas_tree:＆良いお年⛩️**をお過ごしくださいー！！

---

※1. Nintendo SwitchおよびJoy-Conは、任天堂株式会社（英語名 Nintendo Co., Ltd.）の登録商標です。

※2. Lit!について最後めっちゃ勝手に宣伝してますが、完全に個人の発信ですので公式見解とはなんら関係ございません。その点、ご留意くださいませ！