| |
| chp1.Unity＋Vuforia的安裝 |
| 目錄 |
1.註冊Vuforia帳號 |
2.取得Vuforia的License key |
3.Target Manager設定辨識圖 |
|
|
4.Unity的下載安裝與登入 |
|
|
|
|
5.安裝Unity裡面的Vuforia套件 |
6.安裝Unity裡面的java sdk，android sdk套件 |
|
|
|
21.複製一個已經做好的Vuforia Lincense key |
22.下載已經做好的imageTarget識別圖的Database |
|
|
| 1.註冊Vuforia帳號 |
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
|
| 2.取得Vuforia的License key |
1.登入Vuforia帳號：
官網網址：https://developer.vuforia.com/
（1）login
登入後畫面
2.新增一個license key：
（1）license key的功用：
☎對於每一個用Vuforia開發的AR程式來說，都有一個唯一的license key。
☎在Unity中必須首先要在ARCamera中輸入這個唯一的key之後，才能夠有權利使用Vuforia來進行識別。
☎在Vuforia的開發者平臺上，License Manager就是一個用來提供創建和管理App license的工具。
☎License類型：
1-1).現在Vuforia提供了兩個license類型可供選擇，一個是免費的Development Key，這個key是免費的，所有的功能也能毫無保留的運行，只不過在螢幕左下角會一直存在Vuforia的logo，而且一些高級功能會有一些限制，但是對於學習和測試來說足夠了；
1-2).另一種是收費的Deployment Key，這個是面向成熟的AR產品以及企業級產品，運行時沒有浮水印。
功能上也沒有任何限制，一共有三種類型：
• Classic：用於一些簡單的工程，將AR內容展示在一定數量的特定物件上；
• Cloud：用於更複雜的工程，可以將AR內容展示在數量龐大而且動態變化的物件上；
• Pro：用於企業級的專業級產品，面向C端的普通消費者。
（2）選擇單元：License Manager
License Manager➜Get Basic➜Add a license key to your Basic plan➜ARexp01
成果圖1，
成果圖2
2.取得Vuforia的License key：
點選ARexp01➜複製License key給Unity使用
成果圖
3.教學影片：
取得Vuforia的License key
（2）選擇左上的單元：License Manager
|
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 |
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)辨識圖的特徵點材質反光
|
| 6 |
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➜
|
| 6 |
21.複製一個已經做好的專案（ARtest2）的Vuforia License Key：
複製License Key
22.下載已經做好的imageTarget識別圖（500元）：
下載imageTarget識別圖（500元）
Unity
ccw.hinet@.....net
密碼：Teresa33
vuforia官網帳號：
https://developer.vuforia.com/
ccw@csie.ndhu.edu.tw，Mm107lhu
|
| 6 |
21.複製一個已經做好的專案（ARtest2）的Vuforia License Key：
複製License Key
22.下載已經做好的imageTarget識別圖（500元）的Database：
下載imageTarget識別圖（500元）
|
| |
| |
| chp3. 各種AR引擎比較，各種AR SDK比較，AR相關問題 |
| 目錄 |
1.各種常見的AR函式庫SDK/插件plug-in |
2.AR函式庫/插件的選擇 |
|
3.AR鏡頭/AR Camera的問題 |
4.使用實機開發的問題 |
5.如何才能融合實景 |
6.位置和比例的問題 |
|
1.各種常見的AR函式庫SDK/插件plug-in：
（1）目前已知可與Unity配合的AR開發工具 :
☎Vuforia：(支援Unity,iOS,Android)
☎ARCore：(支援Android)
☎ARKit：(支援IOS)
☎AR Foundation：(Unity官方開發)
☎Wikitude：(支援Unity,iOS,Android)
☎ Easy AR：(支援Unity)
（2）重點：
☎AR Foundation是Unity官方開發的AR工具。
☎使用Unity開發AR果然還是以Unity官方的AR Foundation為首選，
官方是在2019年才推出所以一些ARCore、ARkit底層的功能沒有支援得很完整。
☎目前已知的AR Foundation功能 : 平面偵測、人臉偵測、深度偵測，光源偵測、點雲、環境反射，這些功能已經能滿足大部分的開發者需求。
google官方影片：ARCore的新功能（中文字幕）
☎既然有AR Foundation了那為什麼要用Vuforia呢？
☎因為：Vuforia能夠很快的以Unity製作出一套簡單的AR應用，對於初學者來說是一件很有成就感的事。
而且就Vuforia Engine 9.5以後版本，已經可以支援AR Foundation了。
☎所以之後如果想要做更多深入的應用也是能以Vuforia+AR Foundation實現。
|
|
2.AR函式庫/插件的選擇：
（1）市面上有以下比較流行的AR SDK：
☎ARKit : Apple官方的AR SDK； 支持iOS Device (iPhone, iPad)
☎ARCore : google Android手機官方的AR SDK
☎Vuforia : 比較有名氣的第3方AR插件，和Unity有不錯整合；可發布到iOS及Android
☎MixedRealityToolkit(MRTK) : 開發HoloLen的SDK, 而HoloLen是微軟開發的Mixed Reality的設備
☎OpenCV : 一個通用的影像辨認插件，在Vuforia/ARKit/ARCore未面世之前，有些開發者用它來製作AR;
（2）除了SDK, 要考慮開發平台，主要有幾個幾個：
☎Unity : 一個開發遊戲和3D應用的遊戲引擎，能支持很多SDK包括(ARKit, ARCore, Vuforia, HoloLens/MRTK);
☎XCode : 開發iOS的工具，使用ARKit，主要語言是Objective C及 swift;
☎Android Studio : 開發Android的工具，使用ARCore，主要語言是Java及 Kotlin;
☎Visual Studio 2019 : 如果開發HoloLens, 就必須用VS；
（3）簡單選擇原則：
☎如非必要，盡量不用走"openCV"那做法，需求技術水平比較高；
☎如果想做一些簡單的AR應用，可以考慮使用Vuforia + Unity;
☎如果你有一定開發能力，其實ARCore 和 ARKit是不錯的選擇；但注意支持的設備暫時不太多；
☎如果你打算投入在AR開發的話，其實上面的SDK也需要關注和研究，但開發工具可以鎖定在Unity上；
☎需要關注一些SDK的動向，有可能某些SDK會被淘汰，例如Google的Tango被ARCore淘汰了；
（4）各SDK選擇依據：
☎優先選擇大公司的SDK（例如：ARKit, ARCore, HoloLens）：因為Apple, Google官方一定會大力支持和投入資源來優化；
☎Vuforia: 很方便的SDK, 而且和Unity整合得不錯，但是將來情況就不太清楚了；
留意一些新SDK的動向，例如Unity會出 MARS, 一個可以同時對應ARCore, ARKit的中間件；
（5）參考連結：
ARCORE： https://developers.google.com/ar/develop/downloads
ARKit：https://developer.apple.com/arkit/
MRToolKit： https://github.com/Microsoft/MixedRealityToolkit
Vuforia：https://www.vuforia.com/
Unity MARS： https://uploadvr.com/unity-reveals-mars-tool/
（6）經驗：
☎使用Vuforia開發AR：
工具：unity，安裝vuforia SDK，c#
呈現方式：手機
優點：非常簡單，步驟的設定是最簡單的一種了
☎使用ARCore開發AR：
工具：unity，安裝ARFoundation，安裝ARCore SDK，c#
呈現方式：手機
☎使用MRTK開發AR/MR：
工具：unity，安裝MRTK＋安裝ARFoundation＋安裝ARCore SDK，c#
呈現方式1：android手機(ARCore)
呈現方式2：Hololens AR眼鏡
特色：複雜，
特色：除了要安裝很多SDK外，還要設定很多參數，包括URP(Render Pipeline Settings)
（什麼是URP：通用渲染管線(Universal Render Pipeline, URP)：這是由Unity 開發的預構建可程式設計渲染管線(Scriptable Render Pipeline)。 URP 提供了對美術師友好的工作流程，可讓您在移動平臺、高端遊戲主機和PC等各種平臺上，可以快速輕鬆地創建優化的圖形）
（換言之，在手機上若要能夠動態即時顯示高效能渲染圖片效果，就要使用URP）
|
|
3.AR鏡頭/AR Camera的問題：
（1）AR鏡頭與預設的Main Camera不同：
在開發AR時另一樣要注意，就是鏡頭；
☎AR SDK通常會給你一個ARCamera的component, 這個和我們常用的Camera有好些不同，
或準確地說，ARCamera有好些限制；
（2）遊戲鏡頭 VS AR鏡頭：
☎傳統的遊戲鏡頭：
根據應用的邏輯，可以隨意控制位置/景觀大小等；
可以用Script來控制，例如跟隨主角物件；
☎AR鏡頭：
鏡頭的位置/面向也是根據手機鏡頭的位置和面向；
簡單來說，我們不能用程序控制他；
虛擬物件會隨著用戶和它的距離，改變大小
例如：在Unity中, ARKIT的ARCamera，其中的屬性ViewPort, Far,Near Plane等設定，在使用AR模式就不能控制了；
|
|
1.使用實機開發的問題：
☎開發AR應用需要使用上前置鏡頭，通常做法是連結設備來進行開發及測試；
☎問題1：不過’實機開發‘，效率比較低，因為把應用安裝到設備始終會花點時間，尤其是Android手機；
☎問題1：另外’實機開發‘也會比較花時Debug;
2.改善方法：
☎如果應用比較簡單，可使用Vuforia + Unity, 這個組合可以透過Webcam或電腦鏡頭來檢測’實景‘，讓開發能在電腦上進行；
☎減少在實機上的測試，例如把一些非AR邏輯分隔出來，在電腦上測試；
☎開發AR 和 非AR 模式
|
|
如何才能融合實景：
1.AR (Augmented Reality) 和MR (Mixed Reality)的應用的頭號問題：融合實景
☎就是：怎樣把虛擬的東西和實景好好結合，讓用戶有夢幻一般的體驗；
☎如果你的應用是‘實用’類型（例如間尺或標註翻譯文字那些），這個需求不太大的；
2.融合實景需要處理的技術難題：
（1）判別平面位置：
☎AR鏡頭，需要判別，那些位置是平面，可以讓你擺放虛擬物件
（2）產生光源和影子：
☎如果虛擬物件不是發光的物體，最後讓物件和實景的物件的光影效果一致；
（3）遮擋 ：
☎以往的AR技術，虛擬物件永遠是OVERLAY在鏡頭畫面上；但這樣做，很多時會破壞’融合效果‘（即是穿崩）
☎所以MR需要加入遮擋(occlusion)的處理，讓畫面變得更合理；
|
| 6 |
1.位置(position)和比例(scale) 的問題：
☎位置和比例在編寫AR程序時，也是很早要面對的難題；
☎原因：因為在開發AR其中一個重點，就是把’虛擬物件‘和’真實物件’融合；
☎方法：要達到這個效果，就是要把’虛擬物件‘的 位置(position)和 比例(scale) 對準’真實物件’；
2.以下有一些問題可以幫助我們了解AR的位置和比例：
☎程序中的位置(position)，例如 (1,0,0)，是對應真實世界那給位置？
☎程序中的一個方塊的大小(scale)，例如(0.1, 0.1, 0.1), 是等於多少cm ？
☎Origin (0, 0, 0), 是否每次在真實世界位置也是相同，origin是怎樣定義出來?
(例如: ARKI (0, 0, 0)，是開始ARSession手機的位置)
☎程序中的 X / Y / Z 軸 和 真實世界有什麼關係??
☎AR SDK輸入的 Position / Scale / Rotation，和程序的值是否相同？需要怎樣轉換?
3.可以參考的方法：
（1）在AR時，會視乎Device和物件的距離，越近越大，越遠越小；所以可以考慮不改變AR物件的比例；
（2）如果AR內容(例如遊戲空間)不是固定(例如跟進測出來的平面大小)，需要考慮以下事情：
☎盡量使用localPosition, localScale來處理遊戲空間中的物件；
☎在不同大小比例，相關物理引擎不會自動設定，需要我們自己來控制；
例如：Force=1, 不論遊戲空間是1x還是 2x，也是前進10cm (但正確結果是2x時，前進20cm)
☎當空間比例很小時，例如 0.01 x 0.01 x 0.01, 物理碰撞檢測時，很容易出錯，雖然花點時間來調整；
☎使用Particle System，需要特別設定，例如Unity中，需要設定‘ScalingMode=Hierarchy’
寫一點代碼把程序中的比例大小，轉換成為正式的距離單位(e.g 0.001 <=> 0.1米)
4.參考文章：
開發AR的7個難題
|
| 7 |
7.JS-based Game Engine (Pixi, Phaser, etc)
參考文章：
（1）Finding the Perfect 2D Game Engine
（2）Godot vs Defold, Which One is Better
2.JS-based Game Engine (Pixi, Phaser, etc)：
（1）優點：
☎它們最適用於 html5。
（2）缺點：
☎但對於移動版本，您必須將其包裝為像 Cordova 這樣的混合應用程序，因此運行速度慢，即時反應差
|
| 8 |
8.國外深度比較2個較好的遊戲引擎：Godot,Defold
參考文章：
（2）Godot vs Defold, Which One is Better
1.特色的比較：
（1）Godot：
☎Godot 有更多的特點。發展非常迅速，似乎雄心勃勃。
☎它不斷添加越來越多的功能。包括大量電池。
☎但有時也會讓人不知所措和令人困惑。
☎Godot IDE，您可以在其中管理和編輯資產、場景、代碼等
（2）Defold：
☎Defold 似乎更準系統，並專注於核心功能。例如，它沒有動畫時間線編輯器，因此您將依賴脊椎或龍骨等 3rd 方。
☎Defold 有類似 Godot 的 IDE，但更簡單
2.支持3D的比較：
（1）Godot：
☎Godot 內置了 3D。人們正在等待 Godot 4.0。
（2）Defold：
☎Defold 的 3D 支持有限。我認為開發人員仍在努力改進它。
3.背後資金的比較：
（1）Godot：
☎這對軟體壽命至關重要。
☎Godot 由社區資助。它是軟件自由保護協會的成員，也有企業贊助商。
☎據我所知，這家大型科技公司還為某些功能的開發人員提供贊助，例如：Microsoft 提供 C# 支持，Mozilla 將 Godot 編輯器引入網絡。有趣的是，Godot 還通過 Epic MegaGrant 從 Epic Games 獲得了資金。 Epic 是 Unreal Engine 的製造商，這是一種商業（非直接）競爭遊戲引擎。
（2）Defold：
☎Defold 是 King, Company 的一部分，該公司因 Candy Crush Saga 而聞名。但現在它在自己的 Defold 基金會下獨立了。但是，King 仍然支持它作為企業贊助商。所以，資金看起來有點類似於Godot。
4.編輯器平台支持的比較：
☎相同的。兩者都適用於 Windows、Linux 和 macOS
5.編輯器大小的比較：
（1）Godot：
☎Godot 有一個較小的可下載文件。但是當你想導出到平台時，你需要下載額外的包。 Defold 已經包含了這個，所以我認為大小是可比的。
☎Godot 的編輯器感覺很輕巧。
☎他們的 UI 不是原生的，因為 Godot Editor 實際上是 Godot Games，這實際上非常酷。
（2）Defold：
☎Defold 在 JVM 下運行，所以感覺有點重(慢）。
6.支持的輸出平台的比較：
（1）Godot：
☎Godot：Linux、macOS、Windows、BSD、Android、iOS、BlackBerry 10、HTML5、UWP。沒有官方控制台支持，但可以通過第 3 方（Switch、PS4、Xbox）完成
（2）Defold：
☎Defold：Android、iOS、macOS、Linux、Windows、HTML5、Nintendo Switch。
7.輸出構建大小的比較：
（1）Godot：
☎兩個引擎都允許您剝離不必要的部分以減少膨脹。
（2）Defold：
☎但這是 Defold 真正閃耀的地方，它可以產生令人印象深刻的小型構建尺寸。低至 1.6MB APK 大小和 734kb html5（gzipped）
☎Defold 小尺寸使其非常適合網頁遊戲，它更接近於像 Phaser 這樣的原生 JS 引擎。
8.程式語言的比較：
（1）Godot：
☎Godot 以 GDScript 作為主要語言。語法類似於 Python，但它不是 Python。我們也可以使用其他語言進行編碼：C#、C++、Rust、Nim、JS 等。
（2）Defold：
☎Defold 使用 Lua。
9.人氣的比較：
（1）Godot：
☎Godot 在忠實和狂熱的用戶群中更受歡迎。它具有良好的勢頭和品牌知名度。它被稱為統一的開源替代品
（2）Defold：
☎Defold 目前的用戶群較小，但他們的論壇友好且樂於助人。希望它的社區也在不斷發展。
10.結論：
☎Godot：適用於桌面遊戲或 3D 桌面遊戲。
☎Defold：適用html5 和手機遊戲，在這些地方，尺寸和性能很重要。
|
| 9 |
9.綜合評估要選用哪種遊戲引擎
參考文章：
（1）Finding the Perfect 2D Game Engine
（2）Godot vs Defold, Which One is Better
1.若在國外工作的角度：國外有人專門評估要選用哪種遊戲引擎：
（1）3D遊戲：Unity，Unreal
（2）2D休閒遊戲：Godot、Defold
2.若以在台灣就業的角度：來評估要選用哪個遊戲引擎：
☎方法：到104人力銀行網頁查詢
☎查詢結果（2021/11/19）：
（1）Unreal：找到 20 個Unreal為主要標題的相關工作
（2）Unity：找到 88 個Unity為主要標題的相關工作
（3）Cocos Creator：找到 0 個Cocos Creator為主要標題的相關工作
（4）Corona SDK：找到 0 個Corona SDK為主要標題的相關工作
（5）Godot：找到 0 個Godot為主要標題的相關工作
（6）Defold：找到 0 個Defold為主要標題的相關工作
（7）Cocos Creator：找到 47 個Cocos Creator為主要標題的相關工作
（8）Construct：找到 0 個Construct為主要標題的相關工作
（9）Scratch：找到 4 個Scratch為主要標題的相關工作
（10）app Inventor ：找到 2 個app Inventor 為主要標題的相關工作
☎結論(以台灣的就業市場來看)：
（1）3D遊戲引擎：首選Unity，次選Unreal
（2）2D休閒遊戲引擎(網頁遊戲引擎)：首選Cocos Creator
|
| |
| |
| chp4. 觀摩各種VR，AR，MR範例 |
| 比較VR，AR，MR，XR |
1.比較VR，AR，MR，XR的不同 |
2.了解VR、AR、MR，CR是什麼？ |
3.AR、VR、MR 哪裡不一樣（常見AR應用：人臉辨識+AR） |
4.VR、AR、MR、XR、CR是什麼？戴上HTC Vive、Oculus Quest就是進入元宇宙 |
| 一.VR範例 |
1.VRChat 或為元宇宙入口雛形 |
2.日本人在VRchat講中文(爆笑) |
3.在VRchat裡糾正一個亂說中文的日本人(爆笑) |
4.VRchat範例steam） |
|
5.新手親媽級VRchat手把手詳細教程介紹(推薦) |
6.VRChat好簡單，自訂角色教學 |
7.VRChat使用Avatar 3完整模組製作教學(2022年) |
8.10分鐘VRChat快速中文新手教學 |
|
10.VR職能體驗訓練 |
5.VRChat好簡單，自訂角色教學 |
3.VRChat使用Avatar 3完整模組製作教學(2022年) |
4.10分鐘VRChat快速中文新手教學 |
| 二.AR範例 |
1.AR應用：結婚照 |
2.IKEA Place用AR選家具 |
3.IKEA用VR來Showroom |
4.IKEA用VR來規劃各種形態空間擺設 |
|
5.故宮博物院AR百駿圖 |
6.臺博掌上博物館:AR室內定位導覽系統 |
7.台灣博物館AR導覽 Epson Moverio智慧眼鏡 |
8.政治大學達賢圖書館 AR口袋工具箱 |
|
9.AR互動繪本 |
10.高雄左營舊城 重遊歷史AR古城 |
11.台北實境尋寶遊戲-教學影片 |
12.互動影音媒體 帶你看到世界更多AR |
|
13.時尚業：ZARA－服裝秀 |
14.AR瑪利歐家庭賽車場究竟好不好玩 |
15.體驗Dream Glass Lead Pro AR眼鏡 |
16.Dream Glass AR智能眼鏡：隨身私人影院,無人機新視角 |
|
17.學習英文小幫手：字彙AR擴增書 |
18.高雄左營古城AR歷史導覽 |
19.故宮博物院打造新科技5G場域+AR智慧導覽 |
20.5G加速XR的快速應用 |
| AR課本AR教材 |
1.ＡＲ技術で「動く教科書」 |
2.AR教材が作れる |
3.高中地理河流地形AR |
4.AR課本教學互動成功案例 |
|
5.AR動課本 |
6.字彙AR擴增書：學習英文小幫手 |
7.第四代AR教材将成为未来主流 |
|
| 簡單製作的Web AR |
1.AR製作教學！1分鐘就能快速學會(Artivive) |
2.使用MAKAR製作影片AR擴增實境效果(範例教學) |
3.AR擴增實境操作入門(用網頁的HP Reveal，用AE做透明背景影片) |
4.創客基地-AR擴增實境的教學應用 |
|
5.結合Makar製作AR特效 |
6.AE動畫結合AR擴增實境技術的製作示範_MAKAR的應用 |
7.使用MAKAR製作影片AR擴增實境效果 |
8.Blender結合Makar製作AR 3D擴增實境 |
|
9.用Blender來製作3D的AR效果 |
|
|
|
| AR醫療 |
21.透視人體AR，降低骨科手術難度，減少風險 |
22.用Hololens AR技術幫助醫生開心臟手術 |
23.AR醫療教育 |
24.VR AR醫療應用夯，減少50%童術前焦慮 |
| AR醫療 |
21.3D AR 解剖圖譜 |
22.AR技術幫助手術前會診 |
23.台北榮總的醫療AR教學APP |
24.VR AR醫療應用夯，減少50%童術前焦慮 |
| AR工業 |
25.Epson AR眼鏡+5G，支援工業的遠端專家即時同步服務 |
26.智慧眼鏡－工業應用解決方案 |
27.台電使用VR，AR，MR，做員工訓練 |
28.建築建造AR應用 |
| AR逼真渲染特效 |
25.AR逼真渲染物件的做法 |
26.AR逼真光暈效果 |
27.AR VFX懸浮特效 |
28.AR 霓虹燈光效果 |
| AR Vuforia Area Target |
1.大塚資訊用Vuforia Area Target做室內定位 |
|
|
|
| AR眼鏡 |
17.**體驗三款AR,MR眼鏡(google眼鏡-AR，Hololens-MR，Magic Leap One-MR) |
18.**如何選擇AR技術(圖片檢測，平面檢測，物件檢測，人臉檢測，雲錨點，WebAR)-
(1).手機端技術：免費(ARKit,ARCore,SenseAR,華為AR),收費(Vuforia,EasyAR,太虛AR)。
(2).Web端技術：WebAR(KiviCube)。
(3).眼鏡端技術：Hololens(MRTK)。
(4).Unity的ARfundation：整合ARCore，ARKit，SenseAR |
< |
< |
|
21.**AR歷史，各種AR眼鏡的演進 |
22.**蘋果AR眼鏡iGlass是消費電子的未來(google glass, Epson BT, 微軟Hololens) |
23.當代最好的AR眼鏡:hololens 2 |
24.**為什麼AR是下一代計算平台(Next Big Thing)
(VR只是個遊戲機，AR才是計算機平台，電腦，手機) |
| 二.智能眼鏡 |
25.三星智慧眼鏡，兼具PC手機的所有功能，用智慧手錶控制 |
26.華為智能眼鏡10問10答 |
27.Epson Moverio BT-40智能眼鏡 |
28.Oppo智能眼鏡 |
| 三.VR範例 |
29.如何選購VR眼鏡(一體式，電腦式):oculus quest, pico neo, htc vive, hp reverb G2, valve index |
30.OCULUS QUEST2一體機：目前應用最多、最齊全的VR |
31.HTC VIVE FOCUS 3一體機：可玩STEAM VR、5K，最強商用VR |
32.Valve Index VR眼鏡(電腦機)：高階VR機種 |
| 四.安裝APP體驗AR |
50.AR真實動物 |
51.AR試用IKEA傢俱 |
52.AR試穿球鞋 |
53.AR瀏覽3D恐龍(ARLOOPA) |
1 |
1.比較VR，AR，MR，XR的不同：
解答：AR，VR，MR的解答圖示
2.虛擬實境Virtual Reality (VR)：
（1）虛擬實境VR：就是電腦模擬出一個真實感很高的空間，要讓使用者感覺產生好像處在現實中一般的錯覺，造成3D的沉浸式體驗效果，讓使用者感覺彷彿身歷其境
但目前在觸覺方面還有待加強。
（2）範例1：電影駭客任務（把人的腦波跟電腦結合，用數位資料來刺激腦波以達到五感體驗）
想要達到這種境界上有許多技術層面要克服。
電影駭客任務圖
（3）範例2：經典VR遊戲：戰慄時空:艾莉克絲 Half-Life : Alyx Steam
體驗影片1
體驗影片2
（4）VR問題：會有VR頭暈（比3D暈更嚴重）：3D 暈,但 VR 更暈,如何克服擬真遊戲的最大敵人
（5）其實大多數的傳統遊戲，就是VR世界，只是現在再穿戴VR眼鏡，幫助沉浸式體驗效果。
3.擴增實境 Augmented Reality (AR)：
（1）AR是由VR所衍生出來的一種技術，它是一種將虛擬資訊擴增到現實空間中的技術，
它所強調的不是要取代現實空間，而是在現實空間中添加一個虛擬物件，
藉由攝影機的辨識技術與電腦程式的結合，當設定好的圖片出現在鏡頭裡面，就會出現對應的虛擬物件。
（2）比較1：
☎AR〈Augmented Reality 擴增實境〉，是將電腦的資訊疊合到現實世界，讓我們在正確的時間正確的地點取得〈感官的〉正確資訊，
☎而VR〈Virtual Reality 虛擬實境〉，企圖取代真實世界，以往通常就是在電腦裡面製作產生一個虛擬的環境，將資訊放置在裡面，而操作者可以藉由控制器或鍵盤在這個虛擬的環境下穿梭或互動，
相對之下AR則只是在現實中擴增資訊。
（3）比較2：
☎未來的元宇宙，乃是進入VR世界，其本質上VR體驗，其實只是一個VR遊戲。
☎未來的AR眼鏡，乃是一種計算機平台（取代手機），不是遊戲，而是一個新的行動平台。
（4）注意：AR所產生的物件，其還是無法跟現實生活的物體做疊加。(後方的AR物件，無法被前方真實物體所遮擋)
（5）範例1：寶可夢：
示意圖1，
示意圖2
（6）範例2：各種應用：示意圖2
範例3：手遊結合 AR 擴增實境：One Piece ARCarddass Formation我要成為海賊王
（7）AR所需要的技術：程式設計，3D模型建構，2D平面設計：
示意圖
（8）AR的各種應用：教育學習，導覽，行銷活動，文創商品
示意圖
（9）AR的主要辨識物件，可以分為兩類：tracking圖片, slam平面
示意圖
4.混合實境 Mixed Reality (MR)：
（1）混合實境 (MR)，也就是把現實世界與虛擬世界合併在一起，從而建立出一個新的環境以及符合一般視覺上所認知的虛擬影像，
在這之中現實世界中的物件能夠與數位世界中的物件共同存在並且即時的產生互動。
也就是真實環境R、擴增實境AR、擴增虛擬、與虛擬真實VR環境的混合。
（2）【MR：Mixed Reality 混合實境】
MR 的全名為 Mixed Reality 混合實境，是介於 AR 與 VR 之間的一種綜合狀態。
AR 擴增實境在本質上還是現實，只是加入了一些虛擬的元素；
VR 虛擬實境的目標則是全面的虛擬。
MR 綜合實境的則是將虛擬的場景與現實進行更高程度的結合。
（3）範例1：Microsoft的HoloLens，使用者可以透過半透明的顯示器看到真實的世界，但畫面中也會有許多人造的 3D 影像，創造一種似真似假、有真有假、亦真亦假使用體驗。
微軟的HoloLens
（3）範例2：Magic Leap是美國一間混合實境新創公司，他們利用前所未有的混合實境（MR, Mixed Reality）技術，讓虛擬世界的影像能夠非常真實地與自己互動，使人難以區分兩者的差別。這間公司產品尚未上市，就獲得許多知名企業的鉅額融資，目前估計市值已達45億美元。
Magic Leap的鯨魚demo
Magic Leap的Original Concept Video
Magic Leap眼球投射技術（視網膜投射）
5.XR = 延展實境Extended Reality，簡稱XR。
（1）XR 即是以上三種的技術的集合，也就是 VR+AR+MR=XR 。
（2）XR 沒有太嚴謹的定義，任何 VR、AR、MR 的應用都可以視為 XR 的一環，也可說 XR 是虛擬現實交錯融合技術的總稱。
|
2 |
2.下載官網提供的1個完整範例：
（1）下載demo範例
|
| |
| |
| chp9. 寫程式腳本typescript，javascript，事件處理event |
| 目錄 |
專案9-1：寫第一個javascript程式，輸出日誌log |
專案9-2：點按大雄，會向右移動 |
專案9-3：javascript設定大雄小叮噹的屬性(姓名身高體重) |
專案9-4：javascript讓大雄小叮噹向左右移動，設定屬性(速度，移動方向) |
|
專案9-5：Typescript設定大雄小叮噹的屬性(姓名身高體重) |
專案9-6：Typescript讓大雄小叮噹向左右移動，設定屬性(速度，移動方向) |
專案9-7：Typescript設定移動時有音效 |
|
|
專案9-8：Typescript按鈕取得節點node，並移動位置(移上移下) |
專案9-9：Typescript按鈕取得組件component，並修改label文字(把小叮噹，改成哆啦A夢) |
專案9-10：整合：左右按鈕讓大雄左右移動 |
專案9-11：整合：鍵盤左右鍵讓大雄左右移動 |
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程式碼
|
| |
| |
| chp11. 緩動系統，cc.tween |
| 目錄 |
專案11-1：2秒緩動到某特定位置+同時旋轉 |
專案11-2：緩動相對距離，上下左右緩動 |
專案11-3：變化速度緩動easing(往上跳逐漸變慢) |
專案11-4：模擬球加速下墜，不斷反彈落下 |
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程式碼
|
| |
| |
| chp12. 幀動畫，計時器動畫，Atlas圖集動畫 |
| 目錄 |
專案12-1：動畫有三種（緩動動畫，幀動畫，計時器動畫） |
專案12-2：如何改變幀率FPS |
專案12-3：鍵盤控制幀動畫上下左右移動 |
|
|
專案12-4：計時器動畫（倒數） |
專案12-5：計時器動畫（原地直升機） |
專案12-6：鍵盤控制鴿子上下左右飛 |
|
|
專案12-7：從一張gif動畫，做成Atlas圖集 |
專案12-8：由Atlas圖集做出動畫（原地鴿子飛動畫） |
|
|
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程式碼
|
| |
| |
| chp13. 動態加載資源（動畫進階） |
| 目錄 |
專案13-1：動態加載單一資源（載入一張圖片） |
專案13-2：動態加載多個資源（載入多張圖片做直升機動畫） |
專案13-3：動態加載多個資源（鍵盤上下左右移動鴿子） |
|
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程式碼
|
| |
| |
| chp14. 觸控事件，blockInputEvent事件 |
| 目錄 |
專案14-1：觸控大雄，傳回觸控點(x,y)坐標 |
專案14-2：觸控事件的冒泡機制（背景，大雄，足球事件） |
專案14-3：用觸控與node.active=false做遮罩效果 |
專案14-4：(遮罩應用)建立模態提示框，來詢問是否繼續或離開遊戲 |
| 目錄 |
專案14-5：(觸控應用)貓咪跟著觸控點移動 |
專案14-6：(遮罩應用)blockInputEvent事件阻斷遮罩後的觸控函數事件 |
|
|
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程式碼
|
| |
| |
| chp15. 發射子彈，子彈飛行，子彈爆炸，動態創建節點，動態附加腳本 |
| 目錄 |
專案15-1：動態發射子彈（動態建立節點） |
專案15-2：子彈動態飛行（動態加上腳本） |
專案15-3：子彈在遠方目標區爆炸（動態腳本上加上緩動動畫：1秒，放大2倍，變成透明） |
|
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程式碼
|
| |
