准备出系列文章,绝不是官网那种很正式的语言,还是从一个开发者角度来描述采用cocosjs所遇到的一些问题,然后怎么去解决这些问题。如果你不想对着官网那一段段的描述发呆,我觉得可以看看我所说的。
这第一篇,就说说cocosjs的安装使用,以及创建第一个空项目。
1.cocos2d-js 版本
直接上图
最新版本的我没下载下来,上图是cocosjs的绝大部分的版本,3.7和3.9是因为 cocos2dx和cocosjs合并了,所以名称都改成cocos2d-x了。3.1或者3.6版本都可以,感觉这是2个比较稳定的版本(合并后的新版本我没用过,希望不会误导大家)。至于版本更新内容,大家可以去官网瞄一下。
上面这张图,是触控针对webapp和小游戏开发所出的lite版本,去除部分模块,减小核心包大小。个人感觉这个用处不大,webapp采用html+css3+jquery都可以搞定,然后h5小游戏,也可以自己混淆js代码,感觉lite版本比较鸡肋。
2.创建cocosjs项目
方法1: 下载cocosjs文件后(附带一句,做开发的话,文件夹名不要用中文,不要空格,不要显得很low,而且可能会出问题)。dos窗口下进入cocojs文件路径,然后 敲入cocos new -l js WebGame WebGame为你要的项目名称。不管是那个版本的都可以这么敲。 注意这种方法,要在电脑安装python(装个吧,提升下bigger,也装个node吧,bigger+1).执行完成后,回到文件路径,你将发现你的新项目成功创建了。
方法2.是不是觉得方法1敲指令不习惯,好吧,请下载个cocos code IDE(不知道现在能不能下载到)安装后,直接在ide里创建吧,方便快捷,简单粗暴。
3.编辑器
工欲善其事必先利其器。
个人建议采用webstorm,因为有智能提示(虽然不是很准确,但总比没有好,cocosjs的API文档我就不吐槽了),等对cocosjs的api熟悉了,可以转用sublime。
至于cocos Code IDE,也可以,但我只用来打包apk,呵呵哒。
用webstorm,用webstorm,用webstorm吧,重要的事情说三遍。
4.项目结构
1.cocos2d-html5 这个是cocosjs的核心内容,runtime-src是打包安卓 和ios所使用的,纯h5开发可以忽视。
2.res是放置新项目所用资源的 ,包括图片,json,以及plist,对应 资源预加载文件resource.js 使用。新版本的res里面会存在一个loading界面,这个是触控后来添加上的,因为在进入h5游戏前,首先要加载核心代码,这时候游戏是黑屏,体验很不好,等核心代码加载完之后,才出现cocos logo加载界面,这时候加载的则是project.json和src里面的resource.js里面的内容。第一个黑屏影响玩家体验,所以触控新加了个loading,不显示这个黑屏。
3.src则是放置新项目代码,所有的代码都可以放在这里,project.json是用来加载所有js文件的列表。
4.index.html则是游戏的入口。
5.运行项目
进入项目文件夹,直接打开index.html(注意,请用支持canvas的浏览器打开,不要用ie,哪怕后续版本也支持canvas也不要用,chrome才是程序员必备浏览器!),是不是可能打不开? 如果不是firefox浏览器,确实是打不开的,会提示跨域。所以让我们安装一个firefox浏览器吧,然后 用firefox打开index.html。是不是跑起来了!
总结:下载一个稳定的版本,然后创建一个自己的项目,webstorm打开。 本地运行请用firefox,如果有服务器,就上传项目,chrome打开,f12打开开发模式。