さよなら新潟駅万代口バスターミナルの日 STYLYで手転がしバスを作った話

@fubuky35 さよなら新潟駅万代口バ スターミナルの日 STYLYで手転がしバスを作った話

自己紹介 本望 冬樹 @fubuky35 ● ● ● ● ● ● 写真は我が家のペット 三太(赤柴♂) 新潟市秋葉区(旧新津市)在住、新潟市内のソフトウェア開 発会社で働くソフトウェアエンジニア にいがたXRスクール第二期生 GCやXRで遊んでます！ STYLYとUnreal Engineが好きです 一児(5才)の父 XR仲間募集中！

突然ですが、 皆さん行きましたよね！？ 3月末で万代口バスタミナールは約65年の歴史に幕を下ろしました😢 参考：https://media.jrenet.jp/articles/952

• https://media.jrenet.jp/articles/952

にいがたXRスクール卒業生の作品展示も 同時開催していました！ 参考： https://styly.inc/ja/news/niigata-bus-terminal-ar0406/

• https://styly.inc/ja/news/niigata-bus-terminal-ar0406/

私がお手伝いした作品： 手のひらバスターミナル 3Dスキャンしたバスタミナールのデジタル アーカイブ（モバイルAR） 私はゲームモードのインタラクティブ実装をお 手伝いしました！ https://youtu.be/QaqZDXAw_bk

• https://youtu.be/QaqZDXAw_bk

やるったこと スマホのタップ操作でスイッチバック実装 スイッチバックとは？ ● 前進でやってきたバスが、バックで ターミナルに入る方式 ● 今や全国的にも珍しい ● バック時の誘導員のピーピーという笛 の音がチャームポイント！

目標 こどもの車遊びのような操作感 手転がしをスマホのタップで再現する！！

環境 Mobile AR

実装はとても簡単！ ① Collider(衝突判定領域)の追加 → タップできる領域を設定 ② STYLY用ドラッグ可能属性の追加 → タップで動かせるようにする ① ③ 移動・回転の拘束条件(Constraints)を設定 → 移動：Y軸方向なし（＝XZ平面上を滑る、高さは変 わらない） ③ →回転：Y軸のみ（＝首振りのみ、横転しない） Draggableの例 ② 参考：https://styly.cc/ja/manual/modifier-manual-styly/

• https://styly.cc/ja/manual/modifier-manual-styly/

できたぜ！ https://youtu.be/t4AMwCFl1o0

• https://youtu.be/t4AMwCFl1o0

バスの向きが変わらない！？ バスの向きを変える（方向を決 める）ロジックの実装が必要だ！

考え方はとても簡単 基本ロジック： N+1フレームの位置 移動している方向にバスを向ける 移動ベクトル つまり 毎フレーム、1つ前のフレームと現在フレームの位置 の差から移動ベクトルを求め、バスの向きと移動ベク トルのなす角だけバスをY軸周りに回転する Nフレームの位置

実装も難しくはない、ただちょっと面倒くさい、、、

今度こそできたぜ😇 向き決定ロジックのおかげでバ スの移動方向がわかるので、 バック時に笛の音を鳴らす実装 も（比較的）簡単にできた！ https://youtu.be/mTHJVpnExd0

• https://youtu.be/mTHJVpnExd0

まとめ バスタミナールがなくなって悲しい😢 ↓ https://x.com/niigatakotsu/status/1796060857291452885 でも大丈夫！ 僕たちには「手のひらバスタミナール」がある！

• https://x.com/niigatakotsu/status/1796060857291452885

ご清聴ありがとうございました！ にいがたXRスクール卒業生のXRコンテンツはいつでも体験できますので、 是非ご体験いただけると嬉しいです！

補足 「さよなら新潟駅万代口バスターミナルの日」当日の様子が気になる方は是非こちらも！ にいがたXRスクール第二 期同級生ほんひろさんの チャンネル https://www.youtube.com /@HonhiroXRW https://youtu.be/_iDbWnO23BA

• https://www.youtube.com
• https://youtu.be/_iDbWnO23BA