3.1　导演、场景、精灵和图层

在Cocos的设计理念中，一款游戏就如同一部电影，在电影中有导演、场景、演员和布景，整个电影如何演、怎么演，演员在什么场景做什么事，都是由导演来控制，而在具体的场景、具体的布景中，演员淋漓尽致地表演，他们相互协作、相互依赖，最终形成了电影。

相似地，在Cocos的设计中也有类似的角色，它们分别是Director（导演）、Scene（场景）、Sprite（精灵）和Layer（图层）。它们在Cocos引擎中有着不同的责任，导演负责控制所有场景之间的转换与切换，场景控制所有层和精灵的展示，精灵负责所有的动作表现，图层则负责场景的构成及用户交互。它们之间相互依赖的关系如图3-1所示。

读者可以通过把游戏和电影中的内容对应来加深理解。一般来说，在一场电影中只会有一个导演，在一个Cocos游戏中也只会有一个导演类；一场电影会有多个镜头，对应Cocos中就是多个场景，而同一时刻只会同时运行一个场景，就像电影中不可能同时出现多个镜头；电影场景中的房屋、天空、大地对应Cocos游戏中的图层，而房屋中的桌椅板凳、天空中的云、地面上的人对应Cocos中的精灵。以上各种元素构成了一整部电影，通过电影的这么一个过程，读者比较能够容易理解Cocos的机制原理。

图3-1　导演、场景、精灵和图层的关系

这里以第2章创建的HelloWorld工程的默认JS文件app.js为例来了解导演、场景、精灵和图层。读者可以跟随代码一步一步进入Cocos2d-JS的世界。

首先看游戏的入口文件main.js, Web启动会通过index.html加载CCBoot.js，然后加载入口文件main.js，而Native启动会通过原生代码加载jsb_boot.js，然后调用main.js，无论是Web还是Native启动，最终都会以main.js为入口进入到游戏，下面来看一看main.js里都做了什么。

可以看到，在上面的代码中首先设置了view的一些参数，然后在cc.LoaderScene的preload方法中调用了cc.director的runScene方法，这一步主要是加载一些资源，然后用导演类的运行场景方法来运行第一个场景，其中cc.director在Cocos2d-JS中是单例模式。

HelloWorldScene类是app.js中的场景类，在游戏入口main.js中，导演cc.director通过runScene方法创建并运行游戏的第一个场景，而场景就是app.js中所定义的场景HelloWorldScene, app.js的代码如下。

创建的HelloWorld的主要JS代码都在这个app.js里面，这里面创建了一个继承自cc. Scene的HelloWorldScene类，并重写了onEnter方法，在onEnter方法中调用了父类的onEnter方法（通过this._super(）调用父类方法)，在main.js中new了这个类之后，一个游戏场景就创建好了。

创建好了游戏场景，就需要先往场景中放入图层，如代码所示，app.js创建了一个继承自cc.Layer的HelloWorldLayer类，并重写了ctor方法（在Cocos2d-JS中，ctor是构造方法的含义），并在ctor中调用了父类的方法，这样一个图层也就创建好了。

在图层创建好了之后，就需要在图层中加入各种各样的精灵了，如代码所示，在HelloWorldLayer中加入了一个cc.LabelTTF控件和一个cc.Sprite控件，并对其设置属性之后放在了屏幕上合适的位置。

至此，一个大致的游戏框架就出来了，这是一个由cc.director导演主导的HelloWorldScene场景，在场景中放入了HelloWorldLayer图层，在图层上又加入了cc.LabelTTF和cc.Sprite控件。这些元素共同组成了这样的游戏画面。感兴趣的读者可以运行一下创建的这个HelloWorld项目，并根据代码观察这些元素之间如何相互依赖，运行方法参照第2章内容。