探索cocos H5正确的开发姿势(一).md

前端之家收集整理的这篇文章主要介绍了探索cocos H5正确的开发姿势(一).md前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

回首自己3年多的cocos2d游戏开发经历,从cocos2d到coco2d-x入门,之后机缘巧合辗转到了cocos2d-js阵营。在深入使用cocos2d-js以及后来使用cocoscreator做游戏项目的同时,我开始逐步走进javascript神奇的世界。现在回过头来忽然察觉到,不是自己选择了cocos H5(我将cocos2d-js/cocoscreator的统称),而是选择了javascript;不只是简单地选择了这门脚本语言,而选择的是javascript平台和生态圈,这才是自己为什么一直对cocos H5不离不弃的原因。

在过去的两年时间先后培养了5名cocos2d-js客户端程序员,现在联系他们大多还在做cocos H5方向的工作。但发现不管是自己、曾经的同事、朋友们等的公司,但凡用cocos H5技术都发现都普遍存在一些误区,我在此根据自己的项目经验总结一下。

一、cocos H5普遍存在的误区

1. 左倾思想

简单地把cocos H5当成cocos c++/lua的代替品

  1. 有部分公司或开发人员是从c++或移动应用开发转过来的,用的是c++的开发思路编写js代码
    现象:手写UI、开发、调试手段极其落后,通常的唯一方法就是打日志。

  2. 不会利用javascript的三方模块,甚至不知道去使用它,其原因是不了解javascript的模块化技术。
    现象:自身代码没有模块化,也无法实现代码模块和库的积累。

  3. 把cocos h5当成c++、lua在使用,编写的代码不能在浏览器上运行。
    现象:因为他们大多是在模拟器上开发,对web开发技术了解的不多,不能同时兼顾原生和浏览器。

口头禅:先把手机端做好再做浏览器。

2. 右倾思想

单纯地把cocos H5当成“传统”的web开发

  1. 这类公司或开发人员,大多是从做web开发转过来的,而且还只是“传统”的web开发,直白一点就是做网页。
    现象:在index.html中加载大量js代码和三方库。

  2. 由于没有模块化原因,代码中充斥着大量的全局变量,对面向对象和设计模式运用的很少。
    现象:资源管理混乱,代码效率低下,无法驾驭复杂的业务场景。cocos H5在资源管理上与cocos c++/lua最大的区别是“异步加载”,这也是疑惑的问题之一。

  3. 编写的代码不能在原生上运行。
    现象:因为是在浏览器上开发、调试,以及第1条中提到的模块的加载方式导致,只能工作在浏览器上。

口头禅:先把浏览器好再做手机。

二、我对cocos H5的理解

1. 曾经的认识

我最早跟大家一样,认为cocos2d-js只是在cocos2d-x家族中选择一门脚本语言,我为什么会选择JS而不是Lua呢?是因为早些年使用Lua做过端游服务器和客户端UI,当时对Lua的理解和运用都很肤浅,对项目驾驭能力太差,从而对Lua产生了不好的使用体验。

2. 现在的理解

在经过一段时间使用cocos2d-js,对javascript语言的深入,逐步了解到围绕Nodejs、Web前端的javascript前后端生态圈。慢慢地我意识到,我以为只是选择一门脚本语言,其实选择的是javascrip平台和生态圈!而cocos H5只是Javascript中的一员。

深入使用Cocos H5技术,同时充分利用Javascript平台世界的生态工具,才能正发挥cocos的威力。

三、从我的CocosCreator项目看Javascript世界

1. nodejs

nodejs的出现是javascript模块化诞生的标志,从此可以使用javascript构建服务端应用。

如果不了解nodejs也无法知道如何将javascript代码模块化,有了模块化你可像编写c++、java那样引入模块。团队开发中才可以将功能有效拆解,做出自己可复用的模块,建立自己的代码库。我认识为模块化是编写Cocos H5开发的第一步,我在项目编码中一律采用nodejs代码风格,利用Browserify或Webpack可以将代码完美地运行在浏览器和原生上。

2. npm

npm全称是Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。

npm上面承载了数以万计的Node模块,纯javascript编写的模块可以在前后端通用,理所当然cocos H5中也能使用。其中还有各种奇思妙想的Node工具让人拍案叫绝,同时还能提高你的工作效率。如果你在使用cocos H5技术,却对npm了无所知的话,现在你读这篇文章你应该觉得很幸运,因为它是一个宝库。

在cocos H5游戏代码工程中我常用的npm模块有:
lodash
undersocre(已经被loadsh替代了)
protobufjs
async
moment
socket.io

3. Grunt & Gulp

Grunt是Javascript世界的构建工具,对于需要反复重复的任务实现自动化,自动化工具可以减轻你的劳动,简化你的工作。

我在项目中利用Grunt解决了客户端程序反复打开关闭目录、Ctrl+C 、Ctrl+V鼠标点来点去讨人厌且又无技术含量的工作。这些无聊的工作,每天消耗着我们的大脑能量主要是:从SVN获取美术、策划输出的资源、把它们复制到客户端工程不同的目录、有的还需要压缩、将策划Excel还需要转换成JSON或 MysqL表。

我在cocos H5项目开发中用到的Grunt插件主要是:
grunt-shell
grunt-sync

编写命令工具的npm模块有:
shelljs
node-xlsx
yargs
plist
rd
MysqL

Gulp.js是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务,利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。
CocosCreator中集成的自动化构建工具就是 Gulp,你也可以在安装目录中找到相关脚本文件。当你修改过Creator引擎源码时,记得一定要使用使用 gulp 命令重新编译引擎才能生效,方法步骤如下:

  1. 命令终端切换到目录: Creator安装目录/engine
  2. 执行命令:npm install (提前安装好nodejs\npm)
  3. 执行命令:gulp ,等待编译完成即可。

4. ES6

ECMAScript6(以下简称ES6)是JavaScript语言的下一代标准。

在CocosCreator项目中,我已经迫不急待地尝试了ES6的新语法去编写代码,它让我体会到写代码也会这么有乐趣,中其常用的新语法有:字符串模块、箭头函数、对象解构、默认参数、类定义
在CocosCreator中你可以使用所有以上的新语法,因为Creator中已经集了Bable编译器。但Cocos2d-js中要使用需要自己配置环境,这也不是难事。

5. Bable

Bable一个 JavaScript编译器,你可以使用下一代javascript语法写代码,不用等待浏览器提供支持

在 Creator 中已经集成了Babel,可以减少代码量、提高可读性。建议在新项目中使用 ES6新的语法规范,同时也能保持与 Javascript 语言的与时俱进。

5. Browserify & Webpack

Browserify可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码,通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。

Browserify才是正真的将前端javascript模块化的主角,我最早在 cocos2d-js 项目就使用它来组织代码。它帮助我解决了在 cocos2d-js 中代码加载顺序问题,同时可以编写node一样风格的代码,使用npm来管理三方库,天地人从此连接再了一起,Creator 中已经集成了 Browserify,在安装目录中可以看到。

与 Browserify 同类工具还有 Webpack,我在 cocos2d-js 项目中还尝试过Webpack,比Browserifyg还要强大。有的前端工程直接使用Webpack代替了Browserify和Grunt。最早我满以为Creator应该是由 Webpack+Grunt+Babel,实际是由 Browserify+Glup+Babel。Webpack是javascript世界不可忽视的构建工具。

7. ESLint

ESLint是一个可配置的JavaScript代码校验工具,不仅可以校验最新的语法,还可以配置规则约束你的代码风格,严格到一个空格或标点。

如果是正式项目强烈建议在日常编码时使用上ESlint,以Airbnb JavaScript Style Guide语法规范为根基,再根据自己的实际情况配置调整。
有了 ESlint的保驾护航,我相信我们的javascript 代码会更加的优雅、健壮,我们的项目质量会更高。

心愿

2016年是自己最为动荡的一年,由于身体不适离职、原公司解散、新工作不顺。重振旗鼓面对新一年的到来时,洞察到一个奇怪的现像,在成都游戏行业中cocos2d-js、cocoscreator市场,很多公司招不到人,与HR聊天的过程中听说到“成都要找个做cocos2d-js\cocoscreator的一周都找不到一个冒泡的,c++和lua的到是多”,这是真话因为我在原来的公司也为招聘cocos2d-js的人才发愁。
经过一段时间的思索,我想将自己的cocos H5开发经验和技术制作成简短视频,分享自己的经验,帮助大家入门应该还是满有信心的,不仅可以帮助别人更是帮助自己,为自己所在的行业尽自己的一点绵薄之力。

收看本篇博文视频请点这里

原文链接:https://www.f2er.com/cocos2dx/338914.html

猜你在找的Cocos2d-x相关文章