cocos2d-html5 开发实战

浏览数：57 / 时间：2015年06月09日

1. cocos2d-html5 基础知识

1，导演（CCDirector）在cocos2d-html5引擎中，导演是游戏的领袖，导演运筹帷幄所有的场景、布景、精灵等。
2，摄像机（CCCamera）细到每个节点都需要摄像机，例如节点发生放大、缩小、旋转等变化的时候，都需要继承摄像机，让其重新渲染。
3，场景（CCScene）我们可以理解成拍电影的时候的一段剪辑，在游戏里面或许可以成为关卡，它是由场景、人物等组成。
4，布景（CCLayer）在概念上理解，就是复杂的背景，不是简单的背景哦，是一种多种组合的结果，有时候精灵也可能变成布景。
5，人物也就是精灵（CCSprite），比较好理解的概念主角、敌人、NPC等都是精灵。
6，动作（CCAtion）可以理解成行为等，例如人物将要进行什么行为（动作）。

2. 场景，层，精灵

//基本用法
var scene  = cc.Scene.create();
var layer= cc.Layer.create();
var sprite= cc.Sprite.create("picture.png");
scene.addChild(layer,zOrder);//zOrder为数字，值越高显示越在上面
layer.addChild(sprite,zOrder);

3. 新建项目

a. 将下载下来的cocos2d解压后，把template目录的文件复制一份并改名为Mushroom

b. 删除复制过来的资源文件，在res目录下，并将准备好的图片资源copy进来

c. 修改src目录下的resource.js如下来添加我们的图片资源

//添加图片资源
var s_forest1 = "res/forest1.jpg";//背景
var s_mushroom = "res/mushroom.png"; //蘑菇正常状态
var s_mushroom2 = "res/mushroom2.png";//蘑菇被撞状态

var g_ressources = [
    {src:s_forest1},
    {src:s_mushroom},
    {src:s_mushroom2}
];

d.修改根目录下index.html中的canvas标签，尺寸为480*320

4. 添加场景，描绘背景

a. 添加空白的js文件并命名为GameScene.js在src目录下(用户自定义js必须加人cocos2d.js的appFiles数组中，系统会按照顺序加载数组中js文件)

b. GameScene.js里面定义场景，继承自cc.Scene

//场景
var GameScene = cc.Scene.extend({
     onEnter:function () {
        this._super();//调用父类的同名方法，这里是调用cc.Scene的onEnter
        //一般在这里自己写进入场景后的操作
     }
});

c. 在main.js中修改启动场景为GameScene.js

//修改原本的var myApp = new cocos2dApp(myApp)
var myApp = new cocos2dApp(GameScene);

d. 在场景里添加背景

//添加Layer
this.gameLayer = cc.Layer.create();
this.addChild(this.gameLayer);
//添加背景
var bg = cc.Sprite.create(s_forest1);
this.gameLayer.addChild(bg,0);
//设置背景的锚点和位置
bg.setAnchorPoint(cc.p(0,0));
bg.setPosition(cc.p(0,0));

关于图片锚点定位参考http://www.cnblogs.com/pengyingh/articles/2433081.html

引擎的原点在左下角，Sprite默认的锚点在图片的中心点cc.p(0.5,0.5)，
锚点的范围一般是：0~1,根据需要来设置
cc.p(0.5,0.5)图片的中心点
cc.p(0,0)图片的左下角
cc.p(0,1)图片的左上角
cc.p(1,0)图片的右下角
cc.p(1,1)图片的右上角

最终GameScene.js代码如下

var GameScene = cc.Scene.extend({
     gameLayer:null,
     onEnter:function () {
        this._super();//调用父类的同名方法，这里是调用cc.Scene的onEnter
        //一般在这里自己写进入场景后的操作
       //添加Layer
      this.gameLayer = cc.Layer.create();
      this.addChild(this.gameLayer);
      //添加背景
      var bg = cc.Sprite.create(s_forest1);
      this.gameLayer.addChild(bg,0);

      bg.setAnchorPoint(cc.p(0,0));
      bg.setPosition(cc.p(0,0)); 
     }
});

5. 触摸事件：onTouchBegan(触摸前)、onTouchMoved(触摸并移动)

//用法
var layer = cc.Layer.extend({
ctor:function(){
        this._super(); 
        cc.Director.getInstance().getTouchDispatcher().addTargetedDelegate(this, 0, true);//把当前对象加入到触摸监听行列
    },
    onTouchBegan:function (touch, event) {
       //监听触摸瞬间
        return true;
    },
    onTouchMoved:function (touch, event) {
        //监听触摸移动，只有onTouchBegan返回true时才执行到这一步
    }
});

6. 描绘蘑菇

由于蘑菇有自己的行为，我们可以定义一个自己的MushroomSprite继承自cc.Sprite

在src目录中建立MushroomSprite.js, 并把路径加人cocos2d.js文件的appFiles数组中

//MushroomSprite.js
var MushroomSprite = cc.Sprite.extend({
    /**
    *构造函数
    **/

    ctor:function(){
        this._super();
    }
});

给Sprite赋予一张图片

var MushroomSprite = cc.Sprite.extend({
    ctor:function(){
        this._super();
        this.initWithFile(s_mushroom);//赋予图片元素
    }
});

在GameScene.js中把MushroomSprite添加到游戏场景中

7.让蘑菇随鼠标动起来

思路;判断触摸点是否在蘑菇上，如果在，则蘑菇X轴跟随鼠标改变

a. 注册触摸事件，才能监听onTouchBegan, onTouchMoved, 只有onTouchBegan返回true时，onTouchMoved才能监听。并且将蘑菇的x轴设置为移动的位置。

ctor:function(){
        this._super();
        this.initWithFile(s_mushroom);//赋予图片元素
        cc.registerTargetedDelegate(0, true, this);
    },
    //刚触摸瞬间
    onTouchBegan: function(touch,event){
        cc.log("onTouchBegan");
        return true;
    },
    //触摸移动
    onTouchMoved: function(touch,event){
        cc.log("onTouchMoved");
        var touchPoint = touch.getLocation();
        this.setPositionX(touchPoint.x);
    }

b. 这个时候点击整个场景移动，蘑菇都会移动，需要限制触摸点在蘑菇上才移动，整体的文件为

var MushroomSprite = cc.Sprite.extend({
    /**
    *构造函数
    **/
    ctor:function(){
        this._super();
        this.initWithFile(s_mushroom);//赋予图片元素
        cc.registerTargetedDelegate(0, true, this);
    },
    containsTouchLocation: function(touch){
        //获取触摸点位置
        var getPoint = touch.getLocation();
        //获取图片区域尺寸
        var contentSize = this.getContentSize();
        //定义拖拽区域
        var myRect = cc.rect(0,0,contentSize.width,contentSize.height);
        myRect.x += this.getPosition().x;
        myRect.y += this.getPosition().y;
        //myRect.setPositionX(this.getScaleX());
        //判断点击是否在区域上
        return cc.rectContainsPoint(myRect,getPoint);      
    },
    //刚触摸瞬间
    onTouchBegan: function(touch,event){
        cc.log("onTouchBegan");
        cc.log(this.containsTouchLocation(touch));
        if (!this.containsTouchLocation(touch)) return false;
        return true;
    },
    //触摸移动
    onTouchMoved: function(touch,event){
        cc.log("onTouchMoved");
        var touchPoint = touch.getLocation();
        this.setPositionX(touchPoint.x);
    }
});