Slide 1

Slide 1 text

Copyright Drecom Co., Ltd. All Rights Reserved. マップゲーム SDK AROW と
  その運用を支える AWS の構成
 株式会社ドリコム / DRIP 部 / 地主龍一


Slide 2

Slide 2 text

Copyright Drecom Co., Ltd. All Rights Reserved. だれ?
 地主龍一(Ryuichi JINUSHI) ● じぬ / ryuj / @reximology ● DRIP 部(新規開発部署) ● AROW リードエンジニア 最近 ● キングダムハーツ3 ● オクトパストラベラー

Slide 3

Slide 3 text

Copyright Drecom Co., Ltd. All Rights Reserved. アジェンダ
 ● AROW の概要 ● AWS の活用 ● SDK デモ ● SDK の機能紹介

Slide 4

Slide 4 text

Copyright Drecom Co., Ltd. All Rights Reserved. 本日の要点
 サーバ ● サーバレス構成の実現とその工夫 クライアント ● Unity SDK (AROW) でできること

Slide 5

Slide 5 text

Copyright Drecom Co., Ltd. All Rights Reserved. 位置情報と 3D リアルマップを用いた
 アプリ開発プラットフォーム

Slide 6

Slide 6 text

Copyright Drecom Co., Ltd. All Rights Reserved. AROWとは


Slide 7

Slide 7 text

Copyright Drecom Co., Ltd. All Rights Reserved. POI(Point of Interest)
 ランドマーク POI ● 東京タワー ● 渋谷 QFRONT ● .etc カテゴリ POI ● コンビニ ● 病院 ● .etc point of interest または POI は誰かが便利、あるいは興味のあ る所と思った特定の場所のことである。(wikipedia)

Slide 8

Slide 8 text

Copyright Drecom Co., Ltd. All Rights Reserved. AROW Open Test Version https://arow.world/

Slide 9

Slide 9 text

Copyright Drecom Co., Ltd. All Rights Reserved. AWS の活用


Slide 10

Slide 10 text

Copyright Drecom Co., Ltd. All Rights Reserved. 開発者サイト


Slide 11

Slide 11 text

Copyright Drecom Co., Ltd. All Rights Reserved. AWS の用途
 開発者サイト ● 開発者登録、認証メール ● SDK、マップデータのダウンロード ● ライセンストークンの発行 ● ニュース一覧 その他 ● ライセンス認証 ● マップデータ ● 機械学習の計算リソース

Slide 12

Slide 12 text

Copyright Drecom Co., Ltd. All Rights Reserved. AROW を利用する開発フロー


Slide 13

Slide 13 text

Copyright Drecom Co., Ltd. All Rights Reserved. 利用している技術
 ● ALB ● CloudFront ● Amazon CloudWatch ● Amazon SQS ● AWS Lambda ● AWS Step Functions ● Ruby on Rails ● Terraform

Slide 14

Slide 14 text

EC2 (Web) EC2 (Web) EC2 (Web) リクエスト CloudFront ALB ① /dynamic_contents/* Default S3 ② /api/* W AF W AF DynamoDB SQS Webサーバー関連 RDS S3 ① S3 ③ Lambda① SES

Slide 15

Slide 15 text

ALB ② ライセンス認証関連 リクエスト Lambda② Lambda② Lambda② DynamoDB Kinesis S3

Slide 16

Slide 16 text

Copyright Drecom Co., Ltd. All Rights Reserved. ストレージ
 S3 ● マップデータ(arowmap) ● POI データ(json) ● Unity SDK(unitypackage) ● マップデータ編集ツール(C#)

Slide 17

Slide 17 text

Copyright Drecom Co., Ltd. All Rights Reserved. サーバレス構成
 用途 ● MAU 計算 ● ライセンス認証 補足 ● 利用データは S3 で保持 ● lambda + CloudWatch/SQS ● ユーザ関連なのでスケーリングも考慮

Slide 18

Slide 18 text

Copyright Drecom Co., Ltd. All Rights Reserved. 特徴
 ● CloudFront 経由で API を利用 ● 静的ファイルと API のドメインを共通化

Slide 19

Slide 19 text

Copyright Drecom Co., Ltd. All Rights Reserved. 評価
 メリット ● Cookie の SameSite 属性によるセキュリティ向上 デメリット ● API レスポンスがキャッシュされないように注意 ● 管理コスト キャッシュされないことは負荷試験等でも確認

Slide 20

Slide 20 text

Copyright Drecom Co., Ltd. All Rights Reserved. AWS 振り返り
 採用理由 ● 社内に実績あり ● 運用の知見あり メリット ● サーバーレスを駆使して JOB サーバーを静的に 設置しない設計にできた ● 費用及び管理コストを抑える事ができた デメリット ● 機能が多く、ある程度の知見が無いと活用が難しい

Slide 21

Slide 21 text

Copyright Drecom Co., Ltd. All Rights Reserved. SDK デモ


Slide 22

Slide 22 text

Copyright Drecom Co., Ltd. All Rights Reserved. 開発者登録


Slide 23

Slide 23 text

Copyright Drecom Co., Ltd. All Rights Reserved. 初期設定
 ● Unity の環境設定(ランタイムバージョン変更) ● unitypackage の import ● サンプルリソースの生成(エディター拡張) ● 詳細はドキュメント

Slide 24

Slide 24 text

Copyright Drecom Co., Ltd. All Rights Reserved. SDK の機能紹介


Slide 25

Slide 25 text

Copyright Drecom Co., Ltd. All Rights Reserved. できること
 街並みを作れる ● データから建物を生成 ● 建物を prefab へ置換 ● 道・川・地形を生成 POI でゲーム性として取り入れる ● POI を prefab で表現 ● POI への接近を検知

Slide 26

Slide 26 text

Copyright Drecom Co., Ltd. All Rights Reserved. できること
 ● 建物の生成 ● POI の活用

Slide 27

Slide 27 text

Copyright Drecom Co., Ltd. All Rights Reserved. 建物編
 ● 実測のデータを用いるためビルの形状が多様 ● メッシュの動的生成が必要

Slide 28

Slide 28 text

Copyright Drecom Co., Ltd. All Rights Reserved. 建物編
 ● 頂点配列からメッシュを生成 ● 上中下階それぞれ 別々のテクスチャを設定 ● 各面のタイリング幅を統一 ● 面ごとに UV を丸め込んで 見切れを回避

Slide 29

Slide 29 text

Copyright Drecom Co., Ltd. All Rights Reserved. 建物編
 旧 現在 ● メッシュを分けない ように修正 ● UV を積み重ねることで反 転を回避

Slide 30

Slide 30 text

Copyright Drecom Co., Ltd. All Rights Reserved. 建物編
 インテリアマッピング

Slide 31

Slide 31 text

Copyright Drecom Co., Ltd. All Rights Reserved. prefab 置換
 ● 道に対してモデルの前方を向けると違和感がなくなる ● 建物から最も近い道を探索して Rotation を調整している

Slide 32

Slide 32 text

Copyright Drecom Co., Ltd. All Rights Reserved. 実装の紹介


Slide 33

Slide 33 text

Copyright Drecom Co., Ltd. All Rights Reserved. 初期化
 var data = File.ReadAllBytes("xyz.arowmap"); var model = ArowMapObjectModel.LoadByData(data); ArowMapObjectModel ● 建物・道・地形などのデータを管理 ● .arowmap 関連処理のラッパ

Slide 34

Slide 34 text

Copyright Drecom Co., Ltd. All Rights Reserved. 建物の生成
 var config = new CreateConfig(); BuildingCreator .Builder(model.BuildingDataModels) .SetConfig(config) .SetOnMeshCreatedCallBack( /* mesh to GameObject callback */ ) .Build(); ● config: 描画形式などの設定クラス ● creator: 生成処理の実行クラス

Slide 35

Slide 35 text

Copyright Drecom Co., Ltd. All Rights Reserved. できること
 ● 建物の生成 ● POI の活用

Slide 36

Slide 36 text

Copyright Drecom Co., Ltd. All Rights Reserved. 渋谷 QFRONT を prefab で表現


Slide 37

Slide 37 text

Copyright Drecom Co., Ltd. All Rights Reserved. POI by prefab
 ● ScriptableObject で設定 ● POI の種類ごとに設定可能

Slide 38

Slide 38 text

Copyright Drecom Co., Ltd. All Rights Reserved. POI by prefab


Slide 39

Slide 39 text

Copyright Drecom Co., Ltd. All Rights Reserved. POI を用いたゲーム性の実現
 ● 登録した特定 POI への接近を検知 ● 活用例 ○ コンビニに近づいたら買い物 ○ 病院近くにいる間は回復 ○ 学校から離れたら敵が出現 ● 3種類のコールバック ○ 範囲内に入る時: OnAreaEnter() ○ 範囲内にいる時: OnAreaIn() ○ 範囲内から出る時: OnAreaExit()

Slide 40

Slide 40 text

Copyright Drecom Co., Ltd. All Rights Reserved. 実装の紹介


Slide 41

Slide 41 text

Copyright Drecom Co., Ltd. All Rights Reserved. IArowPoiVisitor
 // ユニティちゃんオブジェクト var unitychan = GameObject.Find("..."); // IArowPoiVisitor の実装 var visitor = unitychan.AddComponent(); ● 例:ユーザが操作するユニティちゃんが監視対象 ● IArowPoiVisitor の実装クラスをアタッチ このクラスで各種メソッドをオーバーライド

Slide 42

Slide 42 text

Copyright Drecom Co., Ltd. All Rights Reserved. ArowPoiObserver
 // visitor をマップを紐付け var observer = AddComponent(); observer.RegisterTarget(unitychan, visitor); observer.RegisterObservePoi( arowMapObjectModel, AROW_FILE_NAME); // PoiObserver に「商業施設」「距離50m」を設定 observer.RegisterNoticeDistance(CATEGORY_NAME, 50); ● 監視対象を登録 ● マップと検知したい POI を登録 ● 接近の閾値となる距離を登録

Slide 43

Slide 43 text

Copyright Drecom Co., Ltd. All Rights Reserved. まとめ
 開発者サイト ● Same Site 属性によるセキュリティ向上 ● lambda + SQS でサーバレス構成 Unity SDK ● 建物、道、地形の 3D 表現 ● prefab による置換も可能 ● POI の表現やゲーム的利用も容易

Slide 44

Slide 44 text

Copyright Drecom Co., Ltd. All Rights Reserved. AROW の情報
 Unity Learning Materials ● https://learning.unity3d.jp/2196/ 登壇資料 ● https://speakerdeck.com/ryuj/how-to-arow-practice-at-gotanda-dot- unity-number-11 ドキュメント ● https://arow.zendesk.com/hc/ja/categories/360001495392-AROWス ターティングガイド ● http://reference.arow.world/current/ SNS ● https://twitter.com/arow3dmap ● https://www.facebook.com/AROW-266389430650623/

Slide 45

Slide 45 text

Copyright Drecom Co., Ltd. All Rights Reserved. ご清聴ありがとうございました!


Slide 46

Slide 46 text

Copyright Drecom Co., Ltd. All Rights Reserved. 補足資料


Slide 47

Slide 47 text

Copyright Drecom Co., Ltd. All Rights Reserved. Map Tools
 ● SDK に同梱されているスクリプト ● arowmap(マップデータ)の編集用 ● 必要な POI をマップに付与 ドキュメント https://arow.zendesk.com/hc/ja/sections/360004937132-POI