html5实现坐标旋转的方法,Cocos2D-html5 2.1.4 实现鼠标控制物体旋转

注：本文所给demo在Chrome，FireFox和IE 11已经无法运行，而且采用的库版本也很老，所以不推荐继续阅读本文。欢迎阅读我的其他文章！

本文最初于2013年7月11日发布于http://blog.csdn.net/johnhany/article/details/9298109   转载请注明出处

最近想学个html5的游戏引擎，感觉cocos2d-html5不错：开源，使用者较多，意味着遇到问题可以更容易在网络上寻找到答案。从2.1版本开始支持WebGL渲染(以前学过一阵WebGL，感觉是个好东西~)，其-x，-iphone版本都比较成功，而且开发团队致力于跨平台的快速开发(相关链接：谷歌员工和Cocos2D核心开发者讲解Cocos2D-html5)，于是决定从cocos2d-html5下手~

由于我从来没有系统地学习过javascript，也没学过任何游戏引擎或者web开发框架，基本属于引擎、语言一起学，所以学起来比较头大。

环境配置的步骤略过。我用的是目前最新的版本2.1.4，XAMPP+chrome，直接在Notepad++上敲的，偶尔用DW 5.5检查一下语法错误。

用新的版本有个很大的缺点：教程很少。官方的教程页面写着“Out of date, it will be updated soon”，官方推荐的教程用的也是老版本的。我是按照后面这个教程学习的，这个教程其实非常棒，把引擎的工作机制讲得很清楚，可惜不能兼容新版本。我比对着源码里的helloworld的修改样例才能跑起来。就这样一直读到Tutorial 4，遇到了比较棘手的问题……

Tutorial 4的大概意思是这样：

用一张图片(一架飞机)创建一个Sprite(cocos2d-html5中的sprite有点像flash中元件的概念，创建一个sprite后可以在场景中大量复制使用并且可以相互独立；如果从编程的角度说，就是对象与实例的关系)，然后把这个sprite放在canvas(HTML5专门用来绘图的元素)正中央，捕捉鼠标的动作，根据鼠标的坐标算出鼠标位置相对sprite锚点的角度，再把sprite按这个角度旋转，就实现了飞机绕自己中心旋转并机头始终指向鼠标的效果。

贴上教程里的代码：

var JetSprite = cc.Sprite.extend({

_currentRotation:0,

ctor:function(){

this.initWithFile("images/jet.png");

},

update:function(dt){

this.setRotation(this._currentRotation);

},

handleKey:function(e)

{

if(e === cc.KEY.left)

{

this._currentRotation--;

}

else if(e === cc.KEY.right)

this._currentRotation++;

if(this._currentRotation < 0) this._currentRotation = 360;

if(this._currentRotation > 360) this._currentRotation = 0;

},

handleTouch:function(touchLocation)

{

if(touchLocation.x < 300)

this._currentRotation = 0;

else

this._currentRotation = 180;

},

handleTouchMove:function(touchLocation){

// Gross use of hardcoded width,height params.

var angle = Math.atan2(touchLocation.x-300,touchLocation.y-300);

angle = angle * (180/Math.PI);

this._currentRotation = angle;

}

});

var MyThirdApp = cc.LayerColor.extend(

{ _jetSprite:null,

init:function(){

this._super();

this.initWithColor(new cc.Color4B(0,0,0,255));

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

this._jetSprite = new JetSprite();

this.setTouchEnabled(true);

this.setKeyboardEnabled(true);

this.setPosition(new cc.Point(0,0));

this.addChild(this._jetSprite);

this._jetSprite.setPosition(new cc.Point(size.width/2,size.height/2));

this._jetSprite.scheduleUpdate();

this.schedule(this.update);

return true;

},

onEnter:function(){

this._super();

},

update:function(dt){

},

onTouchesEnded:function (pTouch,pEvent){

this._jetSprite.handleTouch(pTouch[0].getLocation());

},

onTouchesMoved:function(pTouch,pEvent){

this._jetSprite.handleTouchMove(pTouch[0].getLocation());

},

onKeyUp:function(e){

},

onKeyDown:function(e){

this._jetSprite.handleKey(e);

}

});

MyThirdAppScene = cc.Scene.extend({

onEnter:function(){

this._super();

var layer = new MyThirdApp();

layer.init();

this.addChild(layer);

}

})

详细一些讲就是把实现分为两个文件：第一个文件是用cc.Sprite.extend()创建了一个jetSprite，在里面定义了计算角度和让它旋转的方法。在第二个文件里定义了一个叫MyThirdApp的层和一个叫MyThirdAppScene的场景，在层里绘制了一个jetSprite，并定义了键盘、触摸的不同动作会触发jetSprite的不同方法；在场景里绘制了上面定义的层，并执行层里的init()方法(也就是绘制一架飞机)。

新版本的cocos2d-html5某些实现的函数名称都不同，造成上面的代码无法运行。

经过一个晚上加一个早晨的折腾，终于把代码改成适合2.1.4的版本：

var jetSpriteMouseLayer = cc.Layer.extend({

_currentRotation:0,

_size:null,

jetSprite:null,

init:function () {

this._super();

this.setMouseEnabled(true);

_size = cc.Director.getInstance().getWinSize();

var layer1 = cc.Layer.create();

jetSprite = cc.Sprite.create("res/jet.png");

layer1.setPosition(cc.p(_size.width/2,_size.height/2));

jetSprite.setPosition(cc.p(0,0));

layer1.addChild(jetSprite);

this.addChild(layer1);

return true;

},

onMouseMoved:function (event) {

var angle = Math.atan2(event.getLocation().x-_size.width/2,event.getLocation().y-_size.height/2);

angle=angle*(180/Math.PI);

_currentRotation=angle;

jetSprite.setRotation(_currentRotation);

}

});

var jetSpriteMouseScene = cc.Scene.extend({

onEnter:function () {

this._super();

var layer = new jetSpriteMouseLayer();

layer.init();

this.addChild(layer);

}

});

我的思路是：简化。把两个文件合并成一个文件，不用键盘和触摸事件改用鼠标控制，仍采用官方demo在层中创建sprite时直接调用图片的方法，去掉init()中的schedule()，而是在鼠标事件检测onMouseMoved()中对sprite进行旋转。

我完全是以能运行为目的，教程中把sprite定义放到单独文件的做法显然更好，但我得再学习学习才能掌握那种更好的方法~

经测试chrome, firefox及IE 10均可用。

(如果用chrome打开上面的链接一片漆黑，可以用firefox或IE 10/11打开)

把这篇文章分享给你的朋友：