陳擎文教學網:2D遊戲引擎:Cocos Creator

資源(Resource)

chp1. Cocos Creator的簡介,安裝,編輯軟體

chp2. Cocos Creator的教學資源

chp3. 各種2D遊戲引擎比較

chp4. 觀摩各種Cocos Creator範例

chp5. Cocos Creator使用的程式(javascript,Typescript)

chp6. 建立專案,新增場景scene,圖片節點,節點操控

chp7. 場景scene,節點node,組件component

chp8. UI、按鈕button,標籤label,圖片精靈sprite,音效audiosource

chp9. 寫程式腳本typescript,javascript,事件處理event

chp10. 坐標系統

chp11. 緩動系統,cc.tween

chp12. 幀動畫,計時器動畫,Atlas圖集動畫

chp13. 動態加載資源(動畫進階)

chp14. 觸控事件,blockInputEvent事件

chp15. 發射子彈,子彈飛行,子彈爆炸,動態創建節點,動態附加腳本

chp16. 碰撞檢測系統

chp17. 物理效果系統

chp18. 對象池技術

chp19. 整合型遊戲

資源
  上課黑板 線上黑板 上課即時貼 考試題目(Exam)
  Goole 輸入法(Input software) Goole輸入法(Input:exe) Goole 輸入法(Input:zip) online goole input(中文) online goole input(英文)
  各種線上學習課程 Hiskio(專業程式語言相關) 緯育TibaMe(課程+就業養成) 六角學院(各種網頁相關課程) coursera(商業分析,數據分析+證書)
  Udemy(各種類型課程都有(中文英文):專業類,生活類) Hahow(各種類型課程都有(中文):專業類,生活類) .
 

 
chp1.Cocos Creator的簡介,安裝,編輯軟體
目錄 1.Cocos Creator簡介 2.華人的手機遊戲,超過一半是由Cocos Creator做的,尤其是中小型公司首選Cocos(因為免費) 3.Cocos Creator簡介影片 4.安裝,或線上使用
5.安裝程式碼編輯軟體(vscode)

1.簡介

1.Cocos Creator簡介:
(1)功能特性:
Cocos Creator 功能上的突出特色包括:
• 腳本中可以輕鬆聲明可以在編輯器中隨時調整的資料屬性,對參數的調整可以由設計人員獨立完成。
• 支援智慧畫布適配和免程式設計元素對齊的 UI 系統可以完美適配任意解析度的設備螢幕。
• 專為 2D 遊戲打造的動畫系統,支援動畫軌跡預覽和複雜曲線編輯功能。
• 使用動態語言支援的腳本開發,包括 JavaScript 和 TypeScript,使得動態調試和移動設備遠端調試變得異常輕鬆。
• 底層由 Cocos2d-x 演化而來,在享受腳本化開發的便捷時,保持原生級別的輕量和高性能。
• 腳本元件化和開放式的外掛程式系統為開發者在不同深度上提供了定制工作流的方法,編輯器可以大尺度調整來適應不同團隊和專案的需求。

(2)架構特色:
Cocos Creator 包含遊戲引擎、資源管理、場景編輯、遊戲預覽和發佈等遊戲開發所需的全套功能,並且將所有的功能和工具鏈都整合在了一個統一的應用程式裡。
編輯器在提供強大完整工具鏈的同時,提供了開放式的外掛程式架構,開發者能夠用 HTML + JavaScript 等前端通用技術輕鬆擴展編輯器功能,定制個性化的工作流程。
以下是 Cocos Creator 的技術架構圖:


從圖中我們可以看出,編輯器是由 Electron 驅動再結合引擎所搭建的開發環境,引擎則負責提供許多開發上易於使用的元件和適配各平臺的統一介面。
引擎和編輯器的結合,帶來的是資料驅動和元件化的功能開發方式,以及設計和程式兩類人員的完美分工合作:
• 設計師在場景編輯器中搭建場景的視覺表現
• 程式師開發可以掛載到場景任意物體上的功能元件
• 設計師負責為需要展現特定行為的物體掛載元件,並通過調試改善各項參數
• 程式師開發遊戲所需要的資料結構和資源
• 設計師通過圖形化的介面配置好各項資料和資源
• (就這樣從簡單到複雜,各種你能想像到的工作流程都可以實現)

(3)關於 Cocos Creator的Q&A:
• Q:Cocos Creator 是遊戲引擎嗎?
A:它是一個完整的遊戲開發解決方案,包含了輕量高效的跨平臺遊戲引擎,以及能讓你更快速開發遊戲所需要的各種圖形介面工具。

• Q:Cocos Creator 的編輯器是什麼樣的?
A:完全為引擎定制打造,包含從設計、開發、預覽、調試到發佈的整個工作流所需的全功能一體化編輯器。

• Q:我不會寫程式,也能使用 Cocos Creator 嗎?
A:當然!Cocos Creator 編輯器提供面向設計和開發的兩種工作流,提供簡單順暢的分工合作方式。

• Q:我使用 Cocos Creator 能開發面向哪些平臺的遊戲?
A:Cocos Creator 目前支持發佈遊戲到 Web、iOS、Android、各類"小遊戲"、PC 用戶端等平臺,真正實現一次開發,全平臺運行。

(4)工作流程說明:
在開發階段,Cocos Creator 已經能夠為用戶帶來巨大的效率和創造力提升,但我們所提供的工作流遠不僅限於開發層面。對於成功的遊戲來說,開發和調試、商業化 SDK 的集成、多平臺發佈、測試、上線這一整套工作流程不光缺一不可,而且要經過多次的反覆運算重複。
Cocos Creator 將整套手機頁遊解決方案整合在了編輯器工具裡,無需在多個軟體之間穿梭,只要打開 Cocos Creator 編輯器,各種一鍵式的自動化流程就能花最少的時間精力,解決上述所有問題。開發者就能夠專注于開發階段,提高產品競爭力和創造力!


(5)創建或導入資源:
將圖片、聲音等資源拖拽到編輯器的 資源管理器 面板中,即可完成資源導入。
此外,你也可以在編輯器中直接創建場景、預製、動畫、腳本、粒子等各類資源。

(6)搭建場景:
專案中有了一些基本資源後,我們就可以開始搭建場景了,場景是遊戲內容最基本的組織方式,也是向玩家展示遊戲的基本形態。
添加組件腳本,實現交互功能
我們可以為場景中的節點掛載各種內建群組件和自訂腳本元件,來實現遊戲邏輯的運行和交互。包括從最基本的動畫播放、按鈕回應,到驅動整個遊戲邏輯的主迴圈腳本和玩家角色的控制。幾乎所有遊戲邏輯功能都是通過掛載腳本到場景中的節點來實現的。

(7)一鍵預覽和發佈:
搭建場景和開發功能的過程中,你可以隨時點擊預覽來查看當前場景的運行效果。使用手機掃描二維碼,可以立即在手機上預覽遊戲。當開發告一段落時,通過 構建發佈 面板可以一鍵發佈遊戲到包括桌面、手機、Web 等多個平臺。

(8)使用說明:
A.在資料驅動的工作流基礎上,場景的創建和編輯成為了遊戲開發的重心,設計工作和功能開發可以同步進行,無縫協作。不管是美術、策劃還是程式師,都可以在生產過程的任意時刻點擊預覽按鈕,在流覽器、移動設備模擬器或移動設備真機上測試遊戲的最新狀態。
B.程式師和設計人員現在可以實現各式各樣的分工合作,不管是先搭建場景,再添加功能,還是先生產功能模組再由設計人員進行組合調試,Cocos Creator 都能滿足開發團隊的需要。腳本中定義的屬性能夠以最適合的視覺體驗呈現在編輯器中,為內容生產者提供便利。
C.場景之外的內容資源可以由外部導入,比如圖片、聲音、圖集、骨骼動畫等等,除此之外我們還在不斷完善編輯器生產資源的能力,包括目前已經完成的動畫編輯器,美術人員可以使用這個工具製作出非常細膩富有表現力的動畫資源,並可以隨時在場景中看到動畫的預覽。
D.支援 2D 和 3D 遊戲開發,其功能可滿足各種遊戲類型的特定需求。深入優化了純 2D 遊戲的編輯器體驗和引擎性能,並內置了對中介軟體的支援,如 Spine、DragonBones、TiledMap、Box2D 和 Texture Packer。


2.華人的手機遊戲,超過一半是由Cocos Creator做的,尤其是中小型公司首選Cocos(因為免費):

(1)Cocos:遊戲引擎界的麥當勞速食,打造了近一半國產手機遊戲:

如果將虛幻引擎(Unreal Engine)比喻成一家高檔的米其林餐廳(顧客要支付高價來享受優質的用餐服務),
那麼它的中國競爭對手Cocos就是一家麥當勞速食店,提供最經濟快捷的漢堡薯條。

兩家公司都以他們的遊戲引擎聞名,遊戲引擎是用於構建電子遊戲的軟體框架,為程式師提供了快速代碼組合和渲染圖形的支援。

隨著消費者在手機遊戲上花費越來越多的時間,手機平臺變得越來越重要和流行。根據中國音像和數位出版協會的報告,今年上半年,手機遊戲占中國遊戲總銷量的75%。
半壁江山。
而更詳盡的資料顯示,其中將近一半的遊戲是由Cocos引擎打造的。
從2018年開始,國內45%的手機遊戲和全球30%的手機遊戲都是借助Cocos遊戲引擎創建的。

但Cocos是相對簡便快捷的2D遊戲引擎,隨著智慧手機功能的日益強大,人們對遊戲畫面的要求越來越高,虛幻引擎和Unity引擎等競爭對手的勢頭正在增強。

(2)Unity 3D引擎: 自2012年進軍中國市場以來,Unity的佔有率穩步增長,已成為許多廣受讚譽的國產手機遊戲(如《帕斯卡契約》和《原神》)的引擎。

Unity公司8月初提交了首次公開募股申請,並在向美國證券交易委員會提交的檔中表示,2019年全球Apple App Store和Google Play上下載量前1000位的手機遊戲中有53%是使用其工具製作的。

(3)虛幻(Unreal)引擎:
虛幻引擎由著名遊戲公司Epic Games打造,多年來在中國也取得了長足的進步。

近年來,虛幻引擎用它的技術證明,對畫質要求非常的3D遊戲現在已經可以在智慧手機上流暢運行,但是,這也可能意味著頂級手機遊戲的製作成本會大大提高。

(4)騰訊作為全球最大的手機遊戲公司:
☎騰訊其招牌大作《和平精英》:選擇使用虛幻引擎,
☎《王者榮耀》:使用Unity 3D引擎開發,
☎一些低成本小製作如《街頭霸王:對決》:則使用Cocos。

(5)Cocos的目標:
☎面對這些重量級的競爭對手,Cocos的精英目標是提供市場上最簡單、對預算最友好的遊戲引擎,而不是與虛幻(Unreal)或Unity競爭高預算的頂級客戶。

☎Cocos的CEO王哲表示:我們試圖做的與競爭對手相反,那就是使製作遊戲更便宜、更容易。如果一款遊戲的預算超過人民幣5000萬元,那麼它很可能由虛幻引擎打造。但是,如果開發者想要製作一款預算為2000萬元人民幣的遊戲,那麼Cocos將成為最佳選擇。
☎Cocos與其競爭對手之間的另一個重要區別是,它最適合2D休閒遊戲,而Unity和Unreal在3D遊戲上做得更好。但對於2D遊戲製作,Cocos比Unity更好,因為Cocos引擎的核心是2D,而Unity基於3D。而且,Cocos已成為許多著名手機教育服務軟體的引擎,例如在紐約上市的流利說和新東方。
☎但是,Cocos表示,它已開發了新產品Cocos Creator 3.0,它將為遊戲引擎帶來完整的3D圖形。

(6)總結: Cocos目前還是一款開源的免費引擎,但是,他們不打算簡單地堅持開源,因為那樣的話,沒有投資者會為他們提供資金。

3.Cocos Creator簡介影片:
(1)Cocos Creator簡介影片:
Cocos Creator簡介影片


4.如何使用Cocos Creator方式:
(1)方法:下載,安裝在電腦上:
Cocos Creator官網
Cocos Creator官網下載網頁

注意:2.x版本,是2D版本,例如:V2.4.7版(特色:比較穩定,成熟)
注意:3.x版本,是3D版本,例如:V3.3.2版(特色:可以兼容2D/3D,但後來才開發,所以比較不穩定)
注意:安裝2.x/3.x的版本,所寫的API程式碼略微不同,要查看他們專屬的API使用手冊
注意:本網站使用2.x版本進行教學

(2)安裝步驟:
A.下載v2.4.7版本的dashboard安裝(Cocos Creator官網
B.若要使用模擬器/或打包成app,apk檔案,則必須加安裝visual studio 2017的C++部分即可
(若沒有安裝vs2017,也可以使用,但只能用網頁瀏覽結果)


C.註冊登入帳號密碼:


D.下載v2.4.7版的編輯器


(3)安裝Cocos Creator的教學網頁(官網):
安裝Cocos Creator的教學網頁(官網)

(4)安裝Cocos Creator的教學影片:
安裝Cocos Creator的教學影片
安裝Cocos Creator的教學影片
Cocos Creator官網

5.安裝程式碼編輯軟體(vscode):
(1)Cocos Creator使用的圖形化編輯器:
Cocos Creator官網的說明:

Text Editors
You'll need a text editor or IDE to write code for your Cocos Creator projects. If you don't already have a favorite text editor, the following options are recommended:
Editor Add-On Package
Sublime Text Cocos Creator Editor
Atom autocomplete-corona
Visual Studio Code Cocos Creator-companion
Notepad++  
ZeroBrane Studio  
Vim


(2)上課使用的javascript程式碼編輯軟體是:vscode:
A.到官網安裝vscode


(3)Cocos Creator官網的安裝VScode,與設定教學:
官網安裝與設定vscode教學
B.然後在vscode內,再安裝extensions:Lua
Lua language support for Visual Studio Code

C.然後在vscode內,再安裝extensions:Cocos Creator-companion
Tools and snippets for quick development for games using Cocos Creator

 

 
chp2. Cocos Creator的教學資源
目錄 1.Cocos Creator官網 2.官網的11個入門影片教學 3.Cocos Creator的各種影片bili官網 4.]Cocos Creator官方教程第1集:Hello World
1.阿發的教學影片 2.網頁:Cocos Creator 極速入門 3.影片:Cocos Creator零基础小白超神教程 4.影片:Creator开发教程(前端js,後端node.js) 5.影片:开发微信飞机大战视频教程
4.網頁:官網的get started教學 5.網頁:官網的API Reference各種指令手冊 6.網頁:官網的Tutorials教程((新手上路) 7.網頁:官網Cocos Creator v2.4 用户手册 8.網頁:官網的論壇討論區forums
9.腳本開發指南 10.網頁:2.4x滑鼠事件,觸摸事件 11.網頁:2.4x鍵盤事件,重力事件 12.網頁:3.x各種事件(鍵盤事件,滑鼠事件,觸摸事件) 13.網頁:腳本開發:使用計時器
緩動系統的官網教學(2.4x) 各種easing參數的官網教學(2.4x)

2

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

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

3.

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

3.

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

 

 
chp3.各種2D遊戲引擎比較
目錄 1.較受歡迎的3D遊戲引擎:Unity,Unreal 2.較受歡迎的2D遊戲引擎:Godot、Defold、Cocos Creator、Cocos Creator
3.Cocos Creator 4.Godot 5.Defold 6.Cocos Creator
7.JS-based Game Engine (Pixi, Phaser) 8.國外深度比較2個較好的遊戲引擎:Godot,Defold 9.綜合評估要選用哪種遊戲引擎
1 1.3D遊戲較受歡迎的兩個引擎:Unity,Unreal
(參考:2021年是自学游戏开发最好的年代!告訴你應該选Unity还是虚幻引擎?
(參考:不写代码做那样的游戏!分享使用Unity"蓝图"工具
(參考:我学编程了!真认真学了,可还是学不会……书看不懂、怎么办?
(參考:開發遊戲的建議

(1)Unity:
☎若要寫程式碼:c#
☎若要用可視化工具(編程):bolt(2021年收購bolt,開始預設支援)
☎若要用可視化工具(狀態機):playmaker(還要外掛插件)
☎優點:輸出3D,2D(行動app)
☎優點:使用界面直觀,容易上手

(2)Unreal:
☎若要寫程式碼:c++
☎若要用可視化工具(編程):blueprint
☎優點:畫面能夠渲染地非常有質感,藝術氛圍
☎缺點:C++寫程式不容易上手
☎缺點:輸出2D(行動app)較弱


2.較受歡迎的2D遊戲引擎:Godot、Defold、Cocos Creator 和 Cocos Creator
參考文章:
(1)Finding the Perfect 2D Game Engine
(2)Godot vs Defold, Which One is Better

3.Unity不適合開發:2D休閒類遊戲
原因:
☎雖然很強大,但對於一個休閒遊戲來說,這有點矯枉過正。
☎個學習曲線較長
☎複雜,對初學者來說令人困惑。
☎還有其他引擎可以更簡單、更精簡地進行 2D。
☎帶有閃屏的 Unity 遊戲因低質量遊戲而臭名昭著。
☎C#在低端設備上的性能運行不佳(Web 構建在移動設備上)

2 2.較受歡迎的2D遊戲引擎:Godot、Defold、Cocos Creator 和 Cocos Creator
參考文章:
(1)Finding the Perfect 2D Game Engine
(2)Godot vs Defold, Which One is Better


2.2D 休閒遊戲的需求:
☎高性能引擎,構建尺寸盡可能小,
☎腳本程式語言更簡單易用。
☎html5為主要平台,android次之。
☎無需涉及編譯或本機移動工具。
☎自由開源是首選。因此,沒有前期成本並且可以靈活地捐贈/貢獻給開發。
☎支持Metal,以防需要在蘋果平台上發布。


3.2D 休閒遊戲的推薦:
經過一些初步研究,推薦是:Godot、Defold、Cocos Creator 和 Cocos Creator。

3 3.Cocos Creator
參考文章:
(1)Finding the Perfect 2D Game Engine
(2)Godot vs Defold, Which One is Better

2.Corona SDK:
(1)優點:
☎Cocos Creator 是 Corona SDK 的開源分支。
☎它是一款出色且經過實戰測試的引擎,
☎易於使用且文檔非常好。
☎Cocos Creator 使用 Lua。構建檔案大小很好(不大),對於 armv7 和 64 位,可能大約 6MB APK。我用它做了一個簡單的遊戲。即使在低端設備中,性能也沒有問題。
☎社區雖小但很好。他們有論壇和 Discord。

(2)缺點:
☎沒有可視化編輯器(必須用簡單的純代碼撰寫一切物件,與動作事件)
☎缺點,雖然支持 html5 構建,但它仍然是測試版,所以有一些問題。
☎Vulkan/Metal 版本也沒有準備好。

(3)請注意,幾個不錯的 Lua 引擎:
☎Cocos Creator
☎Gideros
☎Love2D。
它們都是開源的,可以與 Cocos Creator 相媲美。
Cocos Creator 更精緻,文檔更好。


4 1.Godot
參考文章:
(1)Finding the Perfect 2D Game Engine
(2)Godot vs Defold, Which One is Better

2.Godot:
(1)優點:
☎這個引擎最近很流行。它就像一個開源版本的 unity。
☎很多文章說,Godot比 Unity 做 2D 更好。
☎Godot 是完全開源的,擁有最寬鬆的許可。

☎主要語言是GDScript(類似python),
☎但也支持C#、C++等。不同的語言有不同的成熟度和性能。

☎功能豐富,同時支持 2D 和 3D。
☎有畫面編輯器,小巧且快速。包含大量電池。具有內置動畫/骨骼、磁貼編輯器等。
☎它也是可擴展的。

☎教學文檔很好。還有很多文章和 YouTube 教程。

☎構建檔案大小 APK 大約為 7.1-11.8MB(編譯時可以剝離模塊)。
☎對於 html5,最小的(壓縮的)大約是 2.9MB。

☎它的開發非常活躍,由於它的受歡迎程度,它的未來看起來很光明。

(2)缺點:
☎GDScript 是官方語言,它不是 Python,人們說它性能不佳。
☎C# 支持看起來不錯,但會使構建大小更大。


5 5.Defold
參考文章:
(1)Finding the Perfect 2D Game Engine
(2)Godot vs Defold, Which One is Better

2.Defold:
(1)優點:
☎Defold 是一個基於 Lua 的遊戲引擎,帶有可視化編輯器。
☎目前已經“開源”open source,這讓它更具吸引力。

☎它是 King(超級流行的 Candy Crush Saga 背後的公司)的一部分,現在在 Defold 基金會下獨立。

☎功能高度完善,並註意高性能/低引擎開銷。

☎構建規模令人印象深刻。
☎html5 構建低至 800kb 左右(gzipped)。
☎apk 大小 ~1.7mb。

☎文檔很好。它要求我們按照 defold 的方式做事(比如物件之間的傳遞參數)。

☎為了成熟,Kings 在他們自己的一些流行遊戲中使用它(不過 Candy Crush Saga 使用不同的引擎)。因此,Defold 在這種規模上進行了實戰測試。

☎關於支持,它有小而活躍且響應迅速的社區。

(2)缺點:


6 6.Cocos Creator
參考文章:
(1)Finding the Perfect 2D Game Engine
(2)Godot vs Defold, Which One is Better
(3)Cocos Creator 極速入門

2.Cocos Creator:
(1)優點:
☎使用界面非常類似Unity(兩者很像,用起來非常容易彼此熟悉上手)
☎而unity最大的問題個人覺得就是這個APK打包出來體積大的嚇人。
☎但cocos HTML 的構建檔案大小是最好的(很小)。只有 ~155kb gzipped 因為它使用原生 js。

☎unity:現在傾向用於3d遊戲和虛擬實境,這兩塊
☎而cocos:終究還是華人世界2D遊戲的首選開發引擎(尤其它支援微信的小遊戲,也支援facebook的小遊戲)

☎非常適合 Facebook 即時遊戲或聊天應用程序的嵌入式遊戲。
☎最小的 apk 大約是 6mb。如果同時包含 armv7 和 arm64bit 庫,則為 11MB。

☎請注意,它會在移動設備上生成一個真正的本機應用程序。不僅僅是像 Apache Cordova 這樣的混合應用程序。

☎它來自流行的 Cocos2d-x 引擎的製造商,
☎但使用 Visual IDE ala Unity,並使用 javascript。
☎編輯器/IDE 是基於 Electron 的,沒有官方的 Linux 支持。

☎IDE 不會嘗試做所有事情。它甚至沒有內置代碼編輯器。
☎它可以很好地與外部代碼編輯器(如 VS Code)和流行的 3rd 方 2D 工具(如 tiled 和 Dragonbones/spine)集成。

☎在中國和東南亞,它很受歡迎並被騰訊等大型出版商使用,
☎因此它看起來在這種規模上經受了考驗。

☎對於社區來說,它有一個論壇和 Discord,看起來很小,但足夠活躍。


(2)缺點:
☎很難找到關於這個引擎的英文文章/資源(對外國人不利)。
☎較少的英語教程,也許它只在華人世界流行(對外國人不利)。

☎若要構建本機版本,需要設置所有本機工具堆棧並對其進行編譯。
☎因此,這不是即時的一鍵式過程。

☎此外,它是半開源的(編輯器部分是專有的,而引擎是開源的,基於 Cocos2D-X 的 fork。但是,它不能在沒有 IDE 的情況下使用)


3.Cocos Creator特色:
☎Cocos 引擎團隊敏銳地發現了:手遊頁遊化這一趨勢,
☎並做出了一個大膽的嘗試:開發類 Unity 工作流的一體化工具 Cocos Creator,
=>Cocos Creator 的工作流借鑑了 Unity 等成熟引擎工具的設計方案,這使得用過 Unity 引擎的開發者可以迅速上手 Cocos Creator 而沒有不適感。
=>開發者可以在 Cocos Creator 和 Unity 兩者間隨性轉換,使用久了,你或許會發現,做 3D 選用 Unity,做 2D 選用 Cocos Creator,兩者猶如同一個產品

☎它以頁遊主流指令碼: JavaScript 為開發語言,
=>Cocos Creator 使用 JavaScript 作為指令碼語言,一則降低了開發難度和開發成本,同時也方便執行和除錯,輕鬆涵蓋了 H5 領域的產品開發

☎能夠同時打包:三端產品【android, ios, html】,
☎還可幫開發者迅速過渡到當前流行的:【 H5、微信小遊戲、Facebook小遊戲】。
=>Facebook小遊戲 已授權 Cocos 為旗下 H5 遊戲平臺合作伙伴

☎Cocos Creator 提供了一套以內容創作為核心的【所見即所得】的編輯工具,
☎擁有 All in One 一站式服務體系:
=>整個遊戲產品開發過程中,遊戲創作團隊完全可以身處其中,通過其所建立的工作流對遊戲的資源管理、場景設計、介面佈局、精靈建立、邏輯控制、打包執行與釋出做全方位的把控

☎元件化
=>Cocos Creator 基於元件化設計,功能模組易於擴充套件。
=>該模式使開發者不再拘束於編輯器本身這個容器,可以按需對編輯器進行外掛式擴充套件,
=>用 HTML + JavaScript 等前端通用技術輕鬆擴充套件編輯器功能

4,Cocos Creator 的技術架構如下圖所示


5,以資料驅動工作流為核心的開發理念,整個工作流程如下圖所示


6,缺點:
Cocos Creator 也有不足的地方,比如 3D 功能仍處於初級研發階段,未能形成生產力

7,國內的facebook小遊戲,只要是Cocos Creator開發的遊戲


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. 觀摩各種Cocos Creator範例
目錄 1.範例:slo開獎機 2.格鬥遊戲 3.多種遊戲demo 7.3D遊戲demo
5.範例:Facebook遊戲 6.各種手機遊戲 7.範例:射擊遊戲 8.多種遊戲demo
9.3D遊戲Spaceship 10.3D遊戲 Reel 11.3D遊戲 12.3D遊戲demo
13.下載官網提供的1個完整範例 14.Top Ten Games in 2020

1

1.範例:slo開獎機:

slo開獎機
git hub下載


2

2.下載官網提供的1個完整範例:
(1)下載demo範例

 

 
chp5.Cocos Creator使用的程式(javascript,Typescript)
目錄 1.Javascript教學網站 2.Typescript教學網站 3.Cocos Creator官網提供的所有API函數庫

1

1.Javascript教學網站:
(1)w3schools教學: w3schools教學(英文/可以選擇中文)


2

2.Typescript教學網站:
(1)Typescript教學(官網)

(2)Typescript教學(中文)

(3)Typescript教學(w3spoint)


3

3.Cocos Creator官網提供的所有API函數庫:
[Cocos Creator] 不同版本的API參考手冊:
(1)版本2.4x系列的API參考手冊
(2)版本3.3x系列的API參考手冊

 

 
chp6.建立專案,新增場景scene,圖片節點,節點操控
目錄 範例6-1:新增場景,圖片節點,節點操控 範例6-2:節點,錨點

1

範例6-1:新增場景,圖片節點,節點操控<:
1.成果圖成果圖成果圖成果圖場景設計圖

2.下載圖片檔案:6-1素材檔案

2.第一次使用,步驟:
(1)安裝:先下載2.x系列最新版的dashboard(例如:2.4.7版本)
Cocos Creator官網
B.若要使用模擬器/或打包成app,apk檔案,則必須加安裝visual studio 2017的C++部分即可
(若沒有安裝vs2017,也可以使用,但只能用網頁瀏覽結果)


C.註冊登入帳號密碼:


D.再安裝編輯器:選擇2.x系列最新版(例如:2.4.7版本)

E.功能選項:


3.新建一個專案項目:c6-1


4.刪除一個視窗:
示意圖

5.恢復默認預設視窗設置:
示意圖
或是
示意圖
示意圖

6.新增一個場景scene:scene1(必須用英文名稱)➜然後double click:scene1
示意圖

7.添加資源:三種:
(1)texture:jpg,png
(2)audioclip:mp3
(3)javascript/typescript:js,ts


8.拖曵圖片到場景:world.jpg(拖曵到assets)
示意圖

9.場景編輯器坐標的原點位置:左下角(x軸向右,y軸向上):
紫色框:是canvas大小:(預設為960x640)
示意圖

10.如何修改紫色框canvas大小:右邊屬性框:canvas➜Design Resulition
示意圖

11.把圖片放入場景:拖曵到canvas內


12.操控場景(放大縮小旋轉):



13.把world.jpg填滿canvas:960x640
示意圖

14.把圖片Icon-60.jpg放入場景:拖曵到canvas內
設定world.jpg的opacity透明度 = 0
設定Icon-60.jpg的(x,y)=(0,0)
示意圖

15.點選節點(node)的技巧:不要從場景畫面點選(容易重複,點錯),要從左側層級選擇器點選
15.節點(node)層級的設定規則:最下面的節點,顯示在最上方
15.節點(node)層級的移動方法:x軸,y軸,任意方向方塊


16.節點node的四種操作:



17.放大,旋轉移動:
新增第3個節點:圖片Icon-60.jpg放入場景:拖曵到canvas內
重新命名:Icon-60-2
放大:示意圖
再旋轉:示意圖
再移動:(x,y)=(-480,320)示意圖

18.矩形縮放(節點大小調整):
新增第4個節點:圖片Icon-60.jpg放入場景:拖曵到canvas內
重新命名:Icon-60-3
矩形縮放:示意圖
再移動:(x,y)=(480,320)示意圖


2

範例6-2:節點,錨點:
1.成果圖成果圖場景設計圖

2.下載圖片檔案:6-2素材檔案

3.新建一個專案項目:c6-2

6.新增一個場景scene:assets=>scene1(必須用英文名稱)➜然後double click:scene1

8.拖曵圖片到場景➜到canvas内:background1.jpg,player1.jpg(拖曵到assets)
☎注意:拖曵圖片要拖曵到canvas裡面(成為canvas的子節點)
示意圖

9.紫色框:是canvas大小:(預設為960x640)
注意:canvas的原點在:左下角

11.把圖片放入場景➜拖曵到到canvas内:
調整圖片大小(size):960x640

12.修改background1.jpg的錨點位置(比例):
☎定義錨點(anchor):一個物件的代表點(預設在中央點)
anchor:(0,0)
示意圖
☎結果:background1.jpg的代表點設定為左下角,
然後,左下角跑到父節點canvas的正中央(因為,canvas的代表點在正中央)

14.把圖片player1.jpg放入場景:拖曵到canvas內
(1)設定錨點(anchor)在角色的腳底:(0.5,0)
(2)設定位置(position):(0,-320)
☎定義:位置(position)= 與父層節點(canvas)的錨點anchor的相對位置
因為:(canvas)的錨點anchor在(0.5,0.5)正中央,
所以:若是player1.jpg的位置(position):(0,0),就會出現在canvas正中央
所以:若是player1.jpg的位置(position):(0,-320),就會出現在canvas下方中央
示意圖

15.節點(node)坐標的重要性:
☎要控制物件的運動,必須對『位置,錨點』非常清楚

16.run遊戲的種操作:模擬器,瀏覽器:
(1)模擬器:示意圖示意圖
(2)瀏覽器:可以調整手機螢幕:示意圖
注意:必須用支援chrome內核的瀏覽器

 

 
chp7. 場景scene,節點node,組件component
目錄 範例7-1:新增圖片節點sprite 範例7-2:文字節點label

1

範例7-1:新增圖片節點sprite
1.成果圖場景設計圖

2.下載圖片檔案:7-1素材檔案

3.新建一個專案項目:c7-1

6.新增一個場景scene:assets=>scene1(必須用英文名稱)➜然後double click:scene1

7.新增一個圖片節點node,有兩種方法:
☎(1)直接拖曵法:從『asset』視窗➜拖曵到『層級管理器』視窗。
☎(2)新增節點node(例如sprite):從『層級管理器』視窗➜canvas➜新增節點➜sprite。

8.使用方法1:直接拖曵法:
(1)先拖曵p1.png到assets
(2)再拖曵圖片p1.png到場景➜到canvas内
☎注意:拖曵圖片要拖曵到canvas裡面(成為canvas的子節點)
(3)觀察右邊屬性視窗:有個元件:node,sprite
示意圖
☎node/節點:記錄物件的基本屬性(位置,大小...)等共同屬性
☎component/組件:例如:sprite,記錄物件的特殊屬性(圖檔名稱sprite frame,...)等共同屬性
sprite:就是圖片

9.使用方法2:新增節點node(例如sprite)法:
(1)先拖曵p2.png到assets
(2)從『層級管理器』視窗➜canvas➜新增節點➜新增渲染節點➜sprite精靈
重新命名:p2
設定圖片檔名:在右邊sprite視窗➜sprite frame = p2.png(用拖曵的)
示意圖

2

範例7-2:文字節點label
1.成果圖場景設計圖

3.新建一個專案項目:c7-2

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

5.新增文字節點node的方法:新增文字節點Label
(1)從『層級管理器』視窗➜canvas➜新增節點➜新增渲染節點➜label文字
☎右邊屬性視窗有兩個元件:node節點,label組件 設定文字名稱:在右邊label組件➜string = 新年快樂
示意圖

6.設定文字顏色,大小的方法:

color:在node組件內
font size:在label組件內
font height:在label組件內
font family:在label組件內➜直接輸入:標楷體
示意圖

7.結論:文字節點 = node + label

2


 

 
chp8. UI、按鈕button,標籤label,圖片精靈sprite,音效audiosource
目錄 範例8-1:UI節點(按鈕,輸入框editbox) 專案8-2:自行建立節點與組件(形成圖片,文字) 專案8-3:自行建立父子節點與組件

1.

範例8-1:UI節點(按鈕,輸入框editbox)
1.成果圖場景設計圖

3.新建一個專案項目:c8-1

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

5.新增UI節點(按鈕)的方法:
(1)從『層級管理器』視窗➜canvas➜新增節點➜新增UI節點➜按鈕
☎結果:右邊屬性視窗產生三個節點:node節點,Background節點,Label節點
設定按鈕大小:button---node➜siz = (300, 100)
設定按鈕文字名稱:在右邊label組件➜string = 按鈕
設定按鈕文字大小:在右邊label組件➜size = 60
設定按鈕文字粗體:在右邊label組件➜font bold = true
示意圖

6.設定按鈕顏色(滑鼠滑過變色,按下按鈕變色)
(1)設定按鈕背景設定:顏色/圖片:
左邊點選button➜右邊button節點➜type➜color
示意圖
設定:normal顏色(一般狀態下的顏色)
設定:pressed顏色(按下按鈕的顏色)
設定:hover顏色(滑鼠滑過變色)
示意圖

7.新增UI節點(輸入框editbox)的方法:
(1)從『層級管理器』視窗➜canvas➜新增節點➜新增UI節點➜輸入框editbox
☎結果:右邊屬性視窗產生三個節點:background sprite節點,Text label節點,placehoder label節點
設定editbox大小:editbox➜siz = (300, 100)
(2)設定『提示文字placeholder』➜placehoder label節點:string:請輸入名稱
字體大小:50
示意圖

8.結論:editbox節點 = node + background sprite + label + placehoder label

exp8_1

專案8-2:自行建立節點與組件(形成圖片,文字)
1.成果圖成果圖場景設計圖

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

3.新建一個專案項目:c8-2

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

5.自行建立新節點node,新組件component:
(1)自行建立新節點node:
從『層級管理器』視窗➜canvas➜新增節點➜新增空節點:
修改名稱:mySprite
示意圖

(2)自行建立新組件component:sprite
點選mySprite➜右邊屬性視窗➜添加組件-➜渲染類組件➜sprite
示意圖
拖曵p2.png圖片到➜sprite frame
示意圖

(3)刪除自行建立的組件component:sprite
在sprite右方齒輪按鈕➜remove
示意圖

(4)自行建立新組件component:label
點選mySprite➜右邊屬性視窗➜添加組件-➜渲染類組件➜label
設定string:新年快樂
示意圖

8.結論:自創節點 = node + 各種組件(sprite,或label.....)
8.結論:節點node,可以搭配多種組件,但是只能搭配一種渲染類組件(sprite,或label.....)


(1)自行建立第2新組件component:button
點選mySprite➜右邊屬性視窗➜添加組件-➜UI類組件➜button
設定normal, pressed, hover顏色
示意圖
示意圖


exp8_2

專案8-3:自行建立父子節點(sprite節點+label子節點)
目的:在sprite節點下,建立label子節點
父子節點:在節點下方,加入子節點
1.成果圖成果圖成果圖場景設計圖

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

3.新建一個專案項目:c8-3

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

5.拖曵圖片到場景➜到canvas内:p1.jpg
修改名稱:大雄
6.在p1物件下方新增節點➜新增渲染物件➜label
修改名稱:名稱
示意圖
在label的string設定:大雄
示意圖
7.父子節點的優點:
(1)一起運動,一起旋轉,一起縮放
(2)組合功能
示意圖

8.注意:子節點的坐標,是相當於父節點的相對位置
例如:修改子節點的坐標=(0, 0),會移動到父節點的原點位置(中央)
若是旋轉,子節點的坐標是不會變化的
示意圖

9.為什麼要做出父子節點?
優點:一個人物,可以有『上方標題,下方陰影』,人物移動時,可以所有『標題,陰影』,會一起移動。
示意圖



 

 
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向右程式碼(上課教的)
ts01向左程式碼(方法2)ts02向右程式碼(方法2)

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向右程式碼(上課教的)
ts01向左程式碼(方法2)ts02向右程式碼(方法2)



11.

專案9-11:整合:鍵盤左右鍵讓大雄左右移動
目的:鍵盤左右鍵,讓大雄左右移動
1.成果圖場景設計圖ts01第一種程式碼(上課教的)ts01第二種程式碼(方法2)

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第一種程式碼(上課教的)ts01第二種程式碼(方法2)



 

 
chp10. 坐標系統
目錄 專案10-1:移動到某坐標點,再縮小

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程式碼


 

 
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程式碼(複雜)
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程式碼(複雜)
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://www.cleverpdf.com/zh-tw/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事件阻斷輸入事件

☎關鍵問題:如何blockInputEvent事件阻斷輸入事件:
目前程式執行問題:當開啟遮罩時,背景的貓咪,還是可以隨著觸控而移動

☎如何讓背景的貓咪停止動作呢?
改善方法:在『遮罩層』➜加入一個組件『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成果圖2ts01程式碼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成果圖2ts01程式碼tsBullet程式碼


 
a