---
title: さよなら新潟駅万代口バスターミナルの日 STYLYで手転がしバスを作った話
tags:  #styly  
author: [fubuky35](https://www.docswell.com/user/fubuky35)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/VJNGNKLD78.jpg?width=480
description: さよなら新潟駅万代口バスターミナルの日 STYLYで手転がしバスを作った話 by fubuky35
published: June 02, 24
canonical: https://www.docswell.com/s/fubuky35/KW19LD-2024-06-02-101757
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/VJNGNKLD78.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/YE9WRV48E3.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/GE8NWPQZ7D.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/LELPN1X17R.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/4JM4XWL57W.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/PJRWNYKZ79.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/PEXPNGL17X.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/3EKDN4LMJD.jpg)

環境
Mobile AR


# Page. 9

![Page Image](https://bcdn.docswell.com/page/L73RVL32J5.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/87DY8N467G.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/VJP685VZE8.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/2EV3NPZM7Q.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/57G3KP4XJL.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/4EQ5N2G5JP.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/KJ49GL5V71.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/LE1KDLW4JG.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/GEWDYV6ZJ2.jpg)

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


