nabettu.
Ogaki Mini Maker Faireにリズムゲームを作って初出展してきました with エンジニアと人生コミュニティ
個人開発作ったものReact

Ogaki Mini Maker Faireにリズムゲームを作って初出展してきました with エンジニアと人生コミュニティ

こちらは エンジニアと人生アドベントカレンダー の11日目になります。

エンジニアと人生」というのはWeb系エンジニアのオンラインコミュニティで、iOSアプリエンジニアのshu223さんが中心となってSlackでの交流を主に活動しています。

そのコミュニティメンバー6人で11月に岐阜県の大垣で開催されたMiniMakerFaireにそれぞれ出展して来たので、「エンジニアとしての新しい挑戦」として行った自分の出展についてブログに書いていきます。

出展のきっかけ

shu223さんとコミュニティメンバーとランチしていて「MakerFaireって前から出てみたかったんですよね〜」と意気投合し、そのメンバーが今度名古屋に引っ越すということで、ちょうど近くの日程で参加募集する大垣でのMiniMakerFaireを発見しました。

ちょうど岐阜ではそのコミュニティメンバーがFooBarCafeというカフェをやっていたりして、前に一度遊びに行って馴染があったこともあり、名古屋・岐阜・三重のメンバーと私とshu223さんをあわせて6人でそれぞれでブースを出して申し込んでイベントに参加することになりました。

作って展示したもの:カタタタタップ

そこで私はせっかくMakerFaireということで、ハードウェアを伴うものを展示しようと思い、**肩たたきと音楽を組み合わせたリズムゲームである「カタタタタップ」**を作って展示してきました。

リズムゲームの展示ということで必要になった

  • ハード(肩叩き型コントローラー)
  • ソフト(リズムゲーム)
  • コンテンツ(音楽と譜面) それぞれを制作しました💪

ハード:肩叩き型コントローラー

右肩・左肩を叩くとそれぞれソフト側に信号を送るデバイスが必要です。尚且つ肩に乗せるので、高さが出る物理ボタンは難しい。。。

私は高専出身で電子回路周りの基礎はやっているものの、ゼロからデバイスを作るのはハードルがありました。しかし2ボタンならなにかを横展開すればなんとかなるのでは・・・?ということで今回は**「100円マウスをバラして、右クリック・左クリックに圧力センサーを繋いだデバイス」**を制作しました。(それもあって、ブースの名前は100円マウス改造部にしましたw)

**しかも元がマウスなのでどんなデバイスでも刺せば動きます!**なんとiPad OSでも!

マウスをバラしクリックボタンをはずして、圧力センサーを装着で、叩けばクリック扱いに。圧力センサーは薄いので、肩に貼るのにピッタリでした

(曲げセンサーも試しましたが、曲がった状態がスタートすると間に回路を挟む必要がありましたが、これはなんとそのままです)

ソフト:リズムゲーム

今回はなんとなく「肩たたき」のほっこりアナログ感と真逆な”サイバーなトンマナ”でデザインを制作してみました。リズムゲームといえば”ビートマニア”というのもあり、それもデザインの参考にしました。

今回2日間の展示だけでかつセットアップも自分で行うため、長期運用を考慮しなくていいので、とりあえず手慣れたReactでゲーム製作、アニメーションはCSSです。(特にゲームエンジンなし)

ブラウザゲームにすることで、これもまたどのデバイスでもネットワークに繋がれば動く形になりました!(しかし実際に動かすとマウスの制約はちょいこちょこありましたが)

こちら実際のゲームのプレイ動画です。中身は割と突貫で作ったのですが、Figmaで先にデザインを作ったので、意外とそれっぽくなりました。

https://prod-files-secure.s3.us-west-2.amazonaws.com/5ea75149-3224-4ef4-be10-40cd67480f4f/2fe11560-f1b8-4103-bc15-f4cd9057cadf/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%86%E3%82%99%E3%82%B5%E3%82%99%E3%82%A4%E3%83%B3_(1)(1)(1).mp4

コンテンツ(音楽と譜面)

今回はリズムゲーなので音楽が必要です。肩たたきなので、童謡の肩たたきの歌を採用しました。(70年前に作曲者がなくなっているので曲は著作権フリー)

ボーカロイドにChatGPTと一緒に作った歌詞を歌わせて、Macのガレージバンドで楽曲製作しました。

音楽を作ったらゲームに取り込み、音楽に合わせてノーツ(叩く譜面)を制作しました。ノーツについては**「自分が叩いた譜面がそのままノーツとして保存できる仕組み」を作って、そのまま採用**しました。

実際の展示の様子

展示ではずっと肩を叩かれる人を用意するわけにはいかないので、Amazonでトルソーだけのマネキンを買ってきて、肩に例のコントローラーを貼って、iPadでプレイ出来るようにしました。

結局2日間行いましたがデバイストラブルはほぼなく、ソフト側で繋ぎっぱなしにするとたまに右クリックが効かなくなるので再接続したのがあったくらいで2日間大きな問題なく動きました。

実際に人の肩にセンサーを貼ることでプレイ可能なので、余裕が出てきた2日目は実際に来場者の肩に貼ってプレイしてもらいました

マッサージとゲームを組み合わせる体験がはまって、思ったより楽しんでもらえたようで嬉しかったです。実際に自分の作ったもので遊んで楽しんでもらえる様子を見ると心の栄養になりますね!

反省点・次回展示するとしたら、、、

  • 小学生の娘の難易度に合わせて譜面を作ったのですが、ちょっと難しすぎたので難易度を調整する必要がありました
  • コントローラーがむき出しなので、ちゃんちゃんこ型や手ぬぐい型にして、肩に置いてプレイするのを基本にしたいですね
  • 会場の他のブースの音に負けると遊ぶ事が困難になるので、イヤホンを用意するなど対策する などなど、、、他にも色々課題はありました。

実際2日間連続で展示するとたくさん問題点が出てきますね!学びです。

もし**カタタタタップを遊びたい!という方がいましたら気軽に声をかけてください。**マウスでできた肩叩きコントローラーを持っていきます。

まとめ

これで**「MakerFaireに展示する」という夢の一つが叶いました✌️**

今回のイベントで「今までやろうと思ってやれていなかったこと」が色々と達成できました。

  • MakerFaireに出る(Miniだけど)
  • ハードウェアを伴ったものを制作する(既製品の改造だけど)
  • ゲームを展示して遊んでもらう
  • リズムゲームを作る(実装はかなりテキトーだけど)
  • DTMで楽曲制作をする(昔齧るだけはやった事があったand既存の曲のmixだけど)
  • ボーカロイドを使う

また、今回全体として企画を進めていて割と余裕がありました。そのポイントとして、上記以外は逆に全部既存のスキルで乗り切れたことが大きいと思いました。

  • 展示準備(技術書典やボードゲームの販売で経験済み)
  • ハードとの繋ぎ込みがいらない技術選定(マウスなので接続周りでのトラブルなし)
  • ゲームだがReactで乗り切った(そしてブラウザゲームにしたので端末を選ばず動く) 未経験の分野に手を出す時には、不確定要素が大きいポイントを先に片付ける事はいつも大事ですね。

ハード制作を伴ったゲームの展示は初めて行いましたが、この機会に飛び込んでみて非常によい経験になりました。コミュニティや、イベントを開催してくれている方々に感謝です。また当日遊びに来てくださったみなさんも、ゲームを楽しんでいただきありがとうございました!!!

明日のアドベントカレンダーはあやきさんです!よろしくお願いします。

Share