AR互動遊戲分享.pdf

Transcript

1. AR 互動遊戲開發經驗分享 JackyChen
2. 講者簡介 • 國泰⼈人壽 iOS ⼯工程師 • Fintech 創新實習專案 Mentor • 協助現⾏行行公司導入 Jenkins、BDD、MVVM • 新⼈人教育訓練
3. https://kknews.cc/tech/j92n95y.html
4. 環境感知 Introducing ARKit: Augmented Reality for iOS(2017) https://developer.apple.com/videos/play/wwdc2017/602/ • 在桌⾯面上⾏行行走 • 會隨著周遭環境變⾊色 • 知道⼿手機位置
5. AR應用
6. 趣味遊戲 https://www.youtube.com/watch?v=rNEfDcDNLgQ
7. 虛擬 解說員 https://www.youtube.com/watch?v=H7Ntsxs5pIU
8. 廣告牆
9. 展場探索
10. 啟蒙教育
11. 如何和建模師 合作？
12. 推薦的建模⼯工具 • 開源 • 免費 • 功能強⼤大 • 教學資源豐富 https://www.blender.org/
13. 給底圖 正⾯面 測⾯面
14. 檔案轉換 dae obj USDZ Converter usdz scn Reality Composer
15. 匯出 dae 材質設定(⼀一)
16. 材質設定-基本設定
17. 材質設定-圖檔烘培 + = https://developer.apple.com/videos/play/wwdc2017/604/
18. 材質設定-Xcode
19. 動作 • 每個動作都輸出⼀一個dae檔 閒置 跌倒 走路路
20. 動作 • dae 是 xml 格式的檔案 • 從建模軟體輸出動作時，會含有複數的 animation 標籤 • 使⽤用 ConvertToXcodeCollada ⼯工具，將 animation 合併成⼀一個，⽅方便便在 Xcode 做程 式控制
21. 進入開發！
22. Node Hierarchy PreView Inspector
23. Inspector-Node • 位置：基於原點做調整 • 旋轉⾓角度：調整好正⾯面 • 縮放比例例＆⼤大⼩小：模型太⼤大或 太⼩小，都會看不到 • 渲染順序：可以做到遮擋效果 • 碰撞標記：碰撞事件⽤用
24. Inspector-Geometry • Geometry 決定模型的形狀狀 • ⽤用內建的 Geometry 才需要 設定 Inspector • 每個 Geometry 都有不同的 設定
25. Inspector-Material • 材質球：渲染效果預覽 • 先設定 Diffuse，它決定表⾯面的主 ⾊色 • 每個屬性除了了顏⾊色，也可以設定 圖片（圖檔烘培⽤用） • 詳細說明請參參考：https:// developer.apple.com/ documentation/scenekit/ scnmaterial
26. SCN 根Node ⼦子Node Geometry Material ⼦子Node ⼦子Node Geometry Geometry Material Material Material Material Material Hierarchy
27. 取出模型，加入 AR 場景 // ARSCNViewDelegate func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) { } // 1. 判斷是否為 imageAnchor guard let imageAnchor = anchor as? ARImageAnchor else{return } // 2.從 scn 檔取出 CathayTown guard let townScene = SCNScene(named: "art.scnassets/Scene/ CathayTown.scn") else{fatalError("no townScene") } townNode = townScene.rootNode.childNode(withName: "town", recursively: false)! // 3. 將 CathayTown 加進 node node.addChildNode(townNode)
28. imageAnchor
29. Animation // 1. 載入「樹寶走路路」的場景檔 let scene = SCNScene( named: "art.scnassets/Scene/TreeBaby- walk.scn" )! // 2. 從節點階層取出第⼀一個 animationKey var walk: SCNAnimationPlayer! = nil scene.rootNode.enumerateChildNodes { (child, stop) in if !child.animationKeys.isEmpty { walk = child.animationPlayer(forKey: child.animationKeys[0]) } } // 3. 將動作設定給「閒置樹寶」 treeBaby.addAnimationPlayer(walk, forKey: "walk") // 4. 執⾏行行走路路的動作 walk.play()
30. Collision-應⽤用場景 與 NPC 對話 事件觸發
31. Collision-PhysicsBody設定 ⼒力力場 碰撞 建議 static 建築物 dynamic V V ⾞車車⼦子 kinematic V ⼈人物
32. Collision-debugOptions • 開 Debug 模式，看碰撞體範圍 • sceneView.debugOptions = [.showPhysicsShapes]
33. Collision-SCNPhysicsContactDelegate public protocol SCNPhysicsContactDelegate : NSObjectProtocol { } // 1. 碰撞開始 optional func physicsWorld(_ world: SCNPhysicsWorld, didBegin contact: SCNPhysicsContact) // 2. 碰撞期間 optional func physicsWorld(_ world: SCNPhysicsWorld, didUpdate contact: SCNPhysicsContact) // 3. 碰撞結束 optional func physicsWorld(_ world: SCNPhysicsWorld, didEnd contact: SCNPhysicsContact)
34. 互動-HitTest HitPoint
35. 互動-搖桿 •擴增實境⼈人物控制 實作 •9/22 15:25~17:00 •103 教室
36. Demo Time
37. 還有什麼可以讓 AR更有趣？
38. 沈沈浸式體驗 with Cardboard
39. ⼿手勢辨識 with CoreML
40. 互動-多⼈人連線 MultipeerConnectivity Cloud Anchors Worldmap Worldmap Apple Google Firebase
41. Unity開發 with ARKitPlugin
42. 預覽效果 • ⽅方法⼀一：得⼀一直 輸出 Xcode project 看執⾏行行結果
43. 預覽效果 •⽅方法⼆二：使⽤用 Unity ARKit Remote Plugin • AR 效果在電腦上 • ⼿手機超燙 • 和電腦須保持實體連線 • 不能測試 hitTest 功能
44. • 不穩定 • 升版後直接崩潰，試了了半天才知道該版本不能 ⽤用 • 已被棄⽤用 ( deprecated as of 2019-06-03 ) • Unity 跨平台的特性不適⽤用 • 因為 ARKit 是在 Metal 基礎之上運⾏行行 其他
45. 附件
46. 參參考資料(⼀一) • Introducing ARKit: Augmented Reality for iOS • https://developer.apple.com/videos/play/wwdc2017/602/ • blender • https://www.blender.org/ • SceneKit: What's New • https://developer.apple.com/videos/play/wwdc2017/604/ • SCNMaterial • https://developer.apple.com/documentation/scenekit/scnmaterial • 蘋果要出新產品？可與iPhone互聯聯的AR設備 • https://kknews.cc/tech/j92n95y.html
47. 參參考資料(⼆二) • Building Collaborative AR Experiences • https://developer.apple.com/videos/play/wwdc2019/610/ • Shared AR Experiences with Cloud Anchors • https://developers.google.com/ar/develop/java/cloud-anchors/overview- android • iOS Stereoscopic ARKit Template • https://github.com/hanleyweng/iOS-Stereoscopic-ARKit-Template • Using Machine Learning and CoreML to control ARKit • https://medium.com/s23nyc-tech/using-machine-learning-and-coreml-to- control-arkit-24241c894e3b • Animating a 3D model in AR with ARKit and Mixamo • https://blog.pusher.com/animating-3d-model-ar-arkit-mixamo/
48. 參參考資料(三) • Creating Great Apps Using Core ML and ARKit • https://developer.apple.com/videos/play/wwdc2019/228/ • Reality Composer • https://developer.apple.com/augmented-reality/reality-composer/ • Introducing the Unity ARKit Remote • https://blogs.unity3d.com/2017/08/03/introducing-the-unity- arkit-remote/ • What’s new in Unity ARKit Plugin for ARKit 2 • https://blogs.unity3d.com/2018/06/14/whats-new-in-unity-arkit- plugin-for-arkit-2/
49. 感謝⼩小深藍藍製作委員會
50. ⼤大樹⽣生活圈App