引言
作為觸控科技旗下的新產(chǎn)品，Cocos Creator有鮮明的特色
- 面向JavaScript腳本化開發(fā)
- 組件化和數(shù)據(jù)驅(qū)動的全新工作流
組件化和數(shù)據(jù)驅(qū)動的優(yōu)勢
- 分離數(shù)據(jù)與功能
- 給予美術(shù)策劃直接生產(chǎn)和管理的能力
- 解放程序猿生產(chǎn)力，專注于更有技術(shù)含量的功能開發(fā)
官方視頻的話：功能開發(fā)和內(nèi)容的關(guān)系從未如此和諧有待驗證！
Cocos Creator的基本結(jié)構(gòu)
資源管理器
資源管理里面包含了，工程的所有資源列表，看起來像是ide中的文件，其實這個是一個數(shù)據(jù)庫，導(dǎo)入的資源最后會自動分配一個uuid，以后不管怎么移動、改名，都不會影響場景和腳本中的調(diào)用
- 包括項目中所有資源和腳本文件，為了每個資源分配UUID，解決改名和移動時的索引問題
場景文件
在Cocos2d中最重要的文件就是場景文件，場景是獨立的文件資源，可以跟打開psd文件一樣，雙擊就能打開。數(shù)據(jù)驅(qū)動的開發(fā)流程，最主要的區(qū)別在于游戲啟動是通過讀取場景中的資源和腳本而不是通過一段入口的程序
- 場景文件是數(shù)據(jù)驅(qū)動工作流的核心
- 場景中包括圖像資源、動畫、特效以及驅(qū)動游戲邏輯和表現(xiàn)的腳本
雙擊打開場景編輯器和層級管理器都會出現(xiàn)相應(yīng)的內(nèi)容，對于美術(shù)人員場景就是PS中的畫布，層級管理器就好比是圖層列表
場景編輯器
場景編輯器里面我們可以所建即所得的方式去編輯場景中圖像元素的一些屬性包括位置、旋轉(zhuǎn)、大小這樣場景美術(shù)人員，就可以在這個界面搭建場景和預(yù)覽特效，
層級管理器
可以進行圖像元素渲染順序的調(diào)整和層級調(diào)整
- 我們可以將任何的元素拖拽到一個節(jié)點下面，建立父子關(guān)系、父子關(guān)系可以調(diào)整層級結(jié)構(gòu)之外，父節(jié)點的屬性變化還會影響子節(jié)點，比如說位置、旋轉(zhuǎn)、大小這些，
- 通過層級管理器可以很直觀的查看和調(diào)整所有節(jié)點的層級關(guān)系而且在場景元素很多的時候，在這里可以精確的選中需要的元素，排除干擾
層級管理器使用拖拽操作變更節(jié)點層級關(guān)系，調(diào)整節(jié)點渲染順序
屬性檢查器
- 通過工具編輯調(diào)整節(jié)點的位置和旋轉(zhuǎn)時，實際上是修改節(jié)點的屬性，當前選中節(jié)點的屬性都會列出在屬性檢查器里
- 屬性檢查器和場景編輯器里的圖像預(yù)覽和操作是完全同步的
- 在屬性檢查器中輸入準確的數(shù)值，來定位節(jié)點
組件化開發(fā)
對比Cocos2dx
是以繼承的形式來擴展功能，用戶想要給節(jié)點添加功能就必須新建一個類來繼承node節(jié)點類，需要多少個不同的節(jié)點就要寫多少個類
基于繼承的功能開發(fā)結(jié)構(gòu)復(fù)雜，擴展成本高
組件式開發(fā)
在CocosCreator里寫好的腳本是以組件的形式添加到節(jié)點上面的，可以在資源管理器中查看相應(yīng)的腳本文件
將功能分解為獨立的單元，通過組合創(chuàng)造無限可能，避免重復(fù)代碼
下面拿到官方事例，Hello World 打開HelloWorld.js來查看這個腳本做了什么事情
cc.Class({
extends: cc.Component,
properties: {
label: {
default: null,
type: cc.Label
}, // 定義了一個文字類型的引用，這個引用可以獲取到場景中一個文字節(jié)點的一個實例
// defaults, set visually when attaching this script to the Canvas
text: 'Hello, World!' // 定義了一個字符串類型作為HellWorld的這個程序的問候語，
},
// use this for initialization
onLoad: function () {
this.label.string = this.text;
}, // 然后在加載這個場景的時候，會自動運行onLoad這個方法里面，我們文字元素來設(shè)置
// called every frame
update: function (dt) {
},
});
- 屬性是字符串或數(shù)字等非引用類型時，可以忽略類型聲明
- 'onload'會在場景加載后自動執(zhí)行，一般每個組件的初始化代碼會放到這里面
新創(chuàng)建的官方事例，選中你的場景文件，如果有修改需要保存你的場景，選擇菜單項目->運行預(yù)覽，或者Command+P 得到運行結(jié)果
打包發(fā)布一個WechatGame（微信小游戲）
因為目前并沒有去開發(fā)一款游戲，而是為了學(xué)習(xí)怎么去使用CocosCreator，本次只是將官方事例HelloWorld構(gòu)建發(fā)布到WeChatGame，并在微信中運行
配置你的原生開發(fā)環(huán)境，我需要編譯出來微信小游戲，構(gòu)建版本的時候需要添加微信開發(fā)者工具沒有的小伙伴可以去下載安裝一個
步驟
-
菜單CocosCreator->偏好設(shè)置->原生開發(fā)環(huán)境->選擇WebchatGame程序路徑
-
菜單項目->配置信息->構(gòu)建->運行
上述步驟完成以后點擊運行會直接跳轉(zhuǎn)到微信開發(fā)工具，將CocosCreator的項目創(chuàng)建成微信小程序的項目，至此第一個CocosCreator的程序完成
擴展
如果想將開發(fā)的微信小游戲分享出去，在右上角添加按鈕出現(xiàn)分享的選項
Cocos Creator生成的WeChat項目，微信開發(fā)者工具打開，在main.js中添加
wx.showShareMenu({
withShareTicket: true
})
Next
Cocos Creator UI組件的使用
整理學(xué)習(xí)自：
Cocos官網(wǎng)
