首页 > 代码库 > cocos2d-html5 开发实战

cocos2d-html5 开发实战

1. cocos2d-html5 基础知识

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

      1-2

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. 在场景里添加背景

//添加Layerthis.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.jsvar 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);    }});