虽然是以H5的身份入职新东家,但是一直都没有好好研究过canvas。头两天做了个下载app的页面给后台,统计Android,IOS和别的os机型点击和下载情况,然后第三天开始就为一个擦奖页面做动态效果,途中各种需求不断改,测试也反馈各种兼容性。到现在入职也不过十来天,已经大概涉猎了几本canvas相关的书籍,这期间对游戏的兴趣又重燃,曾几何时,选修过游戏开发,由于门槛太高,放弃了,而后成为了页面仔。
由于canvas和游戏的相关书籍比较多,这段时间空余时间都在研究H5游戏,lufylegend,easeljs,这两个引擎研究相对多点,都是类A3的,之前的记录都没有写下来,怕以后想翻翻记录找不到了,有点后悔。今天接触了Cocos2d-html5,一来觉得不能重蹈覆辙,二来这引擎和c++还是有嫡亲关系的,姑且为弥补曾经的遗憾尽量去学习,故写下此篇文章。
第一步:下载引擎
http://www.cocos2d-x.org/download进入这个网站 coco2d-html5已经和coco2d-js整合了,直接点击下载Coco2d-js v3.1版本,当然也可以选择部分文件,一直以来觉得作为新手标配就是整个包。
解压Coco2d-js v3.1引擎进入frameworks文件夹,打开cocos2d-html5文件,里面已经没有HelloHTML5World目录了,只有一个template,那么就基于这个模板来学习吧!
第二步:提供服务器支持
用谷歌浏览器打开index.html,发现一片漆黑,F12后控制台出现三个错误
很明显两个跨域问题,这种问题要解决,给个服务器支持,作为前端工程师,node和express应该是第一选择,安装这两件东东不在讨论范围,所以直接打开命令行,进入E:\gitwork\game;输入命令
express hellococohtml5
带项目建立成功进入hellococohtml5 目录
打开package.json
把依赖的"jade": "*"换成"ejs": "*"
然后进入app.js
把var ejs = require('ejs');加进去
app.set('view engine','jade'); 换成app.engine('.html',ejs.__express);app.set('view engine','html');
解释一下:这里使用ejs模板,然后让ejs模板文件,使用扩展名为html的文件。
在DOS窗口的package.json所在目录下 键入 npm install 下载express和ejs包文件(键入要把注 //"jade": "*"释的整行去掉 ,npm对json有严格的语法要求)
服务器搭建完成
第三步: 把Cocos2d-HTML5部署到服务器
把第一步的frameworks的文件夹复制到服务器根目录下的public文件夹
然后把文件夹里面template目录下的index.html复制到服务器下的view目录
然后修改inde.html目录引进的js路径
现在的index和服务器目录结构看起来是这样的
根据提示点击浏览器报的错,定位到CCBoot.js引进project.js的路径,在文件里面把CCBoot.js引进project.js目录改成frameworks/cocos2d-html5/template/project.json 然后
进入project.js把engineDir和jsList路径也改了,最后把template目录下的main.js下引进的资源文件路径也加上frameworks/cocos2d-html5/template/
So far so good 看起来是这样的
突然发现改引用路径好蛋疼,想不折腾就用webstorm或者部署个tomcat了,要不是因为上次这IED突然关闭,把我的1000多行代码物理乱码了,哥估计现在还没有放弃webstorm,虽然比较重量,但是自带服务器是个不错的选择。
第四步: Hello World
打开浏览器 刷新index.html页面
Hello World 总算出来了 碎觉!