cocos2d-html5学习笔记（二）——cocos2d中的layer

最新推荐文章于 2022-04-17 20:00:37 发布

原创最新推荐文章于 2022-04-17 20:00:37 发布 · 1.2w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#layer #function #游戏

cocos2d-html5 专栏收录该内容

8 篇文章

订阅专栏

本文是cocos2d-html5学习笔记的第二部分，主要探讨了游戏开发中Layer的概念和操作，包括新建Layer及添加多个Layer的实践，将Layer与Photoshop的图层类比，帮助理解其在游戏场景组织中的作用。

一个游戏一般由多个场景构成，每一个场景可以有多个层（Layer），这个概念与PS类似。

1.新建一个层（Layer）

var MyHelloWorld = cc.Layer.extend({
    init: function () {
        this._super();

        var s = cc.Director.getInstance().getWinSize();

        //新建一个黄色的纯色层
        var layer1 = cc.LayerColor.create(cc.c4(255, 255, 0, 255), s.width, s.height);
        layer1.setPosition(cc.p(s.width / 2, s.height / 2));
        this.addChild(layer1);

        return true;
    }

});

注意，坐标的原点是bottom、left，而不是我们习惯的top、left

2. 再添加一个层

var MyHelloWorld = cc.Layer.extend({
    init: function () {
        this._super();

        var s = cc.Director.getInstance().getWinSize();

        //添加一个黄色的纯色层
        var layer1 = cc.LayerColor.create(cc.c4(255, 255, 0, 255), s.width, s.height);
        layer1.setPosition(cc.p(s.width / 2, s.height / 2));
        this.addChild(layer1);

        //添加一个红色，透明度为50%的纯色层
        var layer2 = cc.LayerColor.create(cc.c4(255, 0, 255, 128), 100, 100);
        layer2.setPosition(cc.p(100, 100));
        this.addChild(layer2, 2);

        return true;
    }

});

添加第二个层时，向this.addChild传递了两个参数，第二个表示层z轴的大小，表明新层在黄色层之上。

效果如图：