cocos2d-js的導演(Director)

        轉自:凌建風 http://cn.cocos2d-x.org/tutorial/show?id=2103

        cocos中導演毫無疑問是整個遊戲的導航儀。而且它還身兼數職, 爲我們殺先鋒,做保姆,當保安。那這貨到底是何方神聖?不要慌,視頻會從導演的三個模塊去講解,這三個模塊分別是導演概況、任務職責,以及一些常用的API。

一、基礎概括

  • 在遊戲運行前,它負責設置遊戲的運行環境

  • 在遊戲運行中,它負責控制遊戲的主循環

  • 同樣在遊戲運行中,它兼管了場景的管理和切換


二、詳細介紹

2.1 底層環境設定

A. 設置顯示遊戲的視圖,包含視圖的投射、像素格式等等

B. 設置遊戲運行時的幀率

C. 初始化計時器,動作管理器和事件管理器

D. 初始化貼圖緩存和渲染器(OpenGL ES 2.0、WebGL、Canvas)

(注:PC瀏覽器使用WebGL;移動瀏覽器、iOS8用WebGL,其他都用Canvas;Native平臺上,使用OpenGL ES 2.0。)

E. 獲取屏幕尺寸

F. 其他導演對象的設置


2.2 執行主循環

A. 計算從上一幀開始到現在的時間,用於提供調試信息

B. 執行定時器中被計劃的任務

C. 通過事件管理器通知cc.director.EVENT_AFTER_UPDATE事件

D. 清空遊戲屏幕

E. 在需要的時候進行場景切換

F. 遍歷當前場景中的節點並更新節點的空間轉換矩陣以及其他必要信息

G. 通過事件管理器通知cc.director.EVENT_AFTER_VISIT事件

H. 渲染器按順序執行所有渲染指令,最終繪製整個場景到屏幕上

I. 通過事件管理器通知cc.director.EVENT_AFTER_DRAW事件

J. 控制主循環(通過cc.director.pause()以及cc.director.resume()進行控制)

K. 增加全局總幀數


下面我們用一張圖來表示遊戲的循環:

遊戲循環500.jpg

此圖來自秦春林前輩的《我所理解的cocos2d-x》


三、相關API

導演涉及到的API大致分爲兩個方面,一個方面對遊戲的場景進行管理,另一個方面對遊戲的屬性進行設置及獲取。下面分別對它們進行介紹。


1、場景管理

1.1 運行目標場景

1
cc.director.runScene(scene);

1.2 獲取當前正在運行的場景

1
var scene = cc.director.getRunningScene();

1.3 壓入場景

1
var scene = cc.director.pushScene(scene);

壓入場景時要注意,壓入的場景資源不能過大,否則有可能造成內存不足等問題。

通常用於"設置"界面的壓入。場景的壓入和推出採用的是棧結構。

1.4 推出場景

1
cc.director.popScene();

1.5 回到根場景

1
cc.director.popToRootScene();

1.6 場景特效切換


該部分將在場景(Scene)一節中進行介紹,這裏不過多說明。


2、遊戲屬性設置及獲取

2.1 獲取遊戲主循環是否被暫停

1
var isPaused = cc.director.isPaused();

2.2 設置或獲取動畫幀間隔

1
2
3
4
//設置動畫幀間隔,該設置會直接對幀率造成影響
cc.director.setAnimationInterval(value);
//獲取動畫幀間隔
var interval = cc.director.getAnimationInterval();

2.3 設置或獲取導演對象的內容縮放比例

1
2
3
4
//獲取導演對象的縮放比例
var scale = cc.director.getContentScaleFactor();
//設置導演對象的縮放比例
cc.director.setContentScaleFactor(scaleFactor);

2.4 獲取遊戲世界可視窗口的原點和大小

1
2
3
4
//返回正在運行場景的可視區域原點
var origin = cc.director.getVisibleOrigin();
//返回正在運行場景的可視區域大小
var size = cc.director.getVisibleSize();

2.5 獲取遊戲世界的大小

1
2
3
//winSize的大小通常等同於設計分辨率,而winSizeInPixel的大小是遊戲世界的像素大小
var winSize = cc.director.getWinSize();
var winSizeInPixel = cc.director.getWinSizeInPixels();

2.6 設置或獲取調試信息(左下角的幀率等)是否被顯示

1
2
3
4
//返回是否顯示了調試信息
var isDisplaying = cc.director.isDisplayStats();
//設置是否顯示調試信息
cc.director.setDisplayStats(displayStats);

2.7 設置或獲取視圖,指向cc.View

1
2
3
4
//獲得CCEGLView,所有東西都會渲染到它上面
var view = cc.director.getOpenGLView();
//設置所有東西都被渲染到的視圖,不要調用這個函數
cc.director.setOpenGLView(openGLView);

2.8 設置或獲取WebGL/OpenGL的投影

1
2
3
4
5
6
7
8
/*可能的投影類型有:
1. cc.Director.PROJECTION_2D
2. cc.Director.PROJECTION_3D
3. cc.Director.PROJECTION_CUSTOM */
//獲取投影
var projection = cc.diretor.getProjection();
//設置投影
cc.director.setProjection(projection);

至此,和導演(Director)相關的內容也講解的差不多了。本期內容中含有大量代碼,建議大家在學習過程中都多運行幾遍,熟悉導演中各個方法的功能。下期我們將要講解的是,渲染框架中的重點:節點(Node)。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章