当前位置: 永利棋牌 > 书评随笔 > 正文

CocosCreator发展趋势与感悟,JS和环境搭建及demo演

时间:2019-10-06 13:45来源:书评随笔
先分享一个《爱丽丝镜中世界奇遇记》中的故事: 回首自己3年多的cocos2d游戏开发经历,从cocos2d到coco2d-x入门,之后机缘巧合辗转到了cocos2d-js阵营。在深入使用cocos2d-js以及后来使用c

先分享一个《爱丽丝镜中世界奇遇记》中的故事:

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

由于工作需要,近期将记录Cocos2d-JS的学习实战,Spring源码还是会继续。进入cocos2d-JS的学习,对于不会客户端开发(Android,IOS),会JS的程序员来说Cocos2d-JS<b>游戏引擎</b>的出现真是福音,它是个跨全平台的游戏引擎。其中有两个概念:

爱丽丝遇见了红桃皇后,红桃皇后牵着她的手往前跑,但是不管她们跑得多快,一直跑到精疲力尽,最后还是停留在原地。

爱丽丝说:“要是在我们国家,像这样奔跑,一定会跑到一个新的地方。”

红桃皇后不屑地说:“那你们是慢吞吞的国家,在我们这里,你要想待在原地,就得使出全身力量拼命跑”。

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

  • Cocos2d-HTML5
  • Cocos2d-x JavaScript Bindings(JSB)

转眼之间就要到年底了,回首这一年,Shawn使用CocosCreator引擎开发游戏项目已经快一年了。依仗着之前Cocos2d-js经验老本,目前在Creator平台上过渡的还算顺利。

一、cocos H5普遍存在的误区

其中这两者提供的js的api是一致的,Cocos2d-html5是Cocos2d-JS的一个重要模块,是一个面向Web的游戏引擎,采用Canvas或者WebGL渲染,并完全兼容HTML5规范,如果您只关注于纯Web游戏开发,那么您还可以选择Cocos2d-JS Lite的版本。 Cocos2d-x JavaScript Bindings(JSB)版是C++实现。可以把 Cocos2d-x JavaScript Bindings(JSB)理解成一个和C++的桥。就像JVM是C++写的一样,对外提供的是JAVA的接口。Cocos2d-JS是二者的融合。这是Cocos官网和cocos2d-js github的地址。那么到底什么区别的呢?我理解的就是只在web运行的话Cocos2d-html5足矣,但是你要打包成app(Android和IOS还有WIN)的话然后只用js语言开发那么需要的是Cocos2d-JS,其中包含了 Cocos2d-x JavaScript Bindings(JSB)。看一下官网的图片

自从10月21日的Cocos沙龙期间,认识了不少Cocos的高手(引擎组的大咔们),了解到更多的Creator发展趋试,探讨了游戏开发中的问题,结合当下自己的工作情况,又有了不少的思考和感悟。

1. 左倾思想

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

1. 有部分公司或开发人员是从c++或移动应用开发转过来的,用的是c++的开发思路编写js代码。

现象:手写UI、开发、调试手段极其落后,通常的唯一方法就是打日志。

2. 不会利用javascript的三方模块,甚至不知道去使用它,其原因是不了解javascript的模块化技术。

现象:自身代码没有模块化,也无法实现代码模块和库的积累。

  1. 把cocos h5当成c++、lua在使用,编写的代码不能在浏览器上运行。

现象:因为他们大多是在模拟器上开发,对web开发技术了解的不多,不能同时兼顾原生和浏览器。

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

图片 1

一、Creator 1.7重磅来袭

Creator1.7最大的亮点是JSB2.0,JSB2.0的本质是底层Javascript引擎的更新换代。回想过去,Shawn是在2013年9月开始接触Cocos2d-js,直到现在Creator1.6版本,SpiderMonkey JS引擎为Cocos服役超过了4年,现在终于要谢幕了。

2. 右倾思想

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

1. 这类公司或开发人员,大多是从做web开发转过来的,而且还只是“传统”的web开发,直白一点就是做网页。

现象:在index.html中加载大量js代码和三方库。

2. 由于没有模块化原因,代码中充斥着大量的全局变量,对面向对象和设计模式运用的很少。

现象:资源管理混乱,代码效率低下,无法驾驭复杂的业务场景。cocos H5在资源管理上与cocos c++/lua最大的区别是“异步加载”,这也是疑惑的问题之一。

  1. 编写的代码不能在原生上运行。

现象:因为是在浏览器上开发、调试,以及第1条中提到的模块的加载方式导致,只能工作在浏览器上。

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

官网对于现在框架的图解

1. JSB2.0

JSB2.0迎来的是,两大超级明星级:V8与JavascriptCore

  • Mac与iOS使用JavascriptCore
  • Windows与Android使用V8

JSB2.0架构图

二、我对cocos H5的理解

看一下Cocos2d-JS下载下来的引擎包的目录。我下载的是github上的master分支。
看一下

2. Javascript引擎的变化对Cocos项目的影响

  1. 在native上js层的运算性能有翻倍提升
  2. 在native上有更丰富的调试方法,更精准定位问题的手段。我觉得这一点对程序员很重要,因为找问题比改正问题花费更多的时间,有了先进的调试手段,有利于加速bug的定位。
  3. native与h5环境的js引擎环境更加的一至了,在开发体验上更加接近。
  4. 旧的Cocos项目,如果之前编写了jsb绑定相关的代码,要升级到JSB2.0需要重新编写绑定代码。

加油好少年

在此献上官方的JSB2.0绑定教程

1. 曾经的认识

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

图片 2

图片 3

二、AssetBundle隐形的翅膀

AssetBundle

在Cocos沙龙上,AssetsBundle虽然只有三行文字的介绍,但了解到这一未来特性的第一瞬间就被它吸引了,随后让我想起一两前年国内各大引擎的runtime运行时。

当年国内三大游戏引擎,纷纷将runtime置入腾讯QQ浏览器,号称超级App的到来,原生游戏也能点开即玩。那时感觉完全是进入了H5的春天,我当时的项目做的都不好,有人转u3d或lua,我转了一圈还是决心留在cocos2d-js的阵营!后来不知道为什么runtime没怎么火的起来,反而是H5势头越来越猛。

把话题扯远了,还是回到AssetsBundle上来,我觉得AssetsBundle会不会更加模糊原生游戏与H5游戏,两者都是将代码和资源放到远程服务器,动态加载运行。而且其中还有一句关键“跨项目联动”,不同项目共享AssetsBundle资源,那不是可以将游戏内容转变成一种云服务呢,大家共享?

如果AssetsBundle真的能将资源粒度控制的非常精确,那原生游戏也具备H5的特性,同时还有H5不具备的流畅体验,那问题又来了?

那Cocos原生游戏是否不再用为热更新烦恼了呢?

目前流行的棋牌合集游戏,是否不用为游戏大厅和子游戏而发愁?

安装包体积问题是不是也可以由此迎刃而解?

想到这些,小心脏有点受不了,赶快写两行代码压压惊!

所有的Cocos游戏都成了超级App,假想一下会不会出现一种“游戏SDK”,就是制作一个SDK,里面集成了cocos2dx

  • CreatorJS +AssetsBundle,当App接入了这个SDK后,这个SDK会从远程获取游戏代码和资源…

AssetBundle会不会像一双隐形的翅膀,带着我们飞翔,带来更多的希望?

2. 现在的理解

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

图片 4

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

cocos2d-js-master

三、 2D与3D

在沙龙上Cocos引擎Jare大神在PPT中还分享了一个Cocos的高亮特性,请看下图:

材质系统是高亮点

引入材质系统?Shawn做游戏的时间不长,在Cocos中只听说过纹理,从来没有过材质的概念,纹理与材质是什么关系?虽然没吃过猪肉,但还是见过猪跑,但是没有清晰的概念,为此,我在知乎上搜索了一翻:

作者:周华
链接:https://www.zhihu.com/question/25745472/answer/31531285
来源:知乎

  1. 纹理:即“纹路”,每个物体表面上不同的样子,譬如说木头的木纹状。

  2. 贴图:是图,最简单的形式是ps之类的软件做出来的一张图,这些图在3D中用来贴到物体的表面,用来表现物体的“纹理”。

  3. 材质:主要是用来表现物体对光的交互(反射、折射等)性质的。譬如金属对光的反射和毛毯对光的反射性质完全不一样,那么对3D程序来说,这样的差别就通过材质这个属性来计算出不同的颜色。

通过上面的解释一下子就明白了,感情是要在2d引擎中引入光照功能,实质是将3D游戏的特性引入2D中,再回过头看看标题“重写渲染层”,这是在为Cocos3D铺路的节奏吗?

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

  • 其中framwork就是 Cocos2d-HTML5和js-bindings两者。

四、Javascript与TypeScript

在使用Creator做项目之初,我就一直坚持使用Javascript ES6语法,不仅代码更加简洁,而且这是未来发展的方向。JSB2.0带来了新的JS引擎,对新Javascript新语法的支持更是不言而喻。

1. nodejs

图片 5

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

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

图片 6

1. 新旧Javascript语法混合

但在短期内,新旧js语法将会在项目中混合使用,代码风格的统一上会出现分歧:有些守旧的人看不懂新语法不愿意使用,而有些人喜欢冒险的人则鄙视旧语法。不过目前通过Creator的内置的bable编译器抹平了语法上的问题,输出的代码最终影响不大。

总的说来接受和学习新一代的js语法是大势所趋,就从提高开发效率和代码质量都是值得的,不过习惯不是那么容易被改变的。如果有心想想在项目中使用新的语法,统一代码风格,ESLint是一个极佳的工具,可以尝试用用!

2. npm

图片 7

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

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

在cocos H5游戏代码工程中我常用的npm模块有:

lodash

undersocre(已经被lodash替代了)

protobufjs

async

moment

socket.io

framwork目录

2. TypeScript让人心动

这一年使用js做Creator项目也有不少体验感悟,特别是观察到刚入行的新手,不管是js语言本身,还是IDE对js的支持,都成为新手成长速度较大的障碍。

Creator从1.5.2开始支持TypeScript语言,Shawn之前也学习过一阵,但没有在项目中实战过,自从在Cocos论坛上看到有网友晒出用ts写代码的视频,心里有痒痒的!如果有兴趣可通过下面链接了解,说不定会让你爱上写代程序。
http://forum.cocos.com/t/typescript-creator-github/42200

我认为ts至少可以帮我解决js下面两个问题:

  1. 解决在IDE工具中的代码提示问题:js代码在IDE中的提示较弱,这是新手入门时很大一个槛,一个组件有那些属性、方法需要强行记忆,还容易写错字。TS动、静结合在编码时的智能提示相当精确,同时对老手也能提高代码生产速度。

  2. 解决数据类型问题:js在数据定义、参数传递时没有类型限制,ts则像java这类静态语言上有强制的数据类型匹配,这可以减少在运行时属性不存在,对象字段写错字的问题。

好在ts是js的超集而且在Creator中可以js与ts混用,可以尝试在新的底层代码中用ts,上层代码不管是用js还是ts都可以在IDE中提供确精的智能提示,从而提高开发效率,再由星星之火蔓延到整个项目,最好是能让项目、让团队能火起来...

3. Grunt & Gulp

图片 8

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

图片 9

Gulp.js是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务,利用Node.js流的威力,你可以快速构建项目并减少频繁的 IO 操作。

CocosCreator中集成的自动化构建工具就是 Gulp,你也可以在安装目录中找到相关脚本文件。当你修改过Creator引擎源码时,记得一定要使用使用 gulp 命令重新编译引擎才能生效,方法步骤如下:

命令终端切换到目录: Creator安装目录/engine

执行命令:npm install (提前安装好nodejsnpm)

执行命令:gulp ,等待编译完成即可。

  • docs是文档,都是MarkDown格式的 即.md结尾的。
  • samples是官方提供的例子 对以后的学习非常重要

五、团队与项目

我遇到的大多数团队,美术与策划几乎都不愿意去用游戏引擎,会熟练使用引擎去编辑UI的并不多,对于美术人员来说,编辑动画比编辑UI更容易。

4. ES6

图片 10

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

在CocosCreator项目中,我已经迫不急待地尝试了ES6的新语法去编写代码,它让我体会到写代码也会这么有乐趣,中其常用的新语法有:字符串模块、箭头函数、对象解构、默认参数、类定义

在CocosCreator中你可以使用所有以上的新语法,因为Creator中已经集了Bable编译器。但Cocos2d-js中要使用需要自己配置环境,这也不是难事。

图片 11

1. UI界面的生产问题

期望美术与程序共同制作场景与预制件

我所体验到的项目工作流,还没有达到上图所示中的那样美好境界:

美术拼接UI,程序员完成组件代码的挂接

我理想情况是将用户界面中的UE和布局部分交由策划做第一轮,将界面的美化、赋图、精确位置等交由美术做第二道加工,最后由程序做节点的层节调整、命名等需要与代码交互相关的操作。要做到这些,需要整个团队具有极强的协同能力,如果协作的不好可能还不如交由程序员来完成(可怜的程序猿们)!

还是有些不甘心,团队中如果能培养一名会游戏UI编辑的美术或策划,能将UI与程序建立链接,在程序开始一个功能前将场景和预制件提前准备好,这将极大地为程序员们节省时间,也为是项目节省出时间。

很多时间为了完成任务而工作,大多数人并没有思考过各种资源组合的可能性,有时候慢一点、反思一下说不定会找到更优的解法。

5. Bable

图片 12

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

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

samples/js-tests

2. 资源管理问题

我一直认为,游戏项目中的资源管理是重中之重,整合策划、美术、程序输出的资源,是游戏团队人员每天要做的事情。如何能高效地整合游戏开发中的这三驾马车,是值得深入研究的课题!

  • 策划:文档、配置
  • 美术:图片、动画
  • 程序:代码、工具

在我的游戏开发体验中,我觉得程序应该主动利用代码、工具为项目流程增加自动化处理,将人工重复劳动从中解放出来。策划产品经理应该站在更高的层次发现流程中的痛点,想办法优化流程、减少部门之间的沟通成本。

5. Browserify & Webpack

图片 13

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

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

图片 14

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

  • templates是官方提供的模板,在cocos命令创建项目的时候会直接把templates的东西copy过去 作为你的新建项目。
  • tools目录就是打包成app的时候需要到工具集。其中还有consle 就是cocos的终端控制台,运行一些cocos命令。
  • 最下面setup.py的文件是我们安装cocos时需要用到的文件。

六、结语

不论是Cocos的升级与发展、jsts语言进化、项目与团队我都让我感受到世界发展之快,正如红桃皇后所说的:“在我们这里,你要想待在原地,就得使出全身力量拼命奔跑”


欢迎关注「奎特尔星球」微信公众号,有代码、有教程、有视频、有故事,一起来玩吧!

7. ESLint

图片 15

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

如果是正式项目强烈建议在日常编码时使用上ESlint,以Airbnb JavaScript Style Guide语法规范为根基,再根据自己的实际情况配置调整。

有了 ESlint的保驾护航,我相信我们的javascript 代码会更加的优雅、健壮,我们的项目质量会更高。

下面看一下开发环境的搭建,我的是windows版的。

心愿

图片 16

2016年是自己最为动荡的一年,由于身体不适离职、原公司解散、新工作不顺。重振旗鼓面对新一年的到来时,洞察到一个奇怪的现像,在成都游戏行业中cocos2d-js、cocoscreator市场,很多公司招不到人,与HR聊天的过程中听说到“成都要找个做cocos2d-jscocoscreator的一周都找不到一个冒泡的,c++和lua的到是多”,这是真话因为我在原来的公司也为招聘cocos2d-js的人才发愁。

经过一段时间的思索,我想将自己的cocos H5开发经验和技术制作成简短视频,分享自己的经验,帮助大家入门应该还是满有信心的,不仅可以帮助别人更是帮助自己,为自己所在的行业尽自己的一点绵薄之力。

写这篇文章之前本是制作了一段简短的视频,也是自己第一次尝试,发现有很多的不足。我又将视频中所讲的内容整理用文字再记录一遍,补充了一些内容,帮助不便看视频的同学们。

点击收看视频:

探索Cocos H5正确的开发姿势

  • 安装Python环境官方是指定2.7版本的Python 下载地址
  • 配置Python的环境变量 path中加入即可(exe安装文件不需要设置手动设置环境变量)

图片 17

Python环境变量设置

编辑:书评随笔 本文来源:CocosCreator发展趋势与感悟,JS和环境搭建及demo演

关键词: