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

269 Views

June 02, 24

スライド概要

profile-image

新潟市在住ソフトウェアエンジニア/にいがたXRスクール第2期生/アラフォー1児の父/CG・XRでいろいろ遊んでます!/STYLYとUnreal Engineが好きです/Unreal Engine, STYLY, Unityなど勉強中/な赤柴♂です。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

環境 Mobile AR

9.

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

10.

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

11.

バスの向きが変わらない!? バスの向きを変える(方向を決 める)ロジックの実装が必要だ!

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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