cocos游戏引擎学习（前端）

一、环境搭建

 安装各种软件，在此我就不细讲了，网上有很多安装教程。

 需要环境：python（2.7）、jdk、apache-ant

 验证是否安装：打开md控制台输入分别：python --version、java -version和ant -v来验证是否安装了成功

去下载cocos2d-x（我这里是3.17.1）

   cd进入下载的文件cocos2d-x文件夹下执行：python setup.py

NDK_ROOT和ANDROID_SDK_ROOT可以不设置 ，需要在环境变量中配置ANT_ROOT,就是前面下载的ant的安装目录写的bin文件夹路径 

    注：如果python版本过高将不正确，要是2.7的

二、创建cocos项目工程

   1，创建cocos2d-js项目

     cd到任意文件夹下执行cocos new projectname -l js

   2、进入项目工程文件夹下执行：cocos run -p web

三、项目开发基本流程

工程结构如下：

frameworks是web游戏引擎应该不需要解释；

           res文件夹用来存放一些音频或者图片资源；

           src存放游戏的脚本资源，主要在该文件夹下编写游戏逻辑和加载游戏的媒体资源，包含app.js和resource.js；

           index.html是运行游戏的默认web页面；

           main.js是用于开始加载游戏cocos2d-js脚本；

          project.json是运行游戏必要的配置文件。

main.js中加载资源，设置第一个显示场景

src文件夹下有个resource.js文件，该文件中添加游戏中用到的各种资源（图片）

在project.json文件中的jsList数组内添加场景js文件

四、具体开发

   1、场景：有一定的生命周期，从构造到最终显示在屏幕上，再到场景的销毁以及退出经历了以下几个阶段

const MainScene=cc.Scene.extend({
    ctor:function(){
        //构造函数
    },
    onEnter:function () {
        //场景进入
        this._super();//调用父类的当前方法

        let backgroundLayer = new BackgroundLayer();
        this.addChild(backgroundLayer,0);

        let UILayer = new UiLayer();
        this.addChild(UILayer,20);
    },
    onEnterTransitionDidFinish:function(){
        //场景进入过渡效果执行完毕
        this._super()
    },
    onExitTransitionDidStart:function(){
        //场景退出过渡效果执行开始
        this._super()
    },
    onExit(){
        //场景退出
        this._super();//退出的时候放最后执行
    }
})

因此，最好不要在ctor里面添加内存消耗大的操作（加载资源等）

2、层：层也有对应的生命周期，他的一些默认设置跟场景是一样的，也是忽略锚点，锚点为（0.5,0.5），且大小为当前屏幕的大小

层一共有四种：

     a、基本层：cc.Layer

     b、带颜色层：cc.LayerColor(cc.color(0,0,0,138),width,height)

    c、颜色渐变层：

        

     d、管理层：cc.LayerMultiplex（）
    cc. LayerMultiplex对象可以用来管理其他的c. Layer对象。假设你的游戏场景里面有很多层，这些层有的时候需要切换显示，这时候c. LayerMultiplex就可以派上用场了，你只需将要切换的层放在cc. LayerMultiplex对象中，然后就可以通过 switchTo（n）函数来切换到不同的层上， switchTo（n）函数的参数n表示要切换的c. Layer的索引。例如:

 var layer1 new cc. LayerGradientcc. color. RRD. cc. color. GREEN. cC.（-1. 1）
 var layer2 new cc. Layercolor（.Go-or.
 var layer3 new cc. LayerColor（new cc. Color（.255.0.255）
  //传入参数是个数组
 var layerMultiplex new cc 1tiplex（ ［layer1， layer2， layer3］）
 //传入参数是传入数组的索引
 layerMultiplex.switchTo（1）
 scene.addchild（layerMultiplex）

3、精灵

  a、创建精灵

       通过图片资源创建 : new cc.Sprite(【可以直接传图片地址，也可以在resource的res里添加对应名字在此处引入(res.name)】)

       通过纹理创建 : var textrue = cc.textureCache.addImage(res.menu_btn_1)

                                var node =new cc.Sprite(textrue)

      注：通过纹理创建的图片需要添加到缓存

      通精灵表单创建

         精灵表单是一个 plist配置文件和一张图片资源文件，它将一系列图片资源合成一张大图，然后将大小、坐标等配置保存在 plist中。它是为了节省纹理所占用的内存而设计的，所以，通过精灵表单的方式是最合理、最好的方式，除非你对内存的开销不是很在乎。

          精灵与精灵表单生成：

          cc.spriteFrameCache.addSpriteFrames（res.plist,res.png）

          var node=new cc.Sprite('#prince_stand_1.png')