1.註冊Vuforia帳號：
官網網址：https://developer.vuforia.com/
Register
註冊畫面
密碼8位，要有大寫英文+小寫英文+數字
註冊後要去email，啟動激活帳號

2.登入Vuforia帳號：
官網網址：https://developer.vuforia.com/
（1）login
登入後畫面

（2）兩個單元：License Manager，Target Manager
License Manager功能：『License Key』可以連結『Vuforia Engine』到 Unity
Target Manager功能：設定辨識圖（上傳，下載）

3.教學影片：
註冊Vuforia
登入Vuforia

3.Target Manager設定辨識圖

1.辨識圖：
就是用手機鏡頭掃描，當看到特定的圖案，即可顯示AR效果（3D物件）。
這個特定的圖案，就是『辨識圖』

2.辨識圖要先上傳到Vuforia網站，讓系統認識：
圖片要求：圖檔格式必須是：Only 8 bit gray scale or 24 bit RGB of file type JPG or PNG are allowed.
（1）8 bit的灰階圖。
（2）或，24 bit RGB圖
（3）jpg，或是png

3.上傳到Vuforia網站方法：Target Manager
（1）登入Vuforia帳號：
官網網址：https://developer.vuforia.com/
（2）login
（3）單元：Target Manager
（4）下載圖片：yahoo首頁圖案： 成果圖，
4.上傳yahoo圖案到Vuforia網站：
（1）到Target Manager➜Add Database
命名：ARmark1
Type：Device
成果圖， 成果圖

5.設定ARmark1目標的辨識圖：
（1）點選ARmark1➜Add Target
成果圖 Type：選Singel Image
File：yahoo.png
Width：185
Name：yahoo1
成果圖， 成果圖
（2）注意：上傳圖片的辨識效果：看Rating index，辨識度最高的是5顆星
一般：三顆星以上即可

6.教學影片：
上傳辨識圖

4

1.參考：unity的安裝教學影片：
安裝unity
安裝unity1
安裝unity2
安裝unity3
登入unity4
新增unity project5
unity 視窗排列6

2.注意：不要下載最新的unity，因為新版還不成熟，較不穩定。
但是：unity新版可以向下兼容，可以打開舊版的檔案，但是舊版無法打開新版檔案
所以也不要用太舊版的
（1）☎建議下載LTS版本：LTS = Long-Term Support = 長期維護版
☎版本:選擇f版本，f是穩定版，例如：2020.2.4.f1
☎建議下載Final版本
（2）專案開發版本，推薦選擇：LTS。
（3）如果需要使用新功能，可酌情考慮Final。
（4）需要修復bug，可適當升級Patch。

3.各種版本說明：
（1）Final：最終版。
當前時間的一個最終版本。
一般大的功能跨度都是在年度版本進行更新。

（2）LTS：長期穩定支持版 。
LTS版本不會有新的任何功能，API變更或改進。
適用于正在開發以及已有發佈的開發者，
每年最後一個TECH版本會成為Unity LTS穩定支持版。

（3）TECH：技術前瞻版。
Unity TECH版本適合想要使用最新版Unity的用戶。

（4）Patch：補丁版。
針對當前版本所存在的Bug進行一個修復。。

（5）Beta：外部測試版。

（6）Alpha：預覽版，內部測試版。
此版本提供最新功能的早期試用，和Beta版相比，Alpha版有較大的穩定性風險。

4.安裝方法1（自動法）：下載官網的Unity Hub（64bit版軟體）
（1）安裝三步驟：
A. Download the Unity Hub
B. Choose your Unity version
C. Start your project
官網下載unity Hub
選擇：Download for Windows

選取First-time users：Start here

5.安裝方法2（手動選擇版本法）：下載官網的舊版Unity Archive
官網下載舊版unity LTS
官網下載舊版unity Archive(全部版本）
注意：如果你已經安裝的版本是很久的舊版編輯器，要如何更新？
（1）☎☎要先更新unity Hub版本
（2）再下載新的LTS版本(f1)
注意：用舊版的unity hub，是無法成功下載新的unity版本的

6.執行unity必須要login帳號：
（1）可以用facebook，google帳號登入

7.Unity的License Management
（1）免費版，要選擇：personal
（2）付費版（要商業化）：選擇plus，pro

8.Unity的版權授權：
unity的授權只有2天, 超過了，要再重新授權一次

9.安裝visual studio 2019
（1）可以到微軟官網下載visual studio 2019
https://visualstudio.microsoft.com/zh-hant/vs/
安裝時，在visual studio installer勾選『使用unity進行遊戲開發』
（若是已經安裝vs 2019者，則重新執行visual studio installer➜勾選『使用unity進行遊戲開發』）
https://docs.microsoft.com/zh-tw/visualstudio/cross-platform/getting-started-with-visual-studio-tools-for-unity?view=vs-2019
https://www.youtube.com/watch?v=DL96YoqGhuc

（2）在unity裡面，設定連接到visual studio 2019
Edit➜Preferences➜External Tools➜External Script Editor➜
➜C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\Common7\IDE\devenv.exe
➜選visual studio 2019

10.注意：
（1）授權：選擇:unity個人版
（2）版本：LTS: long time support長期為維護
alpha:測試版
（3）版本:選擇f版本，f是穩定版，例如：新增2020.2.4.f1
（4）unity的授權只有2天, 屆時要再重新授權一次
（5）unity的語言盡量不要選繁體中文，選english
（6）新增專案時，路徑location:不要有中文
（7）新增c# script在asset裡面建立資料夾folder = script

11.登入unity的視窗排列方式：
（1）主要有5種：2by3, 4 split，default，Tall，Wide
調整方式：Window➜Layout

5.安裝Unity裡面的Vuforia套件
1.登入Vuforia帳號：
官網網址：https://developer.vuforia.com/
（1）login
（2）Download➜Add Vuforia Engine to a Unity Project or upgrade to the latest version
成果圖
（3）檢查這個vuforia SDK支援的unity版本：Download➜Release Notes
The Vuforia HoloLens sample requires to restart Unity after the asset has been completely imported into a project made with Unity 2020.3.24f1 and later.
成果圖， 成果圖
Vuforia Engine fully supports development with the OpenXR Plugin in Unity 2020.3 and later.
成果圖

檢查你的unity版本： 成果圖

2.注意：自2020年一月後，即Unity3D 2019.3及之後的版本中將不再內建有Vuforia，
因此我們需要手動import vuforia的包，以下方法擇一即可

2.方法1：到Vuforia網站，下載安裝Vuforia套件（安裝Unity裡面的Vuforia套件）：
（1）下載：add-vuforia-package-10-5-5
（2）開啟unity 專案：test01
（3）安裝：add-vuforia-package-10-5-5
（4）import Vuforia到unity，然後update
成果圖， 成果圖
（5）檢查是否已經import Vuforia的套件了：GameObject➜Vuforia Engines： 成果圖
☎缺點：這個方法，只是import到某個專案project內，並不是真的import到unity內
☎檢查：Window➜Package Management➜發現：找不到Vuforia Engine：
成果圖， 成果圖

3.方法2：到Unity Asset Store，下載安裝Vuforia Engine（安裝Unity裡面的Vuforia套件）：
（1）首先到 Asset Store 查詢 Vuforia Engines➜Add to my Assets➜Open in Unity➜（go in Unity）➜Download➜Import
成果圖， 成果圖， 成果圖， 成果圖， 成果圖， 成果圖， 成果圖， 成果圖

若是選擇Go to my Aseets： 成果圖， 成果圖， 成果圖， 成果圖， 成果圖

（2）結果：會出現Vuforia相關套件： 成果圖， 成果圖

4.注意：
☎缺點：這個方法，只是import到project manager內，若是開啟下一個unity新專案，還必須再重新import一次
☎檢查：新增unity新專案➜GameObjext➜找不到Vuforia套件：
成果圖

☎但是：打開Window➜Package manager➜My Assets➜發現：➜已經有Vuforia Engine
成果圖
☎優點：只要從aseet store安裝一次到package manager
之後的新增然後專案，只要從package manager去import即可

5.舊版unity的安裝方法：
如果是使用Unity 2019.2.x 以前的版本，直接到 File➜Build Settings➜點擊 Player Setting➜勾選 XR Settings 項目中的➜Vuforia Augmented Reality Support 即可
此時 Project 中會產生一個 Resources 資料夾。
成果圖
若沒看到該選項：點擊 XR Support Installers 中的超連結➜下載➜然後關掉 unity 進行安裝。
成果圖
ARCore 1.4 does support autofocus, but Vuforia needs to do some work behind the scenes to support this. The next major release will provide this functionality. An announcement will be made on the forums when this version is available. https://forum.unity.com/threads/autofocus-not-working-on-some-devices.548866/ https://www.youtube.com/watch?v=ung-Hmn5x5g https://library.vuforia.com/articles/Solution/Working-with-the-Camera.html#How-To-Access-the-Camera-Image-in-Unity AR不是人人的手機都使用的 Recommended Devices https://library.vuforia.com/platform-support/vuforia-engine-recommended-devices.html?fbclid=IwAR0FxkbijJIuLgM89tp_Ctmdh-aqrYzDI_mjEyuvIZFsFDoQCyF5FotW_dQ 妳的辨識圖能顯示表示你的操作可以用 如果是輸出到手機上不能使用 (1)你的手機不支持AR (2)你的手機相機鏡頭像素畫質太差 (3)辨識圖的特徵點材質反光

1.觀念：unity要能夠在android手機上輸出執行檔，必須安裝：java sdk，android sdk

2.新版2022 unity：安裝unity後，自動幫你安裝java sdk，android sdk了：
結果：Edit➜Preferences➜Externals tools➜
成果圖成果圖


2.舊版unity安裝，參考：unity安裝『java sdk，android sdk』的教學影片：
Unity Android Set up tutorial

3.步驟1：安裝『unity android build support』：
（1）在Unity hub➜安裝➜新增➜選一個新的版本➜勾選『android build support』
包括1：android SDK & NDK tools
包括2：Open JDK
成果圖
（2）結果：進入Unity➜開啟專案後➜File／Build setting➜就可以看到輸出到Android平台的項目（可以switch plateform）
（3）目前問題：可以switch，但是裡面『No Android Module』>： 成果圖
原因：因為還沒有安裝：java SDK，android SDK

4.步驟2：安裝『java SDK』：
（1）進入Unity➜開啟專案後➜Switch Android plateform （2）Edit➜Preferences➜Externals tools➜

2

2.阿發你好的60單元教學影片：

影片：Cocos Creator游戏开发教程第一集

3.

3.[Cocos Creator] 程式設計教學網頁：
網頁：[Cocos Creator] 程式設計教學網頁

3.

3.[Cocos Creator] 不同版本的API參考手冊：
網頁：版本2.4x系列的API參考手冊
網頁：版本3.3x系列的API參考手冊

1

1.MR應用案例：
（1）設計與原型設計：讓跨功能小組和利害關係人能夠進行 3D 實體和虛擬模型的即時共同作業互動。

（2）訓練與開發：提供講師更好的工具，以輔助教學或訓練工作階段。 透過 3D 視覺效果與互動性，提供受訓者增強且吸引人的學習體驗。

（3）地理空間規劃：實現室內與戶外環境的評量與規劃。 範例包含未來的建築地點、新商店位置與內部設計。 其也會移除手動執行的需求。

（4）銷售協助：提供提高客戶參與度並增強購買者信心的工具，藉此改善銷售取向角色人員的成效。 這些工具包括 3D 目錄與虛擬產品體驗。

（5）現場服務：改善客戶支援問題的一次性解決方法和客戶滿意度。 通常用於原本需要造訪現場的複雜產品。 也可作為以追加銷售商機為目標的平台。

（6）生產力與共同作業：將周遭空間轉換成共用的擴增工作場所。 遠端使用者可共同作業、搜尋、腦力激盪及共用內容，就像共處一室一樣。

2

2.下載官網提供的1個完整範例：
（1）下載demo範例

1

1.混合實境開發工具：混合實境工具組 (MRTK)
若要在應用程式中使用全像投影，最簡單方法是使用一些 Microsoft 預先建立的開發工具，
例如適用於 Unity 與 Unreal Engine 的混合實境工具組 (MRTK)。


2.MRTK 是開放原始碼的跨平台開發套件，其提供：輸入系統、基礎元件和常見的建置組塊，以進行空間互動。
微軟官網：混合實境工具組 (MRTK)

3.開發混合實境應用程式所需的技術及最佳做法：
例如：Mixed Reality Toolkit (MRTK)、Azure Spatial Anchors、Azure 服務、PC Holographic Remoting (電腦全像攝影遠端處理) 等。

4.開發必要條件：
（1）Windows 10 電腦
（2）Windows 10 SDK 10.0.18362.0 或更新版本
（3）已針對開發而設定的 HoloLens 2 裝置
（4）已安裝內含 Unity 2020.3 LTS 或 Unity 2019.4 LTS (OpenXR 會需要 2020.3.8 或更新版本以預防 Bug) 的 Unity Hub

2.2.混合實境雲端服務（Azure 遠端轉譯）：
微軟官網教學：混合實境雲端服務（Azure 遠端轉譯）
混合實境雲端服務：
（1）可以使用「Azure 遠端轉譯」：將轉譯工作負載移至雲端中的高階 GPU，讓您即時轉譯高度複雜的 3D 模型，然後將其直接串流至裝置。 此服務對於您可能針對非連線裝置開發的應用程式而言特別重要，因為其計算轉譯能力較低。


（2）可以使用 Azure Spatial Anchors：以建置空間感知的應用程式。 這表示您可以在真實世界規模的多個裝置之間，對應、保存及共用全像內容。 此服务是跨平台的，特别适用于位置查找、多用户体验和保存对象信息。

3.語音服務：
微軟官網教學：語音服務
Microsoft 有多项认知服务，它们可集成到混合现实应用程序中。
例如：
（1）語音服務可將語音處理功能整合到任何應用程式或服務中。
（2）您可將語音語言轉換成文字，或是透過使用標準 (或可自訂) 的語音音調，從文字產生自然發音的語音。

4.視覺服務：
微軟官網教學：視覺服務
視覺服務，可讓應用程式：『辨識、識別、編製索引及審核』圖片、影片和數位筆跡內容。 甚至可讓應用程式正確識別及分析影像或影片中的內容。

5.Dynamics 365 混合现实应用程序：
微軟官網教學：Dynamics 365 混合现实应用程序
（1）Dynamics 365 Remote Assist 應用程式：可讓使用者透過使用 HoloLens、HoloLens 2、Android 或 iOS 裝置，從不同的實體位置取得協助或有效率地進行共同作業。
這項功能在維護和維修、遠端檢查或訓練課程等案例中非常重要。
（2）Microsoft Dynamics 365 Guides：
是一种面向 Microsoft HoloLens 的混合现实应用程序，它在需要的时间和位置提供全息说明，使操作人员能在工作期间进行学习。
這些指示卡片會以視覺的方式連線至必須完成工作的位置。 其可能包括影像、影片與 3D 全像模型。

6.Microsoft Mesh：
微軟官網教學：Microsoft Mesh
（1）借助 Mesh，人们可以从世界上任何地方体验临场感、跨空间共享以及相互协作。 通过为组织引入支持 Mesh 的混合现实体验，可以增强虚拟会议、进行虚拟设计会话、远程帮助他人以及举办沉浸式虚拟会议，从而大幅提高工作效率。

（2）Microsoft Mesh 在混合现实中提供自然的协作体验：
Mesh 在混合现实中提供自然的协作体验。
在共享空间中，人们呈现为 3D 虚拟形象。 邻近感应和音效可让用户知道彼此之间的相对位置。
用户可以在共享的 3D 空间中一起可视化和注释内容。 用户可以查看与之交谈的人员，并指向共享 3D 对象上的功能。

（3）案例：下面是 Microsoft Mesh 的一些常见用例：
（3-1）虚拟协作：在不同时区工作的同事可以协作，就像他们身处同一个房间一样。 Mesh 与 Microsoft 365 集成，因此连接、日历、内容和工作流自然地过渡到混合现实。 这些共享体验有助于加深理解、增加员工互动和提高工作效率。

（3-2）空间感知设计评论：Mesh 使用户能够使用任何设备从任何位置加入，从而增强了 3D 设计评论。 无论是实际存在还是全息传输，同事都可以实时查看和注释 3D 模型。 所有内容都在设计会话之间持续存在，因此团队可以从他们中断的地方快速开始。 这一共识可迸发创意，激发灵感，从而建立牢固的联系。

（3-3）远程帮助他人：当员工需要帮助时，没有什么比身边有专家来提供指导和新观点更合适的了。 借助 Mesh，远程专家可以出现在任何需要他们的地方。 他们可以叠加上下文数据并帮助快速有效地共享见解，从而更快地解决问题。

（3-4）一起培训和学习：如果不与讲师位于同一个房间并从多个角度观察同一组物体，就很难进行培训，尤其是关于外科手术、设备维护和交通管制等复杂主题的培训。 借助 Mesh，员工可以通过全息传送、全息共享和可视化效果从任何地方一起学习。 Mesh 有助于提高虚拟培训的效率，同时降低差旅和物流成本。

（3-5）举办虚拟会议：通过在 Mesh 提供支持的混合现实体验中举办虚拟会议，从而加深联系和培养社区意识。 通过让你的个性随着技术的逐渐淡化而闪耀，从而与他人建立牢固的联系。

6-1：用google的ARCore開發專案，顯示cube：
1. 參考影片： 參考影片：AR Foundation & Unity 01: Setup for Android

2.安裝2種SDK：AR Foundation，還有ARCore
方法：到Windows➜Package Manager➜Unity Registry
（1）輸入：AR Foundation➜install
（2）輸入：ARCore➜install
成果圖片， 成果圖片， 成果圖片， 成果圖片

3.在場景加入ARCore➜AR Session Origin
（1）加入AR Session Origin
在場景➜滑鼠右鍵➜XR➜AR Session Origin
成果圖片
（2）刪除系統預設的Main camera
（3）把AR Session Origin裡面的AR Camera➜設定為main camera
成果圖片

4.在場景加入ARCore➜AR Session
（1）加入AR Session
在場景➜滑鼠右鍵➜XR➜AR Session
成果圖片

5.在場景加入一個Cube
成果圖片

6.調整Cube位置，放在AR camera的前上方
成果圖片

7.設定Build setting➜Android➜Switch plateform
（1）File➜Build settings
（2）Add Open Scenes(sampleScenes)
（3）Android➜Switch plateform
成果圖片
成果圖片

8.設定player setting➜設定各種參數（很重要，是可否學生AR的關鍵）
成果圖片
（1）player setting➜
（2）設定 api compatibilty Level：Android 7.0(minimum Level 24)
成果圖片
（3）設定 XR Plug-in Management：勾選ARCore
成果圖片

（4）上面的設定還不夠，會讓畫面背景黑色
☎解決方法： (4-1).取消勾選 auto Graphic api
成果圖片
(4-2).刪除 Vulkan
成果圖片
(4-3).取消勾選 multithreaded Rendering
成果圖片
（5）上面的設定還不夠，會讓app在手機執行時瞬間當掉消失
例如：When I select AR Core from project settings>XRPlugin-Management, AR Foundation crashes the moment the cube is displayed on my phone.
原因1：It looks like the issue is related to needing a 64-bit build. ☎解決步驟1：Solution > Go to Project Settings > Configuration > Scripting Backend and select IL2CPP.
☎解決步驟2：Then, under Configuration > Target Architectures, you'll now be able to select ARM64. It took a lot longer to build and run, but it didn't crash.
☎(5-1).Edit➜Project Settings➜ Player➜ Other settings➜Configuration➜Scripting Backend➜IL2CPP
成果圖片
☎(5-2).勾選➜Target Architectures➜ARM64
成果圖片

9.設定連線手機，直接發布測試的參數設定：
（1）打開你的Android手機
（2）設定➜關於手機➜軟體資訊➜版本號碼➜連續點擊7～10次➜就會開啟『開發人員選項』
成果圖片， 成果圖片， 成果圖片， 成果圖片
（3）點按『開發人員選項』➜打開ON
（4）點按『開發人員選項』➜打開USB偵錯(allow)
成果圖片， 成果圖片
☎注意：若是重新連線USB了，記得要去：點按『開發人員選項』➜先關閉，再打開USB偵錯(allow)，才能正常連線發布

10.連線手機，進行發布測試：
（1）用USB線連接電腦與手機
（2）File➜Build settings
（3）Refresh
（4）Run Device➜選擇你手機的型號
成果圖片
（5）Build and run
成果圖片
（6）輸入檔名：AR6-1.apk
（7）在手機會詢問，unity是否允許相機：允許這一次，或使用程式時允許
成果圖片

6-2：用google的ARCore開發專案，顯示小蜜蜂：
1. 方法1：到asset store，輸入bee，下載小蜜蜂
方法2：下載小蜜蜂 prefabs
成果影片

1. 參考影片： 參考影片：AR Foundation & Unity 01: Setup for Android

2.安裝2種SDK：AR Foundation，還有ARCore
方法：到Windows➜Package Manager➜Unity Registry
（1）輸入：AR Foundation➜install
（2）輸入：ARCore➜install
成果圖片， 成果圖片， 成果圖片， 成果圖片

3.在場景加入ARCore➜AR Session Origin
（1）加入AR Session Origin
在場景➜滑鼠右鍵➜XR➜AR Session Origin
成果圖片
（2）刪除系統預設的Main camera
（3）把AR Session Origin裡面的AR Camera➜設定為main camera
成果圖片

4.在場景加入ARCore➜AR Session
（1）加入AR Session
在場景➜滑鼠右鍵➜XR➜AR Session
成果圖片

5.在場景加入一個Cube
成果圖片

6.調整Cube位置，放在AR camera的前上方
成果圖片

7.設定Build setting➜Android➜Switch plateform
（1）File➜Build settings
（2）Add Open Scenes(sampleScenes)
（3）Android➜Switch plateform
成果圖片
成果圖片

8.設定player setting➜設定各種參數（很重要，是可否學生AR的關鍵）
成果圖片
（1）player setting➜
（2）設定 api compatibilty Level：Android 7.0(minimum Level 24)
成果圖片
（3）設定 XR Plug-in Management：勾選ARCore
成果圖片

（4）上面的設定還不夠，會讓畫面背景黑色
☎解決方法： (4-1).取消勾選 auto Graphic api
成果圖片
(4-2).刪除 Vulkan
成果圖片
(4-3).取消勾選 multithreaded Rendering
成果圖片
（5）上面的設定還不夠，會讓app在手機執行時瞬間當掉消失
例如：When I select AR Core from project settings>XRPlugin-Management, AR Foundation crashes the moment the cube is displayed on my phone.
原因1：It looks like the issue is related to needing a 64-bit build. ☎解決步驟1：Solution > Go to Project Settings > Configuration > Scripting Backend and select IL2CPP.
☎解決步驟2：Then, under Configuration > Target Architectures, you'll now be able to select ARM64. It took a lot longer to build and run, but it didn't crash.
☎(5-1).Edit➜Project Settings➜ Player➜ Other settings➜Configuration➜Scripting Backend➜IL2CPP
成果圖片
☎(5-2).勾選➜Target Architectures➜ARM64
成果圖片

9.設定連線手機，直接發布測試的參數設定：
（1）打開你的Android手機
（2）設定➜關於手機➜軟體資訊➜版本號碼➜連續點擊7～10次➜就會開啟『開發人員選項』
成果圖片， 成果圖片， 成果圖片， 成果圖片
（3）點按『開發人員選項』➜打開ON
（4）點按『開發人員選項』➜打開USB偵錯(allow)
成果圖片， 成果圖片
☎注意：若是重新連線USB了，記得要去：點按『開發人員選項』➜先關閉，再打開USB偵錯(allow)，才能正常連線發布

10.連線手機，進行發布測試：
（1）用USB線連接電腦與手機
（2）File➜Build settings
（3）Refresh
（4）Run Device➜選擇你手機的型號
成果圖片
（5）Build and run
成果圖片
（6）輸入檔名：AR6-1.apk
（7）在手機會詢問，unity是否允許相機：允許這一次，或使用程式時允許

成果影片

範例6-3：ARCore點按小蜜蜂後就能向上移動1秒：
成果影片

☎重要觀念1：點按物件移動，不建議用AddForce(方向向量)，這個方法不實用，因為必須將物件節點加入rigidbody，造成力學效果。
但是：我們的遊戲程式很少會用力學模式(例如重力)，而是用動力學kinematic模式(只有碰撞，沒有力學效果)。

☎重要觀念2：觸控事件有兩種：
（1）方法1：OnMouseDown()：這個方法只適合單一物件的觸控點按，複合物件無法響應。

（2）方法2：一個程式碼監測全部文件寫法：
使用射線發出後檢查碰到的物件名稱，位置
update....
if(input.GetMouseButtonDown(0)......
Ray ray1 = Camera.main.ScreenPointToRay(input.MousePosition)....
RaycastHit hit1....
if (Physics.Raycast(ray. out hit1)....

☎注意：方法2的射線觸控檢測法，能夠控制複合物件(小蜜蜂)的移動。
☎但是有個前提條件：必須要加入box collider組件，才能成功運行。

☎結論：複合物件(小蜜蜂)的觸控事件，必須使用方法2的射線觸控檢測法，但是必須要加入box collider組件，才能成功運行。

☎重要觀念3：點按物件後移動1秒的最好方法
（1）不建議用：AddForce()函數，這個屬於力學模式(rigidbody)，我們很少用力學模式。

（2）控制移動1秒：必須用計時器Invoke("StopMoveY", 1);
1秒後把幀動畫的位移分量speedY = 0

（3）幀動畫的做法（在update裡面）
float dx = speedX * Time.deltaTime;
float dy = speedY * Time.deltaTime;
float dz = speedZ * Time.deltaTime;
this.gameObject.transform.Translate(dx, dy, dz, Space.Self);


成果影片

下載小蜜蜂素材：
方法1：到asset store，輸入bee，下載小蜜蜂
方法2：下載小蜜蜂 prefabs

成果圖
步驟圖， 步驟圖
程式碼cs01， 程式碼cs02

範例6-4：ARCore點按小蜜蜂後就根據當下鏡頭camera的垂直方向forward移動離開鏡頭：
成果影片

☎（1）重要觀念1：觸控物件被點擊後，以當下鏡頭的法向方向移動：
☎鏡頭的法向方向：Camera.main.transform.forward;
原理：Camera is simply a Component attached to a GameObject. It's orientated using the relative Transform.
Main Camera forward direction in world space can be accessed this way:Camera.main.transform.forward;


☎（2）重要觀念2：小蜜蜂物件如何以鏡頭camera的法向forwrad進行幀動畫：
幀動畫：
speedCameraForward = -1*Camera.main.transform.forward;
......
this.gameObject.transform.Translate(speedCameraForward*Time.deltaTime, Space.Self);
範例：
Vector3 speedCameraForward;
void Update()
{
//判別按下滑鼠左鍵
if (Input.GetMouseButtonDown(0))
{
//（1）射線取得點按位置的坐標
Ray ray1 = Camera.main.ScreenPointToRay(Input.mousePosition);
RaycastHit hit1;
//射線檢測
if (Physics.Raycast(ray1, out hit1) == true)
{
//觸碰點的物件名稱 = hit1.collider.gameObject.name
string name1 = hit1.collider.gameObject.name;
if(name1== "FantasyBee")
{
//1秒後執行StopMoveCameraForwar()函數，讓相機法向向量速度speedCameraForward=0
speedCameraForward = -1*Camera.main.transform.forward;
Invoke("StopMoveCameraForwar", 1);
}
}
}//endi if 判別滑鼠左鍵
//（2）幀動畫
this.gameObject.transform.Translate(speedCameraForward*Time.deltaTime, Space.Self);
}
void StopMoveCameraForwar()
{
speedCameraForward = Vector3.zero;
}


成果影片

下載小蜜蜂素材：
方法1：到asset store，輸入bee，下載小蜜蜂
方法2：下載小蜜蜂 prefabs

成果圖
步驟圖， 步驟圖
程式碼cs01，

1

7-1：用Windows Mixed Reality開發Unity專案：
1. 混合實境工具組 (MRTK) 是跨平台的工具組，可用於建置虛擬實境 (VR) 與擴增實境 (AR) 的混合實境體驗。
（1）方法1：傳統的混合實境體驗，使用者若要能夠移動、旋轉及縮放全像攝影物件。 雖然您可以從頭開始，並建立自己的腳本來啟用這類操作，但這可能會很耗時且容易出錯，特別是在有多個要設定的物件時。
（2）微軟的1MRTK工具組提供一組預先建置的元件和功能，可讓您用來加速Windows Mixed Reality開發。 在本課程模組結束時，您將能夠設定針對Windows Mixed Reality開發設定的 Unity 專案，並將腳本新增至物件，讓使用者使用手部移動這些物件。
成果圖，
2.學習目標：
設定 Unity 以進行 Windows Mixed Reality 開發
將混合實境工具組 (MRTK) 基礎套件匯入到 Unity
將 MRTK 新增至 Unity 場景
比較及對比三個主要 MRTK 互動模型
將腳本新增至物件，讓使用者可以使用手移動物件

3.先決條件：
使用正確的工具設定的 Windows 10 電腦
Windows 10 SDK 10.0.18362.0 或更新版本
已安裝 Unity 2020.3.x/2019.4.x 的 Unity 中樞
混合實境功能工具
對 Unity 的基本熟悉度：介面、場景建立、套件匯入、GameObjects 新增至場景

範例7-2：建立MRTK專案(預設專案，VR黑色背景顯示)：
成果圖片， 成果圖片

0.目標：連續各種鍵盤快速鍵，來操作控制MRTK物件的方式（選取，移動，縮放，旋轉）

1.參考影片：MRTK(Mixed Reality Tool Kit) AR Interactions Using Unity3D - AR Foundation (ARCore/ARKit) | Part1
參考影片：How To Fix Black Screen Issue When Using AR Foundation And Universal Rendering Pipeline in Unity?

2.匯入 MRTK Unity 基礎套件：
官網：匯入MRTK函數庫
MRTK 教學
github下載MRTK各種套件

（1）新增unity專案，exp7-2：
（2）前往 MRTK 開發者網站 下載相關資源：
github下載MRTK各種套件
安裝前三個SDK：
☎Microsoft.MixedRealityToolkit.Unity.Foundation ( 必要安裝 )
☎Microsoft.MixedRealityToolkit.Unity.Examples （ 建議安裝 ）
☎Microsoft.MixedRealityToolkit.Unity.Tools （ 建議安裝 ）
Microsoft.MixedRealityToolkit.Unity.Extensions （ 建議安裝 ）

（3）開啟MRTK，預設示範demo範例場景scenes：
開啟範例1： [ MRTK ➜ Examples ➜ Demo ➜ UX ➜ BoundsControl ➜ Scenes ➜ BoundsControlExamples] 資料夾 範例場景。
開啟範例2： [ MRTK > Examples > Demos > HandTracking > Scenes ] 資料夾 HandInteractionExamples 範例場景。
若出現提示匯入 TMP Essentials 資源，按下 Import TMP essentials 匯入，而 TMP Examples & Extras 可選擇性匯入。
成果圖片
成果圖片，
成果圖片
成果圖片
成果圖片

（3）測試專案方法：
方法1：遊戲發佈到 Hololens 進行實機測試（需要比 PC 遊戲更多時間）
方法2：遊戲發佈到 Oculus Quest 進行實機測試（需要比 PC 遊戲更多時間）
方法3：遊戲在 PC 測試（建議使用 MRTK 模擬操作避免浪費時間）

（4）在PC電腦模擬測試
．模擬空間移動
．按住滑鼠右鍵旋轉相機。模擬頭部轉動。
．使用鍵盤 WASD 鍵控制前後左右移動。
．使用鍵盤 Q / E 上下移動相機。
☎結論：
☎控制Camera移動的鍵盤：WS，AD，QE
☎控制頭部移動的鍵盤：滑鼠右鍵

（5）模擬手輸入：
．按住空白鍵不放：可開啟右手模擬。
．按住空格鍵時移動滑鼠：模擬手的移動。
．使用滑鼠中鍵滾輪：模擬手的前後移動。
．點選滑鼠左鍵：模擬手捏取與移動物件。
．使用鍵盤 T/Y 鍵：可將手保持在畫面中。
．按住 CTRL 鍵移動滑鼠：可以旋轉手部。
☎結論：
(1).畫面常駐左右手：
畫面出現左手：鍵盤T
畫面出現右手：鍵盤Y

(2).捏住物件：
☎左手捏取/放開：滑鼠左鍵+Shift(按一下放開)
☎右手捏取/放開：滑鼠左鍵+空白鍵(按一下放開)
（左手捏取比右手容易操作）

(3).移動：
☎左手捏取+移動：滑鼠左鍵+Shift(按下拖曵移動)
（左手捏取比右手容易操作）
☎右手捏取+移動：滑鼠左鍵+空白鍵(按下拖曵移動)
（手捏住物件，才能拖曵移動）

(4).轉動：
☎左手捏取物件+旋轉轉動：滑鼠左鍵+Shift+CTRL(按下拖曵轉動)
☎右手捏取物件+旋轉轉動：滑鼠左鍵+空白鍵+CTRL(按下拖曵轉動)
（左手捏取比右手容易操作）

(5).放大縮小：
☎左手捏取物件+旋轉轉動：滑鼠左鍵+Shift+滑鼠中鍵滾動
☎右手捏取物件+放大縮小：滑鼠左鍵+空白鍵+滑鼠中鍵滾動
（左手捏取比右手容易操作）


成果圖片

（6）近距互動 ( Ner interactions / Direct )
目前 HoloLens 與 Oculus Quest 皆可支援手部追蹤的功能，讓玩家與物件進行互動，但缺少觸覺反饋與深度感知的話，玩家可能難以判斷手與物體的距離，MRTK 可提供視覺提示來傳達手與物件的狀態：
． Default: 預設的物件閒置狀態。
． Hover: 當手接近物件時以視覺效果來傳達已瞄準該物件。
． Distance and point of interaction: 傳達手指與物件的距離。
． Contact begins: (light, color) 當手碰觸物件改變視覺效果。
． Grasped: (light, color) 當握住物件時改變視覺效果。
． Contact ends: (light, color) 碰觸結束改變視覺效果。

範例7-3：手工建立MRTK專案，顯示cube，可以手勢控制移動，可以縮放旋轉，VR黑色背景顯示：
0.目標：連續各種鍵盤快速鍵，來操作控制MRTK物件的方式（選取，移動，縮放，旋轉）
成果圖片， 成果圖片

1.參考影片：MRTK(Mixed Reality Tool Kit) AR Interactions Using Unity3D - AR Foundation (ARCore/ARKit) | Part1
參考影片：How To Fix Black Screen Issue When Using AR Foundation And Universal Rendering Pipeline in Unity?
參考網頁：部署至Android和iOS (AR Foundation) [實驗性] — MRTK2
參考網頁：Deploying to Android and iOS (AR Foundation) [Experimental] — MRTK2
參考微軟官網網頁：物件操作工具(ObjectManipulator)

2.匯入 MRTK Unity 基礎套件：
官網：匯入MRTK函數庫
MRTK 教學
github下載MRTK各種套件

（1）新增unity專案，exp7-3：
新增場景：s1
（2）前往 MRTK 開發者網站 下載相關資源：
github下載MRTK各種套件
安裝前三個SDK：
☎Microsoft.MixedRealityToolkit.Unity.Foundation ( 必要安裝 )
☎Microsoft.MixedRealityToolkit.Unity.Examples （ 建議安裝 ）
☎Microsoft.MixedRealityToolkit.Unity.Tools （ 建議安裝 ）
Microsoft.MixedRealityToolkit.Unity.Extensions （ 建議安裝 ）

（3）更新 MRTK UnityAR 腳本定義(Update the MRTK UnityAR scripting defines)：
方法：功能表：Mixed Reality ➜ 工具組 ➜ 公用程式 ➜ UnityAR ➜ 更新腳本定義：
方法：the menu item: Mixed Reality ➜ Toolkit ➜ Utilities ➜ UnityAR ➜ Update Scripting Defines。
成果圖片

（4）將 MixedRealityToolKit 場景新增至您的專案(Add the MixedRealityToolKit scene to your project)：
方法：選取 [Mixed Reality ➜ 工具組 ➜ 新增至場景並設定
方法：Select Mixed Reality ➜ Toolkit ➜ Add to scene and configure
成果圖片
成果圖片

（4）啟用 Unity AR 相機設定提供者(Enabling the Unity AR camera settings provider)：

步驟1：選取場景階層中的 MixedRealityToolkit 物件
Select the MixedRealityToolkit object in the scene hierarchy..
成果圖片

步驟2：選取 [複製並自訂] 以複製 MRTK 設定檔以啟用自訂設定。
Select Copy and Customize to Clone the MRTK Profile to enable custom configuration.
成果圖片

步驟3：選取 [相機設定檔] 旁的[複製]
Select Clone next to the Camera Profile.
成果圖片

步驟4：
流覽 [偵測器] 面板至 [相機系統] 區段，然後展開[相機 設定 提供者] 區段
Navigate the Inspector panel to the camera system section and expand the Camera Settings Providers section.
成果圖片
成果圖片

步驟5：
按一下[新增相機 設定提供者]，然後展開新新增的 [新增相機設定] 專案。
Click Add Camera Settings Provider and expand the newly added New camera settings entry.
成果圖片

步驟6：
選取 Unity AR 相機 設定提供者
Select the Unity AR Camera Settings provider
成果圖片
成果圖片

（5）尋找Main Camera的位置：
成果圖片

（6）在MixedRealitySceneContent裡面才能進入3D物件：
在MixedRealitySceneContent裡面：加入一個cube
成果圖片
點按main camera，如何調整cube的位置讓攝影機可以看到cube
成果圖片

（7）執行測試：按shift模擬左手觸控
成果圖片

（8）讓cube可以被手勢觸控：選取，移動，縮放，旋轉
8-1.點選cube ➜ 加入組件：Object Manipulator(c#程式碼)
成果圖片
8-2.點選cube ➜ 加入組件：bound Control(c#程式碼)
成果圖片
8-3.測試： 選取物件：按shift模擬左手觸控選取
移動物件：按shift+拖曵
縮放物件：按shift+滑鼠中鍵
旋轉物件：按shift+Ctrl

成果圖片， 成果圖片

範例7-4：在android手機顯示小蜜蜂物件的AR效果：
成果影片

1.參考影片：MRTK(Mixed Reality Tool Kit) AR Interactions Using Unity3D - AR Foundation (ARCore/ARKit) | Part1
參考影片：How To Fix Black Screen Issue When Using AR Foundation And Universal Rendering Pipeline in Unity?
參考網頁：部署至Android和iOS (AR Foundation) [實驗性] — MRTK2
參考網頁：Deploying to Android and iOS (AR Foundation) [Experimental] — MRTK2
參考影片：AR Foundation & Unity 01: Setup for Android

☎觀念：若要在android顯示AR，就要安裝ARCore SDK
☎觀念：若要在顯示微軟的全息影像物件，就要安裝MRTK SDK
結論：要在android顯示微軟的全息投影，就要安裝兩個SDK（ARCore，MRTK)

2.注意：SDK的安裝順序很重要，否則無法正常顯示（黑色背景）。
☎順序：先ARFoundation，ARCore，然後再安裝MRTK

3.安裝2種SDK：AR Foundation，還有ARCore
方法：到Windows➜Package Manager➜Unity Registry
（1）輸入：AR Foundation➜install
（2）輸入：ARCore➜install
成果圖片， 成果圖片， 成果圖片， 成果圖片

4.匯入 MRTK Unity 基礎套件：
官網：匯入MRTK函數庫
MRTK 教學
github下載MRTK各種套件

（1）新增unity專案，exp7-4：
新增場景：s1
（2）前往 MRTK 開發者網站 下載相關資源：
github下載MRTK各種套件
安裝前三個SDK：
☎Microsoft.MixedRealityToolkit.Unity.Foundation ( 必要安裝 )
☎Microsoft.MixedRealityToolkit.Unity.Examples （ 建議安裝 ）
☎Microsoft.MixedRealityToolkit.Unity.Tools （ 建議安裝 ）
Microsoft.MixedRealityToolkit.Unity.Extensions （ 建議安裝 ）

5.在場景加入小蜜蜂物件
方法1：到asset store，輸入bee，下載小蜜蜂
方法2：下載小蜜蜂 prefabs

6.調整小蜜蜂位置，放在AR camera的前上方
成果圖片

6.設定小蜜蜂物件的互動程式碼組件：
能夠手勢觸控互動(點選，移動，縮放，旋轉)：要加入Object Manipulator程式碼
顯示外框：要加入boundControl程式碼
6-1.點選FantasyBee ➜ 加入組件：Object Manipulator(c#程式碼)
6-2.點選FantasyBee ➜ 加入組件：bound Control(c#程式碼)

☎注意：若不顯示外框，就不要加入boundControl程式碼
☎注意：MRTK AR物件一定要有Box Collider，否則無法觸控互動

7.設定Build setting➜Android➜Switch plateform
（1）File➜Build settings
（2）Add Open Scenes(sampleScenes)
（3）Android➜Switch plateform
成果圖片
成果圖片

8.設定player setting➜設定各種參數（很重要，是可否學生AR的關鍵）
成果圖片
（1）player setting➜
（2）設定 api compatibilty Level：Android 7.0(minimum Level 24)
成果圖片
（3）設定 XR Plug-in Management：勾選ARCore
成果圖片

（4）上面的設定還不夠，會讓畫面背景黑色
☎解決方法： (4-1).取消勾選 auto Graphic api
成果圖片
(4-2).刪除 Vulkan
成果圖片
(4-3).取消勾選 multithreaded Rendering
成果圖片
（5）上面的設定還不夠，會讓app在手機執行時瞬間當掉消失
例如：When I select AR Core from project settings>XRPlugin-Management, AR Foundation crashes the moment the cube is displayed on my phone.
原因1：It looks like the issue is related to needing a 64-bit build. ☎解決步驟1：Solution > Go to Project Settings > Configuration > Scripting Backend and select IL2CPP.
☎解決步驟2：Then, under Configuration > Target Architectures, you'll now be able to select ARM64. It took a lot longer to build and run, but it didn't crash.
☎(5-1).Edit➜Project Settings➜ Player➜ Other settings➜Configuration➜Scripting Backend➜IL2CPP
成果圖片
☎(5-2).勾選➜Target Architectures➜ARM64
成果圖片

9.設定連線手機，直接發布測試的參數設定：
（1）打開你的Android手機
（2）設定➜關於手機➜軟體資訊➜版本號碼➜連續點擊7～10次➜就會開啟『開發人員選項』
成果圖片， 成果圖片， 成果圖片， 成果圖片
（3）點按『開發人員選項』➜打開ON
（4）點按『開發人員選項』➜打開USB偵錯(allow)
成果圖片， 成果圖片
☎注意：若是重新連線USB了，記得要去：點按『開發人員選項』➜先關閉，再打開USB偵錯(allow)，才能正常連線發布

10.連線手機，進行發布測試：
（1）用USB線連接電腦與手機
（2）File➜Build settings
（3）Refresh
（4）Run Device➜選擇你手機的型號
成果圖片
（5）Build and run
成果圖片
（6）輸入檔名：AR6-1.apk
（7）在手機會詢問，unity是否允許相機：允許這一次，或使用程式時允許


11. 成果影片
成果圖片
☎注意：若不顯示外框，就不要加入boundControl程式碼
☎注意：MRTK AR物件一定要有Box Collider，否則無法觸控互動

範例7-5：(第1次部署)發布MRTK CoffeeCup專案部署到Hololens：
成果影片
成果圖片， 成果圖片, 成果圖片

1. 微軟官網中文教學：建置和部署 MRTK 以HoloLens 2和 WMR 頭戴式裝置 (UWP)
微軟官網英文教學：Deploying to HoloLens and WMR headsets
微軟官網中文教學：應用程式建置至裝置的步驟教學
網友教學網頁：微软混合现实眼镜(HoloLens)
☎中文參考影片：5分钟创建 HoloLens 2 程序
參考影片：Hololens 2 Development Tutorial - Getting Started (MRTK v2)
參考影片：How to Deploy to HoloLens2 over WiFi
參考影片：Unity HoloLens Tutorial 2019 - Deploy to HoloLens
參考影片：How to Configure, Build, and Deploy a Unity Project for HoloLens 2
參考影片：2022 How to Compile Your Unity Project for the Microsoft HoloLens
參考影片：2022 Unity Mixed Reality Tutorials MRTK (Project Setup)

☎觀念：若要在Hololens顯示AR，就不須要安裝ARCore SDK

2.發布MRTK專案到Hololens，微軟官網的步驟教學：
微軟官網中文詳細步驟教學：HoloLens 2 基本概念：開發混合實境應用程式
成果圖片， 微軟官網中文簡單教學：部署至HoloLens和 WMR 頭戴式裝置

3.先按照範例7-2，讀入一個MRTK範例：
（1）新增unity專案，exp7-5：
☎注意：若要部署到Hololens，unity的版本必須是LTS長期支援版本
例如：2020.3.36f1 LTS
（2）前往 MRTK 開發者網站 下載相關資源：
github下載MRTK各種套件
安裝前四個SDK：
☎Microsoft.MixedRealityToolkit.Unity.Foundation ( 必要安裝 )
☎Microsoft.MixedRealityToolkit.Unity.Examples （ 建議安裝 ）
☎Microsoft.MixedRealityToolkit.Unity.Tools （ 建議安裝 ）
Microsoft.MixedRealityToolkit.Unity.Extensions （ 建議安裝 ）

（3）開啟MRTK，預設示範demo範例場景scenes：
開啟範例1： [ MRTK ➜ Examples ➜ Demo ➜ UX ➜ BoundsControl ➜ Scenes ➜ BoundsControlExamples] 資料夾 範例場景。
開啟範例2： [ MRTK > Examples > Demos > HandTracking > Scenes ] 資料夾 HandInteractionExamples 範例場景。
若出現提示匯入 TMP Essentials 資源，按下 Import TMP essentials 匯入，而 TMP Examples & Extras 可選擇性匯入。

7.Build Settings：Switch Build Platform(設定專案以進行Windows Mixed Reality)
微軟官網教學：Configure your project for Windows Mixed Reality
（1）File➜Build settings
（2）Add Open Scenes(sampleScenes)
（3）Plateform：Universal Windows Platform(UWP)➜Switch Build Platform/切換建置平台
成果圖片

8.☎注意：若是沒有Universal Windows Platform(UWP)可以選擇，就要先安裝
成果圖片
（1）到unity editor安裝畫面➜Universal Windows Platform(UWP) Build Support
成果圖片
（2）注意：只有LTS長期支援版本，才有Universal Windows Platform(UWP) 可以安裝
成果圖片
成果圖片
成果圖片

9.Build Settings：設定專案的Windows Mixed Reality/Configure your project for Windows Mixed Reality
成果圖片
（1）先Build Settings：Switch Build Platform
然後In the menu bar, select File > Build Settings....
在功能表列中，選取 [檔案][建 >置設定...]。

（2）In the Build Settings window, select Universal Windows Platform.
在 [建置設定] 視窗中，選取[通用 Windows 平臺]。

（3）Make sure the following settings are active:
Target device: HoloLens
目標裝置：HoloLens

Architecture: ARM64
架構：ARM64

Build Type: D3D Project
組建類型：D3D Project

Target SDK Version: Latest Installed
目標 SDK 版本：最新安裝

Minimum Platform Version: 10.0.10240.0
最低平臺版本：10.0.10240.0

Visual Studio Version: Latest installed
Visual Studio版本：最新安裝

Build and Run on: Local Machine
建置並執行于：本機電腦

Build configuration: Release (there are known performance issues with Debug)
組建組態：發行 (偵錯) 有已知的效能問題

（4）Click the Switch Platform button. Unity displays a progress bar while it switches platforms.
切換平臺程式完成之後，請關閉 [建置設定] 視窗。

8.匯入 MRTK Unity 基礎套件/Import the MRTK Unity foundation package
微軟官網教學1
微軟官網教學2
（1）檢查是否已經安裝了MRTK Unity foundation package?
方法：
1-1).Edit ➜ Project Settings.
1-2).XR Plug-in Management ➜ Universal Windows Platform settings
1-3).若是Microsoft Hololens feature group是灰色(grayed out)或不存在(doesn't exist)，表示Mixed Reality OpenXR plugin沒有被安裝
成果圖片

（2）但是若是Project Settings裡面沒有XR Plug-in Management
成果圖片
2-1).則要先安裝XR Plug-in Management
2-2).安裝後，結果：
成果圖片
2-3).勾選OpenXR
成果圖片
2-4).修正系統不compatiable的條件，修正fix it
方法：點按OpenXR右邊的黃色超連結 ➜ fix All
成果圖片， 成果圖片
2-5).結果：但是Microsoft Hololens feature group還是灰色(grayed out)
成果圖片， 成果圖片， 成果圖片

（3）下載並安裝Mixed Reality功能工具/Mixed Reality Feature Tool：
到微軟網站下載並安裝Mixed Reality功能工具
成果圖片， 成果圖片

（4）安裝.NET 5.0
上面檔案，下載解壓縮後執行，出現錯誤信息
成果圖片
教學影片
原因：沒有安裝.NET 5.0（一定要5.0，安裝新版.NET 6.0不是針對MRTK)
回應：確定，yes
成果圖片
☎注意：選擇window ➜ 桌面 ➜ x64
成果圖片

（5）執行：MixedRealityFeatureTool.exe
成果圖片
結果：成功顯示MixedRealityFeatureTool畫面 ➜ refreshing catalog
成果圖片， 成果圖片
選擇unity專案目錄
成果圖片
☎勾選1：Mixed Reality OpenXR Plugin
成果圖片
☎勾選1：Mixed Reality Toolkit Foundation
成果圖片
驗證：validate
成果圖片
成果圖片
匯入：import
成果圖片
核准：approve
成果圖片
結束：Exit
成果圖片
成果圖片

（6）檢查是否已經安裝了MRTK Unity foundation package?
方法：
6-1).Edit ➜ Project Settings.
6-2).XR Plug-in Management ➜ Universal Windows Platform settings
6-3).若是Microsoft Hololens feature group是深色可選，表示已經成功安裝
成果圖片

（6）修正OpenXR套件，Fix All
6-1).Edit ➜ Project Settings.
6-2).XR Plug-in Management ➜ Universal Windows Platform settings
☎6-3).OpenXR右邊的黃色三角形 ➜
成果圖片， 成果圖片
6-4).出現數個問題。 選取 [全部修正] 按鈕。
成果圖片

（7）設定XR Plug-in Management ➜OpenXR套件
7-1).選擇：OpenXR，設定打勾
成果圖片
7-2).在 [互動設定檔] 底下，按加號 (+) 按鈕
成果圖片
加入三個項目：
眼球注視互動設定檔
Microsoft Hand 互動設定檔
Microsoft 動作控制器設定檔
成果圖片
7-3).眼球注視互動設定檔或任何其他設定檔出現，旁邊會出現黃色三角形、選取三角形，然後在[OpenXR Project驗證] 視窗中，按一下 [修正] 按鈕
成果圖片
7-4).在 [開啟XR 功能群組] 下的[Project 設定] 視窗中，確定已選取下列專案：
Microsoft HoloLens
手部追蹤
動作控制器模型
成果圖片

（8）設定深度提交模式(Depth Submission Mode)
按一下 [ 深度提交模式/Depth Submission Mode ] 下拉式清單，然後選取 [深度 16 位/Depth 16 Bit]
Depth Submission Mode drop down and then select Depth 16 Bit
成果圖片

9.在[MRTK Project Configurator] 視窗中，選取 [套用設定]
成果圖片， 成果圖片， 成果圖片， 成果圖片

10.設定 OpenXR 的專案設定
（1）Edit ➜ Project Settings.
（2）Player ➜ product name：MR7-5
成果圖片

10.設定Hololens必須打開的5個功能：客戶端，攝像頭，麥克風，對全部空間場景的掃描/空間感知，gazeinput凝視輸入
（1）Edit ➜ Project Settings.
（2）Player ➜ compatibilty
（3）打勾打開的5個功能：客戶端internetClient，攝像頭Webcam，麥克風microphone，對全部空間場景的掃描/空間感知spatialPerception，gazeinput凝視輸入 成果圖片， 成果圖片， 成果圖片， 成果圖片


另外網路有人建議(但是部署出現錯誤)：設定Hololens必須打開的6個功能：客戶端，伺服器，攝像頭，麥克風，對全部空間場景的掃描/空間感知，全息投影圖像
（1）Edit ➜ Project Settings.
（2）Player ➜ compatibilty
（3）打勾打開的6個功能：客戶端internetClient，伺服器internetServer，攝像頭Webcam，麥克風microphone，對全部空間場景的掃描/空間感知spatialPerception， （4）打勾支持的設備supported Device Familities：全息投影圖像Holographic
成果圖片， 成果圖片

11.建置和部署應用程式/Build and deploy the application
微軟官網教學1
微軟官網教學2
（1）建置/Build：
1-1).File ➜ Build Settings ➜ Build ➜
1-2).建立build目錄 ➜ 選擇目錄build
成果圖片
1-3).結果：產生visual stuio 2019專案 ➜ 執行MR7-5.sln
成果圖片
1-4).結果：出現警告信息：visual studio installer ➜ 需要安裝c++ 通用window平台工具 ➜ 安裝
成果圖片
安裝完畢

（2）部署deploy：
2-1).打開MR7-5.sln
2-2).選取：[主要] 或 [發行/release] 組態
2-3).設定：ARM64架構
2-4).選擇device/裝置（要用Type-c，進行USB連線）
成果圖片
2-5).結果：沒有『device/裝置』可以選擇

解決方法：方案總管 ➜ 滑鼠右鍵按一下 ➜ [您的專案名稱] (Universal Windows) ➜ 設定為啟始Project]。
成果圖片， 成果圖片
結果：出現『device/裝置』可以選擇了
成果圖片

（3）設定專案的屬性：
3-1).功能表menu：專案 ➜ 屬性 成果圖片
3-2).選取：組態Configuration ➜ 偵錯debug
成果圖片
3-3).要啟動的偵錯工具Debugger to launch ➜ 偵錯debug
平台：作用中（ARM64）
成果圖片

（4）執行程式然後部署deploy到Hololens設備上：
4-1).功能表menu：偵錯 ➜ 啟動但不偵錯
成果圖片
4-2).結果：出現錯誤信息：部署錯誤
成果圖片

（5）最後一步部署，出現錯誤的解決方法
5-1).可能原因：
可能原因1：可能是你的Hololens的藍牙打開了，導致出現了一個錯誤的IP地址，將藍牙功能關閉即可；
可能原因2：你的Hololens與電腦不在一個網段，即沒有接到同一個路由器，檢查你的網絡連接即可
可能原因3：沒有安裝WinSDK

5-2).原因1：Hololens的藍牙必須關閉，否則網址IP有問題
成果圖片
方法：到Hololens ➜ 關閉藍牙

5-3).原因2：沒有安裝完整的Windows SDK （Win SDK）
Microsoft Windows SDK（簡稱Windows SDK或者SDK）：是微軟公司出品的一個軟體開發包，向在微軟的Windows作業系統和.NET框架上開發軟體和網站的程式設計師提供標頭檔、庫檔案、範例代碼、開發文件和開發工具
成果圖片
5-4).前往Windows網站去安裝Win SDK
WinSDK安裝教學
成果圖片
微軟官網：WinSDK下載
成果圖片
5-5).執行Win SDK
成果圖片， 成果圖片， 成果圖片， 成果圖片， 成果圖片

（6）重新部署/Deploy
6-1).結果：第一頁成功連結：出現輸入第一部署到Hololens需要輸入的PIN碼
成果圖片
6-2).到Hololens重新PIN碼的方法：
在Hololens ➜ menu ➜ 設定 ➜ 針對開發人員/for developer ➜ PIN 按鈕配對
成果圖片

（7）開始繼續部署
成果圖片
7-1).出現0個部署錯誤：


12.部署到Hololens後遇到的問題：
（1）剛開始部署後，可以看到Hololens眼鏡裡面的物件，但是下次若要重新執行MR7-5的app（在主功能表內），執行後卻無法顯示。
成果圖片
可能原因：unity的版本若是2020.3.20f1會遇到這個問題，安裝新版本2020.3.32f1以上版本，就可以解決這個問題
參考網頁：Unity HoloLens 2 deployed App stuck loading
解決方法：
I have this exact same issue. Same version of unity & using Visual Studio 2022. Everything was working with Unity 2020.3.20f1 => Upgrade to 2020.3.32f1 and the problem (infinite loading spheres) occurs.
Reverting back to version 2020.3.20f1 & clearing the build folder has fixed the issue for me.

13.部署後出現的錯誤信息：
（1）這個訊息，不會妨礙在Hololens的app執行：
成果圖片
成果圖片

（2）這個訊息，會妨礙在Hololens的app執行，無法執行：
成果圖片

可能成功原因1：成果圖片
可能成功原因2：成果圖片
成果圖片， 成果圖片， 成果圖片， 成果圖片


14.使用Hololens的各種技巧：
（1）標準重新開機程式
卸載 Type-C 纜線，以中斷裝置與電源供應器或主機電腦的連線。
按住 電源 按鈕 15 秒。 所有 LED 都應該關閉。
等候 2-3 秒，然後按下 電源 按鈕。 靠近電源按鈕的 LED 會亮起，裝置會開始啟動。

（2）錄製影片的方法1：語音
微軟教學網站
開始錄製，say: Start recording
停止錄製，say Stop recording （等三妙）

（3）錄製影片的方法2：主功能表
微軟教學網站
開始錄製，用 [開始] 手勢移至 [主功能表/menu]，然後選取 [錄影icon ]
停止錄製，用 [開始] 手勢移至 [主功能表/menu]，然後再選取 [錄影icon ]一次

（4）錄製影片的方法3：用來錄製影片的硬體按鈕
開始錄製：同時按住 『音量向上』和 『音量減少』 按鈕，直到三秒倒數倒數開始
停止錄製：請同時點選這兩個按鈕。

注意：
同時快速按下 『音量向上』 和 『音量減少』 按鈕將會拍攝相片，而不是錄製視訊。


成果影片
成果圖片， 成果圖片, 成果圖片

範例7-6：(第2~次部署)手工建立MRTK專案小蜜蜂部署到Hololens：
成果影片， 成果影片
成果圖片， 成果圖片， 成果圖片

1. 微軟官網中文教學：建置和部署 MRTK 以HoloLens 2和 WMR 頭戴式裝置 (UWP)
微軟官網英文教學：Deploying to HoloLens and WMR headsets
微軟官網中文教學：應用程式建置至裝置的步驟教學
☎中文參考影片：5分钟创建 HoloLens 2 程序


2.發布MRTK專案到Hololens，微軟官網的步驟教學：
微軟官網中文詳細步驟教學：HoloLens 2 基本概念：開發混合實境應用程式
成果圖片， 微軟官網中文簡單教學：部署至HoloLens和 WMR 頭戴式裝置

3.新增unity專案，exp7-6：
（1）注意：若要部署到Hololens，unity的版本必須是LTS長期支援版本
例如：2020.3.36f1 LTS

（2）前往 MRTK 開發者網站 下載相關資源：
github下載MRTK各種套件
安裝前四個SDK：
☎Microsoft.MixedRealityToolkit.Unity.Foundation ( 必要安裝 )
☎Microsoft.MixedRealityToolkit.Unity.Examples （ 建議安裝 ）
☎Microsoft.MixedRealityToolkit.Unity.Tools （ 建議安裝 ）
Microsoft.MixedRealityToolkit.Unity.Extensions （ 建議安裝 ）

（3）在場景加入小蜜蜂物件
方法1：到asset store，輸入bee，下載小蜜蜂
方法2：下載小蜜蜂 prefabs

（4）調整小蜜蜂位置，放在AR camera的前上方
成果圖片

（5）設定小蜜蜂物件的互動程式碼組件：

5-1).點選FantasyBee ➜ 加入組件：Object Manipulator(c#程式碼)
☎設定Host Transform移動的主物件：小蜜蜂FantasyBee
成果圖片

☎先在小蜜蜂物件，加入組件AudioSource
☎設定當：點按開始(On_Manipuation_Started)時播放一次(Audio_PlayOneShot)：音效(MRTK_Manipulation_start)
☎設定當：點按後結束(On_Manipuation_Ended)時播放一次(Audio_PlayOneShot)：音效(MRTK_Manipulation_End)
成果圖片
☎音效檔案的位置：
☎先在小蜜蜂物件，加入組件Box_Collider
☎設定當：點按開始(On_Manipuation_Started)時邊界highlighted：執行程式碼函數(BoundControl_HighlightedWire)
☎設定當：點按後結束(On_Manipuation_Ended)時邊界unhighlighted：執行程式碼函數(BoundControl_UnHighlightedWire)
成果圖片

5-2).點選FantasyBee ➜ 加入組件：bound Control(c#程式碼)
☎先在參數Bounds override：設定：小蜜蜂物件
☎設定當：旋轉開始(Rotate_Started)時播放一次(Audio_PlayOneShot)：音效(MRTK_Manipulation_start)
☎設定當：旋轉後結束(Rotate_Ended)時播放一次(Audio_PlayOneShot)：音效(MRTK_Manipulation_End)
成果圖片
☎設定當：縮放開始(Scale_Started)時播放一次(Audio_PlayOneShot)：音效(MRTK_Manipulation_start)
☎設定當：縮放後結束(Scale_Ended)時播放一次(Audio_PlayOneShot)：音效(MRTK_Manipulation_End)
成果圖片

5-3).設定可以近端手勢操作
☎小蜜蜂物件：加入組件 ➜ NearInteractionGrabbable（c#程式碼）
成果圖片

5-4).設定限制旋轉軸（只能夠y軸旋轉）
☎小蜜蜂物件：加入組件 ➜ Rotation Axis Constraint（c#程式碼）
成果圖片


4.Build Settings：Switch Build Platform（設定專案以進行Windows Mixed Reality）
微軟官網教學：Configure your project for Windows Mixed Reality
（1）File➜Build settings
（2）Add Open Scenes(sampleScenes)
（3）Plateform：Universal Windows Platform(UWP)➜Switch Build Platform/切換建置平台
成果圖片

5.Build Settings：設定專案的Windows Mixed Reality/Configure your project for Windows Mixed Reality
成果圖片
（1）先Build Settings：Switch Build Platform
（2）In the menu bar, select File > Build Settings....
在功能表列中，選取 [檔案][建 >置設定...]。

（3）In the Build Settings window, select Universal Windows Platform.
在 [建置設定] 視窗中，選取[通用 Windows 平臺]。

（4）Make sure the following settings are active:
Target device: HoloLens
目標裝置：HoloLens

Architecture: ARM64
架構：ARM64

Build Type: D3D Project
組建類型：D3D Project

Target SDK Version: Latest Installed
目標 SDK 版本：最新安裝

Minimum Platform Version: 10.0.10240.0
最低平臺版本：10.0.10240.0

Visual Studio Version: Latest installed
Visual Studio版本：最新安裝

Build and Run on: Local Machine
建置並執行于：本機電腦

Build configuration: Release (there are known performance issues with Debug)
組建組態：發行 (偵錯) 有已知的效能問題

（5）Click the Switch Platform button. Unity displays a progress bar while it switches platforms.
切換平臺程式完成之後，請關閉 [建置設定] 視窗。

6.Import the MRTK Unity foundation package(匯入 MRTK Unity 基礎套件)
（1）檢查是否已經安裝了MRTK Unity foundation package?
方法：
1-1).Edit ➜ Project Settings.
2-2).XR Plug-in Management ➜ Universal Windows Platform settings
1-3).若是Microsoft Hololens feature group是深色可選，表示已經成功安裝
成果圖片
若是已經安裝了，那麼下面的（2--5）步驟，就不用再做。

（2）若Project Settings裡面XR Plug-in Management是灰色的處理方法
2-1).Microsoft Hololens feature group還是灰色(grayed out)
成果圖片， 成果圖片， 成果圖片

2-2).下載並安裝Mixed Reality功能工具/Mixed Reality Feature Tool：
到微軟網站下載並安裝Mixed Reality功能工具
成果圖片， 成果圖片

（3）執行：MixedRealityFeatureTool.exe
成果圖片
結果：成功顯示MixedRealityFeatureTool畫面 ➜ refreshing catalog
成果圖片， 成果圖片
選擇unity專案目錄
成果圖片
☎勾選1：Mixed Reality OpenXR Plugin
成果圖片
☎勾選1：Mixed Reality Toolkit Foundation
成果圖片
驗證：validate
成果圖片
成果圖片
匯入：import
成果圖片
核准：approve
成果圖片
結束：Exit
成果圖片
成果圖片

7.修正OpenXR套件，Fix All
（1）Edit ➜ Project Settings.
（2）XR Plug-in Management ➜ Universal Windows Platform settings
☎6-3).OpenXR右邊的黃色三角形 ➜
成果圖片， 成果圖片
（3）出現數個問題。 選取 [全部修正] 按鈕。
成果圖片

（7）設定XR Plug-in Management ➜OpenXR套件
7-1).選擇：OpenXR，設定打勾
成果圖片
7-2).在 [互動設定檔] 底下，按加號 (+) 按鈕
成果圖片
加入三個項目：
眼球注視互動設定檔
Microsoft Hand 互動設定檔
Microsoft 動作控制器設定檔
成果圖片
7-3).眼球注視互動設定檔或任何其他設定檔出現，旁邊會出現黃色三角形、選取三角形，然後在[OpenXR Project驗證] 視窗中，按一下 [修正] 按鈕
成果圖片
7-4).在 [開啟XR 功能群組] 下的[Project 設定] 視窗中，確定已選取下列專案：
Microsoft HoloLens
手部追蹤
動作控制器模型
成果圖片

（8）設定深度提交模式(Depth Submission Mode)
按一下 [ 深度提交模式/Depth Submission Mode ] 下拉式清單，然後選取 [深度 16 位/Depth 16 Bit]
Depth Submission Mode drop down and then select Depth 16 Bit
成果圖片

9.在[MRTK Project Configurator] 視窗中，選取 [套用設定]
成果圖片， 成果圖片， 成果圖片， 成果圖片

10.設定 OpenXR 的專案設定
（1）Edit ➜ Project Settings.
（2）Player ➜ product name：MR7-5
成果圖片

10.設定Hololens必須打開的5個功能：客戶端，攝像頭，麥克風，對全部空間場景的掃描/空間感知，gazeinput凝視輸入
（1）Edit ➜ Project Settings.
（2）Player ➜ compatibilty
（3）打勾打開的5個功能：客戶端internetClient，攝像頭Webcam，麥克風microphone，對全部空間場景的掃描/空間感知spatialPerception，gazeinput凝視輸入
成果圖片， 成果圖片， 成果圖片， 成果圖片


另外網路有人建議(但是部署出現錯誤)：設定Hololens必須打開的6個功能：客戶端，伺服器，攝像頭，麥克風，對全部空間場景的掃描/空間感知，全息投影圖像
（1）Edit ➜ Project Settings.
（2）Player ➜ compatibilty
（3）打勾打開的6個功能：客戶端internetClient，伺服器internetServer，攝像頭Webcam，麥克風microphone，對全部空間場景的掃描/空間感知spatialPerception， （4）打勾支持的設備supported Device Familities：全息投影圖像Holographic
成果圖片， 成果圖片

11.建置和部署應用程式/Build and deploy the application
微軟官網教學1
微軟官網教學2
（1）建置/Build：
1-1).File ➜ Build Settings ➜ Build ➜
1-2).建立build目錄 ➜ 選擇目錄build
成果圖片
1-3).結果：產生visual stuio 2019專案 ➜ 執行MR7-5.sln
成果圖片

（2）部署deploy：
2-1).打開MR7-5.sln
2-2).選取：[主要] 或 [發行/release] 組態
2-3).設定：ARM64架構
2-4).選擇device/裝置（要用Type-c，進行USB連線）
成果圖片
2-5).結果：沒有『device/裝置』可以選擇

解決方法：方案總管 ➜ 滑鼠右鍵按一下 ➜ [您的專案名稱] (Universal Windows) ➜ 設定為啟始Project]。
成果圖片， 成果圖片
結果：出現『device/裝置』可以選擇了
成果圖片

（3）設定專案的屬性：
3-1).功能表menu：專案 ➜ 屬性 成果圖片
3-2).選取：組態Configuration ➜ 偵錯debug
成果圖片
3-3).要啟動的偵錯工具Debugger to launch ➜ 偵錯debug
平台：作用中（ARM64）
成果圖片

（4）執行程式然後部署deploy到Hololens設備上：
4-1).功能表menu：偵錯 ➜ 啟動但不偵錯
成果圖片
4-2).注意1：Hololens的藍牙必須關閉，否則網址IP有問題
成果圖片
方法：到Hololens ➜ 關閉藍牙

4-3).注意2：沒有安裝完整的Windows SDK （Win SDK）
Microsoft Windows SDK（簡稱Windows SDK或者SDK）：是微軟公司出品的一個軟體開發包，向在微軟的Windows作業系統和.NET框架上開發軟體和網站的程式設計師提供標頭檔、庫檔案、範例代碼、開發文件和開發工具
成果圖片
成果圖片
4-4).結果：出現0個部署錯誤：

12.部署後出現的錯誤信息：
（1）這個訊息，不會妨礙在Hololens的app執行：
成果圖片
成果圖片

（2）這個訊息，會妨礙在Hololens的app執行，無法執行：
成果圖片

可能成功原因1：成果圖片
可能成功原因2：成果圖片
成果圖片， 成果圖片， 成果圖片， 成果圖片

成果影片， 成果影片
成果圖片， 成果圖片， 成果圖片

7-13：碰觸MRTK物件的程式碼撰寫(碰觸MRTK物件播放音效)：

（1）碰觸物件的互動
物件被碰觸時可以發出聲音或改變顏色。製作可參考範例場景的 Platonic 物件。

（2）建立一個物件（例如球體），套用 Audio Source 元件。

（3）套用 HandInteractionTouch 元件，
（4）然後在 On Touch Started 按 + 按鈕新增事件。
（5）現在此物件的物件欄位應該是顯示 None (Object) ，將物件拖曳到此欄位。

（6）右側的下拉式選單選擇 AudioSource > PlayOneShot (Audioclip) 再選擇 MRTK_Gem 音效。
成果圖片

（7）套用 NearInteractionTouchable 元件，修改設定值 Bounds = 1, 1 其餘維持預設值。
成果圖片

（8）按下 Play 測試遊戲，測試碰觸物件時發出聲音的功能。

範例7-14：MRTK物件的程式碼撰寫(加入音效)：

1.匯入 MRTK Unity 基礎套件：
官網：匯入MRTK函數庫
MRTK 教學
github下載MRTK各種套件

（1）首先前往 MRTK 開發者網站 下載相關資源：
Microsoft.MixedRealityToolkit.Unity.Foundation ( 必要安裝 )
Microsoft.MixedRealityToolkit.Unity.Extensions （ 建議安裝 ）
Microsoft.MixedRealityToolkit.Unity.Examples （ 建議安裝 ）
Microsoft.MixedRealityToolkit.Unity.Tools （ 建議安裝 ）

（2）開啟MRTK 範例場景：
開啟 [ MRTK > Examples > Demos > HandTracking > Scenes ] 資料夾 HandInteractionExamples 範例場景。
若出現提示匯入 TMP Essentials 資源，按下 Import TMP essentials 匯入，而 TMP Examples & Extras 可選擇性匯入。
成果圖片，
成果圖片

（3）測試專案方法：
方法1：遊戲發佈到 Hololens 進行實機測試（需要比 PC 遊戲更多時間）
方法2：遊戲發佈到 Oculus Quest 進行實機測試（需要比 PC 遊戲更多時間）
方法3：遊戲在 PC 測試（建議使用 MRTK 模擬操作避免浪費時間）

（4）在PC電腦模擬測試
．模擬空間移動
．按住滑鼠右鍵旋轉相機。模擬頭部轉動。
．使用鍵盤 WASD 鍵控制前後左右移動。
．使用鍵盤 Q / E 上下移動相機。
☎結論：
☎控制Camera移動的鍵盤：WS，AD，QE
☎控制頭部移動的鍵盤：滑鼠右鍵

（5）模擬手輸入：
．按住空白鍵不放：可開啟右手模擬。
．按住空格鍵時移動滑鼠：模擬手的移動。
．使用滑鼠中鍵滾輪：模擬手的前後移動。
．點選滑鼠左鍵：模擬手捏取與移動物件。
．使用鍵盤 T/Y 鍵：可將手保持在畫面中。
．按住 CTRL 鍵移動滑鼠：可以旋轉手部。
☎結論：
(1).畫面常駐左右手：
畫面出現左手：鍵盤T
畫面出現右手：鍵盤Y

(2).捏住物件：
☎左手捏取/放開：滑鼠左鍵+Shift(按一下放開)
☎右手捏取/放開：滑鼠左鍵+空白鍵(按一下放開)
（左手捏取比右手容易操作）

(3).移動：
☎左手捏取+移動：滑鼠左鍵+Shift(按下拖曵移動)
（左手捏取比右手容易操作）
☎右手捏取+移動：滑鼠左鍵+空白鍵(按下拖曵移動)
（手捏住物件，才能拖曵移動）

(4).轉動：
☎左手捏取物件+旋轉轉動：滑鼠左鍵+Shift+CTRL(按下拖曵轉動)
☎右手捏取物件+旋轉轉動：滑鼠左鍵+空白鍵+CTRL(按下拖曵轉動)
（左手捏取比右手容易操作）

(5).放大縮小：
☎左手捏取物件+旋轉轉動：滑鼠左鍵+Shift+滑鼠中鍵滾動
☎右手捏取物件+放大縮小：滑鼠左鍵+空白鍵+滑鼠中鍵滾動
（左手捏取比右手容易操作）


成果圖片

（6）近距互動 ( Ner interactions / Direct )
目前 HoloLens 與 Oculus Quest 皆可支援手部追蹤的功能，讓玩家與物件進行互動，但缺少觸覺反饋與深度感知的話，玩家可能難以判斷手與物體的距離，MRTK 可提供視覺提示來傳達手與物件的狀態：
． Default: 預設的物件閒置狀態。
． Hover: 當手接近物件時以視覺效果來傳達已瞄準該物件。
． Distance and point of interaction: 傳達手指與物件的距離。
． Contact begins: (light, color) 當手碰觸物件改變視覺效果。
． Grasped: (light, color) 當握住物件時改變視覺效果。
． Contact ends: (light, color) 碰觸結束改變視覺效果。

8-1：錄製影片的方法
（1）錄製影片的方法1：語音
微軟教學網站
開始錄製，say: Start recording
停止錄製，say Stop recording （等三妙）

（2）錄製影片的方法2：主功能表
微軟教學網站
開始錄製，用 [開始] 手勢移至 [主功能表/menu]，然後選取 [錄影icon ]
停止錄製，用 [開始] 手勢移至 [主功能表/menu]，然後再選取 [錄影icon ]一次

（3）錄製影片的方法3：用來錄製影片的硬體按鈕
開始錄製：同時按住 『音量向上』和 『音量減少』 按鈕，直到三秒倒數倒數開始
停止錄製：請同時點選這兩個按鈕。

注意：
同時快速按下 『音量向上』 和 『音量減少』 按鈕將會拍攝相片，而不是錄製視訊。

8-2：標準重新開機程序
卸載 Type-C 纜線，以中斷裝置與電源供應器或主機電腦的連線。
按住 電源 按鈕 15 秒。 所有 LED 都應該關閉。
等候 2-3 秒，然後按下 電源 按鈕。 靠近電源按鈕的 LED 會亮起，裝置會開始啟動。

exp8_2

1.

專案9-1：寫第一個javascript程式，輸出日誌log
目的：在控制台console，輸出一個日誌信息log
1.成果圖， 成果圖， 場景設計圖， 程式碼

2.下載圖片檔案：素材檔案

3.新建一個專案項目：c9-1

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.拖曵圖片到asset➜再拖曵到場景➜到canvas内：p1.jpg
修改名稱：大雄

6.新增一個javascript腳本：
注意：在cocos creator裡面的程式碼，稱為『腳本』
（1）asset➜新建➜javascript：
成果圖， 修改名稱：js01
成果圖，
7.在大雄節點node，新增一個組件component(腳本js01)
（1）方法1：把js01拖曵到大雄的『添加組件add component』
（2）方法2：大雄節點➜的『添加組件add component』➜腳本組件➜js01
成果圖

8.編輯js01腳本
方法：double click：js01
☎觀念：cocos會幫大雄建立一個類別變數class，類別裡面有參數(property)，有方法函數（start(),update()...)
成果圖
☎觀念：一個類別與生命週期有關的方法函數有以下幾種：
官網的教學(物件的生命週期)

onLoad：初始化大雄物件的函數
start：第一次激活大雄物件的函數
update：遊戲動畫每幀(1/60秒)，就會執行的函數

9.第一個指令：輸出日誌log訊息（日誌只會在控制台顯示）
start () {
console.log("大雄物件，第一次執行");
},

存檔，觀看結果：
（1）在模擬器執行，結果，日誌顯示在『cocos的控制台』： 成果圖，
（2）在網頁執行，結果，日誌顯示在『chrome的開發工具(F12)的控制台』： 成果圖，

2.

專案9-2：點按大雄，會向右移動
目的：點按大雄，會向右移動
1.成果圖， 場景設計圖， 程式碼

2.下載圖片檔案：素材檔案

3.新建一個專案項目：c9-2

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.拖曵圖片到asset➜再拖曵到場景➜到canvas内：p1.jpg
修改名稱：大雄
使用縮放工具➜縮小大雄

6.新增一個javascript腳本：
（1）asset➜新建➜javascript：
修改名稱：js01

7.在大雄節點node，新增一個組件component(腳本js01)
（1）方法2：大雄節點➜的『添加組件add component』➜腳本組件➜js01

8.編輯js01腳本
（1）新增一個function函數：moveleft()
moveleft()
{
this.node.x -= 20;
}
☎注意：this代表目前這個物件(大雄)
node：代表節點
node.x：代表節點的坐標x
-= 20：代表再減去20像素

成果圖
9.在起始化onLoad()，設定滑鼠事件mousedown，會執行函數moveleft
onLoad () {
this.node.on("mousedown", this.moveleft, this);
},
☎注意：this.node.on()：設定目前節點的各種事件on()
"mousedown"：滑鼠按下左鍵事件mousedown
this.moveleft：執行目前物件的自訂函數moveleft()
成果圖，
程式碼

10.cocos creator的各種事件：


11.存檔，觀看結果： 成果圖

12.☎注意：設定mousedown的事件，為自訂函數moveleft，不可寫成movelef()

3.

專案9-3：javascript設定大雄小叮噹的屬性(姓名身高體重)
目的：點按大雄小叮噹，有各種屬性（姓名身高體重），點按都會向右移動
1.成果圖1， 成果圖2， 場景設計圖， 程式碼

2.下載圖片檔案：素材檔案

3.新建一個專案項目：c9-3

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.拖曵圖片到asset➜再拖曵到場景➜到canvas内：p1.jpg，p2.jpg
修改名稱：大雄
修改名稱：小叮噹
使用縮放工具➜縮小大雄
成果圖
6.新增一個javascript腳本：
（1）asset➜新建➜javascript：
修改名稱：js01

7.在大雄節點node，新增一個組件component(腳本js01)
（1）方法2：大雄節點➜的『添加組件add component』➜腳本組件➜js01

8.編輯js01腳本
觀念：在javascript裡面可以建立物件的『類 class』，在『類』內可以加入：
（1）屬性（properties）：
（2）方法（函數）：

9.加入3個屬性properties：姓名，height，weight
properties: {
姓名: {
default: "",
},
height:{
default: 170,
},
weight:{
default: 0 ,
},
程式碼
成果圖1， 成果圖2

10.設定點按滑鼠，就向左移動：
onLoad () {
this.node.on("mousedown",this.moveleft, this);
},
moveleft()
{
this.node.x -= 20;
}
結果：點按大雄，大雄就可以向左移動

11.新增，小叮噹的組件component = js01程式碼
成果圖1， 成果圖2

4.

專案9-4：javascript讓大雄小叮噹向左右移動，設定屬性(速度，移動方向)
目的：點按大雄小叮噹，可以向左，向右移動
1. 成果圖1， 成果圖2， 場景設計圖， 程式碼

2.下載圖片檔案：素材檔案

3.新建一個專案項目：c9-4

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.拖曵圖片到asset➜再拖曵到場景➜到canvas内：p1.jpg，p2.jpg
修改名稱：大雄
修改名稱：小叮噹
使用縮放工具➜縮小大雄

6.新增一個javascript腳本：
（1）asset➜新建➜javascript：
修改名稱：js01

7.在大雄節點node，新增一個組件component(腳本js01)
（1）方法2：大雄節點➜的『添加組件add component』➜腳本組件➜js01

8.編輯js01腳本
觀念：在javascript裡面可以建立物件的『類 class』，在『類』內可以加入：
（1）屬性（properties）：
（2）方法（函數）：

9.加入2個屬性properties：speed, moveleft
properties: {
speed:{
default: 50,
},
moveleft:{
default: true,
},
},

onLoad () {
this.node.on("mousedown",this.move, this);
},

move(){
if(this.moveleft==true)
this.node.x -= this.speed;
else
this.node.x += this.speed;
},


☎注意：在方法函數內如何使用上方設定的屬性參數呢？
方法：this.屬性
例如：this.speed
this.moveleft
程式碼
成果圖1， 成果圖2

5.

專案9-5：Typescript設定大雄小叮噹的屬性(姓名身高體重)
目的：點按大雄小叮噹，有各種屬性（姓名身高體重），點按都會向右移動
1.成果圖1， 成果圖2， 場景設計圖， 程式碼

2.下載圖片檔案：素材檔案

3.新建一個專案項目：c9-5

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.拖曵圖片到asset➜再拖曵到場景➜到canvas内：p1.jpg，p2.jpg
修改名稱：大雄
修改名稱：小叮噹
使用縮放工具➜縮小大雄

6.Typescript的特色：
（1）Typescript和javascirpt差不多，它是javascript的改良版。
（2）Typescript的變數可以設定資料型別（三種基本型別：string，number，boolean）










6.新增一個Typescript腳本：
（1）asset➜新建➜Typescript
修改名稱：ts01
成果圖
7.在大雄節點node，新增一個組件component(腳本ts01)
（1）方法2：大雄節點➜的『添加組件add component』➜腳本組件➜ts01

8.編輯ts01腳本
觀念：在Typescript裡面可以建立物件的『類 class』，在『類』內可以加入：
（1）屬性（properties）：
（2）方法（函數）：

9.加入6個屬性properties：姓名，血型，身高，體重，email，男生否
@property
姓名: string = 'john';

@property
血型 = 'B';

@property
身高 = 170;

@property("number")
體重 = 60;

@property("string")
email = 60;

@property("boolean")
男生 = true;
成果圖1， 程式碼

6.

專案9-6：Typescript讓大雄小叮噹向左右移動，設定屬性(速度，移動方向)
目的：點按大雄小叮噹，可以向左，向右移動
1. 成果圖1， 場景設計圖， 程式碼

2.下載圖片檔案：素材檔案

3.新建一個專案項目：c9-6

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.拖曵圖片到asset➜再拖曵到場景➜到canvas内：p1.jpg，p2.jpg
修改名稱：大雄
修改名稱：小叮噹
使用縮放工具➜縮小大雄

6.新增一個Typescript腳本：
（1）asset➜新建➜Typescript：
修改名稱：ts01

7.在大雄節點node，新增一個組件component(腳本ts01)
（1）方法2：大雄節點➜的『添加組件add component』➜腳本組件➜ts01

8.編輯ts01腳本
觀念：在javascript裡面可以建立物件的『類 class』，在『類』內可以加入：
（1）屬性（properties）：
（2）方法（函數）：

9.加入2個屬性properties：speed, moveleft
@property
speed= 30;

@property
moveleft= true;

onLoad () {
this.node.on("mousedown", this.move, this);
}

move()
{
if(this.moveleft==true)
this.node.x -= this.speed;
else
this.node.x += this.speed;
}


成果圖1， 程式碼

7.

專案9-7：Typescript設定移動時有音效
目的：點按大雄小叮噹，向左有音效(step1)，向右有音效(step1)
1. 成果圖1， 場景設計圖， 程式碼

2.下載圖片檔案：素材檔案

3.新建一個專案項目：c9-7

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.拖曵圖片到asset➜再拖曵到場景➜到canvas内：p1.jpg，p2.jpg
修改名稱：大雄
修改名稱：小叮噹
使用縮放工具➜縮小大雄

6.新增一個Typescript腳本：
（1）asset➜新建➜Typescript：
修改名稱：ts01

7.在大雄節點node，新增一個組件component(腳本ts01)
（1）方法2：大雄節點➜的『添加組件add component』➜腳本組件➜ts01

8.編輯ts01腳本
觀念：在typescript裡面可以建立物件的『類 class』，在『類』內可以加入：
（1）屬性（properties）：
（2）方法（函數）：

9.加入音樂類別屬性properties：cc.AudiClip


@property
speed: number = 50;
@property
left: boolean = true;

@property(cc.AudioClip)
music:cc.AudioClip = null;

onLoad () {
this.node.on("mousedown",this.move, this);
}

move () {
cc.audioEngine.play(this.music, false, 1);
if(this.left==true)
this.node.x -= this.speed;
else
this.node.x += this.speed;
}

10.程式寫好後，要設定audioClip的source
（1）拖曵2個音樂檔案到asset：step1, step2
（2）拖曵step1到大雄的ts01的music
成果圖

11.結果：在網頁瀏覽器測試聲音正常，但若是模擬器安裝不完整則沒有聲音
成果圖， 程式碼

8.

專案9-8：Typescript按鈕取得節點node，並移動位置
目的：點按按鈕，移動大雄的名字，上下移動
1. 成果圖1， 成果圖2
場景設計圖， ts01程式碼， ts02程式碼

2.下載圖片檔案：素材檔案

3.新建一個專案項目：c9-8

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.拖曵圖片到asset➜再拖曵到場景➜到canvas内：p1.jpg，p2.jpg
修改名稱：大雄
修改名稱：小叮噹
使用縮放工具➜縮小大雄
加入label➜命名：名字

6.新增2個按鈕button 成果圖，
7.新增第一個Typescript腳本：ts01（屬於button1）
（1）目的：讓『名字』移動到下方
（2）asset➜新建➜Typescript：
修改名稱：ts01
設定button➜新增一個組件component(腳本ts01)

8.編輯ts01腳本
觀念：使用API函數cc.find()來抓取節點
線上API使用手冊（2.4x）


onLoad () {
this.node.on("mousedown", this.show, this);
}

show()
{
//（1）get 節點/組件
//javasceipt寫法
var node = cc.find("Canvas/大雄/名字");
//typesceipt寫法，都可以
//let node:cc.Node = cc.find("Canvas/大雄/名字");

//（2）移動名字位置
node.setPosition(0, -300);
}

10.新增第二個Typescript腳本：ts02（屬於button2）
（1）目的：讓『名字』移動到上方

11.結果：
成果圖， 成果圖
ts01程式碼， ts02程式碼

9.

專案9-9：Typescript按鈕取得組件component，並修改label文字(把小叮噹，改成哆啦A夢)
目的：點按按鈕，把小叮噹，改成『哆啦A夢』
1.成果圖， 成果圖
場景設計圖， ts01程式碼， ts02程式碼

2.下載圖片檔案：素材檔案

3.新建一個專案項目：c9-9

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.拖曵圖片到asset➜再拖曵到場景➜到canvas内：p1.jpg，p2.jpg
修改名稱：大雄
修改名稱：小叮噹
使用縮放工具➜縮小大雄
加入label➜命名：名字

6.新增2個按鈕button 成果圖，
7.新增第一個Typescript腳本：ts01（屬於button1）
（1）目的：修改『名字』為：哆啦A夢
（2）asset➜新建➜Typescript：
修改名稱：ts01
設定button➜新增一個組件component(腳本ts01)

8.編輯ts01腳本
☎觀念：顯示文字是在label組件（label.string）
鍵盤事件（官網的教學物件），

onLoad () {
this.node.on("mousedown", this.show, this);
}

show()
{
//1.javascript寫法
var node = cc.find("Canvas/小叮噹/名字");
var comp1 = node.getComponent(cc.Label);

//2.Typescript寫法
// let node:cc.Node = cc.find("Canvas/小叮噹/名字");
// let comp1:cc.Label = node.getComponent(cc.Label);

comp1.string = "哆啦A夢";
}

10.新增第二個Typescript腳本：ts02（屬於button2）
（1）目的：修改『名字』為：小叮噹

11.結果：
成果圖， 成果圖
ts01程式碼， ts02程式碼

10.

專案9-10：整合：左右按鈕讓大雄左右移動
目的：點按左右按鈕，讓大雄左右移動
1.成果圖， ts01程式碼， 場景設計圖， ts02程式碼

2.下載圖片檔案：素材檔案

3.新建一個專案項目：c9-10

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.拖曵全部素材到asset
拖曵到場景➜到canvas内➜background.jpg，p1.jpg

6.新增2個按鈕button
設定butoon的sprite圖片：
拖曵到left_button的三個互動事件（arrow-left.png）
成果圖， 成果圖， 成果圖

拖曵到right_button的三個互動事件（arrow-right.png）

7.新增第一個Typescript腳本：ts01（屬於button1）
（1）目的：點按左按鈕，讓大雄左移動，並且有腳步聲
（2）編輯ts01腳本
☎觀念：cocos 2.x版的事件分成2類：
（1）針對node節點的事件：滑鼠節點事件，觸控節點事件（例如：）
（2）針對全局system的事件：鍵盤事件，重力事件（例如：）

☎觀念：cocos 3.x版的事件整合成1類：
（1）針對node節點的事件：滑鼠節點事件，觸控節點事件
（例如：this.node.on(cc.Node.EventType.MOUSE_DOWN, this.move, this)）
（2）針對全局system的事件：鍵盤事件，重力事件
（例如：this.node.on(cc.SystemEvent.EventType.KEY_DOWN, this.move, this)）
網頁：2.4x滑鼠事件，觸摸事件
網頁：2.4x鍵盤事件，重力事件
3.x各種事件（官網的教學物件）




@property("number")
speed = 30;

@property(cc.AudioClip)
music:cc.AudioClip = null;

@property(cc.SpriteFrame)
spr1:cc.SpriteFrame = null;

onLoad () {
//兩種寫法都可以
//this.node.on("mousedown", this.move, this);
this.node.on(cc.Node.EventType.MOUSE_DOWN, this.move, this);
}
move()
{
//1.javascript寫法
var node1 = cc.find("Canvas/大雄");
//2.Typescript寫法
//let node1:cc.Node = cc.find("Canvas/大雄");
node1.x -= this.speed;

//3.播放音效
cc.audioEngine.play(this.music, false, 1);

//4.設定向右圖片
var comp1 = node1.getComponent(cc.Sprite);
comp1.spriteFrame = this.spr1;
}
10.新增第二個Typescript腳本：ts02（屬於button2）
（1）目的：點按右按鈕，讓大雄右移動，並且有腳步聲

11.結果：
成果圖， ts01程式碼， ts02程式碼

11.

專案9-11：整合：鍵盤左右鍵讓大雄左右移動
目的：鍵盤左右鍵，讓大雄左右移動
1.成果圖， 場景設計圖， ts01程式碼

2.下載圖片檔案：素材檔案

3.新建一個專案項目：c9-11

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.拖曵全部素材到asset
拖曵到場景➜到canvas内➜background.jpg，p1.jpg

6.新增Typescript腳本：ts01（屬於大雄sprite）
（1）目的：點按左按鈕，讓大雄左移動，並且有腳步聲
（2）編輯ts01腳本
7.☎觀念：cocos 2.x版的事件分成2類：
（1）針對node節點的事件：滑鼠節點事件，觸控節點事件（例如：）
（2）針對全局system的事件：鍵盤事件，重力事件（例如：）

☎觀念：cocos 3.x版的事件整合成1類：
（1）針對node節點的事件：滑鼠節點事件，觸控節點事件
（例如：this.node.on("mousedown", this.move, this)）
（例如：this.node.on(cc.Node.EventType.MOUSE_DOWN, this.move, this)）
（2）針對全局system的事件：鍵盤事件，重力事件
（例如：cc.systemEvent.on("keydown", this.move, this)）
（例如：cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.move, this)）
網頁：2.4x滑鼠事件，觸摸事件
網頁：2.4x鍵盤事件，重力事件
3.x各種事件（官網的教學物件）


//注意：不是cc.Sprite
//錯誤寫法：@property(cc.Sprite)
@property(cc.SpriteFrame)
spr1:cc.SpriteFrame = null;
@property(cc.SpriteFrame)
spr2:cc.SpriteFrame = null;

@property(cc.AudioClip)
music1:cc.AudioClip = null;
@property(cc.AudioClip)
music2:cc.AudioClip = null;

onLoad () {
//錯誤寫法
// this.node.on(cc.SystemEvent.EventType.KEY_DOWN, this.move, this);
//正確寫法1（全局事件systemEvent）
cc.systemEvent.on("keydown", this.move, this);
//正確寫法2（全局事件systemEvent）
//cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.move, this);
}

move(event:cc.Event.EventKeyboard)
{
var node1 = cc.find("Canvas/大雄");
var comp1 = node1.getComponent(cc.Sprite);
if(event.keyCode == cc.macro.KEY.left)
{
cc.audioEngine.play(this.music1, false, 1);
//錯誤寫法：this.comp1.spriteFrame（不是this node的component）
comp1.spriteFrame = this.spr1;
this.node.x -= 30;
}
else if(event.keyCode == cc.macro.KEY.right)
{
cc.audioEngine.play(this.music2, false, 1);
comp1.spriteFrame = this.spr2;
this.node.x += 30;
}
}
10.結果：
成果圖， ts01程式碼

exp10-1

專案10-1：移動到某坐標點，再縮小
目的：按鈕移動大雄到某坐標點(-300, -72)，再縮小(0.5, 0.5)
1.成果圖， 成果圖， 場景設計圖， ts01程式碼

2.笛卡爾右手坐標系統：

☎坐標向量的寫法有兩種：
（1）最常用==>函數寫法：cc.v3(100,100,0)
（2）少用==>類別變數寫法： new cc.Vec3(100,100,0)
注意：可用v2，或用v3（z=0），但是我們都用v3，因為未來要寫3D

☎取得一個節點node1的(x,y)2D坐標：
var p1 = node1.getPosition()

☎設定一個節點node1的(x,y)2D坐標：
var a1 = cc.v3(50,50,0);
node1.setPosition(a1);



3.下載圖片檔案：素材檔案

3.新建一個專案項目：c10-1

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.拖曵全部素材到asset
拖曵到場景➜到canvas内➜background.jpg，p1.jpg

6.新增1個按鈕button：到(-300,-72)，縮小

7.新增Typescript腳本：ts01（屬於大雄sprite）
（1）目的：按鈕移動大雄到某坐標點(-300, -72)，再縮小(0.5, 0.5)
（2）編輯ts01腳本
onLoad () {
this.node.on(cc.Node.EventType.MOUSE_DOWN, this.move, this);
}

move(event:cc.Event.EventKeyboard)
{
//設定目的地，坐標
var p3 = cc.v3(-300,-72,0);
//var p2 = cc.v2(-300,-72);

//取得大雄節點位置
var node_sprt = cc.find("Canvas/大雄");
console.log(p3);

//取得大雄節點坐標
var p4 = node_sprt.getPosition();

//移動位置
node_sprt.setPosition(p3);
console.log(node_sprt.getPosition());

//縮小
node_sprt.setScale(cc.v3(0.5, 0.5, 0));
}
10.結果：
成果圖， 成果圖， ts01程式碼

1.

專案11-1：2秒緩動到某特定位置+同時旋轉
目的：2秒緩動+同時旋轉，2秒緩動再1秒旋轉
1.成果圖， 成果圖， 場景設計圖， ts01程式碼

2.緩動系統：
緩動系統的官網教學






3.下載圖片檔案：素材檔案

3.新建一個專案項目：c11-1

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.拖曵全部素材到asset
拖曵到場景➜到canvas内➜background.jpg，p1.jpg

6.新增1個按鈕button：2秒緩動

7.新增Typescript腳本：ts01（屬於按鈕）
（1）目的：2秒緩動+同時旋轉，2秒緩動再1秒旋轉
（2）編輯ts01腳本
onLoad () {
this.node.on(cc.Node.EventType.MOUSE_DOWN, this.move, this);
}
move()
{
//抓取節點node
var node1 = cc.find("Canvas/大雄");

//目的地
var p1 = cc.v3(300, -72, 0);

//直接移動
//node1.setPosition(p1);

//2秒緩動
// cc.tween(node1)
// .to(2,{position: p1})
// .start();

//2秒緩動+同時旋轉
// cc.tween(node1)
// .to(2,{position: p1, rotation: 360})
// .start();

//2秒緩動，再1秒旋轉
cc.tween(node1)
.to(2,{position: p1})
.to(1,{rotation: 360})
.start();
}
8.結果：
成果圖， 成果圖， ts01程式碼

9.其它系統：

2.

專案11-2：緩動相對距離，上下左右緩動
目的：上下左右緩動
1.成果圖， 成果圖， 成果圖， 場景設計圖， ts01程式碼

2.緩動相對距離：by()
緩動系統的官網教學






3.下載圖片檔案：素材檔案

3.新建一個專案項目：c11-2

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.拖曵全部素材到asset
拖曵到場景➜到canvas内➜background.jpg，p1.jpg

6.新增1個按鈕button：2秒緩動

7.新增Typescript腳本：ts01（屬於按鈕）
（1）目的：2秒緩動+同時旋轉，2秒緩動再1秒旋轉
（2）編輯ts01腳本
onLoad () {
this.node.on(cc.Node.EventType.MOUSE_DOWN, this.move, this);
}

move()
{
//抓取物件
var node1 = cc.find("Canvas/大雄");

//上下左右緩動 .by()
cc.tween(node1)
.by(1, {position: cc.v3(600,0,0)})
.by(1, {position: cc.v3(0,300,0)})
.by(1, {position: cc.v3(-600,0,0)})
.by(1, {position: cc.v3(0,-300,0)})
.start();
}
8.結果：
成果圖， 成果圖， 成果圖， ts01程式碼

3.

專案11-3：變化速度緩動easing
目的：往上跳逐漸變慢，往下跳逐漸變快
1.成果圖， 成果圖， 成果圖， 場景設計圖， ts01程式碼

2.緩動變換速度（不是定速）：
2.4x緩動系統的官網教學
2.4x各種easing參數的官網教學



☎2.4x各種easing參數：
quadIn 平方曲线缓入函数。
quadOut 平方曲线缓出函数。
quadInOut 平方曲线缓入缓出函数。
cubicIn 立方曲线缓入函数。
cubicOut 立方曲线缓出函数。
cubicInOut 立方曲线缓入缓出函数。
quartIn 四次方曲线缓入函数。
quartOut 四次方曲线缓出函数。
quartInOut 四次方曲线缓入缓出函数。
quintIn 五次方曲线缓入函数。
quintOut 五次方曲线缓出函数。
quintInOut 五次方曲线缓入缓出函数。
sineIn 正弦曲线缓入函数。
sineOut 正弦曲线缓出函数。
sineInOut 正弦曲线缓入缓出函数。
expoIn 指数曲线缓入函数。
expoOut 指数曲线缓出函数。
expoInOut 指数曲线缓入和缓出函数。
circIn 循环公式缓入函数。
circOut 循环公式缓出函数。
circInOut 指数曲线缓入缓出函数。
elasticIn 弹簧回震效果的缓入函数。
elasticOut 弹簧回震效果的缓出函数。
elasticInOut 弹簧回震效果的缓入缓出函数。
backIn 回退效果的缓入函数。
backOut 回退效果的缓出函数。
backInOut 回退效果的缓入缓出函数。
bounceIn 弹跳效果的缓入函数。
bounceOut 弹跳效果的缓出函数。
bounceInOut 弹跳效果的缓入缓出函数。
smooth 平滑效果函数。
fade 渐褪效果函数。
3.下載圖片檔案：素材檔案

3.新建一個專案項目：c11-3

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.拖曵全部素材到asset
拖曵到場景➜到canvas内➜background.jpg，p1.jpg

6.新增1個按鈕button：往上跳

7.新增Typescript腳本：ts01（屬於按鈕）
（1）目的：往上跳逐漸變慢，往下跳逐漸變快
（2）編輯ts01腳本
onLoad () {
this.node.on(cc.Node.EventType.MOUSE_DOWN, this.move, this); }

move()
{
//抓取節點
var node1 = cc.find("Canvas/大雄");

//緩動跳上
cc.tween(node1)
//緩動跳上
.by(1, {position:cc.v3(0,400,0)}, {easing:"quartOut"})
//加速下墜
.by(1, {position:cc.v3(0,-400,0)}, {easing:"quartIn"})
.start();
}
8.結果：
成果圖， 成果圖， 成果圖， ts01程式碼

4.

專案11-4：模擬足球加速下墜，不斷反彈落下
目的：模擬足球加速下墜，不斷反彈落下
1.成果圖， 成果圖， 成果圖， 場景設計圖， ts01程式碼

2.緩動變換速度（不是定速）：
2.4x緩動系統的官網教學
2.4x各種easing參數的官網教學



☎2.4x各種easing參數：
quadIn 平方曲线缓入函数。
quadOut 平方曲线缓出函数。
quadInOut 平方曲线缓入缓出函数。
cubicIn 立方曲线缓入函数。
cubicOut 立方曲线缓出函数。
cubicInOut 立方曲线缓入缓出函数。
quartIn 四次方曲线缓入函数。
quartOut 四次方曲线缓出函数。
quartInOut 四次方曲线缓入缓出函数。
quintIn 五次方曲线缓入函数。
quintOut 五次方曲线缓出函数。
quintInOut 五次方曲线缓入缓出函数。
sineIn 正弦曲线缓入函数。
sineOut 正弦曲线缓出函数。
sineInOut 正弦曲线缓入缓出函数。
expoIn 指数曲线缓入函数。
expoOut 指数曲线缓出函数。
expoInOut 指数曲线缓入和缓出函数。
circIn 循环公式缓入函数。
circOut 循环公式缓出函数。
circInOut 指数曲线缓入缓出函数。
elasticIn 弹簧回震效果的缓入函数。
elasticOut 弹簧回震效果的缓出函数。
elasticInOut 弹簧回震效果的缓入缓出函数。
backIn 回退效果的缓入函数。
backOut 回退效果的缓出函数。
backInOut 回退效果的缓入缓出函数。
bounceIn 弹跳效果的缓入函数。
bounceOut 弹跳效果的缓出函数。
bounceInOut 弹跳效果的缓入缓出函数。
smooth 平滑效果函数。
fade 渐褪效果函数。
3.下載圖片檔案：素材檔案

3.新建一個專案項目：c11-4

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.拖曵全部素材到asset
拖曵到場景➜到canvas内➜background.jpg，football.png

7.新增Typescript腳本：ts01（屬於足球）
（1）目的：模擬足球加速下墜，不斷反彈落下
（2）編輯ts01腳本
onLoad () {
this.node.on(cc.Node.EventType.MOUSE_DOWN, this.move, this);
}
move()
{
//抓取節點
var node1 = cc.find("Canvas/football");

//高度
var h = 460;
//時間
var t = 1;

//緩動
cc.tween(node1)
.by(t,{position:cc.v3(0,-h,0)}, {easing:"quadIn"})
.by(t/2,{position:cc.v3(0,h/2,0)}, {easing:"quadOut"})
.by(t/2,{position:cc.v3(0,-h/2,0)}, {easing:"quadIn"})
.by(t/4,{position:cc.v3(0,h/4,0)}, {easing:"quadOut"})
.by(t/4,{position:cc.v3(0,-h/4,0)}, {easing:"quadIn"})
.by(t/8,{position:cc.v3(0,h/8,0)}, {easing:"quadOut"})
.by(t/8,{position:cc.v3(0,-h/8,0)}, {easing:"quadIn"})
.by(t/16,{position:cc.v3(0,h/16,0)}, {easing:"quadOut"})
.by(t/16,{position:cc.v3(0,-h/16,0)}, {easing:"quadIn"})
.start();
}
8.結果：
成果圖， 成果圖， 成果圖， ts01程式碼

1.

專案12-1：動畫有三種（緩動動畫，幀動畫，計時器動畫）
目的：幀動畫：不斷移動的大雄
1.成果圖， 成果圖， 成果圖， 場景設計圖， ts01程式碼， ts01程式碼

2.動畫有三種：
（1）緩動動畫：tween()函數，造成緩動效果
（2）幀動畫：在unpdate函數內，預設每1/60秒就會執行update()一次，形成動畫
（3）計時器動畫：使用計時器schedule，時間到就執行計時器函數

3.幀動畫：在unpdate函數內，預設每1/60秒就會執行update(dt)一次，形成動畫


4.下載圖片檔案：素材檔案

3.新建一個專案項目：c12-1

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.拖曵全部素材到asset
拖曵到場景➜到canvas内➜background.jpg，p2.jpg

6.新增Typescript腳本：ts01（屬於大雄）
（1）目的：顯示update(dt)的dt = 1/60 sec = 0.0166...（會變動，大約數字）
（2）幀率 = FPS = Frames per Second = 60
每秒會執行update()函數，60次，平均每次1/60秒
（2）編輯ts01腳本
update (dt) {
//兩種日誌log()寫法都可以
//console.log('dt = '+dt);
cc.log('dt = '+dt);
}
（3）編輯ts01腳本：
目的1：讓大雄每次（每個幀率）移動5個pixel像素
目的2：x超過500從左邊(x=-500)進入
目的3：x超過500就停止
update (dt) {
//1.兩種日誌log()寫法都可以
//console.log('dt = '+dt);
cc.log('dt = '+dt);

//4.x超過500就停止
//if(this.node.x >= 500)return;

//2.每次向右移動5 px
this.node.x += 5;

//3.x超過500從左邊進入
if(this.node.x >= 500) this.node.x = -500;
}
8.結果：
成果圖， 成果圖， 成果圖， ts01程式碼

9.幀動畫特點：

2.

專案12-2：如何改變幀率FPS
目的：設定幀率FPS=10，30，60，比較動畫效果的流暢度之不同
1.成果圖， 成果圖， 場景設計圖， ts01程式碼， tsInit程式碼

2.幀動畫FPS：在unpdate函數內，預設每1/60秒就會執行update(dt)一次，形成動畫









3.下載圖片檔案：素材檔案

3.新建一個專案項目：c12-2

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.拖曵全部素材到asset
拖曵到場景➜到canvas内➜background.jpg，p2.jpg

6.新增Typescript腳本：ts01（屬於大雄）
（1）目的1：讓大雄每次（每個幀率）移動5個pixel像素
目的2：x超過500從左邊(x=-500)進入
（2）編輯ts01腳本
update (dt) {
//1.日誌log()輸出dt
cc.log('dt = '+dt);


//2.每次向右移動5 px
this.node.x += 5;

//3.x超過500從左邊進入
if(this.node.x >= 500) this.node.x = -500;
}

7.新增Typescript腳本：tsInit（屬於Canvas）
（1）目的1：設定幀率FPS=3，10，30，60，比較動畫效果的流暢度之不同


（2）編輯tsInit腳本
onLoad () {
cc.game.setFrameRate(30);
}

8.結果：
（1）FPS 越小，每秒移動越慢。
（2）當FPS 小超過某值（例如FPS=3），肉眼可見，動畫不流暢
成果圖， 成果圖， ts01程式碼， tsInit程式碼

3.

專案12-3：鍵盤控制幀動畫，上下左右移動
目的：鍵盤控制幀動畫大雄，上下左右移動
1.成果圖， 成果圖， 成果圖， 成果圖， 場景設計圖， ts01程式碼

2.目的：大雄幀動畫會自動前進，除非改變方向（上下左右鍵），改變方向後會繼續自動前進。

3.方法：使用『狀態控制變數：direction』
方向變數direction = cc.V2
例如：方向向右，則direction = cc.v2(1,0)
例如：方向向下，則direction = cc.v2(0,-1)






4.下載圖片檔案：素材檔案

5.新建一個專案項目：c12-3
新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

6.拖曵全部素材到asset
拖曵到場景➜到canvas内➜background.jpg，p2.jpg

7.新增Typescript腳本：ts01（屬於大雄）
（1）目的：鍵盤控制幀動畫大雄，上下左右移動
（2）編輯ts01腳本
//方向控制（一開始向右）
direction = cc.v2(1,0);

onLoad () {
//兩種寫法都可以
cc.systemEvent.on("keydown", this.movedirec, this);
//cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.movedirec, this);
}

movedirec(event:cc.Event.EventKeyboard)
{
//設定各種方向的向量
if(event.keyCode == cc.macro.KEY.right)
this.direction = cc.v2(1,0);
else if(event.keyCode == cc.macro.KEY.left)
this.direction = cc.v2(-1,0);
else if(event.keyCode == cc.macro.KEY.up)
this.direction = cc.v2(0,1);
else if(event.keyCode == cc.macro.KEY.down)
this.direction = cc.v2(0,-1);
else if(event.keyCode == cc.macro.KEY.space)
this.direction = null;
//原地不動，direction = null;
}
update (dt) {
//1.先取得目前node的坐標=Pos
var pos = this.node.getPosition();

//2.然後再加上方向向量(pos = pos + direction)
//但是要(x,y)分開來加上
pos.x += this.direction.x;
pos.y += this.direction.y;

//3.設定節點node的最新位置
this.node.setPosition(pos);
}
8.結果：
☎注意：在瀏覽器執行，必須在網頁畫面上，點按一下，才能夠開始用鍵盤控制
成果圖， 成果圖， 成果圖， 成果圖， ts01程式碼

9.注意：

4.

專案12-4：計時器動畫（倒數）
目的：數字由10倒數
1.成果圖， 成果圖， 成果圖， 場景設計圖， ts01程式碼

2.計時器的教學文件（官網）：
（官網教學）：腳本開發：使用計時器

☎cocos creator的計時器有 2 種方法：
（1）使用javascript的setTimeout 和 setInterval函數：
其實使用setTimeout 和 setInterval 就足夠了。 不過更推薦使用cocos creator的計時器schedule，因為它更加強大靈活，和組件也結合得更好

（2）使用cocos creator的計時器：schudule







3.下載圖片檔案：素材檔案

3.新建一個專案項目：c12-4

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.建立label節點

7.新增Typescript腳本：ts01（屬於label節點）
（1）目的：數字倒數
（2）編輯ts01腳本
//建立倒數的變數：num
num = 10;
//建立目前文字label組件變數：label01
label01 = null;

onLoad () {
//取得目前節點node裡面的組件component(Label)
this.label01 =this.node.getComponent(cc.Label);
//開啟計時器
this.schedule(this.timer, 1);
}

//時間到了就會執行timer()函數，時間到了，就不斷重複執行
timer()
{
//每次數字num減一
this.num -=1;

//如果num小於0，就停止計時器
if(this.num <=0)
{
this.unschedule(this.timer);
}

//在組件label的屬性string顯示最新數字
this.label01.string = this.num;
}


8.結果：
成果圖， 成果圖， 成果圖， ts01程式碼

5.

專案12-5：計時器動畫（原地直升機）
目的：原地直升機動畫
1.成果圖， 場景設計圖， ts01程式碼

2.計時器的教學文件（官網）：
（官網教學）：腳本開發：使用計時器

☎使用cocos creator的計時器：schudule





3.下載圖片檔案：素材檔案

3.新建一個專案項目：c12-5

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.建立sprite節點
改名為：plane
設定sprite組件的spriteFrame參數 = 第一張圖片 = plane1


7.新增Typescript腳本：ts01（屬於sprite節點）
（1）目的：計時器動畫（原地直升機）
（2）編輯ts01腳本
//圖片編號變數
num = 1;
//計時器刻度
interval = 0.2;

//讀入飛機圖片陣列(數組)
@property(cc.SpriteFrame)
//三種寫法都可以
//picframes:cc.SpriteFrame[] = [];
//picframes = [];
picframes = new Array();

onLoad () {
//啟動計時器
this.schedule(this.timer, this.interval);
}

timer()
{
//抓取圖片sprite組件
var sp1 = this.getComponent(cc.Sprite);

//編號加1
this.num +=1;
if(this.num >=6)this.num=1;

//設定sprite的最新spriteFrame
sp1.spriteFrame = this.picframes[this.num-1];
}

8.☎注意：如何設定圖片陣列spriteframe[]：方法在面板輸入陣列數目，例如：5
成果圖

9.結果：
成果圖， ts01程式碼

6.

專案12-6：鍵盤控制鴿子上下左右飛
目的：鍵盤控制多張圖鴿子動畫，上下左右飛
1.成果圖， 場景設計圖， ts01程式碼

2.計時器的教學文件（官網）：
（官網教學）：腳本開發：使用計時器

☎使用cocos creator的計時器：schudule





3.下載圖片檔案：素材檔案

3.新建一個專案項目：c12-6

4.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

5.建立sprite節點
改名為：鳥
設定sprite組件的spriteFrame參數 = 第一張圖片 = bird00


7.新增Typescript腳本：ts01（屬於sprite節點）
（1）目的：鍵盤控制多張圖鴿子動畫，上下左右飛
（2）編輯ts01腳本
//圖片編號號碼
num = 0;
//sprite陣列
@property(cc.SpriteFrame)
sprfrms = [];
//sprfrms = new Array();
//速度
speed = 10;

onLoad () {
//啟動計時器
this.schedule(this.timer, 0.1);

//偵測鍵盤事件
cc.systemEvent.on("keydown",this.move, this);
}

timer()
{
//圖片編號+1
this.num += 1;
if(this.num >= 18)this.num =0;

//抓取sprite節點的sprite組件
var sprcomp1 = this.getComponent(cc.Sprite);

//顯示圖片
sprcomp1.spriteFrame = this.sprfrms[this.num];
}

move(e:cc.Event.EventKeyboard)
{
if(e.keyCode == cc.macro.KEY.left)
this.node.x -= this.speed;
else if(e.keyCode == cc.macro.KEY.right)
this.node.x += this.speed;
else if(e.keyCode == cc.macro.KEY.up)
this.node.y += this.speed;
else if(e.keyCode == cc.macro.KEY.down)
this.node.y -= this.speed;
}
}

8.☎注意：如何設定圖片陣列spriteframe[]：方法在面板輸入陣列數目，例如：18
成果圖

9.☎注意：每一張圖片，系統會自動剪裁trim
缺點：若是剪裁不均勻，會造成動畫表現不流暢
成果圖
改善方法：不剪裁（把每一張圖片，設定屬性trim type = None）
成果圖

10.結果：
（☎注意：在網頁瀏覽器執行，必須先點按畫面，才能用鍵盤控制物件移動）
成果圖， ts01程式碼

7.

專案12-7：從一張gif動畫，做成Atlas圖集
目的：做成Atlas圖集
1.成果圖， 成果圖

2.Atlas圖集的教學文件（官網）：
（官網教學）：Atlas圖集

☎使用Atlas圖集的原因：








3.下載gif圖片檔案：gif素材檔案下載

3.把gif圖片檔案，轉成很多單格圖片檔案：
gif轉換png網站：https://cloudconvert.com/gif-to-png
成果圖

4.把多張png圖片，組成一張Atlas圖集：
（1）方法：兩種軟體，可以支援cocos creator的圖集Atlas
本範例使用方法：TexturePacker
TexturePacker(官網)下載網站：：https://www.codeandweb.com/texturepacker
TexturePacker(google drive)下載：
下載安裝，開啟（使用免費試用版，free version）

（2）匯入多張png圖片的目錄
成果圖， 成果圖

（3）匯出成一個Atlas圖集（包括：1個atlas圖片，與1個plist定義檔）（是個xml檔案）
方法：file➜publish sprite styleshe
成果圖
結果：免費版會形成兩個標記 成果圖

解決方法：使用專業試用版（try pro）
成果圖

結果：輸出成2個檔案（包括：1個atlas圖片，與1個plist定義檔）
成果圖

5. 下載成果檔案（Atlas圖集，plist定義檔）

8.

專案12-8：由Atlas圖集做出動畫（原地鴿子飛動畫）
目的：由Atlas圖集做出動畫
1.成果圖， 場景設計圖， ts01程式碼

2.Atlas圖集的教學文件（官網）：
（官網教學）：Atlas圖集

3.下載鴿子Atlas檔案（Atlas圖集，plist定義檔）


4.新建一個專案項目：c12-8

5.新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

6.建立sprite節點
改名為：鳥
設定sprite組件的Atlas = a3
設定sprite組件的spriteFrame參數 = 第一張圖片 = bird00


7.新增Typescript腳本：ts01（屬於sprite節點）
（1）目的：由Atlas圖集做出動畫
（2）編輯ts01腳本
//圖集spriteAtlas
@property(cc.SpriteAtlas)
altas1:cc.SpriteAtlas = null;

//圖片陣列
@property(cc.SpriteFrame)
sprfrms:cc.SpriteFrame[] = [];

//圖片編號
num = 0;

onLoad () {
//啟動計時器
this.schedule(this.timer, 0.2);

//抓取節點的sprite組件
var sprcomp1 = this.getComponent(cc.Sprite);

//把圖集altas轉成，圖片陣列
this.sprfrms = this.altas1.getSpriteFrames();
}

timer()
{
//抓取節點的sprite組件
var comp1 = this.getComponent(cc.Sprite);

//設定sprite組件的圖片source
comp1.spriteFrame = this.sprfrms[this.num];

//圖片編號+1
this.num += 1;
if(this.num >= 17)this.num =0;
}
}

8.☎注意：設定altas1的來源 = a3 圖集
//圖集spriteAtlas
@property(cc.SpriteAtlas)
altas1:cc.SpriteAtlas = null;
成果圖

9.關鍵指令：
（1）宣告：圖集spriteAtlas 變數：
@property(cc.SpriteAtlas)
altas1:cc.SpriteAtlas = null;

（2）宣告：圖片陣列變數：
@property(cc.SpriteFrame)
sprfrms:cc.SpriteFrame[] = [];

（3）如何把圖集altas轉成，圖片陣列
this.sprfrms = this.altas1.getSpriteFrames();

（4）如何設定sprite組件的圖片source
//先抓取節點的sprite組件
var comp1 = this.getComponent(cc.Sprite);
comp1.spriteFrame = this.sprfrms[this.num];

9.☎注意：每一張圖片，系統會自動剪裁trim
缺點：若是剪裁不均勻，會造成動畫表現不流暢
成果圖
改善方法：不剪裁（把每一張圖片，設定屬性trim type = None）

10.結果：
成果圖， ts01程式碼

1.

專案13-1：動態加載資源（載入一張圖片）
目的：點按大雄，動態載入資源區asset裡面的小叮噹圖片
注意：本章節範例，屬於進階範例，初學者可以先跳過
1.成果圖， 成果圖， 場景設計圖， ts01程式碼

2.載入資源區asset裡面的素材（圖片，音檔），方法有二種：

（1）靜態加載：在cocos面板，手動設定圖片參數來源，例如： 範例圖
【第12章的動畫，都是使用靜態加載的方式來運作】

（2）動態加載：由javascript程式碼直接讀取資源區（asset）裡面的圖片
【本章介紹動態加載，程式碼較複雜，屬於動畫的進階課程】

3.資源加載的教學文件（官網）:
資源加載的教學文件（官網）：https://docs.cocos.com/creator/manual/zh/scripting/dynamic-load-resources.html




4.☎動態加載資源（載入一張圖片）的指令：
☎指令：cc.resources.load("路徑/檔名", 素材type, 呼叫回調函數onComplete)
☎範例：cc.resources.load("p2", cc.SpriteFrame, function (err, assets)
☎說明1：assets參數：是讀入資源區asset/路徑/檔名後，把spriteFrame圖片，傳給assets參數
☎說明2：err參數：若是讀取過程出現錯誤，會給錯誤訊息err
☎說明3：動態加載素材與圖片，一定要放在asset/resources目錄裡面（要自行建立一個固定同名的目錄：resources）： 成果圖
☎說明4：圖片名稱不可以加上副檔名（*.png, *.jpg）
☎說明5：素材type：圖片素材=cc.SpriteFrame，聲音素材=cc.AudioClip
☎說明6：var self = this;（或是let self = this;）：這是javascript的閉包語法
☎說明7：在cc.resources.load(...)函數內部可以用this代表目前節點，必須用self代表目前節點
原因：在呼叫回調函數funciton(err,assets){...裡面不知道什麼是this..}
所以要在load()外面，先設定 var self = this; （用self變數當作目前節點）
這個就是閉包語法的用法（在回調函數外面設定公共變數）
☎說明8：＜cc.SpriteFrame＞assets：這是類型轉換語法，把asset類型，轉換成SpritFrame圖片類型
（箭頭符號＜cc....＞，就是類型轉換符號）

5.☎加載一張圖片的完整模板
（1）關鍵程式碼模板（可以複製這個去修改）：
var self = this;
cc.resources.load("p2", cc.SpriteFrame, function (err, assets)
{ self.node.getComponent(cc.Sprite).spriteFrame = ＜cc.SpriteFrame＞assets;
});

（2）官網說明文件：
（官網教學）：https://docs.cocos.com/creator/manual/zh/scripting/dynamic-load-resources.html

（3）指令說明：






6.下載圖片檔案：素材檔案

7.新建一個專案項目：c13-1
新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

8.拖曵全部素材到asset
拖曵到場景➜到canvas内➜p1.jpg，p2.jpg
新增一個節點（sprite），修改名稱：角色
設定節點的spriteFrame = p1

9.新增Typescript腳本：ts01（屬於角色）
（1）點按大雄，動態載入資源區asset裡面的小叮噹圖片
（2）編輯ts01腳本
onLoad () {
this.node.on("mousedown", this.show, this); }

show()
{
var self = this;
cc.resources.load("p2", cc.SpriteFrame, function (err, asset)
{ self.node.getComponent(cc.Sprite).spriteFrame = ＜cc.SpriteFrame＞asset;
});
}
10.結果：
成果圖， 成果圖， ts01程式碼

2.

專案13-2：動態加載多個資源（載入多張圖片做動畫）
目的：加載多張直升機圖片，做成動畫
注意：本章節範例，屬於進階範例，初學者可以先跳過
1.成果圖， 場景設計圖， ts01程式碼

2.資源加載的教學文件（官網）:
資源加載的教學文件（官網）：https://docs.cocos.com/creator/manual/zh/scripting/dynamic-load-resources.html








3.☎動態加載多個資源（載入多張圖片）的指令：
☎指令：cc.resources.loadDir("目錄", 素材type, 呼叫回調函數onComplete)
☎範例：cc.resources.loadDir("plane", cc.SpriteFrame, function(err,assets:[cc.SpriteFrame]){...}
☎說明1：assets陣列參數：是讀入資源區asset/路徑/檔名後，把spriteFrame圖片陣列，傳給assets陣列參數
☎說明3：動態加載素材與圖片，一定要放在asset/resources目錄裡面（要自行建立一個固定同名的目錄：resources）： 成果圖
☎說明5：素材type：圖片素材=cc.SpriteFrame，聲音素材=cc.AudioClip
☎說明8：把多個素材asset[]，設定給圖片陣列sprfrm
sprfrms:cc.SpriteFrame[] = [];
.............
self.sprfrms = assets;

4.☎加載多張圖片的完整模板
（1）關鍵程式碼模板（可以複製這個去修改）：
//動態讀取resources的多個素材
let self = this;
cc.resources.loadDir("plane", cc.SpriteFrame, function(err,assets:[cc.SpriteFrame]){
//把多個素材asset[]，設定給圖片陣列sprfrm
self.sprfrms = assets;
});


5.下載圖片檔案：素材檔案

6.新建一個專案項目：c13-2
新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1
拖曵全部素材到asset
拖曵到場景➜到canvas内➜background.jpg，plane1～5.jpg
新增一個節點（sprite），修改名稱：plane
設定節點的spriteFrame = plane1

6.新增Typescript腳本：ts01（屬於plane）
（1）目的：加載多張直升機圖片，做成動畫
（2）編輯ts01腳本
//圖片編號變數
num = 1;

//圖片陣列變數（不需要寫@property）
//@property(cc.SpriteFrame)
sprfrms:cc.SpriteFrame[] = [];

onLoad () {
//1.動態讀取resources的多個素材
let self = this;
cc.resources.loadDir("plane", cc.SpriteFrame, function(err,assets:[cc.SpriteFrame]){
//動態加載1個圖片的做法
//直接設定組件的spriteframe屬性
//self.getComponent(cc.Sprite).spriteFrame = ＜cc.SpriteFrame＞assets;

//動態加載5個圖片的做法
//把多個素材asset[]，設定給圖片陣列sprfrm
self.sprfrms = assets;
});

//2.啟動計時器
this.schedule(this.timer, 0.2);
}

timer()
{
//編號+1
this.num += 1;
if(this.num >= 6)this.num = 1;

//抓取本節點的sprite組件
var comp1 = this.getComponent(cc.Sprite);

//設定最新的節點組件的spriteFrame參數（注意：陣列的編號 = 實際數-1）
comp1.spriteFrame = this.sprfrms[this.num-1];
}
}

8.結果：
成果圖， ts01程式碼

3.

專案13-3：動態加載多個資源（鍵盤上下左右移動鴿子）
目的：鍵盤控制鴿子動畫，上下左右移動
注意：本章節範例，屬於進階範例，初學者可以先跳過
1.成果圖， 場景設計圖， ts01程式碼

2.載入資源區asset裡面的素材（圖片，音檔），方法有二種：


（1）靜態加載：在cocos面板，手動設定圖片參數來源，例如： 範例圖
【第12章的動畫，都是使用靜態加載的方式來運作】

（2）動態加載：由javascript程式碼直接讀取資源區（asset）裡面的圖片
【本章介紹動態加載，程式碼較複雜，屬於動畫的進階課程】

6.下載圖片檔案：素材檔案

7.新建一個專案項目：c13-3
新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

8.拖曵全部素材到asset
拖曵到場景➜到canvas内➜backgournd.jpg，bird00～17.jpg
新增一個節點（sprite），修改名稱：鳥
設定節點的spriteFrame = bird00

9.新增Typescript腳本：ts01（屬於bird00）
（1）目的：鍵盤控制鴿子動畫，上下左右移動
（2）編輯ts01腳本
//圖片編號變數
num = 0;

//圖片陣列變數
sprfrms:cc.SpriteFrame[] = [];

onLoad () {
//動態加載assets到sprfrms陣列
let self = this;
cc.resources.loadDir("bird", cc.SpriteFrame, function(err, assets:[cc.SpriteFrame]){
self.sprfrms = assets;
});

//啟動計時器
self.schedule(self.timer, 0.2);

//鍵盤上下左右移動bird
cc.systemEvent.on("keydown", self.move, self);
}

timer()
{
//圖片編號+1
this.num += 1;
if(this.num >= 18)this.num = 0;

//抓取節點的組件sprite
var comp1 = this.getComponent(cc.Sprite);
comp1.spriteFrame = this.sprfrms[this.num];
}

move (e:cc.Event.EventKeyboard) {
cc.log(e.keyCode);
cc.log(cc.macro.KEY.left);
if(e.keyCode == cc.macro.KEY.right)
this.node.x += 20;
else if(e.keyCode == cc.macro.KEY.left)
this.node.x -= 20;
else if(e.keyCode == cc.macro.KEY.up)
this.node.y += 20;
else if(e.keyCode == cc.macro.KEY.down)
this.node.y -= 20;
}
}
10.結果：
成果圖， ts01程式碼

1.

專案14-1：觸控大雄，傳回觸控點(x,y)坐標
目的：點按大雄，觸控大雄，傳回觸控點(x,y)坐標
1.成果圖， 場景設計圖， ts01程式碼

2.觸控事件，與滑鼠事件的差異：
（1）觸控事件：支援2種事件：桌機的滑鼠，手機的觸控
（2）滑鼠事件：只支援1種事件：桌機的滑鼠
☎結論：以後不需要再寫滑鼠事件了，只要寫觸控事件即可
☎結論：用觸控事件，來取代滑鼠事件


3.觸控事的教學文件（官網）:腳本開發指南➜系統內置事件
教學文件（官網）：https://docs.cocos.com/creator/manual/zh/scripting/internal-events.html
☎在目標物件觸控：touchstart
☎觸控後滑動：touchmove
☎觸控目標物件後離開：touchend
☎在非目標物件處離開：touchcancel








4. ☎注意：觸控函數的傳遞參數：e:cc.Event.EventTouch


6.下載圖片檔案：素材檔案

7.新建一個專案項目：c14-1
新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

8.拖曵全部素材到asset
拖曵到場景➜到canvas内➜background.jpg，p1.jpg
設定背景圖片剛剛好貼齊場景四周的邊界（方法：使用UI➜widge組件，設定邊界空隙=0）， 成果圖， 成果圖
拖曵p1（sprite）到場景，修改名稱：大雄
新增兩個label，修改名稱：x, y

9.新增Typescript腳本：ts01（屬於大雄）
（1）目的：觸控大雄，傳回觸控點(x,y)坐標
（2）編輯ts01腳本
onLoad () {
this.node.on("touchstart", this.show, this);
}

show (e:cc.Event.EventTouch) {
//1.在日誌顯示觸控物件坐標
cc.log("x = " + e.getLocationX());
cc.log("y = " + e.getLocationY());

//2.在label顯示坐標
//抓lable-x ,y節點的lbel組件
var lblx = cc.find("Canvas/x").getComponent(cc.Label);
var lbly = cc.find("Canvas/y").getComponent(cc.Label);

//設定組件label的string參數
lblx.string = e.getLocationX().toString();
lbly.string = e.getLocationY().toString();
}

☎注意1：lblx.string = e.getLocationX().toString();
因為左邊是文字，右邊是數字，所以要把右邊的數字，轉換成文字

☎注意2：show (e:cc.Event.EventTouch)
觸控函數所傳遞的參數=e，要宣告e是個『cc.Event.EventTouch』的資料型別
若沒有寫，就無法取得xy坐標（e.getLocationX)

10.結果：
成果圖， ts01程式碼
☎可以發現：點按場景正中央，不是相對坐標的(0,0)，而是絕對坐標的(960/2, 640/2)

2.

專案14-2：觸控事件的冒泡機制（背景，大雄，足球事件）
目的：三個節點（背景，大雄，足球），大雄足球是背景的子節點，觸控足球事件也會執行大雄事件
注意：把足球放在背景與大雄之外，一樣會有事件的冒泡機制
1.成果圖， 成果圖， 成果圖
場景設計圖
ts01程式碼， ts02程式碼， ts03程式碼， ts04程式碼
若是使用e.stopPropagation()來阻斷冒泡上浮，結果： 成果圖， ts04程式碼


2.什麼是觸控事件的冒泡機制?
☎若是觸控到C事件，後續還會執行父節點事件（B事件，A事件），執行父節點事件，就是冒泡上浮機制
☎若是觸控到D事件，後續還會執行父節點事件（B事件，A事件）
☎平行節點，沒有冒泡上浮機制




5.下載圖片檔案：素材檔案

6.新建一個專案項目：c14-2
新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1
拖曵全部素材到asset
拖曵到場景➜到canvas内➜background.jpg，p1, football
修改節點名稱：背景，大雄，足球


6.新增4個Typescript腳本：ts01，ts02，ts03，ts04
（1）設定：四個節點的腳本（Canvas ts01，背景ts02，大雄ts03，足球ts04） （2）目的：大雄足球是背景的子節點，觸控足球事件也會執行大雄事件

（3）編輯ts01腳本
onLoad () {
this.node.on("touchstart", this.show, this);
}

show () {
cc.log("Canvas");
}

7.阻斷冒泡上浮：e.stopPropagation()
onLoad () {
this.node.on("touchstart", this.show, this);
}

show (e:cc.Event.EventTouch) {
cc.log("足球");
e.stopPropagation();
}

8.結果：
成果圖， 成果圖， 成果圖
ts01程式碼， ts02程式碼， ts03程式碼， ts04程式碼
若是使用e.stopPropagation()來阻斷冒泡上浮，結果： 成果圖， ts04程式碼

3.

專案14-3：用觸控與node.active=false做遮罩效果
目的：用node.active = false做遮罩效果，用node.active = true去除遮罩效果
1.成果圖， 成果圖， 場景設計圖， ts01程式碼

2.目的：


3.下載圖片檔案：素材檔案

4.新建一個專案項目：c14-3
新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1
拖曵全部素材到asset
拖曵到場景➜到canvas内➜background.jpg，p1, football
修改節點名稱：背景，大雄，足球

5.新增一個遮罩節點：
（1）新增一個Sprite（單色）
➜設定UI組件➜widget工具，把sprtie的四周襲結在Canvas

（2）設定Sprite（單色）的透明度（0～255) = 150>
（3）設定Sprite（單色）的顏色為灰色
成果圖， 成果圖
（4）設定遮罩節點的組件：文字label：修改名稱為：訊息
設定string = 觸控螢幕即可開始遊戲
成果圖

9.新增Typescript腳本：ts01（屬於：遮罩）
（1）目的：用node.active = false做遮罩效果，用node.active = true去除遮罩效果
（2）編輯ts01腳本
onLoad () {
this.node.on("touchstart", this.show, this);
}

show()
{
this.node.active = false;
}
10.結果：
成果圖， 成果圖， ts01程式碼

4.

專案14-4：(遮罩應用)建立模態提示框，來詢問是否繼續或離開遊戲
目的：按離開按鈕，出現提示框，詢問是否繼續或離開遊戲
1.成果圖， 成果圖， 場景設計圖， ts01程式碼， ts02程式碼， ts03程式碼

2.目的：


3.下載圖片檔案：素材檔案

4.新建一個專案項目：c14-4
新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1
拖曵全部素材到asset
拖曵到場景➜到canvas内➜background.jpg，p1, football，button1
修改節點名稱：背景，大雄，足球，按鈕
在按鈕button1裡面，加入子節點label（修改名稱：文字）➜string = 離開

5.新增一個『提示框』節點：
（1）新增一個節點 （2）設定UI組件➜widget工具，把sprtie的四周襲結在Canvas

5.在『提示框』裡面➜新增一個遮罩節點：
（1）新增一個Sprite（單色）
➜設定UI組件➜widget工具，把sprtie的四周襲結在Canvas
（2）設定Sprite（單色）的透明度（0～255) = 150>
（3）設定Sprite（單色）的顏色為灰色

5.在『提示框』裡面➜新增一個sprite圖片（提示框背景圖）：
（1）把popwindow圖，拖曵到『提示框』裡面
（2）放大2倍

5.在『提示框』裡面➜新增2個sprite圖片（按鈕）：
（1）把button2，button3圖，拖曵到『提示框』裡面
（2）縮小
（3）在button2➜裡面加入子節點➜label➜再玩一次
（4）在button3➜裡面加入子節點➜label➜關閉遊戲
成果圖

6.設定『提示框節點』，一開始是不顯示：
方法1：『提示框節點』.active = false
方法2：取消勾選『作用』功能
成果圖

9.新增Typescript腳本：ts01（屬於：離開按鈕button1）：成果圖
9.新增Typescript腳本：ts02（屬於：再玩一次按鈕button2）：成果圖
9.新增Typescript腳本：ts03（屬於：關閉遊戲按鈕button3）：成果圖

10.ts01腳本
（1）目的：按離開按鈕，出現提示框，詢問是否再玩一次或離開遊戲
onLoad () {
this.node.on("touchstart", this.show1, this)
}

show1()
{
//取得『提示框節點』
var node1 = cc.find("Canvas/提示框節點");
node1.active = true;
}

11.ts02腳本
（1）目的：再玩一次，把提示框隱藏（不作用）
onLoad () {
this.node.on("touchstart", this.show1, this)
}

show1()
{
//取得『提示框節點』
var node1 = cc.find("Canvas/提示框節點");
node1.active = false;
}

12.ts03腳本
（1）目的：關閉遊戲
onLoad () {
this.node.on("touchstart", this.show1, this);
}

show1 () {
cc.game.end();
}
10.結果：
成果圖， 成果圖， ts01程式碼， ts02程式碼， ts03程式碼

5.

專案14-5：(觸控應用)貓咪跟著觸控點移動
目的：觸控任意點，貓咪移動到該點
1.成果圖， 場景設計圖， ts01程式碼

3.下載圖片檔案：素材檔案

4.新建一個專案項目：c14-5
新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1
拖曵全部素材到asset
拖曵到場景➜到canvas内➜background.jpg，cat1，cat2

5.新增Typescript腳本：ts01（屬於：Canvas）：成果圖

6.ts01腳本
（1）目的：觸控任意點，貓咪移動到該點
onLoad () {
this.node.on("touchstart", this.show1, this);
}

show1 (e:cc.Event.EventTouch) {
//抓取貓節點
var node1 = cc.find("Canvas/貓");
//抓取Canvas節點
var canvas1 = cc.find("Canvas");

//觸控點坐標
//（1）不好做法：觸控事件是世界坐標
//var pos1 = cc.v2(e.getLocationX(), e.getLocationY());

//（2）較好做法：把世界坐標，轉換成，局部坐標
//方法：局部坐標.x = 世界坐標.x - Canvas.width/2
//方法：局部坐標.y = 世界坐標.y - Canvas.height/2
var pos1 = cc.v2(e.getLocationX()-canvas1.width/2, e.getLocationY()-canvas1.height/2);

//設定貓位置 = 觸控點坐標
node1.setPosition(pos1);
}

7.關鍵技術：把世界坐標，轉換成，局部坐標：
//方法：局部坐標.x = 世界坐標.x - Canvas.width/2
//方法：局部坐標.y = 世界坐標.y - Canvas.height/2
var pos1 = cc.v2(e.getLocationX()-canvas1.width/2, e.getLocationY()-canvas1.height/2);

8.結果：
成果圖， ts01程式碼

6.

專案14-6：(遮罩應用)blockInputEvent事件阻斷遮罩後的觸控函數事件
目的：按離開按鈕出現提示框，詢問是否繼續或離開遊戲，用blockInputEvent事件阻斷遮罩後的觸控函數事件
1.成果圖， 成果圖， 場景設計圖， ts00程式碼， ts01程式碼， ts02程式碼， ts03程式碼

2.目的：blockInputEvent事件阻斷輸入事件


3.下載圖片檔案：素材檔案

4.新建一個專案項目：c14-6
新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1
拖曵全部素材到asset
拖曵到場景➜到canvas内➜background.jpg，cat1，cat2，button1，button2，button3，popwindow
修改節點名稱：背景，貓，按鈕
在按鈕button1裡面，加入子節點label（修改名稱：文字）➜string = 結束

5.新增一個『提示框』節點：
（1）新增一個節點 （2）設定UI組件➜widget工具，把sprtie的四周襲結在Canvas

5.在『提示框』裡面➜新增一個遮罩節點：
（1）新增一個Sprite（單色）
➜設定UI組件➜widget工具，把sprtie的四周襲結在Canvas
（2）設定Sprite（單色）的透明度（0～255) = 150>
（3）設定Sprite（單色）的顏色為灰色

5.在『提示框』裡面➜新增一個sprite圖片（提示框背景圖）：
（1）把popwindow圖，拖曵到『提示框』裡面
（2）放大2倍

5.在『提示框』裡面➜新增2個sprite圖片（按鈕）：
（1）把button2，button3圖，拖曵到『提示框』裡面
（2）縮小
（3）在button2➜裡面加入子節點➜label➜再玩一次
（4）在button3➜裡面加入子節點➜label➜關閉遊戲
成果圖

6.設定『提示框節點』，一開始是不顯示：
方法1：『提示框節點』.active = false
方法2：取消勾選『作用』功能
成果圖

9.新增Typescript腳本：ts00（屬於：離開按鈕Canvas）：成果圖
9.新增Typescript腳本：ts01（屬於：離開按鈕button1）：成果圖
9.新增Typescript腳本：ts02（屬於：再玩一次按鈕button2）：成果圖
9.新增Typescript腳本：ts03（屬於：關閉遊戲按鈕button3）：成果圖

10.ts00腳本
（1）目的：觸控任意點，貓咪移動到該點
onLoad () {
this.node.on("touchstart", this.show1, this);
}

show1 (e:cc.Event.EventTouch) {
//注意：touch觸控事件的坐標是世界坐標，不是本地Local坐標
//把『世界坐標』轉成『本地坐標』的方法
//（1） 本地坐標.x = 貓世界坐標.x - Canvas.width/2
//（2） 本地坐標.y = 貓世界坐標.y - Canvas.height/2

//抓取貓節點
var node1 = cc.find("Canvas/貓");

//抓取Canvas節點
let $canvas1 : cc.Node = cc.find("Canvas");

//貓移動到觸控點位置
node1.setPosition(cc.v2(e.getLocationX()-$canvas1.width / 2, e.getLocationY()-$canvas1.height / 2));

}

10.ts01腳本
（1）目的：按離開按鈕出現提示框，詢問是否繼續或離開遊戲，用blockInputEvent事件阻斷遮罩後的觸控函數事件
//圖片編號
num = 1;
//圖片陣列
@property(cc.SpriteFrame)
sprfrms:cc.SpriteFrame[] = [];

onLoad () {
//觸控
this.node.on("touchstart", this.show1, this);

//啟動計時器動畫
this.schedule(this.timer, 0.2);
}
//觸控事件
show1(e:cc.Event.EventTouch)
{
//抓取節點『提示框節點』
var node1 = cc.find("Canvas/提示框節點");
node1.active = true;
}
//計時器動畫
timer()
{
//圖片編號+1
this.num += 1;
if(this.num >=3)this.num = 1;

//抓到圖片節點的組件
var comp1 = cc.find("Canvas/貓").getComponent(cc.Sprite);
comp1.spriteFrame = this.sprfrms[this.num-1];
}

11.ts02腳本
（1）目的：再玩一次，把提示框隱藏（不作用）
onLoad () {
this.node.on("touchstart", this.show1, this)
}

show1()
{
//取得『提示框節點』
var node1 = cc.find("Canvas/提示框節點");
node1.active = false;
}

12.ts03腳本
（1）目的：關閉遊戲
onLoad () {
this.node.on("touchstart", this.show1, this);
}

show1 () {
cc.game.end();
}

13.關鍵技術：如何blockInputEvent事件阻斷輸入事件：
目前程式執行問題：當開啟遮罩時，背景的貓咪，還是可以隨著觸控而移動
改善方法：在『遮罩層』➜加入一個組件『blockInputEvent』➜就可以阻斷上方父節點（冒泡機制）的輸入事件
成果圖


14.結果：
成果圖， 成果圖， ts00程式碼， ts01程式碼， ts02程式碼， ts03程式碼

1.

專案15-1：動態發射子彈（動態建立節點）
目的：點按坦克，就動態發射子彈
1.成果圖， ts01程式碼

2.觀念：有些節點node，不是預先出現在場景中，而是遊戲過程中，才出現的➜這種節點，稱為：動態節點
//☎步驟1：動態產生子彈節點：
var node1 = new cc.Node;

//☎步驟2：動態產生子彈節點裡面的組件（sprite）：
var comp1 = node1.addComponent(cc.Sprite);

//☎步驟3：設定子彈節點裡面的sprite組件的屬性（sprite的spriteFrame）
comp1.spriteFrame = this.pic_bullet;

//☎步驟4：顯示子彈節點，兩個方法都可以
node1.parent = this.node;


6.下載圖片檔案：素材檔案

7.新建一個專案項目：c15-1
新增一個場景scene：assets=>scene1（必須用英文名稱）➜然後double click：scene1

8.拖曵全部素材到asset
拖曵到場景➜到canvas内➜
新增sprite(單色）➜設定背景圖片剛剛好貼齊場景四周的邊界（方法：使用UI➜widge組件，設定邊界空隙=0）
修改名稱：背景
成果圖

9.新增Typescript腳本：ts01（屬於坦克）
（1）目的：觸控坦克，發射子彈
（2）編輯ts01腳本
@property(cc.SpriteFrame)
pic_bullet:cc.SpriteFrame = null;

onLoad () {
this.node.on("touchstart", this.shot, this);
}

shot()
{
//☎步驟1：動態產生子彈節點：
var node1 = new cc.Node;

//☎步驟2：動態產生子彈節點裡面的組件（sprite）
var comp1 = node1.addComponent(cc.Sprite);

//☎步驟3：設定子彈節點裡面的sprite組件的屬性（sprite的spriteFrame）
comp1.spriteFrame = this.pic_bullet;

//☎步驟4：顯示子彈節點，兩個方法都可以
//（1）方法1：子彈node1節點，掛在坦克裡面
node1.parent = this.node;
//（2）方法2：子彈node1節點，掛在Canvas裡面
//node1.parent = cc.find("Canvas");

//☎步驟5：設定子彈圖片的大小（縮小）
//注意：cc.v2()，除了可以設定坐標，也可以設定縮放大小
//cc.v2(), cc.v3()都可以
node1.setScale(cc.v2(0.3, 0.3));

//☎步驟6：設定子彈節點的位置
//注意：若是子彈掛在坦克節點裡面，那麼坐標是『坦克的相對坐標，坐標以坦克中心點為（0, 0)
node1.setPosition(cc.v2(0, 400));
}

10.結果：
成果圖， ts01程式碼

2.

專案15-2：子彈動態飛行（動態加上腳本）
目的：讓子彈動態持續飛行
1.成果圖， ts01程式碼， tsBullet程式碼

2.觀念1：要動態控制子彈飛行，必須設定兩個typescript
☎（1）ts01（屬於坦克）：動態產生子彈節點+sprite組件，顯示子彈圖片，顯示子彈位置，設定子彈節點的typescript（tsBullet)
☎（2）tsBullet（屬於子彈）：啟動計時器，設定每0.01秒改變子彈的飛行位置，設定子彈往上飛行超過2000像素，就銷毀子彈節點+停止該計算器


5.下載圖片檔案：素材檔案
或是接續exp15-1專案範例，接續做

6.新建一個專案項目：c15-2
拖曵到場景➜到canvas内➜
新增sprite(單色）➜設定背景圖片剛剛好貼齊場景四周的邊界（方法：使用UI➜widge組件，設定邊界空隙=0）
修改名稱：背景

6.新增2個Typescript腳本：ts01，tsBullet
（1）設定ts：二個節點的腳本（坦克（ts01），ts01(import tsBullet) （2）目的：坦克的腳本是ts01，在ts01裡面設定動態腳本tsBullet（必須用import）

☎重點1：如何由外部asset素材資源，載入import腳本（./tsBullet)，讀入tsBullet類別
☎方法：import tsBullet from "./tsBullet";

☎重點2：如何在ts01裡面設定動態腳本tsBullet
☎方法：node_bullet.addComponent(tsBullet);

（3）編輯ts01腳本（屬於坦克）
☎目的：動態產生子彈節點+sprite組件，顯示子彈圖片，顯示子彈位置，設定子彈節點的typescript（tsBullet)
//載入tsBullet
//從（tsBullet）腳本，導入（tsBullet）類class
import tsBullet from "./tsBullet";
const {ccclass, property} = cc._decorator; @ccclass export default class NewClass extends cc.Component { @property(cc.SpriteFrame)
pic_bullet:cc.SpriteFrame = null;

onLoad () {
this.node.on("touchstart", this.shot, this);
}

shot () {
//（1）動態節點
//動態產生節點
var node_bullet = new cc.Node;
//動態產生sprite組件
var comp_sprite = node_bullet.addComponent(cc.Sprite);
//設定sprite的spriteFrame圖形
comp_sprite.spriteFrame = this.pic_bullet;
//縮小圖片大小
node_bullet.setScale(cc.v2(0.3, 0.3));
//顯示圖片節點（掛在坦克下）
node_bullet.parent = this.node;
//設定子彈節點的位置
node_bullet.setPosition(cc.v2(0, 400));

//（2）動態腳本，讓子彈節點，持續飛行
//讓子彈節點，加入腳本組件tsBullet
node_bullet.addComponent(tsBullet);

}

（4）編輯tsBullet腳本（屬於子彈）
☎目的：啟動計時器，設定每0.01秒改變子彈的飛行位置，設定子彈往上飛行超過2000像素，就銷毀子彈節點+停止該計算器
onLoad () {
//啟動計時器
this.schedule(this.timer, 0.01);
}
timer()
{
this.node.y += 40;
//飛出的子彈，如果沒有銷毀，就會在記憶體儲存很多沒有用的子彈資料
if(this.node.y >= 2000)
{
//停止計時器
this.unschedule(this.timer);
//銷毀子彈物件
this.node.destroy();
//結束這個函數
return;
}
}

8.結果：
成果圖， ts01程式碼， tsBullet程式碼

3.

專案15-3：專案15-3：子彈在遠方目標區爆炸
目的：困難處在：動態腳本上加上新的sprite圖片，而且是緩動動畫（1秒，放大2倍，變成透明）
1.成果圖1， 成果圖2， ts01程式碼， tsBullet程式碼

2.目的：

3.觀念1：要動態控制子彈飛行，必須設定兩個typescript
☎（1）ts01（屬於坦克）：動態產生子彈節點+sprite組件，顯示子彈圖片，顯示子彈位置，設定子彈節點的typescript（tsBullet)
☎（2）tsBullet（屬於子彈）：啟動計時器，設定每0.01秒改變子彈的飛行位置，設定子彈往上飛行超過2000像素，就銷毀子彈節點+停止該計算器


3.下載圖片檔案：素材檔案

4.新建一個專案項目：c15-3
拖曵到場景➜到canvas内➜
新增sprite(單色）➜設定背景圖片剛剛好貼齊場景四周的邊界（方法：使用UI➜widge組件，設定邊界空隙=0）
修改名稱：背景

6.新增2個Typescript腳本：ts01，tsBullet
（1）設定ts：二個節點的腳本（坦克（ts01），ts01(import tsBullet)
（2）目的：坦克的腳本是ts01，在ts01裡面設定動態腳本tsBullet（必須用import）

☎重點1：如何由外部asset素材資源，載入import腳本（./tsBullet)，讀入tsBullet類別
☎方法：import tsBullet from "./tsBullet";

☎重點2：如何在ts01裡面設定動態腳本tsBullet
☎方法：node_bullet.addComponent(tsBullet);

☎重點3：如何在動態腳本組件mytsBullet腳本內，設定爆炸spriteFrame圖片呢？
（注意，動態腳本的圖片是無法直接讀入檔案的，所以必須由上一層父節點的ts01先讀入，再傳入）
☎方法：
（1）在ts01內：
@property(cc.SpriteFrame)
sprite_explode_input:cc.SpriteFrame = null;
。。。。。。
//把動態子彈，加上『動態腳本tsBullet』，傳回mytsBullet腳本組件
var mytsBullet = node_bullet.addComponent(tsBullet);
//設定mytsBullet腳本組件的爆炸spriteFrame
mytsBullet.sprite_explode = this.sprite_explode_input;

（2）在tsBullet內：
//設定爆炸spriteFrame
@property(cc.SpriteFrame)
sprite_explode:cc.SpriteFrame = null;
。。。。。。。
。。。。。。。
。。。。。。。
this.AniExplode();
。。。。。。。。。
。。。。。。。。。
AniExplode()
{
//建立動態爆炸sprite組件（爆炸）
var comp_explode = this.node.addComponent(cc.Sprite);
comp_explode.spriteFrame = this.sprite_explode;
//縮小圖片size
this.node.scale = 0.1;

//下面，即將使用閉包用法
let self = this;

//慢慢放大成爆炸動畫（由縮小到放大，透明度漸漸透明）
cc.tween(this.node)
//1秒，放大2倍，透明度=>0
.to(1,{scale:2, opacity:0})

//呼叫函數，銷毀子彈節點
//(1)錯誤寫法：會把全部的子彈節點銷毀，就無法新增第二顆子彈
//.call(function(){this.node.destroy;})
//(2)正確寫法：使用閉包語法（函數內的this，用self取代）
.call(function(){self.myDestory();})

//開始啟動
.start();
}
myDestory()
{
this.node.destroy();
}

（3）編輯ts01腳本（屬於坦克）
☎目的：動態產生子彈節點+sprite組件，顯示子彈圖片，顯示子彈位置，設定子彈節點的typescript（tsBullet)
//載入tsBullet
//從（tsBullet）腳本，導入（tsBullet）類class
import tsBullet from "./tsBullet";

@property(cc.SpriteFrame)
sprit_bullet:cc.SpriteFrame = null;

//設定爆炸spriteFrame（注意，動態腳本的圖片無法讀入檔案，所以必須由上一層父節點的ts01先讀入，再傳入）
@property(cc.SpriteFrame)
sprite_explode_input:cc.SpriteFrame = null;

onLoad () {
this.node.on("touchstart", this.shot, this);
}

shot () {
//動態建立節點
var node_bullet = new cc.Node;
//動態建立sprite組件
var comp_sprite = node_bullet.addComponent(cc.Sprite);
//設定sprite的spriteFrame
comp_sprite.spriteFrame = this.sprit_bullet;
//縮小子彈
node_bullet.scale = 0.3;
//將子彈節點，掛在坦克下
node_bullet.parent = this.node;
//顯示子彈（相對位置）
node_bullet.setPosition(cc.v2(0, 400));

//把動態子彈，加上『動態腳本tsBullet』，傳回mytsBullet腳本組件
var mytsBullet = node_bullet.addComponent(tsBullet);
//設定mytsBullet腳本組件的爆炸spriteFrame（注意，動態腳本的圖片無法讀入檔案，所以必須由上一層父節點的ts01先讀入，再傳入）
mytsBullet.sprite_explode = this.sprite_explode_input;
}

（4）編輯tsBullet腳本（屬於子彈）
☎目的：啟動計時器，設定每0.01秒改變子彈的飛行位置，設定子彈往上飛行超過2000像素，就銷毀子彈節點+停止該計算器
//設定爆炸spriteFrame（注意，動態腳本的圖片無法讀入檔案，所以必須由上一層父節點的ts01先讀入，再傳入）
@property(cc.SpriteFrame)
sprite_explode:cc.SpriteFrame = null;
onLoad () {
//啟動計時器
this.schedule(this.timer, 0.01);
}

timer () {
this.node.y += 10;
if(this.node.y >= 1900)
{
//關閉計時器
this.unschedule(this.timer);
//顯示爆炸動畫（緩動：由縮小到放大，透明度漸漸透明）
this.AniExplode();
//銷毀子彈節點
//this.node.destroy();
//結束
return;
}
} AniExplode()
{
//建立動態爆炸sprite組件（爆炸）
var comp_explode = this.node.addComponent(cc.Sprite);
comp_explode.spriteFrame = this.sprite_explode;
//縮小圖片size
this.node.scale = 0.1;

//下面，即將使用閉包用法
let self = this;

//慢慢放大成爆炸動畫（由縮小到放大，透明度漸漸透明）
cc.tween(this.node)
//1秒，放大2倍，透明度=>0
.to(1,{scale:2, opacity:0})

//呼叫函數，銷毀子彈節點
//(1)錯誤寫法：會把全部的子彈節點銷毀，就無法新增第二顆子彈
//.call(function(){this.node.destroy;})
//(2)正確寫法：使用閉包語法（函數內的this，用self取代）
.call(function(){self.myDestory();})

//開始啟動
.start();
}
myDestory()
{
this.node.destroy();
}


8.結果：
成果圖1， 成果圖2， ts01程式碼， tsBullet程式碼