Cocos2d-JS游戏导演

什么是游戏的导演

  具体来说,Cocos2d-JS中的导演是一个对象,它负责设置游戏的运行环境,控制游戏的住循环并且管理场景和场景的切换。

导演的任务

  Cocos2d-JS中导演对象名为:cc.director。下面是它主要的任务:

  环境设定  

  首先,在进入游戏之前,导演对象会设置游戏的运行环境:

    1. 设置显示游戏的视图,包含视图的投射,像素格式,等等。
    2. 设置游戏运行帧率。
    3. 为当前导演对象初始化计时器,动作管理器和事件管理器。
    4. 为当前导演对象初始化贴图缓存和渲染器。
    5. 导演对象的其他设置

  执行主循环  

  视频游戏的基本原理其实是和传统动画是一样的。在传统动画制作中,画师们一页一页得绘制静态的画面,这些画面最终会以很快的频率一幅幅展示出来。频率可以是比如每秒24张画,每张画面被称为一帧。

  视频游戏的绘制方式是完全一样的,每1/60秒,程序会绘制一张图片(一帧)到屏幕上,也就是60帧每秒。其中每一帧的绘制过程包含计算所有可视节 点的转换矩阵以及其他信息,然后画面会一帧一帧得显示到屏幕上。随着游戏的进行,每一帧都会改变一点点,最后,玩家的眼前就会呈现出优美的游戏画面。

  以上所描述的所有过程都是在cc.director的主循环中完成的。主循环中每一次循环绘制一幅画面到屏幕上。下面是每一帧绘制的详细过程:    

    1. 计算从上一帧开始到现在的时间,这将会被用于提供调试信息。
    2. 让导演对象中的计时器执行被计划的任务。
    3. 通过事件管理器通知cc.Director.EVENT_AFTER_UPDATE事件。
    4. 清空游戏屏幕。
    5. 如果需要进入下一个场景则进行场景切换。
    6. 遍历当前场景中的节点并更新节点的空间转换矩阵以及其他必要信息,然后发送绘制指令给渲染器。
    7. 通过事件管理器通知cc.Director.EVENT_AFTER_VISIT事件。
    8. 渲染器按顺序执行所有渲染指令来最终绘制整个场景到屏幕上。
    9. 通过事件管理器通知cc.Director.EVENT_AFTER_DRAW事件。
    10. 增加全局总帧数。

  除此之外,cc.director同样提供一些函数来控制主循环:

    1. 暂停主循环:cc.director.pause()
    2. 恢复主循环:cc.director.resume()

  场景管理

  导演对象的另一项重要任务就是场景管理,导演对象在同一时间只可以运行一个场景,但是你可以随意得切换运行场景。所以通常来说,一个游戏会包含用于不同用例的几个场景,你的程序应该通过cc.director的API来控制场景流。  

// 让导演对象执行目标场景
cc.director.runScene(scene);

// 获取当前正在执行的脚本
var scene = cc.director.getRunningScene();

// 将一个新场景推入场景栈中,并替换运行场景为这个新场景
var scene = cc.director.pushScene(scene);

// 将场景栈顶的场景推出场景栈,并替换运行场景为推出后栈顶的新场景
cc.director.popScene();

// 将场景栈中除了栈底的根场景以外的所有场景推出,并替换运行场景为根场景。
cc.director.popToRootScene()

  除此之外,你可以通过cc.TransitionScene的效果类的转场特效来切换场景。

// 转场特效持续两秒
var transitionTime = 2;
// 创建下一个场景
var nextScene = new cc.Scene();
// 使用下一个场景创建转场特效场景
var transitionScene = new cc.TransitionProgressInOut(transitionTime, nextScene);
// 替换运行场景为转场特效场景
cc.director.runScene(transitionScene);

  在上面的例子中可以看出,我们使用了一个cc.TransitionProgressInOut转场特效,没有使用cc.TransitionScene是因为这个基础特效类没有任何实际效果,只提供运行机制。Cocos2d-JS引擎中还提供其他很多种预设转场特效,你可以参考API文档或是TransitionScene测试用例。

  环境设置和属性

  由于导演对象控制整个游戏运行环境,导演对象中还提供一些常用的设置和属性:

  

// 获取游戏主循环是否被暂停
var paused = cc.director.isPaused();

// 设置或获取动画帧间隔,这个设置会直接影响帧率
var interval = cc.director.getAnimationInterval();
cc.director.setAnimationInterval(value);

// 设置或获取导演对象的内容放缩比例
var scale = cc.director.getContentScaleFactor();
cc.director.setContentScaleFactor(scaleFactor);

// 设置或获取游戏世界可视窗口的原点和大小
var origin = cc.director.getVisibleOrigin();
var size = cc.director.getVisibleSize();

// 获取游戏世界大小,winSize的大小通常等同于设计分辨率,而winSizeInPixel的大小是游戏世界的像素大小
var winSize = cc.director.getWinSize();
var winSizeInPixel = cc.director.getWinSizeInPixels();

// 设置或获取调试信息是否被显示
var isDisplaying = cc.director.isDisplayStats();
cc.director.setDisplayStats(displayStats);

// 设置或获取视图,它指向`cc.view`
cc.director.var view = cc.director.getOpenGLView();
cc.director.cc.director.setOpenGLView(openGLView);

// 设置或获取WebGL/OpenGL的投影,
// 可能的投影类型包括:cc.Director.PROJECTION_2D, cc.Director.PROJECTION_3D, cc.Director.PROJECTION_CUSTOM
cc.director.getProjection();
cc.director.setProjection(projection);

  计时器  

  正如之前提到的,游戏主循环会通过计时器执行预定的任务。这个计时器是导演对象的一个内部子系统,你可以对当前运行场景的节点执行一些类型的任务。计时器将会计划何时以及如何执行这些任务。

  下面的代码片段展示了一些常用的创建任务的方式:

var node = new cc.Node();

// node的update函数将会在每一帧被执行
node.scheduleUpdate();
// callback回调函数会重复得在每个interval时间间隔之后被执行,重复次数为repeat次,并且这个任务会在delay延时之后开始执行
node.schedule(callback, interval, repeat, delay);
// callback回调函数会在delay延时之后被执行一次
node.scheduleOnce(callback, delay);
// 取消callback任务
node.unschedule(callback);
// 取消node节点所有计划中的任务
node.unscheduleAllCallbacks();

  注意

    所有任务中的回调函数会在自己的目标节点环境下被执行,也就是说,回调函数中的this对象将会指向目标节点

    即使delay延时为0的情况下,任务回调函数的第一次执行也是在注册任务之后的下一帧中。

  动作管理器

  动作管理器是导演对象另一个重要的内部系统。它管理当前运行场景中的所有动作,它会在每一帧调用所有进行中动作的update函数。动作系统的细节会在后面的章节中详细讨论。

  导演对象系统事件

  导演对象还有一些内建的系统事件,可能会对你控制游戏的逻辑有帮助。

cc.Director.EVENT_AFTER_DRA、// 这个事件在每一帧图像的绘制完成之后被触发。
cc.Director.EVENT_AFTER_VISIT // 这个事件在每一帧场景树遍历之后被触发。
cc.Director.EVENT_AFTER_UPDATE // 这个事件在每一帧计时器任务执行完成之后被触发。
cc.Director.EVENT_PROJECTION_CHANGED //这个事件在导演对象的投影属性被修改之后触发
时间: 2024-08-25 21:22:34

Cocos2d-JS游戏导演的相关文章

cocos2d js ClippingNode 制作标题闪亮特效

1.效果图: 之前在<Android 高仿 IOS7 IPhone 解锁 Slide To Unlock>中制作了文字上闪亮移动的效果,这次我们来看下怎样在cocos2d js 中做出类似的效果. 顺便给我公司的游戏打下广告.https://itunes.apple.com/cn/app/kuang-zhan-san-guo/id691116157? mt=8 2.效果原理 很easy.就是一张白色两边羽化的图片在标题上从左往右移动.可是普通的移动会穿帮.我们须要以标题作为模板来截取白色的图片

JS游戏–别踩白块–教学视频

[布尔教育 PHP就业班 课堂案例 ] 玩游戏,不如自己写游戏! 打开浏览器,打开编辑器(sublime,editplus,notepad都行), 花上2个小时,写个"别踩白块"玩一玩. JS游戏_别踩白块(1) 思路分析.wmv JS游戏_别踩白块(2) 框架搭建.wmv JS游戏_别踩白块(3) 之随机黑白块.wmv JS游戏_别踩白块(4) 方块动起来.wmv JS游戏_别踩白块(5) 方块无缝滚动.wmv JS游戏_别踩白块(6) 得分.wmv JS游戏_别踩白块(7) 犯规处

Cocos2d JS 之消灭星星(三) 进入游戏过渡场景

1 /* 2 * 游戏过渡场景,主要作用是在每次进入游戏或者进入下一关卡时进行过渡,显示当前的关卡以及通过该关卡要达到的分数; 3 */ 4 var TransitionScene = ccui.Layout.extend( 5 { 6 size:null, 7 ctor:function() 8 { 9 this._super(); 10 this.zinit(); 11 this.setLabel(); 12 this.gotoGameMainScene(); 13 }, 14 //设置显示

Cocos2d JS 之消灭星星(五) 游戏主场景

1 /* 2 * 游戏主场景 3 */ 4 var GameMainScene = ccui.Layout.extend( 5 { 6 ctor:function() 7 { 8 this._super(); 9 this.zinit(); 10 this.setTopInfor(); 11 this.addStarLayout(); 12 }, 13 //游戏主场景顶部显示信息 14 setTopInfor:function() 15 { 16 var gameTopInfo = new Ga

Cocos2d JS 之消灭星星(四) 游戏主场景顶部显示

1 /* 2 * 游戏主场景顶部显示信息 3 */ 4 var GameTopInformation = ccui.Layout.extend( 5 { 6 size:null, 7 isPause:false,//是否暂停游戏 8 maxScoreLabel:null,//最高纪录 9 getScoreNum:null,//当前得分 10 currentLevel:null,//当前关卡 11 ctor:function() 12 { 13 this._super(); 14 this.zin

Html5+Lufylegend.js游戏开发(一)引擎介绍及原理

Yorhom|2013-09-26 10:30|次浏览| 游戏开发(4)HTML5(124)游戏引擎(33)Lufylegend.js(1) Html5游戏开发最近受到很多开发者的关注.但是html5本身不是为游戏开发而量身定造的,所以开发起来十分麻烦.因此挑选好的引擎对游戏开发十分有帮助. 在游戏开发中,有这么几种程序语言: C++配合OpenGL(移动端游戏开发) C++配合DirectX(PC端游戏开发) Java (移动端游戏开发) ActionScript(网页游戏开发) html5在

cocos2d js ScrollView的使用方法

游戏中非常多须要用到ScrollView的情况,也就是须要滚动一片区域. 这里有两种实现方法,一种是使用cocos studio的方式,另外一种是手写代码.先看第一种 第一种记得在设置滚动区域时选取裁剪项. var size = cc.winSize; //读取json文件 var root = ccs.uiReader.widgetFromJsonFile(res.listJson); this.addChild(root); //获取在cocos studio里面设定好的scrollView

cocos2d JS 函数类型相互转换(字符串、整形、浮点形、布尔值)

工作忙好些天了,近段时间抽点空分享一下自己学习JS的一点笔记心得做点记录,大神勿喷,谢谢! p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC" } span.s1 { font: 18.0px Helvetica } 1.字符串的转化 1 var found = false; 2 console.log(found.toString()); //输出 false 3 4 var num1 = 10; 5

cocos2d JS 本地缓存存储登陆记住账号密码-&gt;相当于C++中的UserDefault

在cocos-js 3.0以上的版本中,当我们用到本地存储的时候,发现以前用到的UserDefault在JS中并没有导出,而是换成了LocalStorage. 在LocalStorage.h文件中我们查看了一下源码,使用方法就是设置Key-Value的方式 存储数据:cc.sys.localStorage.setItem("key","value") 获取数据:cc.sys.localStorage.getItem("key") 移除数据:cc.