首页 > 代码库 > cocos2d-html5 开发实战
cocos2d-html5 开发实战
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. 在场景里添加背景
//添加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); }});