SlideShare uma empresa Scribd logo
1 de 48
Baixar para ler offline
CONFIDENTIAL ©2022 Synamon Inc.
Unityを使って1週間でつくる
iOS/Androidで動くメタバースのプロトタイプ
2022年10月5日
CONFIDENTIAL ©2022 Synamon Inc.
自己紹介
● 渡辺匡城(@mochi_neko_7)
● EM/Unityエンジニア
● Synamon Inc.
● テックブログとかも色々書いてます
○ https://synamon.hatenablog.com/
● 最近ハマっているものは
スプラトゥーン3とか
2
CONFIDENTIAL ©2022 Synamon Inc.
スマホメタバースのプロトタイプって?
最近リリースした
新プロダクト
(読みはシナモン)
3
CONFIDENTIAL ©2022 Synamon Inc.
各Storeで既に公開されています!
スマホメタバースのプロトタイプって?
4
CONFIDENTIAL ©2022 Synamon Inc.
空間のイメージはこんな感じ
スマホメタバースのプロトタイプって?
5
CONFIDENTIAL ©2022 Synamon Inc.
スマホメタバースのプロトタイプって?
SYNMNの開発目線での技術的な特徴は?
● カスタマイズ可能な3DCG空間
● 3Dアバター:VRM/glTF/FBX
● クロスプラットフォーム:Win/Mac/Android/iOS(/VR)
● マルチプレイ(〜100人)
● 複数のRoom間を移動できる
● NFT連携
● etc…
6
CONFIDENTIAL ©2022 Synamon Inc.
スマホメタバースのプロトタイプって?
SYNMNの開発目線での技術的な特徴は?
● カスタマイズ可能な3DCG空間
● 3Dアバター:VRM/glTF/FBX
● クロスプラットフォーム:Win/Mac/Android/iOS(/VR)
● マルチプレイ(〜100人)
● 複数のRoom間を移動できる
● NFT連携
● etc…
7
実はこれまで
スマホアプリは
作ったことが
なかった!
CONFIDENTIAL ©2022 Synamon Inc.
スマホメタバースのプロトタイプって?
SYNMN開発初期の
『とりあえずスマホで動かしてイメージを持ちたい』
↓
プロトタイプを約1週間で作った話を元に
メタバースの骨格となる技術を紹介します
8
CONFIDENTIAL ©2022 Synamon Inc.
スマホメタバースのプロトタイプって?
SYNMN開発初期の
『とりあえずスマホで動かしてイメージを持ちたい』
↓
プロトタイプを約1週間で作った話を元に
メタバースの骨格となる技術を紹介します
9
実際にこの通りに作った訳
ではないので悪しからず!
技術的に骨格となる要素を
触ってたら結果的にできた
CONFIDENTIAL ©2022 Synamon Inc.
今日の話
● プロトタイプの作り方
○ 1日目:スマホ向けの開発環境の用意
○ 2日目:3DCG空間の用意
○ 3日目:3Dアバターの用意
○ 4日目:3Dアバターの操作の実装
○ 5日目:マルチプレイの実装
● プロトタイプからの発展
10
1日目
スマホ向けの開発環境の用意
11
CONFIDENTIAL ©2022 Synamon Inc.
スマホ向けの開発環境の用意
まず実際に使用したいスマホを選ぶ
● iOS
○ アプリをビルドするためにMacが必要
○ Xcodeが必要
● Android
○ Windows/Macどちらでも可能
○ Android Debug Bridge(ADB)が必要
↓
用意できるPCとスマホの組み合わせを選ぶ
12
CONFIDENTIAL ©2022 Synamon Inc.
スマホ向けの開発環境の用意
Unityのインストール
● Unity Hubをインストール
● 使用するバージョンを選んでインストールする
○ LTSなら2021.3
● 使用するiOS or Androidのモジュールを追加する
● 3Dのテンプレートを使用してプロジェクトを作成する
● LegacyRP or URPは任意だが、外部アセットを利用するなら
Legacyの方がセットアップが楽かも
13
CONFIDENTIAL ©2022 Synamon Inc.
スマホ向けの開発環境の用意
とりあえずビルドして実機で動かしてみる
● 空のSceneをビルドしてインストール、起動までやってみる
● ビルドに詰まったらググる
14
2日目
3DCG空間の用意
15
CONFIDENTIAL ©2022 Synamon Inc.
3DCG空間の用意
適当な3DCGのSceneを用意
● Cubeなどでつくる
● モデリングしてつくる
● AssetStoreで購入する
16
CONFIDENTIAL ©2022 Synamon Inc.
3DCG空間の用意
https://assetstore.unity.com/packages/3d/environments/urban/low-poly-japanese-housing-comple
x-162993
17
CONFIDENTIAL ©2022 Synamon Inc.
3DCG空間の用意
https://assetstore.unity.com/packages/3d/environments/japanese-school-classroom-18392
18
CONFIDENTIAL ©2022 Synamon Inc.
3DCG空間の用意
Colliderは用意されていない場合が多いと思うので、
大雑把にBoxColliderを貼っておく
↓
Sceneの用意完了
19
3日目
3Dアバターの用意
20
CONFIDENTIAL ©2022 Synamon Inc.
3Dアバターの用意
適当な3Dアバターを用意
● Cubeなどでつくる
● AssetStoreで購入する
● Boothで購入する
● モデリングしてつくる
● VRoid Studioなどのツールを使ってつくる
○ Ready Player Me
○ MakeAvatar
○ etc…
21
CONFIDENTIAL ©2022 Synamon Inc.
3Dアバターの用意
VRoidStudioの使い方は以前記事を書いたので参考に
https://note.com/mochineko_/n/nef6b843a2f72
22
CONFIDENTIAL ©2022 Synamon Inc.
3Dアバターの用意
VRMファイルのアバターをUnityに取り込む
● UniVRMをUPMで追加する
● Drag&Dropしてインポートする
● Prefabとして利用する
↓
3Dアバターの用意完了
23
4日目
3Dアバターの操作の実装
24
CONFIDENTIAL ©2022 Synamon Inc.
3Dアバターの操作の実装
スマホで3Dアバターを動かして、3D空間内を移動したい
● 移動
● カメラ操作
● ジャンプ
● etc…
↑
これらをスマホのタッチスクリーン操作と紐付ける
25
CONFIDENTIAL ©2022 Synamon Inc.
3Dアバターの操作の実装
よくあるスマホでの操作方法
● ボタン
● タップ
● ピンチ
● スクリーン上の仮想Joystick
○ 位置が固定のもの
○ タップ開始位置を中心とするもの
○ 中心がズルズル動くもの
● etc…
26
CONFIDENTIAL ©2022 Synamon Inc.
3Dアバターの操作の実装
タッチスクリーン上の仮想Joystick操作は
標準では用意されていないのでアセットを利用するのが楽
https://assetstore.unity.com/packages/tools/input-management/joystick-pack-107631
27
CONFIDENTIAL ©2022 Synamon Inc.
3Dアバターの操作の実装
(New) Input Systemを使う場合は
自作も選択肢に
https://synamon.hatenablog.com/entry/unity_input_composite_bindings_application
28
CONFIDENTIAL ©2022 Synamon Inc.
3Dアバターの操作の実装
単純な形での実装例
● スクリーン上に仮想Joystickを左右2つ置く
● 左を移動に、右をカメラ回転に割り当てる
● 左スティックの操作を、3Dアバターにアタッチした
CharacterControllerの操作と紐づける
● 右スティックの操作を、三人称視点のカメラの回転の制御と紐
づける
↓
3Dアバターの操作のセットアップ完了
29
CONFIDENTIAL ©2022 Synamon Inc.
3Dアバターの操作の実装
30
CONFIDENTIAL ©2022 Synamon Inc.
3Dアバターの操作の実装
ここまでの時点で、
● スマホ向けビルド
● 3DのSceneの用意
● 3Dアバターの用意
● 3Dアバターの操作
↓
最低限1人で動かせるスマホメタバース?ができる
31
5日目
マルチプレイの実装
32
CONFIDENTIAL ©2022 Synamon Inc.
マルチプレイの実装
1人ではなく複数人で同じメタバース空間に入りたい
→マルチプレイの実装が必要
→ネットワークエンジンを利用する
● Photon
● Monobit
● Magic Onion
● NetCode
● etc…
33
CONFIDENTIAL ©2022 Synamon Inc.
マルチプレイの実装
ひとまず使い慣れている&無料枠があるPhotonを使用する
34
CONFIDENTIAL ©2022 Synamon Inc.
マルチプレイの実装
マルチプレイ実装の基本要素
● マッチメイキング
● ネットワーク同期オブジェクトの生成
● パラメータのネットワーク同期やRPC
35
CONFIDENTIAL ©2022 Synamon Inc.
マルチプレイの実装
今回必要な最低限の実装
● Roomを作成 or 入室する
● 3DアバターのPrefabを、ネットワーク同期オブジェクトとして生
成する
● 3Dアバターの姿勢をネットワーク同期する
36
CONFIDENTIAL ©2022 Synamon Inc.
マルチプレイの実装
これまでの実装をアプリとして動かすために処理を繋げる
アプリ起動
→ マッチメイキング
→ Scene読み込み
→ 3Dアバターのネットワーク生成
→ タッチスクリーンでの3Dアバターの操作
37
CONFIDENTIAL ©2022 Synamon Inc.
マルチプレイの実装
38
まとめ
39
CONFIDENTIAL ©2022 Synamon Inc.
まとめ
今回紹介した内容
● スマホで動作するアプリ
● 3DCG空間
● 3Dアバター
● 3Dアバターの操作
● マルチプレイ
40
CONFIDENTIAL ©2022 Synamon Inc.
まとめ
見方を変えると、メタバースの骨格は
● 箱としての3DCG空間
● 人としての3Dアバター
● 3Dアバターの制御系
● オンライン性
● これらに干渉するインターフェース(今回はスマホ)
↓
作りたいメタバースの目的・体験に応じて最適化&肉付けをする
41
プロトタイプからの発展
42
CONFIDENTIAL ©2022 Synamon Inc.
プロトタイプからの発展
今回紹介したのは、あくまで「プロトタイプ」
→実際のプロダクトづくりではもっと作りこみが必要となる
→SYNMNでの例を少し紹介します
43
CONFIDENTIAL ©2022 Synamon Inc.
プロトタイプからの発展
● 開発環境
○ スマホ以外のPC、VRなどのデバイス対応
● 3DCG空間の作り込み
○ モデリングしたSceneの使用
○ URP対応
○ Addressables、AssetBundle対応
44
CONFIDENTIAL ©2022 Synamon Inc.
プロトタイプからの発展
● 3Dアバターの作り込み
○ モデリングしたアバターの使用
○ FBX、glTFなどのフォーマットの対応
○ ランタイムでの読み込み
○ URP対応
● アバターの操作
○ (New) Input System対応
○ マルチデバイス対応
○ アバターのアニメーション
45
CONFIDENTIAL ©2022 Synamon Inc.
プロトタイプからの発展
● マルチプレイ
○ ボイスチャットやテキストチャット
○ 大人数接続の対応
● その他
○ ユーザー管理
○ 3D空間内のコンテンツの作成
○ 多言語対応
○ NFT連携
○ etc…
46
CONFIDENTIAL ©2022 Synamon Inc.
ご清聴ありがとうございました!
テックブログでもより詳しい技術の記事を書いたりしていますので
もしよければご覧ください!
週一ペースで記事投稿をしています!
https://synamon.hatenablog.com/
47
Unityを使って1週間でつくる iOS_Androidで動くメタバースのプロトタイプ.pdf

Mais conteúdo relacionado

Semelhante a Unityを使って1週間でつくる iOS_Androidで動くメタバースのプロトタイプ.pdf

ゲーミフィケーションエバンジェリストが説く、アプリ開発で見落としがちな「おもてなし」とは~面白さを伝える × 面白く魅せる~ ナノコネクト・仲 功児
ゲーミフィケーションエバンジェリストが説く、アプリ開発で見落としがちな「おもてなし」とは~面白さを伝える × 面白く魅せる~ ナノコネクト・仲 功児ゲーミフィケーションエバンジェリストが説く、アプリ開発で見落としがちな「おもてなし」とは~面白さを伝える × 面白く魅せる~ ナノコネクト・仲 功児
ゲーミフィケーションエバンジェリストが説く、アプリ開発で見落としがちな「おもてなし」とは~面白さを伝える × 面白く魅せる~ ナノコネクト・仲 功児nanoconnect
 
iOSのUI構築小技集(小さなとこから始められる編)
iOSのUI構築小技集(小さなとこから始められる編)iOSのUI構築小技集(小さなとこから始められる編)
iOSのUI構築小技集(小さなとこから始められる編)Fumiya Sakai
 
ニフティクラウドを使った安定運用のススメ
ニフティクラウドを使った安定運用のススメニフティクラウドを使った安定運用のススメ
ニフティクラウドを使った安定運用のススメNIFTY Cloud
 
【Unity】appC cloudを使ってゲームアプリにDAUがアップするPUSH通知とリーダーボード機能を入れよう
【Unity】appC cloudを使ってゲームアプリにDAUがアップするPUSH通知とリーダーボード機能を入れよう【Unity】appC cloudを使ってゲームアプリにDAUがアップするPUSH通知とリーダーボード機能を入れよう
【Unity】appC cloudを使ってゲームアプリにDAUがアップするPUSH通知とリーダーボード機能を入れようcaytosales
 
リリースをしてから運用しやすいiPhoneゲーム開発のまめ知識
リリースをしてから運用しやすいiPhoneゲーム開発のまめ知識リリースをしてから運用しやすいiPhoneゲーム開発のまめ知識
リリースをしてから運用しやすいiPhoneゲーム開発のまめ知識GAMKIN
 
【Unity道場教育スペシャル】Cinemachineで教えるゲームの3つの大切なこと
【Unity道場教育スペシャル】Cinemachineで教えるゲームの3つの大切なこと【Unity道場教育スペシャル】Cinemachineで教えるゲームの3つの大切なこと
【Unity道場教育スペシャル】Cinemachineで教えるゲームの3つの大切なことUnityTechnologiesJapan002
 
20160120 gpsロガーアプリを作ろう
20160120 gpsロガーアプリを作ろう20160120 gpsロガーアプリを作ろう
20160120 gpsロガーアプリを作ろう史識 川原
 
Android カスタムROMの作り方
Android カスタムROMの作り方Android カスタムROMの作り方
Android カスタムROMの作り方Masahiro Hidaka
 
Mirrativでエモモ(アバター機能)をリリースするまで
Mirrativでエモモ(アバター機能)をリリースするまでMirrativでエモモ(アバター機能)をリリースするまで
Mirrativでエモモ(アバター機能)をリリースするまでSumihiko Natsu
 
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1schoowebcampus
 
Unityの最新動向と開発事例
Unityの最新動向と開発事例Unityの最新動向と開発事例
Unityの最新動向と開発事例Haruto Watanabe
 
【Code for向け】保育園・消火栓mapを作れるアプリを作ろう!
【Code for向け】保育園・消火栓mapを作れるアプリを作ろう!【Code for向け】保育園・消火栓mapを作れるアプリを作ろう!
【Code for向け】保育園・消火栓mapを作れるアプリを作ろう!史識 川原
 
おうち Lab で GitDNSOps / GitDNS Ops in My Home Lab
おうち Lab で GitDNSOps / GitDNS Ops in My Home Labおうち Lab で GitDNSOps / GitDNS Ops in My Home Lab
おうち Lab で GitDNSOps / GitDNS Ops in My Home LabMotonori Shindo
 
DeNA様「通信エンジン」勉強会資料 20151217
DeNA様「通信エンジン」勉強会資料 20151217DeNA様「通信エンジン」勉強会資料 20151217
DeNA様「通信エンジン」勉強会資料 20151217monobit
 
Editor スクリプティング 入門
Editor スクリプティング 入門Editor スクリプティング 入門
Editor スクリプティング 入門Keigo Ando
 
ニフクラmobilebackend_セミナー_配布用.pdf
ニフクラmobilebackend_セミナー_配布用.pdfニフクラmobilebackend_セミナー_配布用.pdf
ニフクラmobilebackend_セミナー_配布用.pdfssuser347f24
 

Semelhante a Unityを使って1週間でつくる iOS_Androidで動くメタバースのプロトタイプ.pdf (18)

ゲーミフィケーションエバンジェリストが説く、アプリ開発で見落としがちな「おもてなし」とは~面白さを伝える × 面白く魅せる~ ナノコネクト・仲 功児
ゲーミフィケーションエバンジェリストが説く、アプリ開発で見落としがちな「おもてなし」とは~面白さを伝える × 面白く魅せる~ ナノコネクト・仲 功児ゲーミフィケーションエバンジェリストが説く、アプリ開発で見落としがちな「おもてなし」とは~面白さを伝える × 面白く魅せる~ ナノコネクト・仲 功児
ゲーミフィケーションエバンジェリストが説く、アプリ開発で見落としがちな「おもてなし」とは~面白さを伝える × 面白く魅せる~ ナノコネクト・仲 功児
 
iOSのUI構築小技集(小さなとこから始められる編)
iOSのUI構築小技集(小さなとこから始められる編)iOSのUI構築小技集(小さなとこから始められる編)
iOSのUI構築小技集(小さなとこから始められる編)
 
Vimが想像以上に良かった件.pdf
Vimが想像以上に良かった件.pdfVimが想像以上に良かった件.pdf
Vimが想像以上に良かった件.pdf
 
ニフティクラウドを使った安定運用のススメ
ニフティクラウドを使った安定運用のススメニフティクラウドを使った安定運用のススメ
ニフティクラウドを使った安定運用のススメ
 
【Unity】appC cloudを使ってゲームアプリにDAUがアップするPUSH通知とリーダーボード機能を入れよう
【Unity】appC cloudを使ってゲームアプリにDAUがアップするPUSH通知とリーダーボード機能を入れよう【Unity】appC cloudを使ってゲームアプリにDAUがアップするPUSH通知とリーダーボード機能を入れよう
【Unity】appC cloudを使ってゲームアプリにDAUがアップするPUSH通知とリーダーボード機能を入れよう
 
リリースをしてから運用しやすいiPhoneゲーム開発のまめ知識
リリースをしてから運用しやすいiPhoneゲーム開発のまめ知識リリースをしてから運用しやすいiPhoneゲーム開発のまめ知識
リリースをしてから運用しやすいiPhoneゲーム開発のまめ知識
 
【Unity道場教育スペシャル】Cinemachineで教えるゲームの3つの大切なこと
【Unity道場教育スペシャル】Cinemachineで教えるゲームの3つの大切なこと【Unity道場教育スペシャル】Cinemachineで教えるゲームの3つの大切なこと
【Unity道場教育スペシャル】Cinemachineで教えるゲームの3つの大切なこと
 
20160120 gpsロガーアプリを作ろう
20160120 gpsロガーアプリを作ろう20160120 gpsロガーアプリを作ろう
20160120 gpsロガーアプリを作ろう
 
Android カスタムROMの作り方
Android カスタムROMの作り方Android カスタムROMの作り方
Android カスタムROMの作り方
 
Mirrativでエモモ(アバター機能)をリリースするまで
Mirrativでエモモ(アバター機能)をリリースするまでMirrativでエモモ(アバター機能)をリリースするまで
Mirrativでエモモ(アバター機能)をリリースするまで
 
Android0422
Android0422Android0422
Android0422
 
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
 
Unityの最新動向と開発事例
Unityの最新動向と開発事例Unityの最新動向と開発事例
Unityの最新動向と開発事例
 
【Code for向け】保育園・消火栓mapを作れるアプリを作ろう!
【Code for向け】保育園・消火栓mapを作れるアプリを作ろう!【Code for向け】保育園・消火栓mapを作れるアプリを作ろう!
【Code for向け】保育園・消火栓mapを作れるアプリを作ろう!
 
おうち Lab で GitDNSOps / GitDNS Ops in My Home Lab
おうち Lab で GitDNSOps / GitDNS Ops in My Home Labおうち Lab で GitDNSOps / GitDNS Ops in My Home Lab
おうち Lab で GitDNSOps / GitDNS Ops in My Home Lab
 
DeNA様「通信エンジン」勉強会資料 20151217
DeNA様「通信エンジン」勉強会資料 20151217DeNA様「通信エンジン」勉強会資料 20151217
DeNA様「通信エンジン」勉強会資料 20151217
 
Editor スクリプティング 入門
Editor スクリプティング 入門Editor スクリプティング 入門
Editor スクリプティング 入門
 
ニフクラmobilebackend_セミナー_配布用.pdf
ニフクラmobilebackend_セミナー_配布用.pdfニフクラmobilebackend_セミナー_配布用.pdf
ニフクラmobilebackend_セミナー_配布用.pdf
 

Unityを使って1週間でつくる iOS_Androidで動くメタバースのプロトタイプ.pdf

  • 1. CONFIDENTIAL ©2022 Synamon Inc. Unityを使って1週間でつくる iOS/Androidで動くメタバースのプロトタイプ 2022年10月5日
  • 2. CONFIDENTIAL ©2022 Synamon Inc. 自己紹介 ● 渡辺匡城(@mochi_neko_7) ● EM/Unityエンジニア ● Synamon Inc. ● テックブログとかも色々書いてます ○ https://synamon.hatenablog.com/ ● 最近ハマっているものは スプラトゥーン3とか 2
  • 3. CONFIDENTIAL ©2022 Synamon Inc. スマホメタバースのプロトタイプって? 最近リリースした 新プロダクト (読みはシナモン) 3
  • 4. CONFIDENTIAL ©2022 Synamon Inc. 各Storeで既に公開されています! スマホメタバースのプロトタイプって? 4
  • 5. CONFIDENTIAL ©2022 Synamon Inc. 空間のイメージはこんな感じ スマホメタバースのプロトタイプって? 5
  • 6. CONFIDENTIAL ©2022 Synamon Inc. スマホメタバースのプロトタイプって? SYNMNの開発目線での技術的な特徴は? ● カスタマイズ可能な3DCG空間 ● 3Dアバター:VRM/glTF/FBX ● クロスプラットフォーム:Win/Mac/Android/iOS(/VR) ● マルチプレイ(〜100人) ● 複数のRoom間を移動できる ● NFT連携 ● etc… 6
  • 7. CONFIDENTIAL ©2022 Synamon Inc. スマホメタバースのプロトタイプって? SYNMNの開発目線での技術的な特徴は? ● カスタマイズ可能な3DCG空間 ● 3Dアバター:VRM/glTF/FBX ● クロスプラットフォーム:Win/Mac/Android/iOS(/VR) ● マルチプレイ(〜100人) ● 複数のRoom間を移動できる ● NFT連携 ● etc… 7 実はこれまで スマホアプリは 作ったことが なかった!
  • 8. CONFIDENTIAL ©2022 Synamon Inc. スマホメタバースのプロトタイプって? SYNMN開発初期の 『とりあえずスマホで動かしてイメージを持ちたい』 ↓ プロトタイプを約1週間で作った話を元に メタバースの骨格となる技術を紹介します 8
  • 9. CONFIDENTIAL ©2022 Synamon Inc. スマホメタバースのプロトタイプって? SYNMN開発初期の 『とりあえずスマホで動かしてイメージを持ちたい』 ↓ プロトタイプを約1週間で作った話を元に メタバースの骨格となる技術を紹介します 9 実際にこの通りに作った訳 ではないので悪しからず! 技術的に骨格となる要素を 触ってたら結果的にできた
  • 10. CONFIDENTIAL ©2022 Synamon Inc. 今日の話 ● プロトタイプの作り方 ○ 1日目:スマホ向けの開発環境の用意 ○ 2日目:3DCG空間の用意 ○ 3日目:3Dアバターの用意 ○ 4日目:3Dアバターの操作の実装 ○ 5日目:マルチプレイの実装 ● プロトタイプからの発展 10
  • 12. CONFIDENTIAL ©2022 Synamon Inc. スマホ向けの開発環境の用意 まず実際に使用したいスマホを選ぶ ● iOS ○ アプリをビルドするためにMacが必要 ○ Xcodeが必要 ● Android ○ Windows/Macどちらでも可能 ○ Android Debug Bridge(ADB)が必要 ↓ 用意できるPCとスマホの組み合わせを選ぶ 12
  • 13. CONFIDENTIAL ©2022 Synamon Inc. スマホ向けの開発環境の用意 Unityのインストール ● Unity Hubをインストール ● 使用するバージョンを選んでインストールする ○ LTSなら2021.3 ● 使用するiOS or Androidのモジュールを追加する ● 3Dのテンプレートを使用してプロジェクトを作成する ● LegacyRP or URPは任意だが、外部アセットを利用するなら Legacyの方がセットアップが楽かも 13
  • 14. CONFIDENTIAL ©2022 Synamon Inc. スマホ向けの開発環境の用意 とりあえずビルドして実機で動かしてみる ● 空のSceneをビルドしてインストール、起動までやってみる ● ビルドに詰まったらググる 14
  • 16. CONFIDENTIAL ©2022 Synamon Inc. 3DCG空間の用意 適当な3DCGのSceneを用意 ● Cubeなどでつくる ● モデリングしてつくる ● AssetStoreで購入する 16
  • 17. CONFIDENTIAL ©2022 Synamon Inc. 3DCG空間の用意 https://assetstore.unity.com/packages/3d/environments/urban/low-poly-japanese-housing-comple x-162993 17
  • 18. CONFIDENTIAL ©2022 Synamon Inc. 3DCG空間の用意 https://assetstore.unity.com/packages/3d/environments/japanese-school-classroom-18392 18
  • 19. CONFIDENTIAL ©2022 Synamon Inc. 3DCG空間の用意 Colliderは用意されていない場合が多いと思うので、 大雑把にBoxColliderを貼っておく ↓ Sceneの用意完了 19
  • 21. CONFIDENTIAL ©2022 Synamon Inc. 3Dアバターの用意 適当な3Dアバターを用意 ● Cubeなどでつくる ● AssetStoreで購入する ● Boothで購入する ● モデリングしてつくる ● VRoid Studioなどのツールを使ってつくる ○ Ready Player Me ○ MakeAvatar ○ etc… 21
  • 22. CONFIDENTIAL ©2022 Synamon Inc. 3Dアバターの用意 VRoidStudioの使い方は以前記事を書いたので参考に https://note.com/mochineko_/n/nef6b843a2f72 22
  • 23. CONFIDENTIAL ©2022 Synamon Inc. 3Dアバターの用意 VRMファイルのアバターをUnityに取り込む ● UniVRMをUPMで追加する ● Drag&Dropしてインポートする ● Prefabとして利用する ↓ 3Dアバターの用意完了 23
  • 25. CONFIDENTIAL ©2022 Synamon Inc. 3Dアバターの操作の実装 スマホで3Dアバターを動かして、3D空間内を移動したい ● 移動 ● カメラ操作 ● ジャンプ ● etc… ↑ これらをスマホのタッチスクリーン操作と紐付ける 25
  • 26. CONFIDENTIAL ©2022 Synamon Inc. 3Dアバターの操作の実装 よくあるスマホでの操作方法 ● ボタン ● タップ ● ピンチ ● スクリーン上の仮想Joystick ○ 位置が固定のもの ○ タップ開始位置を中心とするもの ○ 中心がズルズル動くもの ● etc… 26
  • 27. CONFIDENTIAL ©2022 Synamon Inc. 3Dアバターの操作の実装 タッチスクリーン上の仮想Joystick操作は 標準では用意されていないのでアセットを利用するのが楽 https://assetstore.unity.com/packages/tools/input-management/joystick-pack-107631 27
  • 28. CONFIDENTIAL ©2022 Synamon Inc. 3Dアバターの操作の実装 (New) Input Systemを使う場合は 自作も選択肢に https://synamon.hatenablog.com/entry/unity_input_composite_bindings_application 28
  • 29. CONFIDENTIAL ©2022 Synamon Inc. 3Dアバターの操作の実装 単純な形での実装例 ● スクリーン上に仮想Joystickを左右2つ置く ● 左を移動に、右をカメラ回転に割り当てる ● 左スティックの操作を、3Dアバターにアタッチした CharacterControllerの操作と紐づける ● 右スティックの操作を、三人称視点のカメラの回転の制御と紐 づける ↓ 3Dアバターの操作のセットアップ完了 29
  • 30. CONFIDENTIAL ©2022 Synamon Inc. 3Dアバターの操作の実装 30
  • 31. CONFIDENTIAL ©2022 Synamon Inc. 3Dアバターの操作の実装 ここまでの時点で、 ● スマホ向けビルド ● 3DのSceneの用意 ● 3Dアバターの用意 ● 3Dアバターの操作 ↓ 最低限1人で動かせるスマホメタバース?ができる 31
  • 33. CONFIDENTIAL ©2022 Synamon Inc. マルチプレイの実装 1人ではなく複数人で同じメタバース空間に入りたい →マルチプレイの実装が必要 →ネットワークエンジンを利用する ● Photon ● Monobit ● Magic Onion ● NetCode ● etc… 33
  • 34. CONFIDENTIAL ©2022 Synamon Inc. マルチプレイの実装 ひとまず使い慣れている&無料枠があるPhotonを使用する 34
  • 35. CONFIDENTIAL ©2022 Synamon Inc. マルチプレイの実装 マルチプレイ実装の基本要素 ● マッチメイキング ● ネットワーク同期オブジェクトの生成 ● パラメータのネットワーク同期やRPC 35
  • 36. CONFIDENTIAL ©2022 Synamon Inc. マルチプレイの実装 今回必要な最低限の実装 ● Roomを作成 or 入室する ● 3DアバターのPrefabを、ネットワーク同期オブジェクトとして生 成する ● 3Dアバターの姿勢をネットワーク同期する 36
  • 37. CONFIDENTIAL ©2022 Synamon Inc. マルチプレイの実装 これまでの実装をアプリとして動かすために処理を繋げる アプリ起動 → マッチメイキング → Scene読み込み → 3Dアバターのネットワーク生成 → タッチスクリーンでの3Dアバターの操作 37
  • 38. CONFIDENTIAL ©2022 Synamon Inc. マルチプレイの実装 38
  • 40. CONFIDENTIAL ©2022 Synamon Inc. まとめ 今回紹介した内容 ● スマホで動作するアプリ ● 3DCG空間 ● 3Dアバター ● 3Dアバターの操作 ● マルチプレイ 40
  • 41. CONFIDENTIAL ©2022 Synamon Inc. まとめ 見方を変えると、メタバースの骨格は ● 箱としての3DCG空間 ● 人としての3Dアバター ● 3Dアバターの制御系 ● オンライン性 ● これらに干渉するインターフェース(今回はスマホ) ↓ 作りたいメタバースの目的・体験に応じて最適化&肉付けをする 41
  • 43. CONFIDENTIAL ©2022 Synamon Inc. プロトタイプからの発展 今回紹介したのは、あくまで「プロトタイプ」 →実際のプロダクトづくりではもっと作りこみが必要となる →SYNMNでの例を少し紹介します 43
  • 44. CONFIDENTIAL ©2022 Synamon Inc. プロトタイプからの発展 ● 開発環境 ○ スマホ以外のPC、VRなどのデバイス対応 ● 3DCG空間の作り込み ○ モデリングしたSceneの使用 ○ URP対応 ○ Addressables、AssetBundle対応 44
  • 45. CONFIDENTIAL ©2022 Synamon Inc. プロトタイプからの発展 ● 3Dアバターの作り込み ○ モデリングしたアバターの使用 ○ FBX、glTFなどのフォーマットの対応 ○ ランタイムでの読み込み ○ URP対応 ● アバターの操作 ○ (New) Input System対応 ○ マルチデバイス対応 ○ アバターのアニメーション 45
  • 46. CONFIDENTIAL ©2022 Synamon Inc. プロトタイプからの発展 ● マルチプレイ ○ ボイスチャットやテキストチャット ○ 大人数接続の対応 ● その他 ○ ユーザー管理 ○ 3D空間内のコンテンツの作成 ○ 多言語対応 ○ NFT連携 ○ etc… 46
  • 47. CONFIDENTIAL ©2022 Synamon Inc. ご清聴ありがとうございました! テックブログでもより詳しい技術の記事を書いたりしていますので もしよければご覧ください! 週一ペースで記事投稿をしています! https://synamon.hatenablog.com/ 47