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按这个角度旋转,就实现了飞机绕自己中心旋转并机头始终指向鼠标的效果。

        贴上教程里的代码:

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

        新版本的cocos2d-html5某些实现的函数名称都不同,造成上面的代码无法运行。
        经过一个晚上加一个早晨的折腾,终于把代码改成适合2.1.4的版本:

        我的思路是:简化。把两个文件合并成一个文件,不用键盘和触摸事件改用鼠标控制,仍采用官方demo在层中创建sprite时直接调用图片的方法,去掉init()中的schedule(),而是在鼠标事件检测onMouseMoved()中对sprite进行旋转。
        我完全是以能运行为目的,教程中把sprite定义放到单独文件的做法显然更好,但我得再学习学习才能掌握那种更好的方法~

        运行效果-> jet-sprite-demo

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

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

        再给出工程文件下载链接以供参考:http://download.csdn.net/detail/johnhany/5736405

您将是第一位评论人!

  Subscribe  
订阅评论