什么是 Cocos2d-html5？ — 简介

Cocos2d-x 是为 2D 图形环境设计的一个开源跨平台游戏框架。 它已经被移植到许多语言和移动平台，包括 Android、iOS、Windows 等等。 

Cocos2d-html5 是Cocos2d-x 的 JavaScript 版本，专为 web 浏览器设计，并基于 HTML5 技术。 Tizen 提供最好的兼容 HTML5 的 web 应用程序框架，因此 Cocos2d-html5 可轻松地在 Tizen 应用程序上运行。 Cocos2d-html5 使用画布对象来呈现图形。

Cocos2d-x 是一个非常受欢迎的库。 有超过 5 亿的游戏是使用 Cocos2d-x 框架创建的。

这篇文章是为了让您了解如何在 Tizen 应用程序中使用 Cocos2d-html5 库。  本文使用了一个名为 RunSnailRun 的示例应用程序，以演示对 Cocos2d-html5 库的使用，以下是它的简短说明。

示例应用程序和先决条件

一个名为 RunSnailRun 的示例游戏展示了如何使用物理和游戏库。 它使用 Coco2d-html5 处理游戏显示。 游戏的目的是在有限的时间内让刺猬吃完所有的蜗牛。 玩家在设备陀螺仪或键盘的帮助下控制刺猬。  示例应用程序基于Query Mobile 1.2.0 框架，使您能够创建具有直观且一致的用户界面的高度可扩展的 web 应用程序。 为能使用 jQuery Mobile，您的应用程序必须也包含 jQuery 库。

图 1：游戏画面

代码示例使用自定义函数将日志消息发送到控制台。 它们位于应用程序的 js/lib/tizen 文件夹中。

有几个您需要知道的关于 Cocos2d-html5 的重要指南。 为了使用 Cocos2d-html5 库，您只需要运行 cocos2d.js 文件。 它动态地加载所有 Cocos2d-html5 源。 您的文件需要在 cocos2d.js 中的 appFiles 数组内指定，它们也将与 Cococ2d-html5 来源一起加载。 一切加载完成后，您应在 main.js 文件内开始游戏。

有一点很重要，就是所有 cocos2d-html5 配置值（如帧速率或 box2d）都在 cocos2d.js 文件中设置，而所有游戏配置属性（如游戏超时）则在 game.js 文件中设置。

Cocos2d-html5 使用的继承模型

JavaScript 没有一个经典的面向对象的继承方法。 它基于原型。 这意味着 JS 不支持可直接使用的类。 幸运的是，基于原型的方法非常灵活，允许创建具有从 Java 和 c + + 得知的面向正常对象的继承的环境。

这个经典的 Java 和 c + + 继承方法在 Cocos2d-html5 中得到应用。 当您看到下面的示例源代码，您会看到它与从典型的面向对象的语言得知的结构非常类似。

classes.sprites.Background = cc.Sprite.extend({
    width : 1280,
    height : 670,
    ctor : function() {
        this._super();
    }
});

在此示例中，classes.sprites.Background 类从 cc.Sprite 继承。 当然，这意味着所有字段和方法都将被继承，但正如您所见，结构中还是有细微差异。 构造函数 (constructor) 没有与类拥有相同的名称，但它被称为“ctor”。 正当构造函数被执行后，您可以向背景类添加更多函数。
既没有私人也没有公共属性，所以所有的方法和字段都是公开可用的。

背景类对象一样可以构造如下：

this.background = new classes.sprites.Background();

此新创建的背景对象属于背景类型，还属于 Sprite 类型和 Sprite 继承的所有类型。

应用程序分解：场景、 图层、 sprite 和更多

Sprite

var snail = cc.Sprite.create("images/splash/snail.png");

图层

图层包含 sprite、标签和其它图层。  它们可以互为上下。 它们是可绘制区域的大小，且可以是透明的。 图层接收像键盘输入的事件。 图层也可以用作背景。 您可以创建一个图层如下：

var yellowBackground = cc.LayerColor.create(cc.c4b(255,255,0,255));

您还可以扩展图层类，所以您的对象会继承图层，并有其方法和属性。 然后，您可以定义自己的构造函数，并在等级初始化期间在该构造函数内添加一些 sprite：

classes.layers.Intro = cc.Layer.extend({
    ctor : function() {
        this._super();
        var snail = cc.Sprite.create("images/splash/snail.png");
        snail.setPosition(new cc.Point(0, 0));
        this.logo = cc.Sprite.create("images/splash/logo.png");
        this.logo.setPosition(new cc.Point(50, 50));
        this.addChild(snail, 4);
        this.addChild(this.logo, 2);
        return true;
    }
});

场景

var aScene = cc.Scene.create();
aScene.addChild(yellowBackground);

下面的图像更清楚地解释了场景、 图层和 sprite 之间的关系：

图 2：Cocos2d-x 图层架构

上面的图显示了一个单一场景，由三个图层组成。 右边的图层是背景，被填充为绿色。 其他两个图层都有蜗牛。 顶部图层放在顶部，所以在该图层上绘制的所有元素都将显示在中间和背景图层内所有元素的上方。

如果您熟悉图形程序，像 GIMP 或 Photoshop，则您会注意到，将显示的图像分层是一个非常方便和常用的方法。

当您创建基于 Cocos2d-x 的游戏时，您基本上做的是创建 sprite、图层和场景，并将它们组合构成一个好玩的游戏。 例如，您可以创建一个图层作为游戏背景，并在另一个图层绘制一些适合玩家和敌人的 sprite。 现在，每个级别都将有一个新场景，该场景由此背景图层和在不同位置绘制有 sprite 的第二个图层构成，并设置有不同的属性来更改难度。 有了这种方法，您就可以使用之前创建的对象快速创建新的游戏等级。

指导器

指导器是一个单例对象，用来管理场景之间的过渡/导航。 它可以启动一个场景，在它们之间切换，并可以告知哪个场景当前处于活动状态。 您总是可以通过调用下面的方法引用到指导器：

var director = cc.Director.getInstance();

指导器对象允许将参数设置为：

• 动画时间间隔：

  director.setAnimationInterval(1.0 / 60);

• FPS 显示：
  

  director.setDisplayStats(true);

您还可以使用指导器获取当前视口或暂停和继续动画：

director.getWinSize();
director.pause();
director.resume();

在游戏开始时，您可以通过在指导器对象上调用 runWithScene 函数，请求指导器运行带有场景的动画循环：

director.runWithScene(aScene);

除非您将动画的时间间隔更改为其他值，否则这将以每秒 60 帧的速度开始在游戏里再现循环。 从现在开始，每当 Cocos2d-x 库绘制一个新的框架，都将在图层内调用更新方法。 这意味着您需要把所有呈现您的图层的函数放置在其更新函数内。 例如，在 RunSnailRun 应用程序中，使用更新函数在每一帧中更新蜗牛和刺猬的位置：

 classes.layers.Level = cc.Layer.extend({
    //(...)
    update : function(dt) {
        var that = this;
        this.snails.forEach(function(snail) {
            that.moveAndCheckForObstacles(snail, dt);
        });
    },
    //(...)

应用程序

应用程序类是一个组件，它代表您的游戏。 在开始前，您必须创建应用程序对象，并在该对象中加载所有资源和传递将呈现内容的 HTML5 画布对象的 id。 下面是一个来自 RunSnailRun 应用程序的应用程序对象简化版本：

classes.Application = cc.Application.extend({
    config : game.config.cocos2dx,
    ctor : function(scene) {
        this._super();
        this.startScene = scene;
        cc.COCOS2D_DEBUG = this.config['COCOS2D_DEBUG'];
        cc.setup(this.config['tag']);
        cc.AppController.shareAppController().didFinishLaunchingWithOptions();
    },

    applicationDidFinishLaunching : function() {
        var that = this;
        // initialize director
        var director = cc.Director.getInstance();

        // turn on display FPS
        director.setDisplayStats(this.config['showFPS']);

        // set FPS. the default value is 1.0/60 if you don't call this
        director.setAnimationInterval(1.0 / this.config['frameRate']);

        //load resources and run
        cc.Loader.preload(game.config.resources, function() {
            var startSceneInstance = new that.startScene();
            director.replaceScene(startSceneInstance);
            game.setScene('intro', startSceneInstance);
        });
        return true;
    }
});

正如您所见，大部分的指导器命令都在 applicationDiDFinishLaunching 方法内部被调用。 只要加载了所有资源，且 Cocos2d-x 库准备好运行和呈现场景，此函数就会被调用。 您可能还注意到，很多配置数据存储在称为“config”的不同对象中，因为在一个地方保存所有设置比较容易。

移动 sprite — 移动方法的执行

Sprite 是任何 Cocos2d-x 应用程序的最基本和最常见的元素。 正如前面所提到的，它们只是图像。 但由于 Cocos2d-x 库，这些图像移动性强且非常灵活。 您可以轻松修改、移动、旋转、进行动画处理等。

Cocos2d-html5 使您可以在 sprite 上执行以下操作：

1. 调整大小：setScale(scale, scaleY) 
2. 移动：setPosition(pos)
3. 旋转: setRotation(rotation)
4. 更改不透明度：setOpacity()
5. 更改锚点：setAnchorPoint()

大多数这些函数从名称就能了解其含义，最后一个除外。 什么是锚点？这是一个在图像内的点，是所有 sprite 函数的参考点。 因此，如果在图像中间设置一个锚点，旋转函数会将图像绕着中间点旋转。 如果锚点设置在左上角，则设置一个新的图像位置将为图像左上角设置新位置。 默认情况下，锚点设置在中间。

创建 sprite 非常简单。 这是来自 RunSnailRun 应用程序的蜗牛 sprite 类的示例：

classes.sprites.Snail = cc.Sprite.extend({
    width : 30,
    height : 30,
    x : 0,
    y : 0,
    vx : Math.random() - 0.5,
    vy : Math.random() - 0.5,
    ctor : function() {
        this._super();
        this.initWithFile("images/snail.png");
    },

    move : function() {
        this.x = this.getPosition().x;
        this.y = this.getPosition().y;

        this.vx += Math.random() * 0.5 - 0.25;
        this.vy += Math.random() * 0.5 - 0.25;

        this.x += this.vx;
        this.y += this.vy;

        return new cc.Point(this.x, this.y);
    }
});

正如您所见，蜗牛类有其自己的构造函数，称为“ctor”，蜗牛的图像在该函数内初始化。 每次创建蜗牛对象后，snail.png 图像会被分配给该对象。 创建一个蜗牛实例就像创建以下实例一样简单：

var snail = new classes.sprites.Snail();

此外，蜗牛类有其移动方法，用来计算新对象的位置。 在呈现期间调用此方法。 它将返回（蜗牛要移动到的） 蜗牛新位置。

总结

这些是 cocos2d 最基本和最重要的元素。 它应让您对 cocos2d 库的工作原理有一个大致了解。 这篇文章仅讲述了 cocos2d-HTML5 的基础知识，在下一部分“Tizen 应用程序中的 Cocos2d-html5 游戏框架：后续”中，我们将讲述 cocos2d-HTML5 的更多详细信息。