閱讀本文之前,默認你已經(jīng)掌握cocosCreator的基本知識。
關于節(jié)點
節(jié)點在cocosCreator中是非常重要的,所以它的相關API至關重要。
- 節(jié)點基本屬性
width: 節(jié)點寬度。
height: 節(jié)點高度。
name: 節(jié)點名稱。
color: 節(jié)點顏色。
opacity: 節(jié)點透明度(0-255)。
position: 節(jié)點在父節(jié)點坐標系中的位置。
x: 節(jié)點 X 軸坐標(相當于父節(jié)點)。
y: 節(jié)點 Y 軸坐標(相當于父節(jié)點)。
anchorX: 節(jié)點 X 軸錨點位置(0-1之間)。
anchorY: 節(jié)點 Y 軸錨點位置(0-1之間)。
rotation: 該節(jié)點旋轉角度。
scale: 節(jié)點相對父節(jié)點的縮放。
zIndex: 決定一個節(jié)點在兄弟節(jié)點之間的位置。
active: 當前節(jié)點的自身激活狀態(tài)。
parent: 該節(jié)點的父節(jié)點。
children: 節(jié)點的所有子節(jié)點。
可以直接對屬性賦值從而改變屬性的值。 - 節(jié)點基本方法
getContentSize: 獲取節(jié)點原始大小,不受該節(jié)點是否被縮放或者旋轉的影響。
setContentSize: 設置節(jié)點原始大小,不受該節(jié)點是否被縮放或者旋轉的影響。
getPosition: 獲取節(jié)點在父節(jié)點坐標系中的位置(x, y)。
setPosition: 設置節(jié)點在父節(jié)點坐標系中的位置。
getScale: 獲取節(jié)點的縮放。
setScale: 設置節(jié)點的縮放比例,默認值為 1.0。
getRotation: 獲取該節(jié)點以局部坐標系 Z 軸為軸進行旋轉的角度。
setRotation: 設置該節(jié)點以局部坐標系 Z 軸為軸進行旋轉的角度。
getBoundingBox: 返回父節(jié)坐標系下的軸向?qū)R的包圍盒。
getBoundingBoxToWorld: 返回節(jié)點在世界坐標系下的對齊軸向的包圍盒。
convertToWorldSpace: 將一個相對于節(jié)點左下角的坐標位置轉換到世界空間坐標系。
convertToWorldSpaceAR: 將一個相對于節(jié)點錨點的坐標位置轉換到世界空間坐標系。
convertToNodeSpace: 將一個點轉換到節(jié)點空間坐標系,這個坐標系以節(jié)點左下角為原點。
convertToNodeSpaceAR: 將一個點轉換到節(jié)點空間坐標系,這個坐標系以錨點為原點。 - 節(jié)點操作查找相關方法
getParent: 獲取該節(jié)點的父節(jié)點。
setParent: 設置該節(jié)點的父節(jié)點。
addChild: 添加子節(jié)點。
insertChild: 插入子節(jié)點到指定位置。
removeChild: 移除節(jié)點中指定的子節(jié)點。
removeAllChild: 移除節(jié)點所有的子節(jié)點。
removeFromParent: 從父節(jié)點中刪除該節(jié)點。
getChildByName: 通過名稱獲取節(jié)點的子節(jié)點。
getComponent: 獲取節(jié)點上指定類型的組件。
getComponents: 返回節(jié)點上指定類型的所有組件。
addComponent: 向節(jié)點添加一個指定類型的組件類。
removeComponent: 刪除節(jié)點上的指定組件。 - 節(jié)點事件相關方法
on: 在節(jié)點上注冊指定類型的回調(diào)函數(shù)。
once: 注冊節(jié)點的特定事件類型回調(diào),回調(diào)會在第一時間被觸發(fā)后刪除自身。
off: 刪除之前與同類型,回調(diào),目標注冊的回調(diào)。
targetOff: 移除目標上的所有注冊事件。
emit: 通過事件名發(fā)送自定義事件。
dispatchEvent: 分發(fā)事件到事件流中。
pauseSystemEvents: 暫停當前節(jié)點上注冊的所有節(jié)點系統(tǒng)事件,節(jié)點系統(tǒng)事件包含觸摸和鼠標事件。
resumeSystemEvents: 恢復當前節(jié)點上注冊的所有節(jié)點系統(tǒng)事件,節(jié)點系統(tǒng)事件包含觸摸和鼠標事件。 - 節(jié)點動作相關方法
runAction: 執(zhí)行并返回該執(zhí)行的動作。
stopAction: 停止并移除指定的動作。
stopAllActions: 停止并且移除所有正在運行的動作列表。
pauseAllActions: 暫停本節(jié)點上所有正在運行的動作。
resumeAllActions: 恢復運行本節(jié)點上所有暫停的動作。 - 注意點
- 節(jié)點的width,height代表節(jié)點原始大?。ㄅcgetContentSize方法的結果一樣),不受節(jié)點縮放旋轉的影響。
- 節(jié)點旋轉后,自身的坐標系也會一起旋轉。所以一些轉換坐標的方法結果會有變化。
- 一個空節(jié)點設置顏色是無效的,可以給空節(jié)點添加Sprite渲染組件。
關于事件
Cocos Creator 支持的系統(tǒng)事件包含鼠標、觸摸、鍵盤、重力傳感四種。
鼠標和觸摸事件被稱為節(jié)點系統(tǒng)事件,鍵盤和重力傳感事件被稱為全局系統(tǒng)事件。
值得注意的是無論你的鼠標和觸摸事件注冊在哪個層級的節(jié)點上,獲取到的位置坐標都是基于世界坐標系的
所以我們經(jīng)常需要將坐標統(tǒng)一轉換為世界坐標系進行相應的計算。
關于坐標系
Cocos Creator 的坐標系是笛卡爾右手系,即原點在左下角,x 向右,y 向上,z 向外。
關于Graphics組件的坑
Graphics組件提供了一系列繪畫接口,和canvas的API差不多。但是在使用過程中還是有很多問題的,現(xiàn)就我遇到的問題簡單描述并給出解決方案。
- 問題一,1px劃的線條在不同分辨率設備上會出現(xiàn)粗細不均,甚至線條丟失問題?
原因:我們的畫布會根據(jù)設備屏幕的實際分辨率并對場景中所有渲染元素進行適當?shù)目s放,所以1px的線條在縮小到足夠小的時候就會出現(xiàn)丟失問題。
解決方案:確保在不同分辨率的設備上,線條寬度永遠為1px。
如果你的畫布是適配高度的話,代碼如下:
lineWidth = 1 /cc.view.getScaleY()
如果你的畫布是適配寬度度的話,代碼如下:
lineWidth = 1 /cc.view.getScaleX()
如果沒有開啟畫布的任何適配模式,代碼如下:
lineWidth = 1 / Math.min(cc.view.getScaleX(), cc.view.getScaleY()) - 問題二,對節(jié)點進行放大縮小會出現(xiàn)粗細不均,甚至線條丟失問題?
原因:同問題一。
解決:每次放大或縮小都進行一次重繪,確保lineWidth和原來的保持一致。
lineWidth = 1 / Math.min(cc.view.getScaleX(), cc.view.getScaleY()) / scaleRatio
scaleRatio為放大或縮小的比例。
注意點:確保真實繪制的lineWidth乘以實際的縮放比例為整數(shù),即我們‘/’號之前為整數(shù),不然還是會出現(xiàn)丟失問題或粗細不均問題