码迷,mamicode.com
首页 > Web开发 > 详细

Cocos2d-HTML5入门第一天

时间:2014-10-29 07:07:49      阅读:291      评论:0      收藏:0      [点我收藏+]

标签:cocos2d-html5   html5引擎   html5   游戏开发   javascript   

虽然是以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,那么就基于这个模板来学习吧!

bubuko.com,布布扣


第二步:提供服务器支持

用谷歌浏览器打开index.html,发现一片漆黑,F12后控制台出现三个错误

bubuko.com,布布扣

很明显两个跨域问题,这种问题要解决,给个服务器支持,作为前端工程师,node和express应该是第一选择,安装这两件东东不在讨论范围,所以直接打开命令行,进入E:\gitwork\game;输入命令

express  hellococohtml5 

带项目建立成功进入hellococohtml5 目录

bubuko.com,布布扣

打开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‘);

bubuko.com,布布扣

解释一下:这里使用ejs模板,然后让ejs模板文件,使用扩展名为html的文件。

在DOS窗口的package.json所在目录下 键入 npm install 下载express和ejs包文件(键入要把注    //"jade": "*"释的整行去掉 ,npm对json有严格的语法要求)

服务器搭建完成


第三步: 把Cocos2d-HTML5部署到服务器

把第一步的frameworks的文件夹复制到服务器根目录下的public文件夹

bubuko.com,布布扣

然后把文件夹里面template目录下的index.html复制到服务器下的view目录

bubuko.com,布布扣

然后修改inde.html目录引进的js路径

现在的index和服务器目录结构看起来是这样的


bubuko.com,布布扣


修改后,刷新inde.html页面,然后又有404

bubuko.com,布布扣


根据提示点击浏览器报的错,定位到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 看起来是这样的

bubuko.com,布布扣

突然发现改引用路径好蛋疼,想不折腾就用webstorm或者部署个tomcat了,要不是因为上次这IED突然关闭,把我的1000多行代码物理乱码了,哥估计现在还没有放弃webstorm,虽然比较重量,但是自带服务器是个不错的选择。

第四步: Hello World

打开浏览器 刷新index.html页面

bubuko.com,布布扣



Hello World 总算出来了 碎觉!

Cocos2d-HTML5入门第一天

标签:cocos2d-html5   html5引擎   html5   游戏开发   javascript   

原文地址:http://blog.csdn.net/xizai2012/article/details/40566029

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!